<template>
|
<div class="body_box">
|
<!-- 大功率整流电源监控 -->
|
<div class="tipTitle">大功率整流电源监控</div>
|
<div class="left_Box">
|
|
<div class="diagram-content">
|
<div class="diagram-stc" ref="static"></div>
|
<div class="diagram-flush" ref="flush"></div>
|
</div>
|
</div>
|
<div class="content_box">
|
<div class="content_top">
|
<p class="title_into">当前运行情况</p>
|
<el-form ref="form" label-width="125px">
|
<el-form-item label="大功率整流电源：">
|
<el-input size="mini" v-model="formData.thisInfo.dglzldy" style="width:100px"></el-input>
|
</el-form-item>
|
<el-col :span="12">
|
<el-form-item label="A套电源：">
|
<el-input size="mini" v-model="formData.thisInfo.atdy" style="width:100px"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="B套电源：">
|
<el-input size="mini" v-model="formData.thisInfo.btdy" style="width:100px"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-form-item label="直流配电板：">
|
<el-input size="mini" v-model="formData.thisInfo.zlpdb" style="width:100px"></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="content_cent">
|
<p class="title_into">详细参数情况</p>
|
<el-form ref="form" label-width="100px">
|
<el-form-item label="电源模式：">
|
<el-input size="mini" v-model="formData.thisInfo.dyms" style="width:100px"></el-input>
|
</el-form-item>
|
<el-col :span="12">
|
<el-form-item label="A套电压：">
|
<el-input size="mini" v-model="formData.thisInfo.atdy" style="width:100px"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="B套电压：">
|
<el-input size="mini" v-model="formData.thisInfo.btdy" style="width:100px"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="A套电流：">
|
<el-input size="mini" v-model="formData.thisInfo.atdl" style="width:100px"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="B套电流：">
|
<el-input size="mini" v-model="formData.thisInfo.btdl" style="width:100px"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="高压进线：">
|
<el-input size="mini" v-model="formData.thisInfo.gyjx1" style="width:100px"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="">
|
<el-input size="mini" v-model="formData.thisInfo.gyjx2" style="width:100px"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-form-item label="额定电流：">
|
<el-input size="mini" v-model="formData.thisInfo.eddl" style="width:100px"></el-input>
|
</el-form-item>
|
<el-col :span="12">
|
<el-form-item label="额定电压：">
|
<el-input size="mini" v-model="formData.thisInfo.eddy1" style="width:100px"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="">
|
<el-input size="mini" v-model="formData.thisInfo.eddy2" style="width:100px"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-form>
|
<div class="clear"></div>
|
</div>
|
<div class="content_bottom">
|
<p class="title_into">告警情况</p>
|
<!-- 表单 -->
|
<div class="flex-page-content">
|
<div class="batteryrHistoryquery" style="width: 100%;height: 100%;">
|
<el-table :data="tableData" style="width: 100%" max-height="145px">
|
<el-table-column prop="date" label="告警时间" width="180"></el-table-column>
|
<el-table-column prop="name" label="告警名称" width="180"></el-table-column>
|
<el-table-column prop="address" label="告警描述"></el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="right_box">
|
<p class="title_into">实时曲线</p>
|
<p class="title_echarts">A套电源电压电流</p>
|
<div class="echarts-right" ref="currA">
|
|
</div>
|
<p class="title_echarts">B套电源电压电流</p>
|
<div class="echarts-right" ref="currB">
|
|
</div>
|
</div>
|
<div class="clear"></div>
|
</div>
|
</template>
|
<script>
|
import getWsUrl from "@/assets/js/getWsUrl";
|
import * as echarts from 'echarts';
|
import gridCircuitDiagram from '@/pages/switchboard/js/gridCircuitDiagram'
|
let diagram;
|
export default {
|
chart: {},
|
data(){
|
return {
|
isOpen:false,
|
tableData:[],
|
formData:{
|
thisInfo:{
|
dglzldy:"运行中",
|
atdy:"已开启",
|
btdy:"已关闭",
|
zlpdb:"运行中",
|
dyms:"恒压模式",
|
atdy:"900.5V",
|
btdy:"0V",
|
atdl:"10.5A",
|
btdl:"0A",
|
gyjx1:"10kV",
|
gyjx2:"50Hz",
|
eddl:"2858A",
|
eddy1:"700~900V/DC",
|
eddy2:"0~900V/AC"
|
|
}
|
},
|
echartsList:[
|
{echartsCurr:[],echartsVol:[],name:"A套电源电源电流",class:"currA"},
|
{echartsCurr:[],echartsVol:[],name:"B套电源电源电流",class:"currB"},
|
],
|
dateTime:[],
|
}
|
},
|
components:{
|
// ContentBox
|
},
|
mounted() {
|
|
let self = this;
|
diagram = gridCircuitDiagram(this.$refs.static, this.$refs.flush);
|
self.initEcharts();
|
self.openSocket();
|
},
|
methods: {
|
// 初始化图表
|
initEcharts(){
|
let self = this;
|
self.echartsList.forEach(item => {
|
self.$options.chart[item.class] = echarts.init(self.$refs[item.class]);
|
});
|
},
|
// 打开链接
|
openSocket() {
|
// 初始化WebSocket
|
|
this.close();
|
this.initSocket();
|
},
|
// 初始化
|
initSocket() {
|
|
// 未被初始化初始化
|
if (!this.isOpen) {
|
const wsUri = getWsUrl("/device", "");
|
this.socket = new WebSocket(wsUri);
|
this.socket.onmessage = this.onMessage;
|
this.socket.onopen = this.onOpen;
|
this.socket.onerror = this.onError;
|
this.socket.onclose = this.close;
|
}
|
},
|
onMessage(res) {
|
|
let self = this;
|
let result = JSON.parse(res.data)
|
if(result.code == 1){
|
this.isOpen = true;
|
// 表单赋值
|
self.formData.thisInfo.cxFivePanelCurr = result.data.screenRTList[0].panelCurr + "A";
|
self.echartsList[0].echartsCurr.push(result.data.screenRTList[0].panelCurr);
|
|
self.formData.thisInfo.cxFivePanelVol = result.data.screenRTList[0].panelVol + "V";
|
self.echartsList[0].echartsVol.push(result.data.screenRTList[0].panelVol);
|
|
self.formData.thisInfo.cxOnePanelVol = result.data.screenRTList[2].panelVol + "V";
|
self.echartsList[1].echartsCurr.push(result.data.screenRTList[2].panelCurr);
|
self.echartsList[1].echartsVol.push(result.data.screenRTList[2].panelVol);
|
|
self.formData.thisInfo.cxTwoPanelVol = result.data.screenRTList[3].panelVol + "V";
|
// self.echartsList[2].echartsCurr.push(result.data.screenRTList[3].panelCurr);
|
// self.echartsList[2].echartsVol.push(result.data.screenRTList[3].panelVol);
|
|
// self.echartsList[3].echartsCurr.push(result.data.powerRT.rectifierCurr);
|
// self.echartsList[3].echartsVol.push(result.data.powerRT.rectifierVol);
|
|
|
|
self.formData.thisInfo.volA = result.data.dcMainBoard.volA + "V";
|
self.formData.thisInfo.volB = result.data.dcMainBoard.volB + "V";
|
self.formData.thisInfo.currA = result.data.dcMainBoard.currA + "A";
|
self.formData.thisInfo.currB = result.data.dcMainBoard.currB + "A";
|
}
|
self.dateTime.push(self.getTime());
|
if(self.dateTime.length>10){
|
self.dateTime.shift();
|
}
|
self.echartsList.forEach(item => {
|
if(item.echartsCurr.length>10){
|
item.echartsCurr.shift();
|
item.echartsVol.shift();
|
}
|
self.setOption(item,true);
|
});
|
},
|
getTime(){
|
var myDate = new Date(); //实例一个时间对象；
|
// myDate.getFullYear(); //获取系统的年；
|
// myDate.getMonth()+1; //获取系统月份，由于月份是从0开始计算，所以要加1
|
// myDate.getDate(); // 获取系统日，
|
// myDate.getHours(); //获取系统时，
|
// myDate.getMinutes(); //分
|
// myDate.getSeconds(); //秒
|
let thisTime = myDate.getHours() + ":" + myDate.getMinutes() + ":" + myDate.getSeconds();
|
return thisTime
|
},
|
onOpen() {
|
// 向后台发送请求数据
|
// this.socket.send(this.thisLi.deviceId);
|
},
|
onError() {
|
console.log('链接失败')
|
},
|
close() {
|
// 关闭websocket
|
if (this.isOpen) {
|
// 打印关闭信息
|
console.log("关闭电源实时告警WebSocket");
|
this.socket.close();
|
}
|
},
|
// 配置图表
|
setOption:function(data,status){
|
let self = this;
|
let option = {
|
animation: false,
|
grid: {
|
left: '70',
|
top: '20',
|
right: '70',
|
bottom: '30'
|
},
|
tooltip: {
|
show: true
|
},
|
xAxis: {
|
type: 'category',
|
show: true,
|
splitLine:{
|
show:false
|
},
|
data:self.dateTime
|
},
|
yAxis: [{
|
type: 'value',
|
gridIndex:0,
|
show: true,
|
splitLine: {
|
show: false
|
},
|
minInterval: 1,
|
axisLabel: {
|
formatter: '{value}V'
|
},
|
},{
|
type: 'value',
|
gridIndex:0,
|
show: true,
|
splitLine: {
|
show: false
|
},
|
minInterval: 1,
|
axisLabel: {
|
formatter: '{value}A'
|
},
|
}],
|
series: [{
|
data: data.echartsCurr,
|
// xAxisIndex: 0,
|
yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
|
type: 'line',
|
step: false,
|
smooth: true
|
},{
|
data:data.echartsVol,
|
// xAxisIndex: 0,
|
yAxisIndex: 1,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
|
type: 'line',
|
// step: false,
|
smooth: true
|
},]
|
};
|
self.$options.chart[data.class].setOption(option);
|
|
|
},
|
setPanelPos:function(){
|
|
}
|
},
|
destroyed(){
|
this.close();
|
}
|
|
}
|
</script>
|
<style scoped>
|
.clear{
|
clear: both;
|
}
|
.partition{
|
height: 1px;
|
width: 100%;
|
border-bottom:1px solid #1e9ff2;
|
}
|
.batteryrHistoryquery{
|
overflow: auto;
|
}
|
.echarts-right{
|
width: 100%;
|
height: 160px;
|
}
|
.title_echarts{
|
margin-top: 100px;
|
padding: 0 0 0 20px;
|
font-size: 12px;
|
}
|
|
.el-form-item{
|
margin-bottom:0.1rem;
|
}
|
/deep/.el-input__inner{
|
padding: 0 0.5rem;
|
}
|
/deep/.el-table th, /deep/.el-table tr{
|
background: #171350 !important;
|
color: #fff;
|
}
|
.body_box{
|
width: 100%;
|
height: 100%;
|
}
|
.left_Box,.content_box,.right_box{
|
float: left;
|
height: 95%;
|
margin: 0 4px;
|
}
|
.right_box{
|
border: 1px solid #1e9ff2;
|
}
|
.content_box{
|
width: 39%;
|
margin-left: 10px;
|
|
}
|
.content_top,.content_cent,.content_bottom{
|
height: 30%;
|
border:1px solid #1e9ff2;
|
padding: 1%;
|
}
|
.content_top{
|
height: 25%;
|
}
|
.content_cent{
|
height: 40%;
|
}
|
.content_bottom{
|
height: 33%;
|
}
|
.content_cent{
|
margin: 1% 0;
|
}
|
.title_into{
|
padding-left: 1%;
|
color: #ffff18;
|
}
|
.detail_info{
|
float: left;
|
width: 22%;
|
margin-right: 2%;
|
font-size: 12px;
|
padding-top: 2%;
|
}
|
.detail_info .el-form-item{
|
margin-bottom:0;
|
}
|
.right_box{
|
width: 39%;
|
}
|
.left_Box{
|
background: url("../../assets/images/leftBg.png") 0 0 no-repeat;
|
background-size: 100% 100%;
|
width: 20%;
|
height: 95%;
|
padding: 0.75rem 1rem;
|
}
|
.diagram-content{
|
height: 100%;
|
width: 100%;
|
position: relative;
|
}
|
.diagram-stc {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
}
|
|
.diagram-flush {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
z-index: 9;
|
overflow: hidden;
|
}
|
.diagram-stc /deep/ canvas,.diagram-flush /deep/ canvas{
|
object-fit:fill !important;
|
}
|
</style>
|
