227 lines
7.2 KiB
Vue
227 lines
7.2 KiB
Vue
|
|
<template>
|
|
<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.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="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="pcsEchart" style="height:360px;"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
import resize from "@/mixins/ems/resize";
|
|
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
|
import { getPCSData, getPcsNameList} from '@/api/ems/dzjk'
|
|
import {formatDate} from "@/filters/ems";
|
|
export default {
|
|
name:'DzjkTjbbPcsqx',
|
|
mixins: [resize,getQuerySiteId],
|
|
data() {
|
|
return {
|
|
pickerOptions:{
|
|
disabledDate(time) {
|
|
return time.getTime() > Date.now();
|
|
},
|
|
},
|
|
defaultDateRange:[],//默认展示的时间
|
|
dateRange:[],
|
|
loading:false,
|
|
// pcs:'',
|
|
// pcsOptions: [],
|
|
activeBtn:'1',
|
|
btnList:[
|
|
{name:'有功功率',id:'1',attr:['activePower'],source:['有功功率']},
|
|
{name:'无功功率',id:'2',attr:['reactivePower'],source:['无功功率']},
|
|
// {name:'温度',id:'wd'},
|
|
// {name:'三相电压',id:'sxdy'},
|
|
{name:'三相电流',id:'3',attr:['uCurrent','vCurrent','wCurrent'],source:['u电流','v电流','w电流'],type:'bar'},
|
|
],
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
changeDataType(id){
|
|
if(id !== this.activeBtn){
|
|
console.log('点击了不同的菜单，更新数据')
|
|
this.activeBtn=id;
|
|
this.getData()
|
|
}
|
|
},
|
|
// 搜索
|
|
onSearch(){
|
|
this.getData()
|
|
},
|
|
// 重置
|
|
onReset(){
|
|
// 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(){
|
|
const {siteId,activeBtn}=this;
|
|
const [start='',end='']=(this.dateRange || [])
|
|
this.loading=true;
|
|
//接口调用完成之后 设置图表、结束loading
|
|
getPCSData({siteId,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => {
|
|
this.setOption(response?.data || [])
|
|
}).finally(()=>{this.loading=false;})
|
|
|
|
},
|
|
compareDate(date1,date2){
|
|
console.log('比较时间',date1,date2)
|
|
// 年2025-09/天2025-09-15/时2025-09-15/10:00
|
|
if(date1.indexOf(':') > -1 && date2.indexOf(':') > -1){
|
|
return parseInt(date1) - parseInt(date2)
|
|
}
|
|
const [date1_Y='',date1_M='',date1_D=''] = date1.split('-')//根据空格区分[年月日,小时]
|
|
const [date2_Y='',date2_M='',date2_D=''] = date2.split('-')//根据空格区分[年月日,小时]
|
|
return (date1_Y === date2_Y && date1_M === date2_M && date1_D - date2_D) || (date1_Y === date2_Y && date1_M - date2_M) || date1_Y - date2_Y
|
|
},
|
|
setOption(data) {
|
|
const ele = this.btnList.find((item)=>{return item.id === this.activeBtn})
|
|
const sourceBase = JSON.parse(JSON.stringify(ele.source))
|
|
// sourceBase={name:'堆平均维度',id:'1',attr:['temp'],source:['有功功率']},
|
|
const source=[]
|
|
const sourceTop = ['日期']
|
|
let map={},mapArr=[]
|
|
// 生成所有{日期:[],日期:[]}格式的对象和所有包含所有日期的[日期1,日期2...]
|
|
data.forEach((item)=>{
|
|
item.dataList.forEach((inner)=>{
|
|
// 日期格式
|
|
// 年2025-09/天2025-09-15/时2025-09-15/10:00
|
|
// 所有数据的日期格式一致
|
|
if(!map[inner.statisDate]) {
|
|
map[inner.statisDate] = []
|
|
mapArr.push(inner.statisDate)
|
|
}
|
|
})
|
|
})
|
|
data.forEach((item,itemIndex)=>{
|
|
const dataTimeList = item.dataList.map(i =>i.statisDate)
|
|
const noDataTime = mapArr.filter(i=>!dataTimeList.includes(i))
|
|
sourceBase.forEach((outer,outerIndex)=>{
|
|
sourceTop.push(`${item.deviceId}-${outer}`)
|
|
noDataTime.forEach(i=>map[i].push(''))
|
|
item.dataList.forEach((inner,innerIndex)=>{
|
|
map[inner.statisDate].push(inner[ele.attr[outerIndex]])
|
|
})
|
|
})
|
|
})
|
|
mapArr = mapArr.sort((a,b)=>this.compareDate(a,b))
|
|
mapArr.forEach(item=>{
|
|
source.push([item,...map[item]])
|
|
})
|
|
source.unshift(sourceTop)
|
|
console.log('map=',map)
|
|
console.log('mapArr=',mapArr)
|
|
console.log('========',source)
|
|
this.chart.setOption({
|
|
grid: {
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
left: 'center',
|
|
bottom: '15',
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
textStyle:{
|
|
color:"#333333",
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
},
|
|
dataset: {source},
|
|
series:source[0].slice(1).map(item=>{
|
|
return {
|
|
type:ele.type || 'scatter'
|
|
}
|
|
})
|
|
|
|
},true)
|
|
},
|
|
initChart() {
|
|
this.chart = echarts.init(document.querySelector('#pcsEchart'));
|
|
},
|
|
init(){
|
|
this.loading = true
|
|
// this.pcs=''
|
|
// this.pcsOptions=[]
|
|
this.initChart()
|
|
this.onReset()
|
|
// this.getPcsList().then(()=>{
|
|
// if(this.pcs){
|
|
// this.onReset()
|
|
// }else{
|
|
// this.loading=false;
|
|
// }
|
|
//
|
|
// })
|
|
}
|
|
},
|
|
mounted(){
|
|
const now = new Date();
|
|
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
|
|
this.defaultDateRange = [lastMonth, now];
|
|
|
|
},
|
|
beforeDestroy() {
|
|
if (!this.chart) {
|
|
return
|
|
}
|
|
this.chart.dispose()
|
|
this.chart = null
|
|
},
|
|
}
|
|
</script>
|