|
@@ -3,7 +3,7 @@
|
|
|
<div class="timeDiv">
|
|
|
<div>
|
|
|
<span>时间范围:</span>
|
|
|
- <a-button type='default' @click="lastWeekHandle">过去一周</a-button>
|
|
|
+ <a-button type="default" @click="lastWeekHandle">过去一周</a-button>
|
|
|
<a-range-picker
|
|
|
:disabled-date="disabledDate"
|
|
|
format="YYYY-MM-DD"
|
|
@@ -18,23 +18,29 @@
|
|
|
<a-input-number id="inputNumber" v-model="consumeValue" :min="0" @change="consumeOnChange" />
|
|
|
|
|
|
<span>视频ID:</span>
|
|
|
- <a-input class="myinput" />
|
|
|
+ <a-input class="myinput" v-model="videoID" />
|
|
|
</div>
|
|
|
|
|
|
<a-button type="primary" @click="searchRes">查询</a-button>
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
+ <div style="display:flex;margin-bottom:15px" class="btndiv">
|
|
|
+ <a-button type="primary" @click="customColumns">自定义列</a-button>
|
|
|
+ </div>
|
|
|
|
|
|
<a-modal v-model="visible" title="自定义列" on-ok="handleOk" width="65%">
|
|
|
<template slot="footer">
|
|
|
<a-button key="back" @click="handleCancel">取消</a-button>
|
|
|
<a-button key="submit" type="primary" :loading="loading" @click="handleOk">应用</a-button>
|
|
|
</template>
|
|
|
- <a-input-search placeholder="输入要添加的列的名称" style="width: 40%" enter-button @search="onSearch" />
|
|
|
+ <!-- <a-input-search placeholder="输入要添加的列的名称" style="width: 40%" enter-button @search="onSearch" /> -->
|
|
|
<div class="zhuti">
|
|
|
<div class="addlist">
|
|
|
<p>可添加的列</p>
|
|
|
+ <div class="selectionList">
|
|
|
+ <!-- v-for="(item,index) in addColumns" :key="index" -->
|
|
|
+ <selectComponent :showCol="listNum" @getshowlist="getshowlist" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="listNum">
|
|
|
<p>已选{{columns.length}}列</p>
|
|
@@ -73,31 +79,77 @@
|
|
|
tableLayout="auto"
|
|
|
ref="vSummaryTable"
|
|
|
>
|
|
|
- <template slot="operation" slot-scope="text, record">
|
|
|
+
|
|
|
+
|
|
|
+ <span slot="operation" slot-scope="text, record">
|
|
|
<a href="javascript:;" @click="opendetail(text, record)">查看明细</a>
|
|
|
- </template>
|
|
|
- </a-table>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <div slot="videoU" slot-scope="test,records">
|
|
|
+ <video
|
|
|
+ @click.stop
|
|
|
+ class="video"
|
|
|
+ :src="records.url"
|
|
|
+ controls="controls"
|
|
|
+ style="height:200px;width:112.5px"
|
|
|
+ >您的浏览器不支持 video 标签。</video>
|
|
|
+ </div>
|
|
|
+ <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="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="statDatetime" slot-scope="">{{ timedata[0]+'~'+timedata[1]}}</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="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 | tofixed }}</span>
|
|
|
+ <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | tofixed }}</span>
|
|
|
+ <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | tofixed }}</span>
|
|
|
+ <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | tofixed }}</span>
|
|
|
+ <span slot="activeCost" slot-scope="activeCost">{{ activeCost | tofixed }}</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>
|
|
|
+ </a-table>
|
|
|
<!-- 明细表 -->
|
|
|
|
|
|
- <a-modal v-model="visibleDetail" title="详细信息">
|
|
|
+ <a-modal v-model="visibleDetail" title="详细信息" width="60%" :footer="null" >
|
|
|
<a-button type="default" @click="exportExcel" id="mybtn">导出报表</a-button>
|
|
|
- <div class="detailTable">
|
|
|
- <p>客户</p>
|
|
|
- <p>视频链接</p>
|
|
|
- <p>时间</p>
|
|
|
- <p>消耗</p>
|
|
|
- <p>环比</p>
|
|
|
- <div class="left">
|
|
|
- <div class="kehu"></div>
|
|
|
- <div class="videolink"></div>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <ul class="detailUL">
|
|
|
- <li></li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <a-table
|
|
|
+ :columns="detailConsum"
|
|
|
+ :data-source="detailData"
|
|
|
+ bordered
|
|
|
+ tableLayout="auto"
|
|
|
+ :pagination="false"
|
|
|
+ >
|
|
|
+ <span slot="huanbi" slot-scope="huanbi">{{ huanbi | toPercentage }}</span>
|
|
|
+ </a-table>
|
|
|
</a-modal>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -106,32 +158,35 @@
|
|
|
import moment from 'moment'
|
|
|
import { JeecgListMixin } from '@/mixins/ipagination'
|
|
|
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
|
|
|
-
|
|
|
+import selectComponent from './selectComponent'
|
|
|
const columnsFixd = [
|
|
|
{
|
|
|
title: '时间',
|
|
|
- dataIndex: 'vtime',
|
|
|
+ dataIndex: 'statDatetime',
|
|
|
align: 'center',
|
|
|
- width: 150,
|
|
|
- fixed: 'left'
|
|
|
+ width: 120,
|
|
|
+ fixed: 'left',
|
|
|
+ scopedSlots: { customRender: 'statDatetime' }
|
|
|
},
|
|
|
{
|
|
|
title: '视频',
|
|
|
- dataIndex: 'video',
|
|
|
+ dataIndex: 'videoU',
|
|
|
align: 'center',
|
|
|
width: 150,
|
|
|
- fixed: 'left'
|
|
|
+ fixed: 'left',
|
|
|
+ key: 'videoU',
|
|
|
+ scopedSlots: { customRender: 'videoU' }
|
|
|
},
|
|
|
{
|
|
|
title: '视频ID',
|
|
|
- dataIndex: 'videoID',
|
|
|
+ dataIndex: 'signature',
|
|
|
align: 'center',
|
|
|
width: 100,
|
|
|
fixed: 'left'
|
|
|
},
|
|
|
{
|
|
|
title: '视频链接',
|
|
|
- dataIndex: 'videoLink',
|
|
|
+ dataIndex: 'url',
|
|
|
align: 'center',
|
|
|
width: 100,
|
|
|
fixed: 'left'
|
|
@@ -139,7 +194,7 @@ const columnsFixd = [
|
|
|
|
|
|
{
|
|
|
title: '视频描述',
|
|
|
- dataIndex: 'videoDes',
|
|
|
+ dataIndex: 'materialName',
|
|
|
align: 'center',
|
|
|
width: 100,
|
|
|
fixed: 'left'
|
|
@@ -148,66 +203,141 @@ const columnsFixd = [
|
|
|
title: '操作',
|
|
|
dataIndex: 'operation',
|
|
|
align: 'center',
|
|
|
- width: 100,
|
|
|
+ scopedSlots: { customRender: 'operation' },
|
|
|
+ width: 80,
|
|
|
fixed: 'left'
|
|
|
}
|
|
|
]
|
|
|
let variableCol = [
|
|
|
{
|
|
|
title: '消耗',
|
|
|
- dataIndex: 'consume',
|
|
|
- scopedSlots: { customRender: 'consume' },
|
|
|
- align: 'center'
|
|
|
+ dataIndex: 'cost',
|
|
|
+ scopedSlots: { customRender: 'cost' },
|
|
|
+ align: 'center',
|
|
|
+ sorter: (a, b) => a.cost - b.cost
|
|
|
},
|
|
|
{
|
|
|
title: '点击数',
|
|
|
- dataIndex: 'clickNum',
|
|
|
+ dataIndex: 'clickMaterial',
|
|
|
align: 'center',
|
|
|
- scopedSlots: { customRender: 'clickNum' }
|
|
|
+ scopedSlots: { customRender: 'clickMaterial' },
|
|
|
+ sorter: (a, b) => a.clickMaterial - b.clickMaterial
|
|
|
},
|
|
|
{
|
|
|
title: '点击率',
|
|
|
- dataIndex: 'clickThroughRate',
|
|
|
+ dataIndex: 'ctr',
|
|
|
align: 'center',
|
|
|
- scopedSlots: { customRender: 'clickThroughRate' }
|
|
|
+ width: 50,
|
|
|
+ scopedSlots: { customRender: 'ctr' },
|
|
|
+ sorter: (a, b) => a.ctr - b.ctr
|
|
|
},
|
|
|
|
|
|
{
|
|
|
title: '展示数',
|
|
|
- dataIndex: 'showNum',
|
|
|
+ dataIndex: 'showMaterial',
|
|
|
align: 'center',
|
|
|
- scopedSlots: { customRender: 'showNum' }
|
|
|
+ scopedSlots: { customRender: 'showMaterial' },
|
|
|
+ sorter: (a, b) => a.showMaterial - b.showMaterial
|
|
|
},
|
|
|
{
|
|
|
title: '25%进度播放率',
|
|
|
- dataIndex: '25%progressRate',
|
|
|
+ width:170,
|
|
|
+ dataIndex: 'play25FeedBreakRate',
|
|
|
align: 'center',
|
|
|
- scopedSlots: { customRender: '25%progressRate' }
|
|
|
+ scopedSlots: { customRender: 'play25FeedBreakRate' },
|
|
|
+ sorter: (a, b) => a.play25FeedBreakRate - b.play25FeedBreakRate
|
|
|
},
|
|
|
{
|
|
|
title: '整体完播率',
|
|
|
- dataIndex: 'overallCompletionRate',
|
|
|
+ dataIndex: 'playOverRate',
|
|
|
align: 'center',
|
|
|
- scopedSlots: { customRender: 'overallCompletionRate' }
|
|
|
+ width:100,
|
|
|
+ tip: '表示广告在投放期内的预估花费金额。当天数据可能会有波动,次日稳定',
|
|
|
+ scopedSlots: { customRender: 'playOverRate' },
|
|
|
+
|
|
|
+ sorter: (a, b) => a.playOverRate - b.playOverRate
|
|
|
},
|
|
|
{
|
|
|
title: '转化数',
|
|
|
- dataIndex: 'conversionNum',
|
|
|
+ dataIndex: 'convertMaterial',
|
|
|
align: 'center',
|
|
|
- scopedSlots: { customRender: 'conversionNum' }
|
|
|
+ scopedSlots: { customRender: 'convertMaterial' },
|
|
|
+ sorter: (a, b) => a.convertMaterial - b.convertMaterial
|
|
|
},
|
|
|
{
|
|
|
title: '转化率',
|
|
|
- dataIndex: 'conversionRate',
|
|
|
+ dataIndex: 'convertRate',
|
|
|
align: 'center',
|
|
|
- scopedSlots: { customRender: 'conversionRate' }
|
|
|
+ scopedSlots: { customRender: 'convertRate' },
|
|
|
+ sorter: (a, b) => a.convertRate - b.convertRate
|
|
|
}
|
|
|
]
|
|
|
+let detailConsum = [
|
|
|
+ {
|
|
|
+ title: '客户',
|
|
|
+ dataIndex: 'advertiserName',
|
|
|
+ align: 'center',
|
|
|
|
|
|
+ customRender: (value, row, index) => {
|
|
|
+ const obj = {
|
|
|
+ children: value,
|
|
|
+ attrs: {}
|
|
|
+ }
|
|
|
+ if (index === 0) {
|
|
|
+ obj.attrs.rowSpan = 7
|
|
|
+ } else {
|
|
|
+ obj.attrs.rowSpan = 0
|
|
|
+ }
|
|
|
+ return obj
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '视频链接',
|
|
|
+ dataIndex: 'videoUrl',
|
|
|
+ align: 'center',
|
|
|
+ width:250,
|
|
|
+ customRender: (value, row, index) => {
|
|
|
+ const obj = {
|
|
|
+ children: value,
|
|
|
+ attrs: {}
|
|
|
+ }
|
|
|
+ if (index == 0) {
|
|
|
+ obj.attrs.rowSpan = 7
|
|
|
+ }else {
|
|
|
+ obj.attrs.rowSpan = 0
|
|
|
+ }
|
|
|
+ return obj
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '时间',
|
|
|
+ dataIndex: 'statDatetime',
|
|
|
+ align: 'center',
|
|
|
+ width: 120
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '消耗',
|
|
|
+ dataIndex: 'cost',
|
|
|
+ scopedSlots: { customRender: 'cost' },
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '环比',
|
|
|
+ dataIndex: 'huanbi',
|
|
|
+ align: 'center'
|
|
|
+ }
|
|
|
+]
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ //明细的表头
|
|
|
+ detailConsum,
|
|
|
+ //明细里的数据
|
|
|
+ detailData: [],
|
|
|
+
|
|
|
consumeValue: 1000,
|
|
|
+ //视频ID
|
|
|
+ videoID: '',
|
|
|
columns: [...columnsFixd, ...variableCol],
|
|
|
data: [],
|
|
|
totalSelect: 0,
|
|
@@ -226,9 +356,18 @@ export default {
|
|
|
editable: false,
|
|
|
|
|
|
//详细信息的开关
|
|
|
- visibleDetail: false
|
|
|
+ visibleDetail: false,
|
|
|
+
|
|
|
+ //时间选择 字符串类型
|
|
|
+ timedata: [],
|
|
|
+
|
|
|
+ //记录点开的视频的md5
|
|
|
+ signature:''
|
|
|
}
|
|
|
},
|
|
|
+ components: {
|
|
|
+ selectComponent
|
|
|
+ },
|
|
|
props: {
|
|
|
text: String
|
|
|
},
|
|
@@ -241,36 +380,86 @@ export default {
|
|
|
return current && current > moment().subtract(1, 'day')
|
|
|
},
|
|
|
//过去一周按钮事件
|
|
|
+ lastWeekHandle() {
|
|
|
+ this.dateRange = [
|
|
|
+ moment()
|
|
|
+ .subtract(7, 'days')
|
|
|
+ .format('YYYY-MM-DD'),
|
|
|
+ moment()
|
|
|
+ .subtract(1, 'days')
|
|
|
+ .format('YYYY-MM-DD')
|
|
|
+ ]
|
|
|
+ this.timedata=this.dateRange
|
|
|
+ console.log(this.dateRange)
|
|
|
+ this.totalSelect = 7
|
|
|
+ this.daysFlag = true
|
|
|
+ postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListWeek', {
|
|
|
+ startDate: this.timedata[0],
|
|
|
+ endDate: this.timedata[1],
|
|
|
+ cost: this.consumeValue,
|
|
|
+ signature: this.videoID
|
|
|
+ }).then(res => {
|
|
|
+ let resArr = []
|
|
|
+ this.loading = false
|
|
|
+ console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+ let result = res.result
|
|
|
+ this.data.push({ ...result, key: 1 })
|
|
|
+ result.map((item, index) => {
|
|
|
+ item.key = index
|
|
|
+ })
|
|
|
+ this.data = result
|
|
|
+ }
|
|
|
+ })
|
|
|
|
|
|
- //点击时间的 昨日 按钮
|
|
|
- lastWeekHandle(){
|
|
|
- this.dateRange=[moment().subtract(7, 'days').format("YYYY-MM-DD"),moment().subtract(1, 'days').format("YYYY-MM-DD")];
|
|
|
- console.log(this.dateRange);
|
|
|
- this.totalSelect=7;
|
|
|
- this.daysFlag = true
|
|
|
},
|
|
|
|
|
|
consumeOnChange() {},
|
|
|
//查询按钮
|
|
|
- searchRes() {},
|
|
|
+ searchRes() {
|
|
|
+ this.date = []
|
|
|
+ this.loading = true
|
|
|
+ postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListWeek', {
|
|
|
+ startDate: this.timedata[0],
|
|
|
+ endDate: this.timedata[1],
|
|
|
+ cost: this.consumeValue,
|
|
|
+ signature: this.videoID
|
|
|
+ }).then(res => {
|
|
|
+ let resArr = []
|
|
|
+ this.loading = false
|
|
|
+ console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+ let result = res.result
|
|
|
+ this.data.push({ ...result, key: 1 })
|
|
|
+ result.map((item, index) => {
|
|
|
+ item.key = index
|
|
|
+ })
|
|
|
+ this.data = result
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
//导出报表
|
|
|
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
|
|
|
+ // var params = {}
|
|
|
+ // params.projectId = this.projectId
|
|
|
+ // params.disCount = this.discount
|
|
|
+ // params.statDate = this.statDate.format('YYYY-MM-DD')
|
|
|
+ var name = this.data.filter(item => {
|
|
|
+ return item.signature == this.signature
|
|
|
})[0].projectName
|
|
|
- downFilePost('/ctop/yiche/report/exportDailyReport', params).then(res => {
|
|
|
+ downFilePost('/toutiao/videoReportDaily/bytedanceVideoInfoListDetailExportExcel', {
|
|
|
+ startDate: this.timedata[0],
|
|
|
+ endDate: this.timedata[1],
|
|
|
+ signature: this.signature
|
|
|
+ }).then(res => {
|
|
|
let blob = new Blob([res], {
|
|
|
type: 'application/vnd.ms-excel'
|
|
|
})
|
|
|
let downloadElement = document.createElement('a')
|
|
|
let href = window.URL.createObjectURL(blob) //创建下载的链接
|
|
|
downloadElement.href = href
|
|
|
- downloadElement.download = name + '-' + this.statDate.format('YYYY-MM-DD') + '-日报' //下载后文件名
|
|
|
+ downloadElement.download = name + '-' +this.timedata[0] + '-' + this.timedata[1] //下载后文件名
|
|
|
document.body.appendChild(downloadElement)
|
|
|
downloadElement.click() //点击下载
|
|
|
document.body.removeChild(downloadElement) //下载完成移除元素
|
|
@@ -280,15 +469,22 @@ export default {
|
|
|
|
|
|
//日期选择回调
|
|
|
dateChange(data, dataString) {
|
|
|
- console.log(data[1]._d - data[0]._d, dataString)
|
|
|
- this.dateRange[0] = data[0]
|
|
|
- this.totalSelect = (data[1]._d - data[0]._d) / (24 * 60 * 60 * 1000) + 1
|
|
|
- this.daysFlag = true
|
|
|
- if (this.totalSelect > 92) {
|
|
|
- this.$message.error('时间跨度太长啦,选小一点好嘛?')
|
|
|
- this.daysFlag = false
|
|
|
- this.dateRange = []
|
|
|
+ // console.log(data[1]._d - data[0]._d, dataString)
|
|
|
+ if(data.length){
|
|
|
+ this.timedata = dataString
|
|
|
+ this.dateRange[0] = data[0]
|
|
|
+ this.totalSelect = (data[1]._d - data[0]._d) / (24 * 60 * 60 * 1000) + 1
|
|
|
+ this.daysFlag = true
|
|
|
+ if (this.totalSelect > 7) {
|
|
|
+ this.$message.error('时间跨度太长啦,选小一点好嘛?')
|
|
|
+ this.daysFlag = false
|
|
|
+ this.dateRange = []
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.daysFlag=false
|
|
|
+ this.dateRange=[]
|
|
|
}
|
|
|
+
|
|
|
},
|
|
|
|
|
|
//弹出框打开,自定义列
|
|
@@ -306,10 +502,13 @@ export default {
|
|
|
// this.visible = false;
|
|
|
// this.loading = false;
|
|
|
// }, 1000);
|
|
|
- if (this.listNum.length > 12) {
|
|
|
- this.scrollX = (this.listNum.length - 12) * 500
|
|
|
- // console.log(this.$refs.vSummaryTable)
|
|
|
- } else {
|
|
|
+ if (this.listNum.length > 8 && this.listNum.length<15 ) {
|
|
|
+ this.scrollX = (this.listNum.length - 8) * 1000
|
|
|
+ console.log(this.$refs.vSummaryTable)
|
|
|
+ } else if(this.listNum.length >= 15){
|
|
|
+ this.scrollX = (this.listNum.length - 12) * 700
|
|
|
+
|
|
|
+ }else{
|
|
|
this.scrollX = 0
|
|
|
}
|
|
|
|
|
@@ -319,9 +518,9 @@ export default {
|
|
|
})
|
|
|
} else {
|
|
|
this.columns.map((item, index) => {
|
|
|
- if (index < 2) {
|
|
|
+ if (index == 1) {
|
|
|
item.width = 150
|
|
|
- } else if (index > 2 && index < 6) {
|
|
|
+ } else if (index > 2 && index < 4 && index == 0) {
|
|
|
item.width = 100
|
|
|
}
|
|
|
})
|
|
@@ -340,8 +539,7 @@ export default {
|
|
|
//清空全部按钮的事件
|
|
|
clearAllList() {
|
|
|
this.listNum = [...columnsFixd]
|
|
|
- this.scrollX = 0
|
|
|
- console.log(this.listNum)
|
|
|
+
|
|
|
console.log(this.$refs.vSummaryTable)
|
|
|
},
|
|
|
|
|
@@ -353,22 +551,114 @@ export default {
|
|
|
},
|
|
|
|
|
|
//表格里的操作 打开明细
|
|
|
- handleChange(e) {
|
|
|
- const value = e.target.value
|
|
|
- this.value = value
|
|
|
+
|
|
|
+ showModal() {
|
|
|
+ this.visibleDetail = true
|
|
|
},
|
|
|
- check() {
|
|
|
- this.editable = false
|
|
|
- this.$emit('change', this.value)
|
|
|
+
|
|
|
+
|
|
|
+ //从自定义列拿选择的项
|
|
|
+ getshowlist(val) {
|
|
|
+ console.log(val)
|
|
|
+ if (val.length) {
|
|
|
+ console.log(val);
|
|
|
+ this.listNum = [...this.listNum,...val]
|
|
|
+
|
|
|
+ } else {
|
|
|
+ var arr
|
|
|
+ arr = this.listNum.filter((item, index) => {
|
|
|
+ return item.dataIndex == val.dataIndex
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (arr.length > 0) {
|
|
|
+
|
|
|
+ var index
|
|
|
+ this.listNum.map((item,ind) => {
|
|
|
+ if(item.dataIndex == val.dataIndex){
|
|
|
+ index=ind
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ console.log(index)
|
|
|
+ this.listNum.splice(index, 1)
|
|
|
+ } else {
|
|
|
+ this.listNum.push(val)
|
|
|
+ }
|
|
|
},
|
|
|
- edit() {
|
|
|
- this.editable = true
|
|
|
+
|
|
|
+ //点击查看明细按钮的事件
|
|
|
+ opendetail(text, record) {
|
|
|
+ console.log(text, record)
|
|
|
+ this.visibleDetail = true
|
|
|
+ this.detailData = []
|
|
|
+
|
|
|
+ this.signature=record.signature
|
|
|
+ console.log(this.signature)
|
|
|
+ postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListDetail', {
|
|
|
+ startDate: this.timedata[0],
|
|
|
+ endDate: this.timedata[1],
|
|
|
+ signature: record.signature
|
|
|
+ }).then(res => {
|
|
|
+ let resArr = []
|
|
|
+
|
|
|
+ console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+ let result = res.result
|
|
|
+ this.detailData.push({ ...result, key: 1 })
|
|
|
+ result.map((item, index) => {
|
|
|
+ item.key = index
|
|
|
+ })
|
|
|
+ this.detailData = result
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
activated() {
|
|
|
+ console.log('activated')
|
|
|
// this.getParticipateList()
|
|
|
this.statDate = moment().subtract(1, 'day')
|
|
|
moment().format('YYYY-MM-DD_HH:mm')
|
|
|
+
|
|
|
+ postAction('/toutiao/videoReportDaily/getColumnJson', {
|
|
|
+ columnType:3,
|
|
|
+ }).then((res)=>{
|
|
|
+ // console.log(res)
|
|
|
+ if(res.success){
|
|
|
+ // console.log(JSON.parse(res.result))
|
|
|
+ let columns=JSON.parse(res.result)
|
|
|
+ if(columns.length){
|
|
|
+ columns.map((item,index)=>{
|
|
|
+ item.sorter=function(a,b){ return a[item.dataIndex]-b[item.dataIndex]}
|
|
|
+ })
|
|
|
+ this.columns=columns
|
|
|
+ // console.log(this.columns)
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ deactivated() {
|
|
|
+ let arr = JSON.stringify(this.columns)
|
|
|
+ // console.log(arr)
|
|
|
+ postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
|
|
|
+ json: arr,
|
|
|
+ columnType: 3
|
|
|
+ }).then(res => {
|
|
|
+ // console.log(res)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ filters: {
|
|
|
+ toPercentage(val) {
|
|
|
+ return (val * 100).toFixed(2) + '%'
|
|
|
+ // return val
|
|
|
+ },
|
|
|
+ toshowTime(val) {
|
|
|
+ // console.log(val, this.timedata)
|
|
|
+ // return this.timedata[0] + '~' + this.timedata[1]
|
|
|
+ return val
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -442,37 +732,29 @@ span {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.detailTable {
|
|
|
- width: 100%-2px;
|
|
|
- border: 1px solid #ccc;
|
|
|
- overflow: hidden;
|
|
|
- p {
|
|
|
- width: 20%;
|
|
|
- background: rgb(248, 248, 248);
|
|
|
- padding: 5px;
|
|
|
- text-align: center;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- .left {
|
|
|
- float: left;
|
|
|
- .kehu {
|
|
|
- float: left;
|
|
|
- }
|
|
|
- .videolink {
|
|
|
- float: left;
|
|
|
- }
|
|
|
- }
|
|
|
- .right {
|
|
|
- float: left;
|
|
|
- .detailUL {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- list-style: none;
|
|
|
- li {
|
|
|
- float: left;
|
|
|
- width: 33.3%;
|
|
|
+.addlist {
|
|
|
+ float: left;
|
|
|
+ width: 70%;
|
|
|
+ border: 1px solid #eee;
|
|
|
+ .selectionList {
|
|
|
+ padding: 10px 15px;
|
|
|
+ height: 450px;
|
|
|
+ overflow: auto;
|
|
|
+ .leibie {
|
|
|
+ .leiName {
|
|
|
+ font-size: 26px;
|
|
|
+ text-align: left;
|
|
|
}
|
|
|
}
|
|
|
+ .jutixiang {
|
|
|
+ display: inline-block;
|
|
|
+ width: 32%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px 3px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+#mybtn {
|
|
|
+ margin: 0 10px 15px 0;
|
|
|
+}
|
|
|
</style>
|