内容调成

whychdw

2021-08-03 a82b6eb05820368bd047d7a47fac6797567e99b3

 src/pages/monitoring/intoLineMonitoring.vue

@@ -1,7 +1,7 @@
<template>
<div class="body_box">
    <!-- 进线屏监控 -->
    <div class="tipTitle">开关柜监控</div>
    <div class="tipTitle">进线屏监控</div>
    <div class="left_Box">
        
        <div class="diagram-content">
@@ -19,17 +19,17 @@
                <el-form-item label="负载状态：">
                    <el-input size="mini" v-model="formData.thisInfo.fzzt" style="width:160px"></el-input>
                </el-form-item>
                <el-form-item label="大功率整流电源：">
                <!-- <el-form-item label="大功率整流电源：">
                    <el-input size="mini" v-model="formData.thisInfo.dglzldy" style="width:160px"></el-input>
                </el-form-item>
                </el-form-item> -->
            </el-form>
        </div>
        <div class="content_cent">
            <p class="title_into">详细参数情况</p>
            <div class="clear"></div>
            <div class="detail_info">5000kVA进线屏</div>
            <div class="detail_info">
                <el-form ref="form" label-width="50px">
            <div class="detail_info detail_form">
                <el-form ref="form" label-width="60px">
                    <el-form-item label="电压：">
                        <el-input size="mini" v-model="formData.thisInfo.cxFivePanelCurr"></el-input>
                    </el-form-item>
@@ -39,8 +39,8 @@
                </el-form>
            </div>
            <div class="detail_info">5000kVA出线屏</div>
            <div class="detail_info">
                <el-form ref="form" label-width="50px">
            <div class="detail_info detail_form">
                <el-form ref="form" label-width="60px">
                    <el-form-item label="电压：">
                        <el-input size="mini" v-model="formData.thisInfo.cxFivePanelCurr"></el-input>   
                    </el-form-item>
@@ -52,16 +52,16 @@
            <div class="clear"></div>
            <div class="partition"></div>
            <div class="detail_info">1号3200kVA出线</div>
            <div class="detail_info">
                <el-form ref="form" label-width="50px">
            <div class="detail_info detail_form">
                <el-form ref="form" label-width="60px">
                    <el-form-item label="电压：">
                        <el-input size="mini" v-model="formData.thisInfo.cxOnePanelVol"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="detail_info">2号3200kVA出线</div>
            <div class="detail_info">
                <el-form ref="form" label-width="50px">
            <div class="detail_info detail_form">
                <el-form ref="form" label-width="60px">
                    <el-form-item label="电压：">
                        <el-input size="mini" v-model="formData.thisInfo.cxTwoPanelVol"></el-input>
                    </el-form-item>
@@ -70,8 +70,8 @@
            <div class="clear"></div>
            <div class="partition"></div>
            <div class="detail_info">电源输入 A排</div>
            <div class="detail_info">
                <el-form ref="form" label-width="50px">
            <div class="detail_info detail_form">
                <el-form ref="form" label-width="60px">
                    <el-form-item label="电压：">
                        <el-input size="mini" v-model="formData.thisInfo.volA"></el-input>
                    </el-form-item>
@@ -81,8 +81,8 @@
                </el-form>
            </div>
            <div class="detail_info">电源输入 B排</div>
            <div class="detail_info">
                <el-form ref="form" label-width="50px">
            <div class="detail_info detail_form">
                <el-form ref="form" label-width="60px">
                    <el-form-item label="电压：">
                        <el-input size="mini" v-model="formData.thisInfo.volB"></el-input>
                    </el-form-item>
@@ -94,14 +94,14 @@
            <div class="clear"></div>
        </div>
        <div class="content_bottom">
            <p class="title_into">告警情况</p>
            <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-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>
