|
@@ -2,21 +2,7 @@
|
|
<div class="homePage">
|
|
<div class="homePage">
|
|
<div >
|
|
<div >
|
|
<a-row :gutter="16">
|
|
<a-row :gutter="16">
|
|
- <a-col :sm="24" :md="12" :xl="6" :xxl="6" class="topBox">
|
|
|
|
- <div class="showBox">
|
|
|
|
- <div class="title">
|
|
|
|
- Top7项目消耗
|
|
|
|
- <a-tooltip>
|
|
|
|
- <template slot="title">最近七天的top7项目消耗</template>
|
|
|
|
- <span class="icon">
|
|
|
|
- <a-icon type="exclamation-circle" />
|
|
|
|
- </span>
|
|
|
|
- </a-tooltip>
|
|
|
|
- </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="12" :xl="6" :xxl="6" class="topBox">
|
|
<a-col :sm="24" :md="12" :xl="6" :xxl="6" class="topBox">
|
|
<div class="showBox">
|
|
<div class="showBox">
|
|
<div class="title">
|
|
<div class="title">
|
|
@@ -100,6 +86,21 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
</a-col>
|
|
|
|
+ <a-col :sm="24" :md="12" :xl="6" :xxl="6" class="topBox">
|
|
|
|
+ <div class="showBox">
|
|
|
|
+ <div class="title">
|
|
|
|
+ Top7项目消耗
|
|
|
|
+ <a-tooltip>
|
|
|
|
+ <template slot="title">最近七天的top7项目消耗</template>
|
|
|
|
+ <span class="icon">
|
|
|
|
+ <a-icon type="exclamation-circle" />
|
|
|
|
+ </span>
|
|
|
|
+ </a-tooltip>
|
|
|
|
+ </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-row>
|
|
</a-row>
|
|
</div>
|
|
</div>
|
|
<!-- 折线图模块 -->
|
|
<!-- 折线图模块 -->
|
|
@@ -239,11 +240,14 @@ let lineStyle= {
|
|
}
|
|
}
|
|
let sectionOption={
|
|
let sectionOption={
|
|
tooltip: {
|
|
tooltip: {
|
|
- trigger: 'axis',
|
|
|
|
|
|
+ trigger: 'item',
|
|
|
|
+
|
|
axisPointer: {
|
|
axisPointer: {
|
|
// 坐标轴指示器,坐标轴触发有效
|
|
// 坐标轴指示器,坐标轴触发有效
|
|
- type: 'line' // 默认为直线,可选为:'line' | 'shadow'
|
|
|
|
- }
|
|
|
|
|
|
+ type: 'line', // 默认为直线,可选为:'line' | 'shadow',
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+
|
|
},
|
|
},
|
|
legend: {
|
|
legend: {
|
|
data: ['总消耗']
|
|
data: ['总消耗']
|
|
@@ -285,6 +289,13 @@ let sectionOption={
|
|
data: [],
|
|
data: [],
|
|
color:'#8A2BE2'
|
|
color:'#8A2BE2'
|
|
},
|
|
},
|
|
|
|
+ {
|
|
|
|
+ name: '',
|
|
|
|
+ type: 'line',
|
|
|
|
+ // smooth: true,
|
|
|
|
+ data: [],
|
|
|
|
+ color:'rgba(0,0,0,0)'
|
|
|
|
+ }
|
|
]
|
|
]
|
|
}
|
|
}
|
|
|
|
|
|
@@ -298,6 +309,10 @@ let init={
|
|
x:['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00','19:00', '20:00', '21:00', '22:00', '23:00'],
|
|
x:['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00','19:00', '20:00', '21:00', '22:00', '23:00'],
|
|
y:[],
|
|
y:[],
|
|
name:"昨天"
|
|
name:"昨天"
|
|
|
|
+ },
|
|
|
|
+ huanbi:{
|
|
|
|
+ name:'环比',
|
|
|
|
+ y:[]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -508,13 +523,28 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
});
|
|
});
|
|
-
|
|
|
|
|
|
+ res.result.list.forEach((item)=>{
|
|
|
|
+ if(!item.costProportion){
|
|
|
|
+ // console.log(item.costProportion)
|
|
|
|
+ this.tabCost.huanbi.y.push('-')
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }else{
|
|
|
|
+
|
|
|
|
+ let huanbi=(item.costProportion*100).toFixed(2)+'%'
|
|
|
|
+
|
|
|
|
+ this.tabCost.huanbi.y.push(huanbi)
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ })
|
|
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;
|
|
this.sectionOption.series[0].name=this.tabCost.today.name;
|
|
this.sectionOption.series[0].name=this.tabCost.today.name;
|
|
this.sectionOption.series[1].data=this.tabCost.yesterday.y;
|
|
this.sectionOption.series[1].data=this.tabCost.yesterday.y;
|
|
this.sectionOption.series[1].name=this.tabCost.yesterday.name;
|
|
this.sectionOption.series[1].name=this.tabCost.yesterday.name;
|
|
|
|
+ this.sectionOption.series[2].data=this.tabCost.huanbi.y;
|
|
|
|
+ this.sectionOption.series[2].name=this.tabCost.huanbi.name;
|
|
|
|
|
|
|
|
|
|
}else if(res.result.chart[0].afterData&& res.result.chart[0].afterData.statDate==moment().subtract(1,'days').format('YYYY-MM-DD')){
|
|
}else if(res.result.chart[0].afterData&& res.result.chart[0].afterData.statDate==moment().subtract(1,'days').format('YYYY-MM-DD')){
|