|
@@ -1,35 +1,35 @@
|
|
|
<template>
|
|
|
<div class="homePage">
|
|
|
- <div class="topBox">
|
|
|
+ <div >
|
|
|
<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">
|
|
|
- <h2 class="title">
|
|
|
+ <div class="title">
|
|
|
Top7项目消耗
|
|
|
<a-tooltip>
|
|
|
<template slot="title">最近七天的top7项目消耗</template>
|
|
|
- <span>
|
|
|
+ <span class="icon">
|
|
|
<a-icon type="exclamation-circle" />
|
|
|
</span>
|
|
|
</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>
|
|
|
</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">
|
|
|
- <h2 class="title">
|
|
|
+ <div class="title">
|
|
|
总消耗
|
|
|
- <p class="numshow">¥{{cost.weekCostSum}}</p>
|
|
|
+ <p class="numshow">¥{{cost.weekCostSum | decimalsHandle}}</p>
|
|
|
<a-tooltip>
|
|
|
<template slot="title">最近七天的总消耗</template>
|
|
|
<span>
|
|
|
<a-icon type="exclamation-circle" />
|
|
|
</span>
|
|
|
</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">
|
|
|
周同比
|
|
|
<span class="num">
|
|
@@ -43,52 +43,52 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</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">
|
|
|
- <h2 class="title">
|
|
|
+ <div class="title">
|
|
|
点击数
|
|
|
- <p class="numshow">{{click.weekClickSum}}</p>
|
|
|
+ <p class="numshow">{{click.weekClickSum | formatCurrency}}</p>
|
|
|
<a-tooltip>
|
|
|
<template slot="title">最近七天的点击数</template>
|
|
|
<span>
|
|
|
<a-icon type="exclamation-circle" />
|
|
|
</span>
|
|
|
</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">
|
|
|
周同比
|
|
|
<span class="num">
|
|
|
{{click.weekClickSumLink|toPercentage}}
|
|
|
<span
|
|
|
class="greenIcon"
|
|
|
- v-if="cost.weekCostSumLink>0"
|
|
|
+ v-if="click.weekClickSumLink>0"
|
|
|
></span>
|
|
|
<span class="redIcon" v-else></span>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</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">
|
|
|
- <h2 class="title">
|
|
|
+ <div class="title">
|
|
|
展示数
|
|
|
- <p class="numshow">{{showNum.weekShowNumSum}}</p>
|
|
|
+ <p class="numshow">{{showNum.weekShowNumSum | formatCurrency}}</p>
|
|
|
<a-tooltip>
|
|
|
<template slot="title">最近七天的展示数</template>
|
|
|
<span>
|
|
|
<a-icon type="exclamation-circle" />
|
|
|
</span>
|
|
|
</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">
|
|
|
周同比
|
|
|
<span class="num">
|
|
|
{{showNum.weekShowNumSumLink | toPercentage}}
|
|
|
<span
|
|
|
class="greenIcon"
|
|
|
- v-if="cost.weekCostSumLink>0"
|
|
|
+ v-if="showNum.weekShowNumSumLink>0"
|
|
|
></span>
|
|
|
<span class="redIcon" v-else></span>
|
|
|
</span>
|
|
@@ -108,9 +108,9 @@
|
|
|
</a-tab-pane>
|
|
|
</a-tabs>
|
|
|
<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">
|
|
|
- <DatePicker :openOptions='openOptions' />
|
|
|
+ <DatePicker :openOptions='openOptions'/>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
@@ -122,26 +122,25 @@
|
|
|
size="middle"
|
|
|
:columns="columns"
|
|
|
:dataSource="tableData"
|
|
|
+ :pagination=false
|
|
|
bordered
|
|
|
- id="outTable"
|
|
|
-
|
|
|
+ id="outTable"
|
|
|
:loading="loading"
|
|
|
style="word-break: break-all;"
|
|
|
>
|
|
|
- <span slot="cpm" slot-scope="cpm">{{ cpm | tofixed }}</span>
|
|
|
- <span slot="statDatetime" slot-scope>{{ dateValue[0].format('YYYY-MM-DD')+'~'+dateValue[1].format('YYYY-MM-DD')}}</span>
|
|
|
+ <span slot="costProportion" slot-scope="costProportion">{{ costProportion | toPercentage }}</span>
|
|
|
+ <!-- <span slot="statDatetime" slot-scope>{{ dateValue[0].format('YYYY-MM-DD')+'~'+dateValue[1].format('YYYY-MM-DD')}}</span> -->
|
|
|
</a-table>
|
|
|
</div>
|
|
|
- <!-- /展示的对比数据的模态框 -->
|
|
|
- <a-modal v-model="compareVisiable" title="数据对比" @ok="handleOk" width='80%'>
|
|
|
-
|
|
|
- </a-modal>
|
|
|
+ <!-- <p class="footertip">我们是有底线的~</p> -->
|
|
|
+ <CompareData :compareVisiable.sync='compareVisiable' @close_modal='close_modal' ref="compareData"/>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import moment from 'moment'
|
|
|
import DatePicker from '@/components/DatePicker.vue'
|
|
|
+import CompareData from './CompareData.vue'
|
|
|
|
|
|
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
|
|
|
// import vueEchart from './components/vueEchart'
|
|
@@ -169,16 +168,18 @@ let option = {
|
|
|
},
|
|
|
grid: {
|
|
|
left: '0%',
|
|
|
- // right: '4%',
|
|
|
- bottom: '-10%',
|
|
|
+ right: '0%',
|
|
|
+ bottom: '0%',
|
|
|
top: '12%',
|
|
|
- containLabel: false
|
|
|
+ containLabel: false,
|
|
|
+
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: 'category',
|
|
|
data: [],
|
|
|
- show: false,
|
|
|
+ show: true,
|
|
|
+
|
|
|
axisTick: {
|
|
|
alignWithLabel: true
|
|
|
}
|
|
@@ -187,7 +188,7 @@ let option = {
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: 'value',
|
|
|
- show: true
|
|
|
+ show: false
|
|
|
}
|
|
|
],
|
|
|
series: [
|
|
@@ -196,14 +197,38 @@ let option = {
|
|
|
type: 'bar',
|
|
|
barWidth: '40%',
|
|
|
smooth: true,
|
|
|
- areaStyle: {
|
|
|
- color: '#1890ff'
|
|
|
+ areaStyle:{},
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0, 0, 0, 1,
|
|
|
+ [
|
|
|
+ {offset: 0, color: '#1890ff'},
|
|
|
+ {offset: 1, color: '#FFF'}
|
|
|
+ ]
|
|
|
+ )
|
|
|
},
|
|
|
data: []
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
|
|
|
+let lineStyle= {
|
|
|
+ color:{
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0, color: '#1890ff' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1, color: '#fff' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ },
|
|
|
+
|
|
|
+ // color: '#1890ff'
|
|
|
+}
|
|
|
let sectionOption={
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
@@ -275,13 +300,15 @@ let columns = [
|
|
|
dataIndex: 'statDate',
|
|
|
scopedSlots: { customRender: 'statDate' },
|
|
|
align: 'center',
|
|
|
+ key:'statDate'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
- title: '消耗',
|
|
|
+ title: '消耗(元)',
|
|
|
dataIndex: 'cost',
|
|
|
scopedSlots: { customRender: 'cost' },
|
|
|
align: 'center',
|
|
|
+ key:'cost'
|
|
|
|
|
|
},
|
|
|
{
|
|
@@ -289,50 +316,52 @@ let columns = [
|
|
|
dataIndex: 'costProportion',
|
|
|
scopedSlots: { customRender: 'costProportion' },
|
|
|
align: 'center',
|
|
|
+ key:"costProportion"
|
|
|
|
|
|
},
|
|
|
{
|
|
|
title: '点击数',
|
|
|
- dataIndex: 'clickMaterial',
|
|
|
+ dataIndex: 'click',
|
|
|
align: 'center',
|
|
|
- scopedSlots: { customRender: 'clickMaterial' },
|
|
|
-
|
|
|
+ scopedSlots: { customRender: 'click' },
|
|
|
+ key:'click'
|
|
|
},
|
|
|
{
|
|
|
title: '点击率',
|
|
|
- dataIndex: 'ctr',
|
|
|
+ dataIndex: 'clickRate',
|
|
|
align: 'center',
|
|
|
- scopedSlots: { customRender: 'ctr' },
|
|
|
-
|
|
|
+ scopedSlots: { customRender: 'clickRate' },
|
|
|
+ key:'clickRate'
|
|
|
},
|
|
|
|
|
|
{
|
|
|
title: '展示数',
|
|
|
- dataIndex: 'showMaterial',
|
|
|
+ dataIndex: 'showNum',
|
|
|
align: 'center',
|
|
|
- scopedSlots: { customRender: 'showMaterial' },
|
|
|
-
|
|
|
+ scopedSlots: { customRender: 'showNum' },
|
|
|
+ key:"showNum"
|
|
|
},
|
|
|
{
|
|
|
- title: '平均千次展现费用',
|
|
|
+ title: '平均千次展现费用(元)',
|
|
|
dataIndex: 'cpm',
|
|
|
align: 'center',
|
|
|
scopedSlots: { customRender: 'cpm' },
|
|
|
-
|
|
|
+ key:'cpm'
|
|
|
},
|
|
|
{
|
|
|
- title: '平均点击单价',
|
|
|
+ title: '平均点击单价(元)',
|
|
|
dataIndex: 'cp',
|
|
|
align: 'center',
|
|
|
scopedSlots: { customRender: 'cp' },
|
|
|
-
|
|
|
+ key:"cp"
|
|
|
},
|
|
|
|
|
|
]
|
|
|
export default {
|
|
|
|
|
|
components:{
|
|
|
- DatePicker
|
|
|
+ DatePicker,
|
|
|
+ CompareData
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
@@ -351,9 +380,9 @@ export default {
|
|
|
tabCost:{},
|
|
|
tabClick:{},
|
|
|
tabShowNum:{},
|
|
|
- //对比的模态框
|
|
|
+ //对比的模态框
|
|
|
compareVisiable:false,
|
|
|
- compareSign:'day',
|
|
|
+
|
|
|
//table
|
|
|
loading: false,
|
|
|
columns,
|
|
@@ -370,21 +399,15 @@ export default {
|
|
|
watch:{
|
|
|
type(n,o){
|
|
|
// console.log(n,o)
|
|
|
- console.log(this.type)
|
|
|
+ // 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],
|
|
|
- endDate:this.dateValue[1]
|
|
|
- })
|
|
|
- }else if(this.type==10){
|
|
|
- this.sectionHttp({
|
|
|
- type:this.type,
|
|
|
- startDate:this.dateValue[0],
|
|
|
- endDate:this.dateValue[1],
|
|
|
- sign:this.compareSign
|
|
|
+ startDate:this.dateValue[0].format('YYYY-MM-DD'),
|
|
|
+ endDate:this.dateValue[1].format('YYYY-MM-DD')
|
|
|
})
|
|
|
}
|
|
|
},
|
|
@@ -446,9 +469,10 @@ export default {
|
|
|
//处理echart
|
|
|
sectionHttp(params) {
|
|
|
this.loading = true
|
|
|
+ this.sectionOption=JSON.parse(JSON.stringify(sectionOption));
|
|
|
return new Promise((resolve, reject) => {
|
|
|
postAction('/ctop/byteDance/homePage/report/chart', params).then(res => {
|
|
|
- console.log(res)
|
|
|
+ // console.log(res)
|
|
|
if (res.success) {
|
|
|
this.loading = false
|
|
|
//处理今天
|
|
@@ -471,6 +495,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
});
|
|
|
+
|
|
|
this.sectionOption.legend.data=['今天','昨天'];
|
|
|
this.sectionOption.xAxis[0].data=this.tabCost.today.x;
|
|
|
this.sectionOption.series[0].data=this.tabCost.today.y;
|
|
@@ -496,27 +521,82 @@ 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{
|
|
|
this.tabCost={x:[],y:[]}
|
|
|
this.tabClick={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.tabCost.y.push(item.cost)
|
|
|
this.tabShowNum.y.push(item.showNum)
|
|
|
this.tabClick.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);
|
|
|
+
|
|
|
+
|
|
|
+ //处理表格数据
|
|
|
+ let total={
|
|
|
+ statDate:'总计',
|
|
|
+ cost:0,
|
|
|
+ click:0,
|
|
|
+ clickRate:0,
|
|
|
+ costProportion:'-',
|
|
|
+ cp:0,
|
|
|
+ cpm:0,
|
|
|
+ showNum:0
|
|
|
+ }
|
|
|
+
|
|
|
+ res.result.list.forEach((ele,index)=>{
|
|
|
+ if(!ele.costProportion){
|
|
|
+ ele.costProportion='-'
|
|
|
+ }
|
|
|
+ if(ele.statHour||ele.statHour==0){
|
|
|
+ ele.statHour=ele.statHour > 9 ? `${ele.statHour}:00` : ` 0${ele.statHour}:00`
|
|
|
+ ele.statDate=ele.statDate+' '+ele.statHour
|
|
|
+ }
|
|
|
+ ele.key=index+1
|
|
|
+ total.click+=ele.click
|
|
|
+ total.cost+=ele.cost
|
|
|
+ total.showNum+=ele.showNum
|
|
|
+ })
|
|
|
+ total.cost=(total.cost).toFixed(2)
|
|
|
+ total.clickRate=(total.click/total.showNum*100).toFixed(2)+'%'
|
|
|
+ total.cp=(total.cost/total.click).toFixed(2)
|
|
|
+ total.cpm=(total.cost/total.showNum*1000).toFixed(2)
|
|
|
+ this.tableData=[total,...res.result.list]
|
|
|
}
|
|
|
})
|
|
|
})
|
|
@@ -525,7 +605,7 @@ export default {
|
|
|
//tab切换页的事件
|
|
|
callback(key) {
|
|
|
// console.log(key);
|
|
|
- // this.tabKey=key;
|
|
|
+ this.tabKey=key;
|
|
|
this.sectionOption=JSON.parse(JSON.stringify(sectionOption))
|
|
|
if(key=='cost'){
|
|
|
if(this.type==1){
|
|
@@ -551,11 +631,15 @@ export default {
|
|
|
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){
|
|
@@ -566,11 +650,15 @@ export default {
|
|
|
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)
|
|
@@ -582,36 +670,94 @@ export default {
|
|
|
// console.log(this.openOptions)
|
|
|
},
|
|
|
|
|
|
- //对比按钮的事件
|
|
|
- comparehandle(){
|
|
|
- this.compareVisiable=true;
|
|
|
-
|
|
|
- },
|
|
|
- //motaikuang
|
|
|
- handleOk(e) {
|
|
|
- // console.log(e);
|
|
|
- this.compareVisiable = false;
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
+ //对比按钮的事件
|
|
|
+ comparehandle(){
|
|
|
+ this.compareVisiable=true;
|
|
|
+ this.$refs.compareData.sectionHttp({
|
|
|
+ type: 10,
|
|
|
+ sign: 'month',
|
|
|
+ smallDate: moment()
|
|
|
+ .subtract(1, 'months')
|
|
|
+ .format('YYYY-MM'),
|
|
|
+ bigDate: moment().format('YYYY-MM')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ close_modal(n){
|
|
|
+ // console.log(n)
|
|
|
+ this.compareVisiable=n;
|
|
|
+ },
|
|
|
+ //对比模块的tab事件
|
|
|
+ compareTab(key){
|
|
|
+ console.log(key)
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {
|
|
|
//处理四个图标的样式
|
|
|
- this.costOption.yAxis[0].show = false
|
|
|
-
|
|
|
- this.costOption.series[0].type = 'line'
|
|
|
- this.showOption.yAxis[0].show = false
|
|
|
-
|
|
|
- this.showOption.series[0].type = 'line'
|
|
|
- this.clickOption.yAxis[0].show = false
|
|
|
-
|
|
|
+ this.costOption.series[0].type = 'line';
|
|
|
+ this.costOption.series[0].itemStyle = {};
|
|
|
+ this.costOption.series[0].areaStyle = lineStyle;
|
|
|
|
|
|
+ this.costOption.xAxis[0].boundaryGap = false
|
|
|
+ this.showOption.series[0].type = 'line'
|
|
|
+ this.showOption.series[0].itemStyle = {};
|
|
|
+ this.showOption.series[0].areaStyle = lineStyle;
|
|
|
+
|
|
|
+ this.showOption.xAxis[0].boundaryGap = false
|
|
|
this.echartsHttp();
|
|
|
- this.sectionHttp({type:1});
|
|
|
+ this.sectionHttp({type:this.type});
|
|
|
},
|
|
|
filters: {
|
|
|
toPercentage(val) {
|
|
|
- return (val * 100).toFixed(2) + '%'
|
|
|
+ if(typeof val != 'string'){
|
|
|
+ return (val * 100).toFixed(2) + '%'
|
|
|
+ }else{
|
|
|
+ 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
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -620,24 +766,36 @@ export default {
|
|
|
<style lang="scss" scoped>
|
|
|
.homePage {
|
|
|
.topBox{
|
|
|
- margin-bottom: 20px;;
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
|
.showBox {
|
|
|
width: 98%;
|
|
|
box-sizing: border-box;
|
|
|
margin-right: 20px;
|
|
|
- padding: 25px;
|
|
|
+ padding: 25px 25px 0;
|
|
|
background-color: #fff;
|
|
|
+
|
|
|
.title {
|
|
|
+ color: #999;
|
|
|
+ font-size: 16px;
|
|
|
position: relative;
|
|
|
span {
|
|
|
+ font-size: 1rem;
|
|
|
+ // color: #1890ff;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
+ .num{
|
|
|
+ color: #000;
|
|
|
+ font-size: 16px;;
|
|
|
+ }
|
|
|
.numshow {
|
|
|
+ color:#333 ;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 24px;
|
|
|
padding: 5px 0;
|
|
|
height: 30px;
|
|
|
margin-bottom: 0;
|
|
@@ -645,17 +803,22 @@ export default {
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
position: relative;
|
|
|
- height: 60px;
|
|
|
+
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
.num {
|
|
|
display: inline-block;
|
|
|
margin-left: 10px;
|
|
|
padding-right: 15px;
|
|
|
position: relative;
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
|
.greenIcon {
|
|
|
width: 0;
|
|
@@ -693,7 +856,7 @@ export default {
|
|
|
padding: 0 15px;
|
|
|
top: 15px;
|
|
|
right: 300px;
|
|
|
- border: 1px solid #666;
|
|
|
+ // border: 1px solid #666;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.time{
|
|
@@ -713,16 +876,22 @@ export default {
|
|
|
background-color: #fff;
|
|
|
p{
|
|
|
width: 100%;
|
|
|
- border-bottom: 1px solid #666;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
padding-bottom: 20px;
|
|
|
span{
|
|
|
display: inline-block;
|
|
|
- border: 1px solid #666;
|
|
|
+ border: 1px solid #ccc;
|
|
|
padding: 5px 15px;
|
|
|
+ border-radius: 5px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+.footertip{
|
|
|
+ background: #fff;
|
|
|
+ padding: 0 15px 20px;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
|
|
|
}
|
|
|
</style>
|