内容调成

whychdw

2021-08-03 a82b6eb05820368bd047d7a47fac6797567e99b3

 src/pages/dcSwitchboard/dcSwitchboard.vue

@@ -1,129 +1,129 @@
<template>
<div class="body_box">
    <!-- 直流配电板监控 -->
    <div class="tipTitle">直流配电板监控</div>
    <div class="left_Box">
        <div class="diagram-content">
    <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>
    <div class="content_box">
        <div class="content_top">
            <p class="title_into">当前运行情况</p>
            <el-form ref="form" label-width="150px">
                <!-- <el-form-item label="大功率整流电源：">
                    <el-input size="mini" v-model="formData.thisInfo.dglzldy" style="width:210px"></el-input>
                </el-form-item> -->
                <el-form-item label="开关状态：">
                    <el-input size="mini" v-model="formData.thisInfo.kgzt" style="width:210px"></el-input>
                </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 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>
                    <el-form-item label="电流：">
                        <el-input size="mini" v-model="formData.thisInfo.cxFivePanelVol"></el-input>
        <div class="content_box">
            <div class="content_top">
                <p class="title_into">当前运行情况</p>
                <el-form ref="form" label-width="150px">
                    <!-- <el-form-item label="大功率整流电源：">
                        <el-input size="mini" v-model="formData.thisInfo.dglzldy" style="width:210px"></el-input>
                    </el-form-item> -->
                    <el-form-item label="开关状态：">
                        <el-input size="mini" v-model="formData.thisInfo.kgzt" style="width:210px"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="detail_info">5000kVA出线屏</div>
            <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>
                    <el-form-item label="电流：">
                        <el-input size="mini" v-model="formData.thisInfo.cxFivePanelVol"></el-input>
                    </el-form-item>
                </el-form>
            <div class="content_cent">
                <p class="title_into">详细参数情况</p>
                <div class="clear"></div>
                <div class="detail_info">5000kVA进线屏</div>
                <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>
                        <el-form-item label="电流：">
                            <el-input size="mini" v-model="formData.thisInfo.cxFivePanelVol"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="detail_info">5000kVA出线屏</div>
                <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>
                        <el-form-item label="电流：">
                            <el-input size="mini" v-model="formData.thisInfo.cxFivePanelVol"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="clear"></div>
                <div class="partition"></div>
                <div class="detail_info">1号3200kVA出线</div>
                <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 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>
                    </el-form>
                </div>
                <div class="clear"></div>
                <div class="partition"></div>
                <div class="detail_info">电源输入 A排</div>
                <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>
                        <el-form-item label="电流：">
                            <el-input size="mini" v-model="formData.thisInfo.currA"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="detail_info">电源输入 B排</div>
                <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>
                        <el-form-item label="电流：">
                            <el-input size="mini" v-model="formData.thisInfo.currB"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
            <div class="partition"></div>
            <div class="detail_info">1号3200kVA出线</div>
            <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 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>
                </el-form>
            </div>
            <div class="clear"></div>
            <div class="partition"></div>
            <div class="detail_info">电源输入 A排</div>
            <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>
                    <el-form-item label="电流：">
                        <el-input size="mini" v-model="formData.thisInfo.currA"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="detail_info">电源输入 B排</div>
            <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>
                    <el-form-item label="电流：">
                        <el-input size="mini" v-model="formData.thisInfo.currB"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <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 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>
    <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";
@@ -131,38 +131,39 @@
// import ContentBox from "@/components/ContentBox";
import gridCircuitDiagram from '@/pages/dcSwitchboard/js/gridCircuitDiagram'
import diagramStates from '@/pages/dcSwitchboard/js/diagramStates'

