159 lines
4.4 KiB
Vue
159 lines
4.4 KiB
Vue
|
|
<template>
|
|
<div>
|
|
<div class="select-container">
|
|
<el-form :inline="true">
|
|
<!-- <el-form-item label="网点">-->
|
|
<!-- <el-select v-model="wd" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
|
|
<!-- <el-option :label="item.name" :value="item.id" v-for="(item,index) in wdOptions" :key="index+'sblxOptions'"></el-option>-->
|
|
<!-- </el-select>-->
|
|
<!-- </el-form-item>-->
|
|
<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 style="margin:30px 0;">
|
|
<!-- 二个选择按钮-->
|
|
<el-row style="">
|
|
<el-col :xs="24" :sm="24" :lg="24">
|
|
<el-button-group class="ems-btns-group">
|
|
<el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
|
|
</el-button-group>
|
|
</el-col>
|
|
</el-row>
|
|
<!--echart-->
|
|
<div id="glqxEchart" style="height:360px;"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
import resize from "@/mixins/ems/resize";
|
|
export default {
|
|
name:'DzjkTjbbGlqx',
|
|
mixins: [resize],
|
|
data() {
|
|
return {
|
|
pickerOptions:{
|
|
disabledDate(time) {
|
|
return time.getTime() > Date.now();
|
|
},
|
|
},
|
|
defaultDateRange:[],//默认展示的时间
|
|
dateRange:[],
|
|
loading:false,
|
|
// todo delete
|
|
// wd:'',
|
|
// wdOptions: [
|
|
// {name:'网点一',id:1},
|
|
// {name:'网点二',id:2},
|
|
// ],
|
|
activeBtn:'dwgl',
|
|
btnList:[
|
|
{name:'电网功率',id:'dwgl'},
|
|
{name:'负载功率',id:'fzgl'},
|
|
{name:'电储能功率',id:'cngl'},
|
|
{name:'光伏功率',id:'gfgl'},
|
|
],
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
changeDataType(id){
|
|
if(id !== this.activeBtn){
|
|
console.log('点击了不同的菜单，更新数据')
|
|
this.activeBtn=id;
|
|
}
|
|
},
|
|
// 搜索
|
|
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() {
|
|
this.chart.setOption({
|
|
color:['#FFBD00','#3C81FF'],
|
|
legend: {
|
|
left: 'center',
|
|
bottom: '10',
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
textStyle:{
|
|
color:"#333333",
|
|
},
|
|
xAxis: {
|
|
data: ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'],
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
},
|
|
series: [
|
|
{
|
|
name:this.btnList.find(item=>item.id===this.activeBtn).name,
|
|
data: [80,92,1,34,90,130,320,80,9,91,34,90,80,92,1,34,90,130,320,80,9,91,34,90],
|
|
type: 'scatter',
|
|
}
|
|
// ,{
|
|
// name:'实时电池平均SOC',
|
|
// data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
|
|
// type: 'scatter',
|
|
// }
|
|
]
|
|
})
|
|
},
|
|
initChart() {
|
|
this.chart = echarts.init(document.querySelector('#glqxEchart'));
|
|
}
|
|
},
|
|
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>
|
|
|