|
@@ -40,7 +40,7 @@
|
|
<p>可添加的列</p>
|
|
<p>可添加的列</p>
|
|
<div class="selectionList">
|
|
<div class="selectionList">
|
|
<!-- v-for="(item,index) in addColumns" :key="index" -->
|
|
<!-- v-for="(item,index) in addColumns" :key="index" -->
|
|
- <selectComponent :showCol="listNum" @getshowlist="getshowlist" />
|
|
|
|
|
|
+ <selectComponent :showCol="listNum" @getshowlist="getshowlist" :fixedColLength='columnsFixd.length' />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="listNum">
|
|
<div class="listNum">
|
|
@@ -50,11 +50,11 @@
|
|
<li v-for="(item,index) in listNum" :key="index">
|
|
<li v-for="(item,index) in listNum" :key="index">
|
|
<span v-if=" index <4">
|
|
<span v-if=" index <4">
|
|
<a-icon type="lock" />
|
|
<a-icon type="lock" />
|
|
- <span>{{item.title}}</span>
|
|
|
|
|
|
+ <span class="listText">{{item.title}}</span>
|
|
</span>
|
|
</span>
|
|
<span v-else-if=" index >3">
|
|
<span v-else-if=" index >3">
|
|
<a-icon type="menu" style="color:#ccc" />
|
|
<a-icon type="menu" style="color:#ccc" />
|
|
- <span>{{item.title}}</span>
|
|
|
|
|
|
+ <span class="listText">{{item.title}}</span>
|
|
<a-icon
|
|
<a-icon
|
|
type="close"
|
|
type="close"
|
|
@click="deleteCol(item,index)"
|
|
@click="deleteCol(item,index)"
|
|
@@ -80,13 +80,7 @@
|
|
ref="vSummaryTable"
|
|
ref="vSummaryTable"
|
|
>
|
|
>
|
|
<div slot="videoU" slot-scope="test,records">
|
|
<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>
|
|
|
|
|
|
+ <img :src="records.url+'?x-oss-process=video/snapshot,t_0,m_fast'" alt="" style="width:140px" @click="openVideo(records.url)">
|
|
</div>
|
|
</div>
|
|
<span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
|
|
<span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
|
|
<span
|
|
<span
|
|
@@ -110,6 +104,7 @@
|
|
<span slot="downloadFinishCost" slot-scope="downloadFinishCost">{{ downloadFinishCost | tofixed }}</span>
|
|
<span slot="downloadFinishCost" slot-scope="downloadFinishCost">{{ downloadFinishCost | tofixed }}</span>
|
|
<span slot="downloadStartCost" slot-scope="downloadStartCost">{{ downloadStartCost | tofixed }}</span>
|
|
<span slot="downloadStartCost" slot-scope="downloadStartCost">{{ downloadStartCost | tofixed }}</span>
|
|
<span slot="installFinishCost" slot-scope="installFinishCost">{{ installFinishCost | tofixed }}</span>
|
|
<span slot="installFinishCost" slot-scope="installFinishCost">{{ installFinishCost | tofixed }}</span>
|
|
|
|
+ <span slot="convertCost" slot-scope="convertCost">{{ convertCost | tofixed }}</span>
|
|
|
|
|
|
<!-- -->
|
|
<!-- -->
|
|
<span
|
|
<span
|
|
@@ -133,6 +128,16 @@
|
|
<span slot="cpm" slot-scope="cpm">{{ cpm | tofixed }}</span>
|
|
<span slot="cpm" slot-scope="cpm">{{ cpm | tofixed }}</span>
|
|
<span slot="statDatetime" slot-scope>{{ timedata[0]+'~'+timedata[1]}}</span>
|
|
<span slot="statDatetime" slot-scope>{{ timedata[0]+'~'+timedata[1]}}</span>
|
|
</a-table>
|
|
</a-table>
|
|
|
|
+
|
|
|
|
+ <a-modal v-model="Videovisible" title="视频详情" @ok="videoOk" :footer="null" width='50%'>
|
|
|
|
+ <video
|
|
|
|
+ @click.stop
|
|
|
|
+ class="video"
|
|
|
|
+ :src="videoUrl"
|
|
|
|
+ controls="controls"
|
|
|
|
+ style="height:600px;width:100%"
|
|
|
|
+ >您的浏览器不支持 video 标签。</video>
|
|
|
|
+ </a-modal>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -163,7 +168,7 @@ const columnsFixd = [
|
|
title: '视频链接',
|
|
title: '视频链接',
|
|
dataIndex: 'url',
|
|
dataIndex: 'url',
|
|
align: 'center',
|
|
align: 'center',
|
|
- width: 100,
|
|
|
|
|
|
+ width: 150,
|
|
fixed: 'left'
|
|
fixed: 'left'
|
|
},
|
|
},
|
|
|
|
|
|
@@ -179,6 +184,7 @@ let variableCol = [
|
|
{
|
|
{
|
|
title: '消耗',
|
|
title: '消耗',
|
|
dataIndex: 'cost',
|
|
dataIndex: 'cost',
|
|
|
|
+
|
|
scopedSlots: { customRender: 'cost' },
|
|
scopedSlots: { customRender: 'cost' },
|
|
align: 'center',
|
|
align: 'center',
|
|
sorter: (a, b) => a.cost - b.cost
|
|
sorter: (a, b) => a.cost - b.cost
|
|
@@ -187,6 +193,7 @@ let variableCol = [
|
|
title: '点击数',
|
|
title: '点击数',
|
|
dataIndex: 'clickMaterial',
|
|
dataIndex: 'clickMaterial',
|
|
align: 'center',
|
|
align: 'center',
|
|
|
|
+
|
|
scopedSlots: { customRender: 'clickMaterial' },
|
|
scopedSlots: { customRender: 'clickMaterial' },
|
|
sorter: (a, b) => a.clickMaterial - b.clickMaterial
|
|
sorter: (a, b) => a.clickMaterial - b.clickMaterial
|
|
},
|
|
},
|
|
@@ -194,7 +201,7 @@ let variableCol = [
|
|
title: '点击率',
|
|
title: '点击率',
|
|
dataIndex: 'ctr',
|
|
dataIndex: 'ctr',
|
|
align: 'center',
|
|
align: 'center',
|
|
- width: 100,
|
|
|
|
|
|
+
|
|
scopedSlots: { customRender: 'ctr' },
|
|
scopedSlots: { customRender: 'ctr' },
|
|
sorter: (a, b) => a.ctr - b.ctr
|
|
sorter: (a, b) => a.ctr - b.ctr
|
|
},
|
|
},
|
|
@@ -203,6 +210,7 @@ let variableCol = [
|
|
title: '展示数',
|
|
title: '展示数',
|
|
dataIndex: 'showMaterial',
|
|
dataIndex: 'showMaterial',
|
|
align: 'center',
|
|
align: 'center',
|
|
|
|
+
|
|
scopedSlots: { customRender: 'showMaterial' },
|
|
scopedSlots: { customRender: 'showMaterial' },
|
|
sorter: (a, b) => a.showMaterial - b.showMaterial
|
|
sorter: (a, b) => a.showMaterial - b.showMaterial
|
|
},
|
|
},
|
|
@@ -210,15 +218,15 @@ let variableCol = [
|
|
title: '25%进度播放率',
|
|
title: '25%进度播放率',
|
|
dataIndex: 'play25FeedBreakRate',
|
|
dataIndex: 'play25FeedBreakRate',
|
|
align: 'center',
|
|
align: 'center',
|
|
- width:160,
|
|
|
|
|
|
+
|
|
scopedSlots: { customRender: 'play25FeedBreakRate' },
|
|
scopedSlots: { customRender: 'play25FeedBreakRate' },
|
|
sorter: (a, b) => a.play25FeedBreakRate - b.play25FeedBreakRate
|
|
sorter: (a, b) => a.play25FeedBreakRate - b.play25FeedBreakRate
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: '整体完播率',
|
|
|
|
|
|
+ title: '播完率',
|
|
dataIndex: 'playOverRate',
|
|
dataIndex: 'playOverRate',
|
|
align: 'center',
|
|
align: 'center',
|
|
- width:110,
|
|
|
|
|
|
+
|
|
tip: '表示广告在投放期内的预估花费金额。当天数据可能会有波动,次日稳定',
|
|
tip: '表示广告在投放期内的预估花费金额。当天数据可能会有波动,次日稳定',
|
|
scopedSlots: { customRender: 'playOverRate' },
|
|
scopedSlots: { customRender: 'playOverRate' },
|
|
sorter: (a, b) => a.playOverRate - b.playOverRate
|
|
sorter: (a, b) => a.playOverRate - b.playOverRate
|
|
@@ -227,6 +235,7 @@ let variableCol = [
|
|
title: '转化数',
|
|
title: '转化数',
|
|
dataIndex: 'convertMaterial',
|
|
dataIndex: 'convertMaterial',
|
|
align: 'center',
|
|
align: 'center',
|
|
|
|
+
|
|
scopedSlots: { customRender: 'convertMaterial' },
|
|
scopedSlots: { customRender: 'convertMaterial' },
|
|
sorter: (a, b) => a.convertMaterial - b.convertMaterial
|
|
sorter: (a, b) => a.convertMaterial - b.convertMaterial
|
|
},
|
|
},
|
|
@@ -234,6 +243,7 @@ let variableCol = [
|
|
title: '转化率',
|
|
title: '转化率',
|
|
dataIndex: 'convertRate',
|
|
dataIndex: 'convertRate',
|
|
align: 'center',
|
|
align: 'center',
|
|
|
|
+
|
|
scopedSlots: { customRender: 'convertRate' },
|
|
scopedSlots: { customRender: 'convertRate' },
|
|
sorter: (a, b) => a.convertRate - b.convertRate
|
|
sorter: (a, b) => a.convertRate - b.convertRate
|
|
}
|
|
}
|
|
@@ -242,6 +252,12 @@ let variableCol = [
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ //gudinglie
|
|
|
|
+ columnsFixd:columnsFixd,
|
|
|
|
+
|
|
|
|
+ //是否打开视频
|
|
|
|
+ Videovisible:false,
|
|
|
|
+ videoUrl:'',
|
|
|
|
|
|
//是否显示导出按钮
|
|
//是否显示导出按钮
|
|
exportExcelIsOk:true,
|
|
exportExcelIsOk:true,
|
|
@@ -273,6 +289,15 @@ export default {
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
moment,
|
|
moment,
|
|
|
|
+ //打开视频
|
|
|
|
+ openVideo(val){
|
|
|
|
+ this.Videovisible=true;
|
|
|
|
+ this.videoUrl=val
|
|
|
|
+ },
|
|
|
|
+ videoOk(){
|
|
|
|
+ this.Videovisible=false
|
|
|
|
+ },
|
|
|
|
+
|
|
disabledDate(current) {
|
|
disabledDate(current) {
|
|
// console.log(current)
|
|
// console.log(current)
|
|
|
|
|
|
@@ -343,16 +368,22 @@ export default {
|
|
|
|
|
|
//日期选择回调
|
|
//日期选择回调
|
|
dateChange(data, dataString) {
|
|
dateChange(data, dataString) {
|
|
- this.timedata = 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 = []
|
|
|
|
|
|
+ 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 > 92) {
|
|
|
|
+ this.$message.error('时间跨度太长啦,选小一点好嘛?')
|
|
|
|
+ this.daysFlag = false
|
|
|
|
+ this.dateRange = []
|
|
|
|
+ }
|
|
|
|
+ }else{
|
|
|
|
+ this.daysFlag=false
|
|
|
|
+ this.dateRange=[]
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+
|
|
},
|
|
},
|
|
|
|
|
|
//弹出框打开,自定义列
|
|
//弹出框打开,自定义列
|
|
@@ -365,16 +396,21 @@ export default {
|
|
this.loading = false
|
|
this.loading = false
|
|
this.columns = [...this.listNum]
|
|
this.columns = [...this.listNum]
|
|
this.visible = false
|
|
this.visible = false
|
|
- // setTimeout(() => {
|
|
|
|
- // this.visible = false;
|
|
|
|
- // this.loading = false;
|
|
|
|
- // }, 1000);
|
|
|
|
- if (this.listNum.length > 12 && this.listNum.length<15 ) {
|
|
|
|
- this.scrollX = (this.listNum.length - 12) * 1000
|
|
|
|
|
|
+
|
|
|
|
+ // console.log(this.columns)
|
|
|
|
+
|
|
|
|
+ if (this.listNum.length > 12 && this.listNum.length<=13 ) {
|
|
|
|
+ this.scrollX =1900
|
|
console.log(this.$refs.vSummaryTable)
|
|
console.log(this.$refs.vSummaryTable)
|
|
- } else if(this.listNum.length >= 15){
|
|
|
|
- this.scrollX = (this.listNum.length - 12) * 700
|
|
|
|
-
|
|
|
|
|
|
+ }
|
|
|
|
+ else if(this.listNum.length > 13 && this.listNum.length<=15){
|
|
|
|
+ this.scrollX = (this.listNum.length - 12) * 1000
|
|
|
|
+ }
|
|
|
|
+ else if(this.listNum.length >15 && this.listNum.length<=17){
|
|
|
|
+ this.scrollX = (this.listNum.length - 12) * 600
|
|
|
|
+ }
|
|
|
|
+ else if(this.listNum.length >=18){
|
|
|
|
+ this.scrollX = (this.listNum.length - 12) * 400
|
|
}else{
|
|
}else{
|
|
this.scrollX = 0
|
|
this.scrollX = 0
|
|
}
|
|
}
|
|
@@ -497,7 +533,7 @@ export default {
|
|
if(res.success){
|
|
if(res.success){
|
|
// console.log(JSON.parse(res.result))
|
|
// console.log(JSON.parse(res.result))
|
|
let columns=JSON.parse(res.result)
|
|
let columns=JSON.parse(res.result)
|
|
- if(columns.length){
|
|
|
|
|
|
+ if(columns.length){
|
|
columns.map((item,index)=>{
|
|
columns.map((item,index)=>{
|
|
if(index>columnsFixd.length-1){
|
|
if(index>columnsFixd.length-1){
|
|
item.sorter=function(a,b){ return a[item.dataIndex]-b[item.dataIndex]}
|
|
item.sorter=function(a,b){ return a[item.dataIndex]-b[item.dataIndex]}
|
|
@@ -515,6 +551,7 @@ export default {
|
|
postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
|
|
postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
|
|
json: arr,
|
|
json: arr,
|
|
columnType: 1
|
|
columnType: 1
|
|
|
|
+
|
|
}).then(res => {
|
|
}).then(res => {
|
|
// console.log(res)
|
|
// console.log(res)
|
|
})
|
|
})
|
|
@@ -531,7 +568,7 @@ export default {
|
|
return val
|
|
return val
|
|
},
|
|
},
|
|
tofixed(val){
|
|
tofixed(val){
|
|
- return val.toFixed(2)
|
|
|
|
|
|
+ return Number(val).toFixed(2)
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
@@ -615,24 +652,40 @@ span {
|
|
top: 5px;
|
|
top: 5px;
|
|
}
|
|
}
|
|
.selectlist {
|
|
.selectlist {
|
|
|
|
+ width:100%;
|
|
list-style: none;
|
|
list-style: none;
|
|
margin: 0;
|
|
margin: 0;
|
|
height: 450px;
|
|
height: 450px;
|
|
padding: 0 15px 10px;
|
|
padding: 0 15px 10px;
|
|
overflow: auto;
|
|
overflow: auto;
|
|
|
|
+
|
|
li {
|
|
li {
|
|
|
|
+ width: 100%;
|
|
padding: 5px 8px;
|
|
padding: 5px 8px;
|
|
margin: 6px 0;
|
|
margin: 6px 0;
|
|
border-radius: 10px;
|
|
border-radius: 10px;
|
|
background: rgb(248, 248, 248);
|
|
background: rgb(248, 248, 248);
|
|
|
|
+ height: 32px;
|
|
position: relative;
|
|
position: relative;
|
|
span {
|
|
span {
|
|
|
|
+ width: 80%;
|
|
|
|
+ height: 100%;
|
|
display: inline-block;
|
|
display: inline-block;
|
|
margin: 0 10px;
|
|
margin: 0 10px;
|
|
// overflow:hidden;
|
|
// overflow:hidden;
|
|
// text-overflow:ellipsis;
|
|
// text-overflow:ellipsis;
|
|
// white-space: nowrap;
|
|
// white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
+ .listText{
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 2;
|
|
|
|
+ left: 10;
|
|
|
|
+ width: 40%;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+
|
|
|
|
+ }
|
|
#closeStyle {
|
|
#closeStyle {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 9px;
|
|
top: 9px;
|