let diagram;
export default {
    chart: {},
    data(){
    data() {
        return {
            isOpen:false,
            tableData:[],
            formData:{
                thisInfo:{
                    kgzt:"|O|O QS1分闸 QTIE分闸 QS2合闸",
                    dglzldy:"运行中",
                    cxFivePanelCurr:'',
                    cxFivePanelVol:"",
                    cxOnePanelVol:"",
                    cxTwoPanelVol:"",
                    volA:"",
                    volB:"",
                    currA:"",
                    currB:""
            isOpen: false,
            tableData: [],
            formData: {
                thisInfo: {
                    kgzt: "|O|O QS1分闸 QTIE分闸 QS2合闸",
                    dglzldy: "运行中",
                    cxFivePanelCurr: '',
                    cxFivePanelVol: "",
                    cxOnePanelVol: "",
                    cxTwoPanelVol: "",
                    volA: "",
                    volB: "",
                    currA: "",
                    currB: ""

                }
            },
            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"},
            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:[],
            dateTime: [],
        }
    },
    components:{
    components: {
        // ContentBox
    },
    mounted() {
@@ -174,11 +175,11 @@
    },
    methods: {
        // 初始化图表
        initEcharts(){
        initEcharts() {
            let self = this;
                self.echartsList.forEach(item => {
                    self.$options.chart[item.class] = echarts.init(self.$refs[item.class]);
                });
            self.echartsList.forEach(item => {
                self.$options.chart[item.class] = echarts.init(self.$refs[item.class]);
            });
        },
        // 打开链接
        openSocket() {
@@ -196,13 +197,13 @@
                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){
            if (result.code == 1) {
                this.isOpen = true;
                // 表单赋值
                self.formData.thisInfo.cxFivePanelCurr = result.data.screenRTList[0].panelCurr + "A";
@@ -223,32 +224,31 @@
                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){
            if (self.dateTime.length > 10) {
                self.dateTime.shift();
            }
            self.echartsList.forEach(item => {
                if(item.echartsCurr.length>10){
                if (item.echartsCurr.length > 10) {
                    item.echartsCurr.shift();
                    item.echartsVol.shift();
                }
                self.setOption(item,true);
                self.setOption(item, true);
            });
        },
        getTime(){
            var myDate = new Date(); //实例一个时间对象；
                // myDate.getFullYear();   //获取系统的年；
                // myDate.getMonth()+1;   //获取系统月份，由于月份是从0开始计算，所以要加1
                // myDate.getDate(); // 获取系统日，
                // myDate.getHours(); //获取系统时，
                // myDate.getMinutes(); //分
                // myDate.getSeconds(); //秒
        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
        },
@@ -268,178 +268,208 @@
            }
        },
        // 配置图表
        setOption:function(data,status){
        setOption: function (data, status) {
            let self = this;
            let option = {
                    animation: false,
                    grid: {
                        left: '70',
                        top: '20',
                        right: '70',
                        bottom: '30'
                animation: false,
                grid: {
                    left: '70',
                    top: '20',
                    right: '70',
                    bottom: '30'
                },
                tooltip: {
                    "trigger": "axis",
                    show: true
                },
                xAxis: {
                    type: 'category',
                    show: true,
                    splitLine: {
                        show: false
                    },
                    tooltip: {
                        "trigger":"axis",
                        show: true
                    data: self.dateTime
                },
                yAxis: [{
                    type: 'value',
                    gridIndex: 0,
                    show: true,
                    splitLine: {
                        show: false
                    },
                    xAxis: {
                        type: 'category',
                        show: true,
                        splitLine:{
                            show:false
                        },
                        data:self.dateTime
                    minInterval: 1,
                    axisLabel: {
                        formatter: '{value}V'
                    },
                    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);
                
                
                }, {
                    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(){
        setPanelPos: function () {

        }
    },
    destroyed(){
    destroyed() {
        this.close();
    }

}
</script>    
</script>
<style scoped>
.width_80{
.width_80 {
    width: 80px;
}
.clear{

.clear {
    clear: both;
}
.partition{

.partition {
    height: 1px;
    width: 100%;
    border-bottom:1px solid #fff;
    border-bottom: 1px solid #fff;
}
.batteryrHistoryquery{

.batteryrHistoryquery {
    overflow: auto;
}
.echarts-right{

.echarts-right {
    width: 100%;
    height: 160px;
}
.title_echarts{

.title_echarts {
    padding: 0 0 0 20px;
    font-size: 12px;
}
/deep/.el-input__inner{

/deep/ .el-input__inner {
    padding: 0 0.5rem;
}
/deep/.el-table th, /deep/.el-table tr{

/deep/ .el-table th, /deep/ .el-table tr {
    background: #171350 !important;
    color: #fff;
}
.body_box{

.body_box {
    width: 100%;
    height: 100%;
}
.left_Box,.content_box,.right_box{

.left_Box, .content_box, .right_box {
    float: left;
    height: 96%;
    margin: 0 4px;
}
.right_box{

.right_box {
    border: 1px solid #1e9ff2;
}
.content_box{

.content_box {
    width: 39%;
    margin-left: 10px;
    

}
.content_top,.content_cent,.content_bottom{

.content_cent, .content_bottom {
    height: 30%;
    border:1px solid #1e9ff2;
    border: 1px solid #1e9ff2;
    padding: 1%;
}
.content_cent{
.content_bottom {
    height: 48%;
}
.content_top {
    height: 12%;
    border: 1px solid #1e9ff2;
    padding: 1%;
}

.content_cent {
    height: 38%;
}
.content_cent{

.content_cent {
    margin: 1% 0;
}
.title_into{

.title_into {
    padding-left: 1%;
    color: #ffff18;
}
.detail_info{

.detail_info {
    float: left;
    width: 12%;
    margin-right: 2%;
    font-size: 12px;
    padding-top: 2%;
}
.detail_info .el-form-item{
    margin-bottom:0;

.detail_info .el-form-item {
    margin-bottom: 0;
}
.detail_form{

.detail_form {
    width: 28%;
}
.right_box{

.right_box {
    width: 39%;
}
.left_Box{

.left_Box {
    background: url("../../assets/images/leftBg.png") 0 0 no-repeat;
    background-size: 100% 100%;
    width: 20%;
    height: 96%;
    padding: 0.75rem 1rem;
}
.diagram-content{

.diagram-content {
    height: 100%;
    width: 100%;
    position: relative;
}

.diagram-stc {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.diagram-flush {
    position: absolute;
@@ -450,7 +480,8 @@
    z-index: 9;
    overflow: hidden;
}
.diagram-stc /deep/ canvas,.diagram-flush /deep/ canvas{
    object-fit:fill !important;

.diagram-stc /deep/ canvas, .diagram-flush /deep/ canvas {
    object-fit: fill !important;
}
</style>