|
@@ -1,17 +1,19 @@
|
|
<template>
|
|
<template>
|
|
<div class="accountReport">
|
|
<div class="accountReport">
|
|
|
|
+ <!-- 操作区间 -->
|
|
<div class="optionLine">
|
|
<div class="optionLine">
|
|
|
|
|
|
<span>项目选择:</span>
|
|
<span>项目选择:</span>
|
|
<a-tree-select
|
|
<a-tree-select
|
|
v-model="treeValue"
|
|
v-model="treeValue"
|
|
- style="width: 50%"
|
|
|
|
|
|
+ style="width: 45%;height:30px"
|
|
:tree-data="treeData"
|
|
:tree-data="treeData"
|
|
tree-checkable
|
|
tree-checkable
|
|
:show-checked-strategy="SHOW_PARENT"
|
|
:show-checked-strategy="SHOW_PARENT"
|
|
- searchPlaceholder="请选择项目和账户"
|
|
|
|
|
|
+ placeholder="请选择项目和账户"
|
|
:allowClear="true"
|
|
:allowClear="true"
|
|
@change="treeChange"
|
|
@change="treeChange"
|
|
|
|
+ :maxTagCount='2'
|
|
/>
|
|
/>
|
|
|
|
|
|
|
|
|
|
@@ -35,34 +37,199 @@
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
+ <!-- 五个块 -->
|
|
<div class="show">
|
|
<div class="show">
|
|
- <a-row :gutter="16">
|
|
|
|
- <a-col :sm="24" :md="12" :xl="6" :xxl="6" class="topBox">
|
|
|
|
- <div class="showBox">
|
|
|
|
- <div class="title">
|
|
|
|
- <span>总消耗</span>
|
|
|
|
- <a-tooltip>
|
|
|
|
- <template slot="title">点之前所有数据对比</template>
|
|
|
|
|
|
+ <div class="showBox">
|
|
|
|
+ <div class="title">
|
|
|
|
+ <div class="infotitle">总消耗</div>
|
|
|
|
+ <a-tooltip v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')">
|
|
|
|
+ <template slot="title">{{dateValue[0].format('HH:00')}}点之前所有数据对比</template>
|
|
<span class="icon">
|
|
<span class="icon">
|
|
<a-icon type="exclamation-circle" />
|
|
<a-icon type="exclamation-circle" />
|
|
</span>
|
|
</span>
|
|
</a-tooltip>
|
|
</a-tooltip>
|
|
- </div>
|
|
|
|
- <span>¥ <span></span></span>
|
|
|
|
</div>
|
|
</div>
|
|
- </a-col>
|
|
|
|
- </a-row>
|
|
|
|
-
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div class="infoNum">¥
|
|
|
|
+ <span class="red">{{}}</span>
|
|
|
|
+ <span class="green">{{}}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="showBox">
|
|
|
|
+ <div class="title">
|
|
|
|
+ <div class="infotitle">折后消耗</div>
|
|
|
|
+ <a-tooltip v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')">
|
|
|
|
+ <template slot="title">{{dateValue[0].format('HH:00')}}点之前所有数据对比</template>
|
|
|
|
+ <span class="icon">
|
|
|
|
+ <a-icon type="exclamation-circle" />
|
|
|
|
+ </span>
|
|
|
|
+ </a-tooltip>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="infoNum">¥
|
|
|
|
+ <span class="red">{{}}</span>
|
|
|
|
+ <span class="green">{{}}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="showBox">
|
|
|
|
+ <div class="title">
|
|
|
|
+ <div class="infotitle">点击数</div>
|
|
|
|
+ <a-tooltip v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')">
|
|
|
|
+ <template slot="title">{{dateValue[0].format('HH:00')}}点之前所有数据对比</template>
|
|
|
|
+ <span class="icon">
|
|
|
|
+ <a-icon type="exclamation-circle" />
|
|
|
|
+ </span>
|
|
|
|
+ </a-tooltip>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="infoNum">¥
|
|
|
|
+ <span class="red">{{}}</span>
|
|
|
|
+ <span class="green">{{}}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="showBox">
|
|
|
|
+ <div class="title">
|
|
|
|
+ <div class="infotitle">展示数</div>
|
|
|
|
+ <a-tooltip v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')">
|
|
|
|
+ <template slot="title">{{dateValue[0].format('HH:00')}}点之前所有数据对比</template>
|
|
|
|
+ <span class="icon">
|
|
|
|
+ <a-icon type="exclamation-circle" />
|
|
|
|
+ </span>
|
|
|
|
+ </a-tooltip>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="infoNum">¥
|
|
|
|
+ <span class="red">{{}}</span>
|
|
|
|
+ <span class="green">{{}}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="showBox">
|
|
|
|
+ <div class="title">
|
|
|
|
+ <div class="infotitle">转化数</div>
|
|
|
|
+ <a-tooltip v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')">
|
|
|
|
+ <template slot="title">{{dateValue[0].format('HH:00')}}点之前所有数据对比</template>
|
|
|
|
+ <span class="icon">
|
|
|
|
+ <a-icon type="exclamation-circle" />
|
|
|
|
+ </span>
|
|
|
|
+ </a-tooltip>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="infoNum">¥
|
|
|
|
+ <span class="red">{{}}</span>
|
|
|
|
+ <span class="green">{{}}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 图表区域 -->
|
|
|
|
+ <div class="chartBox">
|
|
|
|
+ <a-tabs default-active-key="cost" @change="callback" >
|
|
|
|
+ <a-tab-pane key="cost" tab="总消耗">
|
|
|
|
+ </a-tab-pane>
|
|
|
|
+ <a-tab-pane key="discountCost" tab="折后消耗">
|
|
|
|
+ </a-tab-pane>
|
|
|
|
+ <a-tab-pane key="click" tab="点击数" >
|
|
|
|
+ </a-tab-pane>
|
|
|
|
+ <a-tab-pane key="showNum" tab="展示数">
|
|
|
|
+ </a-tab-pane>
|
|
|
|
+ <a-tab-pane key="zhuanhua" tab="转化数">
|
|
|
|
+ </a-tab-pane>
|
|
|
|
+ </a-tabs>
|
|
|
|
+ <div id="sectionChart" style='width:100%;height:300px' ref="sectionChart"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 报表区域 -->
|
|
|
|
+ <div class="tableBox">
|
|
|
|
+ <div class="tableTop">
|
|
|
|
+ <a-select placeholder="请选择具体时间段" v-model="timeSelectValue" style="width: 120px" @change="timeChange" label-in-value class="selectTime">
|
|
|
|
+ <a-select-option v-for="(i,index) in 24 " :key="index" :value="index" >{{index>10 ? `${index}:00` :`0${index}:00`}}</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ <a-button type='primary' class="export" @click="exportExcel">导出报表</a-button>
|
|
|
|
+ <a-button type='primary' class="add" @click="customColumns" >自定义列</a-button>
|
|
|
|
+ </div>
|
|
|
|
+ <a-table
|
|
|
|
+ size="middle"
|
|
|
|
+ :columns="columns"
|
|
|
|
+ :dataSource="tableData"
|
|
|
|
+ bordered
|
|
|
|
+ id="outTable"
|
|
|
|
+ :pagination="ipagination"
|
|
|
|
+ :scroll="{ x: scrollX }"
|
|
|
|
+ :loading="loading"
|
|
|
|
+ ref="accountTable"
|
|
|
|
+ :width="tableWidth"
|
|
|
|
+ @change="sort"
|
|
|
|
+ style="word-break: break-all;"
|
|
|
|
+ >
|
|
|
|
+ <span slot="ctr" slot-scope="ctr">{{ ctr | 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 | toPercentage }}</span>
|
|
|
|
+ <span slot="cpm" slot-scope="cpm">{{ cpm | toPercentage }}</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 | toPercentage }}</span>
|
|
|
|
+ <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | toPercentage }}</span>
|
|
|
|
+ <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | toPercentage }}</span>
|
|
|
|
+ <span slot="activeCost" slot-scope="activeCost">{{ activeCost | toPercentage }}</span>
|
|
|
|
+ <span
|
|
|
|
+ slot="gameAddictionCost"
|
|
|
|
+ slot-scope="gameAddictionCost"
|
|
|
|
+ >{{ gameAddictionCost | tofixed }}</span>
|
|
|
|
+ <span
|
|
|
|
+ slot="downloadFinishCost"
|
|
|
|
+ slot-scope="downloadFinishCost"
|
|
|
|
+ >{{ downloadFinishCost | tofixed }}</span>
|
|
|
|
+ <span
|
|
|
|
+ slot="downloadStartCost"
|
|
|
|
+ slot-scope="downloadStartCost"
|
|
|
|
+ >{{ downloadStartCost | tofixed }}</span>
|
|
|
|
+ <span
|
|
|
|
+ slot="installFinishCost"
|
|
|
|
+ slot-scope="installFinishCost"
|
|
|
|
+ >{{ installFinishCost | tofixed }}</span>
|
|
|
|
+ <span slot="convertCost" slot-scope="convertCost">{{ convertCost | tofixed }}</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>
|
|
|
|
+ <span slot="cpm" slot-scope="cpm">{{ cpm | formatCurrency }}</span>
|
|
|
|
+ <!-- <span slot="statDatetime" slot-scope>{{ timedata[0]+'~'+timedata[1]}}</span> -->
|
|
|
|
+ </a-table>
|
|
|
|
+ </div>
|
|
|
|
+ <customColumn :visible='visible' :listNum='listNum' :fiexColumn='columnsFixd' @closeCustomColumn='closeCustomColumn' @changeColumn='changeColumn' />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import moment from 'moment';
|
|
import moment from 'moment';
|
|
import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
|
|
import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
|
|
|
|
+import { JeecgListMixin } from '@/mixins/ipagination'
|
|
import { TreeSelect } from 'ant-design-vue';
|
|
import { TreeSelect } from 'ant-design-vue';
|
|
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
|
|
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
|
|
|
|
+// const SHOW_PARENT = TreeSelect.SHOW_ALL;
|
|
import DatePicker from '@/components/DatePicker.vue'
|
|
import DatePicker from '@/components/DatePicker.vue'
|
|
|
|
+import customColumn from './components/customColumn.vue'
|
|
// 引入基本模板
|
|
// 引入基本模板
|
|
var echarts = require('echarts')
|
|
var echarts = require('echarts')
|
|
// 引入柱状图组件
|
|
// 引入柱状图组件
|
|
@@ -75,13 +242,158 @@ require('echarts/lib/component/title')
|
|
require('echarts/lib/component/graphic')
|
|
require('echarts/lib/component/graphic')
|
|
require('echarts/lib/component/toolbox')
|
|
require('echarts/lib/component/toolbox')
|
|
require('echarts/lib/component/legend')
|
|
require('echarts/lib/component/legend')
|
|
|
|
+
|
|
|
|
+let sectionOption={
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: 'axis',
|
|
|
|
+
|
|
|
|
+ axisPointer: {
|
|
|
|
+ // 坐标轴指示器,坐标轴触发有效
|
|
|
|
+ type: 'line', // 默认为直线,可选为:'line' | 'shadow',
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ legend: {
|
|
|
|
+ data: ['总消耗']
|
|
|
|
+ },
|
|
|
|
+ grid: {
|
|
|
|
+ left: '2%',
|
|
|
|
+ right: '0%',
|
|
|
|
+ bottom: '0%',
|
|
|
|
+ top: '12%',
|
|
|
|
+ containLabel: true
|
|
|
|
+ },
|
|
|
|
+ xAxis: [
|
|
|
|
+ {
|
|
|
|
+ type: 'category',
|
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
|
+ axisTick: {
|
|
|
|
+ alignWithLabel: true
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ yAxis: [
|
|
|
|
+ {
|
|
|
|
+ type: 'value',
|
|
|
|
+ show: true
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ series: [
|
|
|
|
+ {
|
|
|
|
+ name: '总消耗',
|
|
|
|
+ type: 'line',
|
|
|
|
+ smooth: true,
|
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
|
+ color:'#32CD32'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '',
|
|
|
|
+ type: 'line',
|
|
|
|
+ smooth: true,
|
|
|
|
+ data: [],
|
|
|
|
+ color:'#8A2BE2'
|
|
|
|
+ },
|
|
|
|
+ ]
|
|
|
|
+}
|
|
|
|
+let length=0
|
|
|
|
+const columnsFixd = [
|
|
|
|
+ {
|
|
|
|
+ title: '时间',
|
|
|
|
+ dataIndex: 'date',
|
|
|
|
+ scopedSlots: { customRender: 'date' },
|
|
|
|
+ align: 'center',
|
|
|
|
+ key:'date',
|
|
|
|
+ customRender: (value, row, index) => {
|
|
|
|
+ const obj = {
|
|
|
|
+ children: value,
|
|
|
|
+ attrs: {}
|
|
|
|
+ }
|
|
|
|
+ if(length){
|
|
|
|
+ console.log(length)
|
|
|
|
+ if (index === 0) {
|
|
|
|
+ obj.attrs.rowSpan = length
|
|
|
|
+ } else {
|
|
|
|
+ obj.attrs.rowSpan = 0
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return obj
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '账户ID',
|
|
|
|
+ dataIndex: 'accountId',
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 150,
|
|
|
|
+ scopedSlots: { customRender: 'accountId' }
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '账户昵称',
|
|
|
|
+ dataIndex: 'signature',
|
|
|
|
+ align: 'center',
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '消耗',
|
|
|
|
+ dataIndex: 'cost',
|
|
|
|
+ scopedSlots: { customRender: 'cost' },
|
|
|
|
+ align: 'center',
|
|
|
|
+ sorter: (a, b) => a.cost - b.cost
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '点击数',
|
|
|
|
+ dataIndex: 'clickMaterial',
|
|
|
|
+ align: 'center',
|
|
|
|
+ scopedSlots: { customRender: 'clickMaterial' },
|
|
|
|
+ sorter: (a, b) => a.clickMaterial - b.clickMaterial
|
|
|
|
+ // (a, b) => a.clickMaterial - b.clickMaterial
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '点击率',
|
|
|
|
+ dataIndex: 'ctr',
|
|
|
|
+ align: 'center',
|
|
|
|
+ scopedSlots: { customRender: 'ctr' },
|
|
|
|
+ sorter: (a, b) => a.ctr - b.ctr
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ {
|
|
|
|
+ title: '展示数',
|
|
|
|
+ dataIndex: 'showMaterial',
|
|
|
|
+ align: 'center',
|
|
|
|
+
|
|
|
|
+ scopedSlots: { customRender: 'showMaterial' },
|
|
|
|
+ sorter: (a, b) => a.showMaterial - b.showMaterial
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '平均千次展现费用(元)',
|
|
|
|
+ dataIndex: 'cpm',
|
|
|
|
+ tip: '广告平均每一千次展现所付出的费用,计算公式是:总花费/展示数*1000',
|
|
|
|
+ align: 'center',
|
|
|
|
+
|
|
|
|
+ scopedSlots: { customRender: 'cpm' },
|
|
|
|
+ sorter: (a, b) => a.cpm - b.cpm
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '平均点击单价(元)',
|
|
|
|
+ dataIndex: 'cpc',
|
|
|
|
+ tip: '广告主为每次点击付出的费用成本,计算公式是:总花费/点击数',
|
|
|
|
+ align: 'center',
|
|
|
|
+ scopedSlots: { customRender: 'cpc' },
|
|
|
|
+ sorter: (a, b) => a.cpc - b.cpc
|
|
|
|
+ }
|
|
|
|
+]
|
|
|
|
+
|
|
|
|
+
|
|
export default {
|
|
export default {
|
|
- components:{
|
|
|
|
|
|
+ components:{
|
|
DatePicker,
|
|
DatePicker,
|
|
-
|
|
|
|
|
|
+ customColumn,
|
|
},
|
|
},
|
|
|
|
+ mixins: [JeecgListMixin],
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ moment,
|
|
|
|
+ //账户的数据
|
|
|
|
+ accountId:[],
|
|
left:0,
|
|
left:0,
|
|
//treeselect的参数
|
|
//treeselect的参数
|
|
treeValue: [],
|
|
treeValue: [],
|
|
@@ -93,8 +405,7 @@ export default {
|
|
rebateProp:1.0,
|
|
rebateProp:1.0,
|
|
//日期矿打开
|
|
//日期矿打开
|
|
openOptions:false,
|
|
openOptions:false,
|
|
- //子元素的数据存储
|
|
|
|
-
|
|
|
|
|
|
+ //子元素的数据存储
|
|
type:1,
|
|
type:1,
|
|
dateValue:[moment(),moment()],
|
|
dateValue:[moment(),moment()],
|
|
|
|
|
|
@@ -102,33 +413,75 @@ export default {
|
|
searchDisabled:false,
|
|
searchDisabled:false,
|
|
refreshDisabled:false,
|
|
refreshDisabled:false,
|
|
resetDisabled:false,
|
|
resetDisabled:false,
|
|
|
|
+
|
|
|
|
+ //echart区域的tab
|
|
|
|
+ tabKey:'cost',
|
|
|
|
+ sectionOption:JSON.parse(JSON.stringify(sectionOption)),
|
|
|
|
+
|
|
|
|
+ //table的数据
|
|
|
|
+ timeSelectValue:'',//table上选择时间
|
|
|
|
+ visible:false,//自定义页面的打开
|
|
|
|
+ columns:JSON.parse(JSON.stringify(columnsFixd)) ,//table的表头
|
|
|
|
+ columnsFixd,
|
|
|
|
+ tableData:[],
|
|
|
|
+ scrollX:0,
|
|
|
|
+ tableWidth: '',//设置表格的列宽
|
|
|
|
+ loading:false,
|
|
|
|
+
|
|
|
|
+ listNum:[],
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ watch:{
|
|
|
|
+ type(n,o){
|
|
|
|
+ // console.log(n,o)
|
|
|
|
+ // console.log(this.type)
|
|
|
|
+ // if(this.type<9){
|
|
|
|
+ // this.sectionHttp({type:this.type})
|
|
|
|
+
|
|
|
|
+ // }else if(this.type==9){
|
|
|
|
+ // this.sectionHttp({
|
|
|
|
+ // type:this.type,
|
|
|
|
+ // startDate:this.dateValue[0].format('YYYY-MM-DD'),
|
|
|
|
+ // endDate:this.dateValue[1].format('YYYY-MM-DD')
|
|
|
|
+ // })
|
|
|
|
+ // }
|
|
|
|
+ },
|
|
|
|
+ dateValue: {
|
|
|
|
+ handler(newName, oldName) {
|
|
|
|
+ // console.log(newName,oldName)
|
|
|
|
+ // this.sectionHttp({
|
|
|
|
+ // type:this.type,
|
|
|
|
+ // startDate:this.dateValue[0].format('YYYY-MM-DD'),
|
|
|
|
+ // endDate:this.dateValue[1].format('YYYY-MM-DD')
|
|
|
|
+ // })
|
|
|
|
+ },
|
|
|
|
+ immediate: true,
|
|
|
|
+ deep: true
|
|
|
|
+ },
|
|
|
|
+ },
|
|
methods: {
|
|
methods: {
|
|
|
|
+
|
|
//项目改变后的事件
|
|
//项目改变后的事件
|
|
treeChange(val) {
|
|
treeChange(val) {
|
|
- this.projectId = []
|
|
|
|
- this.accountName = []
|
|
|
|
- console.log(val, this.treeValue)
|
|
|
|
- this.treeValue.forEach((item, index) => {
|
|
|
|
- if (parseInt(item)) {
|
|
|
|
- this.projectId.push(item)
|
|
|
|
- } else {
|
|
|
|
- this.accountName.push(item)
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- if (this.treeValue.length == 0) {
|
|
|
|
- this.optionArr = []
|
|
|
|
|
|
+
|
|
|
|
+ this.accountId = [];
|
|
|
|
+ if(val){
|
|
|
|
+ val.forEach((ele,index)=>{
|
|
|
|
+ if(ele*1){
|
|
|
|
+ this.accountId.push(ele)
|
|
|
|
+ }else{
|
|
|
|
+ let projectArr=this.treeData.filter((item)=>{
|
|
|
|
+ return item.value==ele
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ projectArr[0].children.forEach((element)=>{
|
|
|
|
+ this.accountId.push(element.value)
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
}
|
|
}
|
|
- postAction('/pangolin/api/app/list', {
|
|
|
|
- projectId: this.projectId,
|
|
|
|
- accountName: this.accountName
|
|
|
|
- }).then(res => {
|
|
|
|
- console.log(res)
|
|
|
|
- if (res.success) {
|
|
|
|
- this.optionArr = res.data
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
|
|
+
|
|
|
|
+
|
|
},
|
|
},
|
|
disabledDate(current) {
|
|
disabledDate(current) {
|
|
// console.log(current)
|
|
// console.log(current)
|
|
@@ -148,19 +501,31 @@ export default {
|
|
//刷新
|
|
//刷新
|
|
refreshgetData(){
|
|
refreshgetData(){
|
|
this.loading=true;
|
|
this.loading=true;
|
|
- this.refreshDisabled=true;
|
|
|
|
|
|
+ // this.refreshDisabled=true;
|
|
|
|
+ this.searchDisabled=false;
|
|
},
|
|
},
|
|
//重置
|
|
//重置
|
|
resetgetData(){
|
|
resetgetData(){
|
|
this.loading=true;
|
|
this.loading=true;
|
|
- this.resetDisabled=true;
|
|
|
|
|
|
+ // this.resetDisabled=true;
|
|
|
|
+ this.searchDisabled=false;
|
|
|
|
+ this.refreshDisabled=false;
|
|
|
|
+ this.treeValue=[];
|
|
|
|
+ this.treeData=[];
|
|
|
|
+ this.discount=1.0;
|
|
|
|
+ this.rebateProp=1.0
|
|
|
|
+
|
|
|
|
+
|
|
},
|
|
},
|
|
- //打开日期框
|
|
|
|
|
|
+ //打开日期框
|
|
opendate(){
|
|
opendate(){
|
|
this.openOptions=!this.openOptions;
|
|
this.openOptions=!this.openOptions;
|
|
// console.log(this.openOptions)
|
|
// console.log(this.openOptions)
|
|
},
|
|
},
|
|
-
|
|
|
|
|
|
+ opendateClose(){
|
|
|
|
+ this.openOptions=false;
|
|
|
|
+ // console.log(this.openOptions)
|
|
|
|
+ },
|
|
HttpPost(params){
|
|
HttpPost(params){
|
|
return new Promise((resolve, reject) => {
|
|
return new Promise((resolve, reject) => {
|
|
postAction('/ctop/byteDance/homePage/report/week', {}).then(res => {
|
|
postAction('/ctop/byteDance/homePage/report/week', {}).then(res => {
|
|
@@ -195,12 +560,43 @@ export default {
|
|
// this.getEchartData('costChart', this.costOption)
|
|
// this.getEchartData('costChart', this.costOption)
|
|
// this.getEchartData('clickChart', this.clickOption)
|
|
// this.getEchartData('clickChart', this.clickOption)
|
|
// this.getEchartData('showChart', this.showOption)
|
|
// this.getEchartData('showChart', this.showOption)
|
|
-
|
|
|
|
|
|
+ length =this.tableData.length
|
|
}
|
|
}
|
|
})
|
|
})
|
|
})
|
|
})
|
|
},
|
|
},
|
|
- //获取echart的值
|
|
|
|
|
|
+ //请求项目和账户内容
|
|
|
|
+ accountHttp(){
|
|
|
|
+ this.treeData=[];
|
|
|
|
+ this.treeValue=[];
|
|
|
|
+ getAction('/ctop/projectMember/getProjectAccountByUserId', {}).then(res => {
|
|
|
|
+ if(res.success){
|
|
|
|
+ console.log(res);
|
|
|
|
+ if(res.result){
|
|
|
|
+ res.result.forEach((element,index) => {
|
|
|
|
+ if(element){
|
|
|
|
+ this.treeData.push({});
|
|
|
|
+ this.treeData[index].title=element.project.projectName +'_('+ element.project.advertiserName +')';
|
|
|
|
+ this.treeData[index].value='project'+element.project.projectId;
|
|
|
|
+ this.treeData[index].key=element.project.projectId;
|
|
|
|
+ this.treeData[index].children=[];
|
|
|
|
+ if(element.account.length){
|
|
|
|
+ element.account.forEach((ele,i)=>{
|
|
|
|
+ this.treeData[index].children.push({});
|
|
|
|
+ this.treeData[index].children[i].title=ele.userName+'_'+ele.authName;
|
|
|
|
+ this.treeData[index].children[i].value=ele.accountId;
|
|
|
|
+ this.treeData[index].children[i].key=ele.accountId;
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ // console.log(this.treeData)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ //初始化echart
|
|
getEchartData(idName, optionName) {
|
|
getEchartData(idName, optionName) {
|
|
const chart = this.$refs[idName]
|
|
const chart = this.$refs[idName]
|
|
// console.log(chart)
|
|
// console.log(chart)
|
|
@@ -212,6 +608,197 @@ export default {
|
|
})
|
|
})
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+
|
|
|
|
+ //tab切换页的事件
|
|
|
|
+ callback(key) {
|
|
|
|
+ // console.log(key);
|
|
|
|
+ this.tabKey=key;
|
|
|
|
+ this.sectionOption=JSON.parse(JSON.stringify(sectionOption))
|
|
|
|
+ if(key=='cost'){
|
|
|
|
+ if(this.type==1){
|
|
|
|
+ this.sectionOption.legend.data=['今天','昨天'];
|
|
|
|
+ this.sectionOption.xAxis[0].data=this.tabCost.today.x;
|
|
|
|
+ this.sectionOption.series[0].data=this.tabCost.today.y;
|
|
|
|
+ this.sectionOption.series[0].name=this.tabCost.today.name;
|
|
|
|
+ this.sectionOption.series[1].data=this.tabCost.yesterday.y;
|
|
|
|
+ this.sectionOption.series[1].name=this.tabCost.yesterday.name;
|
|
|
|
+ }else if(this.type==2){
|
|
|
|
+ this.sectionOption.xAxis[0].data=init.today.x;
|
|
|
|
+ this.sectionOption.series[0].data=this.tabCost;
|
|
|
|
+ }else{
|
|
|
|
+ this.sectionOption.xAxis[0].data=this.tabCost.x;
|
|
|
|
+ this.sectionOption.series[0].data=this.tabCost.y;
|
|
|
|
+ }
|
|
|
|
+ }else if(key=='click'){
|
|
|
|
+ if(this.type==1){
|
|
|
|
+ this.sectionOption.legend.data=['今天','昨天'];
|
|
|
|
+ this.sectionOption.xAxis[0].data=this.tabClick.today.x;
|
|
|
|
+ this.sectionOption.series[0].data=this.tabClick.today.y;
|
|
|
|
+ this.sectionOption.series[0].name=this.tabClick.today.name;
|
|
|
|
+ this.sectionOption.series[1].data=this.tabClick.yesterday.y;
|
|
|
|
+ this.sectionOption.series[1].name=this.tabClick.yesterday.name;
|
|
|
|
+ }else if(this.type==2){
|
|
|
|
+ this.sectionOption.legend.data=['点击数'];
|
|
|
|
+ this.sectionOption.xAxis[0].data=init.today.x;
|
|
|
|
+ this.sectionOption.series[0].data=this.tabClick;
|
|
|
|
+ this.sectionOption.series[0].name='点击数';
|
|
|
|
+ }else{
|
|
|
|
+ this.sectionOption.legend.data=['点击数'];
|
|
|
|
+ this.sectionOption.xAxis[0].data=this.tabClick.x;
|
|
|
|
+ this.sectionOption.series[0].data=this.tabClick.y;
|
|
|
|
+ this.sectionOption.series[0].name='点击数';
|
|
|
|
+ }
|
|
|
|
+ }else{
|
|
|
|
+ if(this.type==1){
|
|
|
|
+ this.sectionOption.legend.data=['今天','昨天'];
|
|
|
|
+ this.sectionOption.xAxis[0].data=this.tabShowNum.today.x;
|
|
|
|
+ this.sectionOption.series[0].data=this.tabShowNum.today.y;
|
|
|
|
+ this.sectionOption.series[0].name=this.tabShowNum.today.name;
|
|
|
|
+ this.sectionOption.series[1].data=this.tabShowNum.yesterday.y;
|
|
|
|
+ this.sectionOption.series[1].name=this.tabShowNum.yesterday.name;
|
|
|
|
+ }else if(this.type==2){
|
|
|
|
+ this.sectionOption.legend.data=['展示数'];
|
|
|
|
+ this.sectionOption.xAxis[0].data=init.today.x;
|
|
|
|
+ this.sectionOption.series[0].data=this.tabShowNum;
|
|
|
|
+ this.sectionOption.series[0].name='展示数';
|
|
|
|
+ }else{
|
|
|
|
+ this.sectionOption.legend.data=['展示数'];
|
|
|
|
+ this.sectionOption.xAxis[0].data=this.tabShowNum.x;
|
|
|
|
+ this.sectionOption.series[0].data=this.tabShowNum.y;
|
|
|
|
+ this.sectionOption.series[0].name='展示数';
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ this.getEchartData('sectionChart', this.sectionOption)
|
|
|
|
+ },
|
|
|
|
+ //导出报表
|
|
|
|
+ exportExcel() {
|
|
|
|
+ // var params = {}
|
|
|
|
+ // params.projectId = this.projectId
|
|
|
|
+ // params.disCount = this.discount
|
|
|
|
+ // params.statDate = this.statDate.format('YYYY-MM-DD')
|
|
|
|
+ // var name = this.dataElse.filter(item => {
|
|
|
|
+ // return item.projectId == this.projectId
|
|
|
|
+ // })[0].projectName
|
|
|
|
+ // downFilePost('/ctop/yiche/report/exportDailyReport', params).then(res => {
|
|
|
|
+ // let blob = new Blob([res], {
|
|
|
|
+ // type: 'application/vnd.ms-excel'
|
|
|
|
+ let column = this.columns.map((item, index) => {
|
|
|
|
+ return item.dataIndex
|
|
|
|
+ })
|
|
|
|
+ let columns=['url',...column]
|
|
|
|
+
|
|
|
|
+ downFilePost('/toutiao/videoReportDaily/bytedanceVideoInfoListTotalExportExcel', {
|
|
|
|
+ columns,
|
|
|
|
+ signature: this.videoID,
|
|
|
|
+ startDate: this.timedata[0],
|
|
|
|
+ endDate: this.timedata[1],
|
|
|
|
+ cost: this.consumeValue,
|
|
|
|
+ accountIds:this.appId,
|
|
|
|
+ }).then(res => {
|
|
|
|
+ let blob = new Blob([res], {
|
|
|
|
+ type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
|
|
|
+ })
|
|
|
|
+ let downloadElement = document.createElement('a')
|
|
|
|
+ let href = window.URL.createObjectURL(blob) //创建下载的链接
|
|
|
|
+ downloadElement.href = href
|
|
|
|
+ downloadElement.download = this.statDate.format('YYYY-MM-DD') + '视频汇总.xlsx' //下载后文件名
|
|
|
|
+ document.body.appendChild(downloadElement)
|
|
|
|
+ downloadElement.click() //点击下载
|
|
|
|
+ document.body.removeChild(downloadElement) //下载完成移除元素
|
|
|
|
+ window.URL.revokeObjectURL(href) //释放掉blob对象
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //弹出框打开,自定义列
|
|
|
|
+ customColumns() {
|
|
|
|
+ this.visible = true
|
|
|
|
+ this.listNum = [...this.columns]
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //table选择时间函数
|
|
|
|
+ timeChange(value){
|
|
|
|
+ // console.log(value)
|
|
|
|
+ },
|
|
|
|
+ //table 排序
|
|
|
|
+ sort(pagination, filters, sorter, { currentDataSource }){
|
|
|
|
+ console.log(pagination, filters, sorter)
|
|
|
|
+ if(sorter.order == 'ascend'){
|
|
|
|
+ this.HttpPost(sorter.columnKey+'+')
|
|
|
|
+ }else if(sorter.order == 'descend'){
|
|
|
|
+ this.HttpPost(sorter.columnKey+'-')
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ closeCustomColumn(){
|
|
|
|
+ this.visible=false;
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //自定义之后修改父元素表头
|
|
|
|
+ changeColumn(val){
|
|
|
|
+ this.columns=[...val];
|
|
|
|
+ if(this.columns.length> this.columnsFixd.length){
|
|
|
|
+ this.scrollX=200
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.accountHttp()
|
|
|
|
+ },
|
|
|
|
+ filters: {
|
|
|
|
+ toPercentage(val) {
|
|
|
|
+ if(typeof val != 'string'){
|
|
|
|
+ return (val * 100).toFixed(2) + '%'
|
|
|
|
+ }else{
|
|
|
|
+ return val
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ //保留两位小数并且变成货币格式
|
|
|
|
+ decimalsHandle(val){
|
|
|
|
+ // console.log(val)
|
|
|
|
+ if(val){
|
|
|
|
+ val=parseFloat(val).toFixed(2);
|
|
|
|
+ let numberStr = val.toString()
|
|
|
|
+ let str = numberStr.split('.')
|
|
|
|
+
|
|
|
|
+ let str0=str[0].split('').reverse();
|
|
|
|
+ for (let i = 0; i < str0.length; i++) {
|
|
|
|
+ if ((i + 1) % 4 === 0) {
|
|
|
|
+ str0.splice(i, 0, ',')
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ str0.reverse()
|
|
|
|
+ let handleResult = ''
|
|
|
|
+ for (let j = 0; j < str0.length; j++) {
|
|
|
|
+ handleResult += str0[j]
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ return handleResult+'.'+str[1]
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ //变成货币格式
|
|
|
|
+ formatCurrency(val){
|
|
|
|
+ if(val){
|
|
|
|
+ let numberStr = val.toString()
|
|
|
|
+ let str = numberStr.split('').reverse()
|
|
|
|
+ for (let i = 0; i < str.length; i++) {
|
|
|
|
+ if ((i + 1) % 4 === 0) {
|
|
|
|
+ str.splice(i, 0, ',')
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ str.reverse()
|
|
|
|
+ let handleResult = ''
|
|
|
|
+ for (let j = 0; j < str.length; j++) {
|
|
|
|
+ handleResult += str[j]
|
|
|
|
+ }
|
|
|
|
+ return handleResult
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
@@ -248,10 +835,70 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.show{
|
|
.show{
|
|
- background-color: #fff;
|
|
|
|
|
|
+ // background-color: #fff;
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ padding: 15px 15px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+
|
|
|
|
+ .showBox {
|
|
|
|
+ width: 19%;
|
|
|
|
+ box-sizing: border-box;
|
|
padding: 15px 15px;
|
|
padding: 15px 15px;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+
|
|
|
|
+ .title {
|
|
|
|
+ color: #999;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ position: relative;
|
|
|
|
+ text-align: center;
|
|
|
|
+ .infotitle{
|
|
|
|
+ padding: 8px 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ span {
|
|
|
|
+ font-size: 1rem;
|
|
|
|
+ // color: #1890ff;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 0;
|
|
|
|
+ right: 0;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .infoNum{
|
|
|
|
+ padding:10px 0;
|
|
|
|
+ text-align: center;
|
|
|
|
+ span{
|
|
|
|
+ font-weight: 600;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+ }
|
|
|
|
+ .chartBox{
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ margin: 15px 15px;
|
|
|
|
+ padding: 2px 10px;
|
|
|
|
+ }
|
|
|
|
+ .tableBox{
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ margin: 15px 15px;
|
|
|
|
+ padding: 15px 10px;
|
|
|
|
+ .tableTop{
|
|
|
|
+ position: relative;
|
|
|
|
+ padding-bottom: 15px;
|
|
|
|
+ border-bottom: 1px solid #e0e0e0;
|
|
|
|
+ .selectTime{
|
|
|
|
+ margin-right: 20px;
|
|
|
|
+ }
|
|
|
|
+ .add{
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 0;
|
|
|
|
+ right: 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|