@@ -134,12 +134,13 @@
import * as echarts from 'echarts';
// import ContentBox from "@/components/ContentBox";
import gridCircuitDiagram from '@/pages/monitoring/js/gridCircuitDiagram'
// import diagramStates from '@/pages/home/topoGraphdiagram/js/diagramStates'
import diagramStates from '@/pages/monitoring/js/diagramStates'
let diagram;
export default {
    chart: {},
    data(){
        return {
            isOpen:false,
            tableData:[],
            formData:{
                thisInfo:{
@@ -172,6 +173,7 @@
    mounted() {
        let self = this;
        diagram = gridCircuitDiagram(this.$refs.static, this.$refs.flush);
        diagramStates(diagram, 'run1');
        self.initEcharts();
        self.openSocket();
    },
@@ -199,24 +201,26 @@
                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.formData.thisInfo.cxFivePanelCurr = result.data.screenRTList[0].panelCurr + "V/AC";
                self.echartsList[0].echartsCurr.push(result.data.screenRTList[0].panelCurr);

                self.formData.thisInfo.cxFivePanelVol = result.data.screenRTList[0].panelVol + "V";
                self.formData.thisInfo.cxFivePanelVol = result.data.screenRTList[0].panelVol + "A";
                self.echartsList[0].echartsVol.push(result.data.screenRTList[0].panelVol);

                self.formData.thisInfo.cxOnePanelVol = result.data.screenRTList[2].panelVol + "V";
                self.formData.thisInfo.cxOnePanelVol = result.data.screenRTList[2].panelVol + "A";
                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.formData.thisInfo.cxTwoPanelVol = result.data.screenRTList[3].panelVol + "A";
                self.echartsList[2].echartsCurr.push(result.data.screenRTList[3].panelCurr);
                self.echartsList[2].echartsVol.push(result.data.screenRTList[3].panelVol);

@@ -225,8 +229,8 @@



                self.formData.thisInfo.volA = result.data.dcMainBoard.volA + "V";
                self.formData.thisInfo.volB = result.data.dcMainBoard.volB + "V";
                self.formData.thisInfo.volA = result.data.dcMainBoard.volA + "V/AC";
                self.formData.thisInfo.volB = result.data.dcMainBoard.volB + "V/AC";
                self.formData.thisInfo.currA = result.data.dcMainBoard.currA + "A";
                self.formData.thisInfo.currB = result.data.dcMainBoard.currB + "A";
            }
@@ -241,7 +245,6 @@
                }
                self.setOption(item,true);
            });
            console.log(result)
        },
        getTime(){
            var myDate = new Date(); //实例一个时间对象；
@@ -265,7 +268,7 @@
            // 关闭websocket
            if (this.isOpen) {
                // 打印关闭信息
                console.log("关闭电源实时告警WebSocket");
                console.log("关闭电源实时报警WebSocket");
                this.socket.close();
            }
        },
@@ -281,6 +284,7 @@
                        bottom: '30'
                    },
                    tooltip: {
                        "trigger":"axis",
                        show: true
                    },
                    xAxis: {
@@ -319,6 +323,7 @@
                        // xAxisIndex: 0,
                        yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        type: 'line',
                        symbol: 'none',
                        step: false,
                        smooth: true
                    },{
@@ -326,6 +331,7 @@
                        // xAxisIndex: 0,
                        yAxisIndex: 1,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        type: 'line',
                        symbol: 'none',
                        // step: false,
                        smooth: true
                    },]
@@ -393,6 +399,12 @@
    border:1px solid #1e9ff2;
    padding: 1%;
}
.content_top {
    height: 20%;
}
.content_bottom {
    height: 40%;
}
.content_cent{
    height: 38%;
}
@@ -405,7 +417,7 @@
}
.detail_info{
    float: left;
    width: 22%;
    width: 18%;
    margin-right: 2%;
    font-size: 12px;
    padding-top: 2%;
@@ -413,6 +425,9 @@
.detail_info .el-form-item{
    margin-bottom:0;
}
.detail_form{
    width: 28%;
}
.right_box{
    width: 39%;
}