<template>
|
<div class="body_box">
|
<div class="tipTitle">AFE变频驱动柜监控</div>
|
<div class="left_Box">
|
<!-- <div class="tipTitle">AFE变频驱动柜监控</div> -->
|
<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="100px">
|
<el-form-item label="整流模块：">
|
<el-input size="mini" v-model="formData.thisInfo.zlmk" style="width:100px"></el-input>
|
</el-form-item>
|
<el-form-item label="逆变模块：">
|
<el-input size="mini" v-model="formData.thisInfo.nbmk" style="width:100px"></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="content_cent">
|
<p class="title_into">详细参数情况</p>
|
<div class="clear"></div>
|
<el-form ref="form" label-width="110px">
|
<el-col :span="4">
|
<span>逆变模块</span>
|
</el-col>
|
<el-col :span="10">
|
<el-form-item label="输出电压：">
|
<el-input size="mini" v-model="formData.thisInfo.scdy" style="width:100px"></el-input>
|
</el-form-item>
|
<el-form-item label="额定电压：">
|
<el-input size="mini" v-model="formData.thisInfo.eddy" style="width:100px"></el-input>
|
</el-form-item>
|
<el-form-item label="输出有功功率：">
|
<el-input size="mini" v-model="formData.thisInfo.scyggl" style="width:100px"></el-input>
|
</el-form-item>
|
<el-form-item label="工作效率：">
|
<el-input size="mini" v-model="formData.thisInfo.gzxl" style="width:100px"></el-input>
|
</el-form-item>
|
<el-form-item label="模块温度：">
|
<el-input size="mini" v-model="formData.thisInfo.mkwd" style="width:100px"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="10">
|
<el-form-item label="输出电流：">
|
<el-input size="mini" v-model="formData.thisInfo.scdl" style="width:100px"></el-input>
|
</el-form-item><br/><br/><br/>
|
<el-form-item label="功率因数：">
|
<el-input size="mini" v-model="formData.thisInfo.glys" style="width:100px"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-form>
|
<div class="clear"></div>
|
<div class="partition"></div>
|
<el-form ref="form" label-width="110px">
|
<el-col :span="4">
|
<span>受功电机</span>
|
</el-col>
|
<el-col :span="10">
|
<el-form-item label="点击转数：">
|
<el-input size="mini" v-model="formData.thisInfo.djzs" style="width:100px"></el-input>
|
</el-form-item>
|
<el-form-item label="电机功率：">
|
<el-input size="mini" v-model="formData.thisInfo.djgl" 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">5000kVA进线屏</p>
|
<div class="echarts-right" ref="5000kvaEcharts">
|
|
</div>
|
<p class="title_echarts">1号3200kVA出线</p>
|
<div class="echarts-right" ref="13200kvaEcharts">
|
|
</div>
|
<p class="title_echarts">2号3200kVA出线</p>
|
<div class="echarts-right" ref="23200kvaEcharts">
|
|
</div>
|
<p class="title_echarts">大功率整流电源</p>
|
<div class="echarts-right" ref="dglzldyEcharts">
|
|
</div>
|
</div>
|
<div class="clear"></div>
|
</div>
|
</template>
|
<script>
|
import getWsUrl from "@/assets/js/getWsUrl";
|
import * as echarts from 'echarts';
|
// import ContentBox from "@/components/ContentBox";
|
import gridCircuitDiagram from '@/pages/AFEinverter/js/gridCircuitDiagram'
|
import diagramStates from '@/pages/AFEinverter/js/diagramStates'
|
let diagram;
|
export default {
|
chart: {},
|
data(){
|
return {
|
isOpen:false,
|
tableData:[],
|
formData:{
|
thisInfo:{
|
zlmk:"运行中",
|
nbmk:"运行中",
|
scdy:'690V',
|
scdl:"500A",
|
eddy:"690V",
|
scyggl:"345KW",
|
gzxl:"98%",
|
glys:"0.99",
|
mkwd:"30℃",
|
djzs:"80r/min",
|
djgl:"350KW"
|
|
}
|
},
|
echartsList:[
|
{echartsCurr:[],echartsVol:[],name:"5000kVA进线屏",class:"5000kvaEcharts"},
|
{echartsCurr:[],echartsVol:[],name:"1号3200kVA出线",class:"13200kvaEcharts"},
|
{echartsCurr:[],echartsVol:[],name:"2号3200kVA出线",class:"23200kvaEcharts"},
|
{echartsCurr:[],echartsVol:[],name:"大功率整流电源",class:"dglzldyEcharts"},
|
],
|
dateTime:[],
|
}
|
},
|
components:{
|
// ContentBox
|
},
|
mounted() {
|
let self = this;
|
diagram = gridCircuitDiagram(this.$refs.static, this.$refs.flush);
|
diagramStates(diagram, 'run1');
|
self.initEcharts();
|
self.openSocket();
|
window.addEventListener('resize', () => {
|
diagram = gridCircuitDiagram(this.$refs.static, this.$refs.flush);
|
self.initEcharts();
|
})
|
},
|
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: {
|
"trigger":"axis",
|
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',
|
symbol: 'none',
|
step: false,
|
smooth: true
|
},{
|
data:data.echartsVol,
|
// xAxisIndex: 0,
|
yAxisIndex: 1,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
|
type: 'line',
|
symbol: 'none',
|
// 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 #fff;
|
}
|
.batteryrHistoryquery{
|
overflow: auto;
|
}
|
.echarts-right{
|
width: 100%;
|
height: 160px;
|
}
|
.title_echarts{
|
padding: 0 0 0 20px;
|
font-size: 12px;
|
}
|
/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: 34%;
|
border:1px solid #1e9ff2;
|
padding: 1%;
|
}
|
.content_top{
|
height: 16%;
|
}
|
.content_cent{
|
height: 42%;
|
}
|
.content_cent{
|
margin: 1% 0;
|
}
|
.content_bottom {
|
height: 40%;
|
}
|
.title_into{
|
padding-left: 1%;
|
color: #ffff18;
|
}
|
.detail_info{
|
float: left;
|
width: 22%;
|
margin-right: 2%;
|
font-size: 12px;
|
padding-top: 2%;
|
}
|
/deep/.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: 100%; */
|
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>
|
