概率统计接口联调
This commit is contained in:
白菜
@ -1,17 +1,17 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-loading="loading">
|
||||
<div class="select-container">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="PCS">
|
||||
<el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
|
||||
<el-option :label="item.name" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'sblxOptions'"></el-option>
|
||||
<el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间选择">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="date"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
:picker-options="pickerOptions"
|
||||
@ -32,7 +32,7 @@
|
||||
<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 v-for="(item,index) in btnList" :key="index+'dcdqxBtns'" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
|
||||
</el-button-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -46,9 +46,12 @@
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import resize from "@/mixins/ems/resize";
|
||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||
import { getStackData, getPcsNameList} from '@/api/ems/dzjk'
|
||||
import {formatDate} from "@/filters/ems";
|
||||
export default {
|
||||
name:'DzjkTjbbPcsqx',
|
||||
mixins: [resize],
|
||||
name:'DzjkTjbbDcdqx',
|
||||
mixins: [resize,getQuerySiteId],
|
||||
data() {
|
||||
return {
|
||||
pickerOptions:{
|
||||
@ -56,29 +59,25 @@ export default {
|
||||
return time.getTime() > Date.now();
|
||||
},
|
||||
},
|
||||
defaultDateRange:'',//默认展示的时间
|
||||
dateRange:'',
|
||||
defaultDateRange:[],//默认展示的时间
|
||||
dateRange:[],
|
||||
loading:false,
|
||||
pcs:'',
|
||||
pcsOptions: [
|
||||
{name:'Pcs1',id:1},
|
||||
{name:'Pcs2',id:2},
|
||||
],
|
||||
activeBtn:'dpjwd',
|
||||
pcsOptions: [],
|
||||
activeBtn:'1',
|
||||
btnList:[
|
||||
{name:'堆平均维度',id:'dpjwd'},
|
||||
{name:'堆电压',id:'ddy'},
|
||||
{name:'堆电流',id:'dll'},
|
||||
{name:'堆soc',id:'dsoc'},
|
||||
{name:'堆平均维度',id:'1',attr:['temp'],source:[['日期','有功功率']]},
|
||||
{name:'堆电压',id:'2',attr:['voltage'],source:[['日期','堆电压']]},
|
||||
{name:'堆电流',id:'3',attr:['current'],source:[['日期','堆电流']]},
|
||||
{name:'堆soc',id:'4',attr:['soc'],source:[['日期','堆soc']]},
|
||||
],
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeDataType(id){
|
||||
if(id !== this.activeBtn){
|
||||
console.log('点击了不同的菜单，更新数据')
|
||||
this.activeBtn=id;
|
||||
this.getData()
|
||||
}
|
||||
},
|
||||
// 搜索
|
||||
@ -87,19 +86,42 @@ export default {
|
||||
},
|
||||
// 重置
|
||||
onReset(){
|
||||
this.pcs = ''
|
||||
// this.pcs = this.pcsOptions.length > 0 ?this.pcsOptions[0].id : ''
|
||||
this.dateRange=''
|
||||
this.getData()
|
||||
},
|
||||
getPcsList(){
|
||||
return getPcsNameList(this.siteId).then(response => {
|
||||
const data = response?.data || [];
|
||||
this.pcsOptions = data
|
||||
this.pcs = data.length>0?data[0].id:'';
|
||||
})
|
||||
},
|
||||
getData(){
|
||||
this.loading=true;
|
||||
this.chart.showLoading()
|
||||
const {siteId,pcs,activeBtn}=this;
|
||||
const [start='',end='']=(this.dateRange || [])
|
||||
//接口调用完成之后 设置图表、结束loading
|
||||
this.setOption()
|
||||
this.loading=false;
|
||||
this.chart.hideLoading()
|
||||
getStackData({siteId,deviceId:pcs,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => {
|
||||
this.setOption(response?.data || [])
|
||||
}).finally(()=>{this.loading=false;})
|
||||
|
||||
},
|
||||
setOption() {
|
||||
setOption(data) {
|
||||
const ele = this.btnList.find((item)=>{return item.id === this.activeBtn})
|
||||
const source = JSON.parse(JSON.stringify(ele.source))
|
||||
const length = ele.attr.length
|
||||
const series = []
|
||||
data.forEach((item)=>{
|
||||
const arr = ele.attr.map(key=>item[key])
|
||||
source.push([item.statisDate,...arr])
|
||||
})
|
||||
ele.attr.forEach((item)=>{
|
||||
series.push({
|
||||
name:length>1?item:ele.name,
|
||||
type:ele.type || 'scatter'
|
||||
})
|
||||
})
|
||||
this.chart.setOption({
|
||||
color:['#FFBD00','#3C81FF'],
|
||||
legend: {
|
||||
@ -116,33 +138,30 @@ export default {
|
||||
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'],
|
||||
type: 'category',
|
||||
},
|
||||
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',
|
||||
// }
|
||||
]
|
||||
})
|
||||
dataset: {source},
|
||||
series
|
||||
},true)
|
||||
},
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.querySelector('#dcdEchart'));
|
||||
},
|
||||
init(){
|
||||
this.loading = true
|
||||
this.initChart()
|
||||
this.getPcsList().then(()=>{
|
||||
this.onReset()
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.defaultDateRange =new Date();
|
||||
this.initChart()
|
||||
this.getData()
|
||||
const now = new Date();
|
||||
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
|
||||
this.defaultDateRange = [lastMonth, now];
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
|
||||
Reference in New Issue
Block a user