148 lines
3.5 KiB
Vue
148 lines
3.5 KiB
Vue
<template>
|
|
<el-card shadow="always" class="common-card-container">
|
|
<div slot="header">
|
|
<span class="card-title">收益指标</span>
|
|
</div>
|
|
<div class="card-main">
|
|
<!-- 搜索栏-->
|
|
<div class="select-container">
|
|
<el-form :inline="true">
|
|
<el-form-item label="时间选择">
|
|
<el-date-picker
|
|
v-model="dateRange"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始时间"
|
|
:picker-options="pickerOptions"
|
|
:default-value="defaultDateRange"
|
|
end-placeholder="结束时间">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button @click="onReset" native-type="button">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="total-data">
|
|
<div>总收益:<span class="point">22345元</span></div>
|
|
</div>
|
|
<div id="syzbChart" style="height: 310px"></div>
|
|
</div>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
import resize from "@/mixins/ems/resize";
|
|
export default {
|
|
mixins: [resize],
|
|
data() {
|
|
return {
|
|
pickerOptions:{
|
|
disabledDate(time) {
|
|
return time.getTime() > Date.now();
|
|
},
|
|
},
|
|
defaultDateRange:[],//默认展示的时间
|
|
dateRange:[],
|
|
loading:false,
|
|
chart: null
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
// 搜索
|
|
onSearch(){
|
|
this.getData()
|
|
},
|
|
// 重置
|
|
onReset(){
|
|
this.dateRange=[]
|
|
this.getData()
|
|
},
|
|
getData(){
|
|
this.loading=true;
|
|
this.chart.showLoading()
|
|
//接口调用完成之后 设置图表、结束loading
|
|
this.setOption()
|
|
this.loading=false;
|
|
this.chart.hideLoading()
|
|
},
|
|
setOption(data){
|
|
// const source = [['日期','充电量','放电量']]
|
|
// data.forEach(item=>{
|
|
// source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
|
|
// })
|
|
this.chart.setOption({
|
|
color:['#FFBD00','#3C81FF'],
|
|
// legend: {
|
|
// left: 'right',
|
|
// bottom: '10',
|
|
// },
|
|
tooltip: {},
|
|
xAxis: { type: 'category' },
|
|
yAxis: { type: 'value' },
|
|
grid:{top:30},
|
|
dataset:{
|
|
// source
|
|
source:[//格式
|
|
['product','收入','支出'],
|
|
['6/10',10,20],
|
|
['6/11',20,30],
|
|
['6/12',20,34],
|
|
['6/13',20,90],
|
|
['6/14',20,3],
|
|
]
|
|
},
|
|
series: [
|
|
{
|
|
type: 'bar',//柱状图
|
|
},
|
|
{
|
|
type: 'bar',//柱状图
|
|
}
|
|
]
|
|
})
|
|
},
|
|
initChart() {
|
|
this.chart = echarts.init(document.querySelector('#syzbChart'));
|
|
}
|
|
},
|
|
mounted(){
|
|
const now = new Date();
|
|
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
|
|
this.defaultDateRange = [lastMonth, now];
|
|
this.initChart()
|
|
this.getData()
|
|
},
|
|
beforeDestroy() {
|
|
if (!this.chart) {
|
|
return
|
|
}
|
|
this.chart.dispose()
|
|
this.chart = null
|
|
},
|
|
}
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
.total-data{
|
|
line-height: 18px;
|
|
color: #333333;
|
|
font-size: 16px;
|
|
padding:10px 0;
|
|
>div{
|
|
display: inline-block;
|
|
.point{
|
|
color: #05AEA3;
|
|
font-weight: 500;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|