|
@@ -1,35 +1,35 @@
|
|
<template>
|
|
<template>
|
|
<div class="homePage">
|
|
<div class="homePage">
|
|
- <div class="topBox">
|
|
|
|
|
|
+ <div >
|
|
<a-row :gutter="16">
|
|
<a-row :gutter="16">
|
|
- <a-col :sm="24" :md="6" :xl="6" :xxl="6">
|
|
|
|
|
|
+ <a-col :sm="24" :md="12" :xl="6" :xxl="6" class="topBox">
|
|
<div class="showBox">
|
|
<div class="showBox">
|
|
- <h2 class="title">
|
|
|
|
|
|
+ <div class="title">
|
|
Top7项目消耗
|
|
Top7项目消耗
|
|
<a-tooltip>
|
|
<a-tooltip>
|
|
<template slot="title">最近七天的top7项目消耗</template>
|
|
<template slot="title">最近七天的top7项目消耗</template>
|
|
- <span>
|
|
|
|
|
|
+ <span class="icon">
|
|
<a-icon type="exclamation-circle" />
|
|
<a-icon type="exclamation-circle" />
|
|
</span>
|
|
</span>
|
|
</a-tooltip>
|
|
</a-tooltip>
|
|
- </h2>
|
|
|
|
- <div id="topChart" style="width:100%;height:130px" ref="topChart"></div>
|
|
|
|
- <div class="footerInfo">TOP1项目消耗数:¥{{this.topOption.series[0].data[0]}}</div>
|
|
|
|
|
|
+ </div>
|
|
|
|
+ <div id="topChart" style="width:100%;height:100px" ref="topChart"></div>
|
|
|
|
+ <div class="footerInfo">TOP1消耗数: <span class="num">¥{{this.topOption.series[0].data[0] | decimalsHandle}}</span> </div>
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
</a-col>
|
|
- <a-col :sm="24" :md="6" :xl="6" :xxl="6">
|
|
|
|
|
|
+ <a-col :sm="24" :md="12" :xl="6" :xxl="6" class="topBox">
|
|
<div class="showBox">
|
|
<div class="showBox">
|
|
- <h2 class="title">
|
|
|
|
|
|
+ <div class="title">
|
|
总消耗
|
|
总消耗
|
|
- <p class="numshow">¥{{cost.weekCostSum}}</p>
|
|
|
|
|
|
+ <p class="numshow">¥{{cost.weekCostSum | decimalsHandle}}</p>
|
|
<a-tooltip>
|
|
<a-tooltip>
|
|
<template slot="title">最近七天的总消耗</template>
|
|
<template slot="title">最近七天的总消耗</template>
|
|
<span>
|
|
<span>
|
|
<a-icon type="exclamation-circle" />
|
|
<a-icon type="exclamation-circle" />
|
|
</span>
|
|
</span>
|
|
</a-tooltip>
|
|
</a-tooltip>
|
|
- </h2>
|
|
|
|
- <div id="costChart" style="width:100%;height:100px" ref="costChart"></div>
|
|
|
|
|
|
+ </div>
|
|
|
|
+ <div id="costChart" style="width:100%;height:70px" ref="costChart"></div>
|
|
<div class="footerInfo">
|
|
<div class="footerInfo">
|
|
周同比
|
|
周同比
|
|
<span class="num">
|
|
<span class="num">
|
|
@@ -43,19 +43,19 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
</a-col>
|
|
- <a-col :sm="24" :md="6" :xl="6" :xxl="6">
|
|
|
|
|
|
+ <a-col :sm="24" :md="12" :xl="6" :xxl="6" class="topBox">
|
|
<div class="showBox">
|
|
<div class="showBox">
|
|
- <h2 class="title">
|
|
|
|
|
|
+ <div class="title">
|
|
点击数
|
|
点击数
|
|
- <p class="numshow">{{click.weekClickSum}}</p>
|
|
|
|
|
|
+ <p class="numshow">{{click.weekClickSum | formatCurrency}}</p>
|
|
<a-tooltip>
|
|
<a-tooltip>
|
|
<template slot="title">最近七天的点击数</template>
|
|
<template slot="title">最近七天的点击数</template>
|
|
<span>
|
|
<span>
|
|
<a-icon type="exclamation-circle" />
|
|
<a-icon type="exclamation-circle" />
|
|
</span>
|
|
</span>
|
|
</a-tooltip>
|
|
</a-tooltip>
|
|
- </h2>
|
|
|
|
- <div id="clickChart" style="width:100%;height:100px" ref="clickChart"></div>
|
|
|
|
|
|
+ </div>
|
|
|
|
+ <div id="clickChart" style="width:100%;height:70px" ref="clickChart"></div>
|
|
<div class="footerInfo">
|
|
<div class="footerInfo">
|
|
周同比
|
|
周同比
|
|
<span class="num">
|
|
<span class="num">
|
|
@@ -69,19 +69,19 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
</a-col>
|
|
- <a-col :sm="24" :md="6" :xl="6" :xxl="6">
|
|
|
|
|
|
+ <a-col :sm="24" :md="12" :xl="6" :xxl="6" class="topBox">
|
|
<div class="showBox">
|
|
<div class="showBox">
|
|
- <h2 class="title">
|
|
|
|
|
|
+ <div class="title">
|
|
展示数
|
|
展示数
|
|
- <p class="numshow">{{showNum.weekShowNumSum}}</p>
|
|
|
|
|
|
+ <p class="numshow">{{showNum.weekShowNumSum | formatCurrency}}</p>
|
|
<a-tooltip>
|
|
<a-tooltip>
|
|
<template slot="title">最近七天的展示数</template>
|
|
<template slot="title">最近七天的展示数</template>
|
|
<span>
|
|
<span>
|
|
<a-icon type="exclamation-circle" />
|
|
<a-icon type="exclamation-circle" />
|
|
</span>
|
|
</span>
|
|
</a-tooltip>
|
|
</a-tooltip>
|
|
- </h2>
|
|
|
|
- <div id="showChart" style="width:100%;height:100px" ref="showChart"></div>
|
|
|
|
|
|
+ </div>
|
|
|
|
+ <div id="showChart" style="width:100%;height:70px" ref="showChart"></div>
|
|
<div class="footerInfo">
|
|
<div class="footerInfo">
|
|
周同比
|
|
周同比
|
|
<span class="num">
|
|
<span class="num">
|
|
@@ -108,7 +108,7 @@
|
|
</a-tab-pane>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</a-tabs>
|
|
<div id="sectionChart" style='width:100%;height:300px' ref="sectionChart"></div>
|
|
<div id="sectionChart" style='width:100%;height:300px' ref="sectionChart"></div>
|
|
- <div class="duibi" @click="comparehandle">对比</div>
|
|
|
|
|
|
+ <a-button class="duibi" @click="comparehandle" type='default' >对比</a-button>
|
|
<div class="time" @click="opendate">
|
|
<div class="time" @click="opendate">
|
|
<DatePicker :openOptions='openOptions'/>
|
|
<DatePicker :openOptions='openOptions'/>
|
|
</div>
|
|
</div>
|
|
@@ -168,8 +168,8 @@ let option = {
|
|
},
|
|
},
|
|
grid: {
|
|
grid: {
|
|
left: '0%',
|
|
left: '0%',
|
|
- // right: '4%',
|
|
|
|
- bottom: '-10%',
|
|
|
|
|
|
+ right: '0%',
|
|
|
|
+ bottom: '0%',
|
|
top: '12%',
|
|
top: '12%',
|
|
containLabel: false,
|
|
containLabel: false,
|
|
|
|
|
|
@@ -178,7 +178,7 @@ let option = {
|
|
{
|
|
{
|
|
type: 'category',
|
|
type: 'category',
|
|
data: [],
|
|
data: [],
|
|
- show: false,
|
|
|
|
|
|
+ show: true,
|
|
|
|
|
|
axisTick: {
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
alignWithLabel: true
|
|
@@ -304,7 +304,7 @@ let columns = [
|
|
|
|
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: '消耗',
|
|
|
|
|
|
+ title: '消耗(元)',
|
|
dataIndex: 'cost',
|
|
dataIndex: 'cost',
|
|
scopedSlots: { customRender: 'cost' },
|
|
scopedSlots: { customRender: 'cost' },
|
|
align: 'center',
|
|
align: 'center',
|
|
@@ -342,14 +342,14 @@ let columns = [
|
|
key:"showNum"
|
|
key:"showNum"
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: '平均千次展现费用',
|
|
|
|
|
|
+ title: '平均千次展现费用(元)',
|
|
dataIndex: 'cpm',
|
|
dataIndex: 'cpm',
|
|
align: 'center',
|
|
align: 'center',
|
|
scopedSlots: { customRender: 'cpm' },
|
|
scopedSlots: { customRender: 'cpm' },
|
|
key:'cpm'
|
|
key:'cpm'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: '平均点击单价',
|
|
|
|
|
|
+ title: '平均点击单价(元)',
|
|
dataIndex: 'cp',
|
|
dataIndex: 'cp',
|
|
align: 'center',
|
|
align: 'center',
|
|
scopedSlots: { customRender: 'cp' },
|
|
scopedSlots: { customRender: 'cp' },
|
|
@@ -402,6 +402,7 @@ export default {
|
|
// console.log(this.type)
|
|
// console.log(this.type)
|
|
if(this.type<9){
|
|
if(this.type<9){
|
|
this.sectionHttp({type:this.type})
|
|
this.sectionHttp({type:this.type})
|
|
|
|
+
|
|
}else if(this.type==9){
|
|
}else if(this.type==9){
|
|
this.sectionHttp({
|
|
this.sectionHttp({
|
|
type:this.type,
|
|
type:this.type,
|
|
@@ -494,6 +495,7 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
});
|
|
});
|
|
|
|
+
|
|
this.sectionOption.legend.data=['今天','昨天'];
|
|
this.sectionOption.legend.data=['今天','昨天'];
|
|
this.sectionOption.xAxis[0].data=this.tabCost.today.x;
|
|
this.sectionOption.xAxis[0].data=this.tabCost.today.x;
|
|
this.sectionOption.series[0].data=this.tabCost.today.y;
|
|
this.sectionOption.series[0].data=this.tabCost.today.y;
|
|
@@ -519,25 +521,48 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
});
|
|
});
|
|
- this.sectionOption.xAxis[0].data=init.today.x;
|
|
|
|
- this.sectionOption.series[0].data=this.tabCost;
|
|
|
|
|
|
+ if(this.tabKey=='click'){
|
|
|
|
+ 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 if(this.tabKey=='showNum'){
|
|
|
|
+ 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.xAxis[0].data=init.today.x;
|
|
|
|
+ this.sectionOption.series[0].data=this.tabCost;
|
|
|
|
+ }
|
|
|
|
+
|
|
}else{
|
|
}else{
|
|
this.tabCost={x:[],y:[]}
|
|
this.tabCost={x:[],y:[]}
|
|
this.tabClick={x:[],y:[]}
|
|
this.tabClick={x:[],y:[]}
|
|
this.tabShowNum={x:[],y:[]}
|
|
this.tabShowNum={x:[],y:[]}
|
|
- res.result.chart.forEach((item,index)=>{
|
|
|
|
-
|
|
|
|
|
|
+ res.result.chart.forEach((item,index)=>{
|
|
this.tabClick.y.push(item.click)
|
|
this.tabClick.y.push(item.click)
|
|
this.tabCost.y.push(item.cost)
|
|
this.tabCost.y.push(item.cost)
|
|
this.tabShowNum.y.push(item.showNum)
|
|
this.tabShowNum.y.push(item.showNum)
|
|
this.tabClick.x.push(item.statDate)
|
|
this.tabClick.x.push(item.statDate)
|
|
this.tabCost.x.push(item.statDate)
|
|
this.tabCost.x.push(item.statDate)
|
|
- this.tabShowNum.x.push(item.statDate)
|
|
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+ this.tabShowNum.x.push(item.statDate)
|
|
});
|
|
});
|
|
- this.sectionOption.xAxis[0].data=this.tabCost.x;
|
|
|
|
- this.sectionOption.series[0].data=this.tabCost.y;
|
|
|
|
|
|
+ if(this.tabKey=='click'){
|
|
|
|
+ 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.tabKey=='showNum'){
|
|
|
|
+ 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='展示数';
|
|
|
|
+ }else{
|
|
|
|
+ this.sectionOption.xAxis[0].data=this.tabCost.x;
|
|
|
|
+ this.sectionOption.series[0].data=this.tabCost.y;
|
|
|
|
+ }
|
|
|
|
+
|
|
}
|
|
}
|
|
this.getEchartData('sectionChart', this.sectionOption);
|
|
this.getEchartData('sectionChart', this.sectionOption);
|
|
|
|
|
|
@@ -554,7 +579,7 @@ export default {
|
|
showNum:0
|
|
showNum:0
|
|
}
|
|
}
|
|
|
|
|
|
- res.result.list.forEach((ele)=>{
|
|
|
|
|
|
+ res.result.list.forEach((ele,index)=>{
|
|
if(!ele.costProportion){
|
|
if(!ele.costProportion){
|
|
ele.costProportion='-'
|
|
ele.costProportion='-'
|
|
}
|
|
}
|
|
@@ -562,6 +587,7 @@ export default {
|
|
ele.statHour=ele.statHour > 9 ? `${ele.statHour}:00` : ` 0${ele.statHour}:00`
|
|
ele.statHour=ele.statHour > 9 ? `${ele.statHour}:00` : ` 0${ele.statHour}:00`
|
|
ele.statDate=ele.statDate+' '+ele.statHour
|
|
ele.statDate=ele.statDate+' '+ele.statHour
|
|
}
|
|
}
|
|
|
|
+ ele.key=index+1
|
|
total.click+=ele.click
|
|
total.click+=ele.click
|
|
total.cost+=ele.cost
|
|
total.cost+=ele.cost
|
|
total.showNum+=ele.showNum
|
|
total.showNum+=ele.showNum
|
|
@@ -579,7 +605,7 @@ export default {
|
|
//tab切换页的事件
|
|
//tab切换页的事件
|
|
callback(key) {
|
|
callback(key) {
|
|
// console.log(key);
|
|
// console.log(key);
|
|
- // this.tabKey=key;
|
|
|
|
|
|
+ this.tabKey=key;
|
|
this.sectionOption=JSON.parse(JSON.stringify(sectionOption))
|
|
this.sectionOption=JSON.parse(JSON.stringify(sectionOption))
|
|
if(key=='cost'){
|
|
if(key=='cost'){
|
|
if(this.type==1){
|
|
if(this.type==1){
|
|
@@ -610,7 +636,7 @@ export default {
|
|
this.sectionOption.series[0].data=this.tabClick;
|
|
this.sectionOption.series[0].data=this.tabClick;
|
|
this.sectionOption.series[0].name='点击数';
|
|
this.sectionOption.series[0].name='点击数';
|
|
}else{
|
|
}else{
|
|
- this.sectionOption.legend.data=['点击数'];
|
|
|
|
|
|
+ this.sectionOption.legend.data=['点击数'];
|
|
this.sectionOption.xAxis[0].data=this.tabClick.x;
|
|
this.sectionOption.xAxis[0].data=this.tabClick.x;
|
|
this.sectionOption.series[0].data=this.tabClick.y;
|
|
this.sectionOption.series[0].data=this.tabClick.y;
|
|
this.sectionOption.series[0].name='点击数';
|
|
this.sectionOption.series[0].name='点击数';
|
|
@@ -688,6 +714,50 @@ export default {
|
|
return val
|
|
return val
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ },
|
|
|
|
+ //保留两位小数并且变成货币格式
|
|
|
|
+ decimalsHandle(val){
|
|
|
|
+ // console.log(val)
|
|
|
|
+ if(val){
|
|
|
|
+ val=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
|
|
|
|
+ }
|
|
|
|
+
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -696,24 +766,36 @@ export default {
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
.homePage {
|
|
.homePage {
|
|
.topBox{
|
|
.topBox{
|
|
- margin-bottom: 20px;;
|
|
|
|
|
|
+ margin-bottom: 20px;
|
|
}
|
|
}
|
|
.showBox {
|
|
.showBox {
|
|
width: 98%;
|
|
width: 98%;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
margin-right: 20px;
|
|
margin-right: 20px;
|
|
- padding: 25px;
|
|
|
|
|
|
+ padding: 25px 25px 0;
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
|
|
+
|
|
.title {
|
|
.title {
|
|
|
|
+ color: #999;
|
|
|
|
+ font-size: 16px;
|
|
position: relative;
|
|
position: relative;
|
|
span {
|
|
span {
|
|
|
|
+ font-size: 1rem;
|
|
|
|
+ // color: #1890ff;
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 0;
|
|
top: 0;
|
|
right: 0;
|
|
right: 0;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .num{
|
|
|
|
+ color: #000;
|
|
|
|
+ font-size: 16px;;
|
|
|
|
+ }
|
|
.numshow {
|
|
.numshow {
|
|
|
|
+ color:#333 ;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ font-size: 24px;
|
|
padding: 5px 0;
|
|
padding: 5px 0;
|
|
height: 30px;
|
|
height: 30px;
|
|
margin-bottom: 0;
|
|
margin-bottom: 0;
|
|
@@ -721,17 +803,22 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
.footerInfo {
|
|
.footerInfo {
|
|
- border-top: 1px solid #333;
|
|
|
|
- padding-top: 10px;
|
|
|
|
- font-weight: 500;
|
|
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+ border-top: 1px solid #eee;
|
|
|
|
+ padding: 10px 0;
|
|
|
|
+ color: #666;
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
position: relative;
|
|
position: relative;
|
|
- height: 60px;
|
|
|
|
|
|
+
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
.num {
|
|
.num {
|
|
display: inline-block;
|
|
display: inline-block;
|
|
margin-left: 10px;
|
|
margin-left: 10px;
|
|
padding-right: 15px;
|
|
padding-right: 15px;
|
|
position: relative;
|
|
position: relative;
|
|
|
|
+ font-weight: 500;
|
|
}
|
|
}
|
|
.greenIcon {
|
|
.greenIcon {
|
|
width: 0;
|
|
width: 0;
|
|
@@ -769,7 +856,7 @@ export default {
|
|
padding: 0 15px;
|
|
padding: 0 15px;
|
|
top: 15px;
|
|
top: 15px;
|
|
right: 300px;
|
|
right: 300px;
|
|
- border: 1px solid #666;
|
|
|
|
|
|
+ // border: 1px solid #666;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.time{
|
|
.time{
|
|
@@ -789,12 +876,13 @@ export default {
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
p{
|
|
p{
|
|
width: 100%;
|
|
width: 100%;
|
|
- border-bottom: 1px solid #666;
|
|
|
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
padding-bottom: 20px;
|
|
padding-bottom: 20px;
|
|
span{
|
|
span{
|
|
display: inline-block;
|
|
display: inline-block;
|
|
- border: 1px solid #666;
|
|
|
|
|
|
+ border: 1px solid #ccc;
|
|
padding: 5px 15px;
|
|
padding: 5px 15px;
|
|
|
|
+ border-radius: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|