动图

whycwx

2021-07-22 4bfe87304988cfa2338bb58210ee227b917a9247

动图

 src/pages/dcSwitchboard/dcSwitchboard.vue

@@ -12,9 +12,9 @@
        <div class="content_top">
            <p class="title_into">当前运行情况</p>
            <el-form ref="form" label-width="150px">
                <el-form-item label="大功率整流电源：">
                <!-- <el-form-item label="大功率整流电源：">
                    <el-input size="mini" v-model="formData.thisInfo.dglzldy" style="width:210px"></el-input>
                </el-form-item>
                </el-form-item> -->
                <el-form-item label="开关状态：">
                    <el-input size="mini" v-model="formData.thisInfo.kgzt" style="width:210px"></el-input>
                </el-form-item>

 src/pages/dcSwitchboard/js/gridCircuitDiagram.js

@@ -101,7 +101,7 @@
        lineWidth: lineWidth,
        points: [
            [line5[0][0], line5[0][1]],
            [line3[1][0] - 10, line3[1][1]]
            [line3[1][0], line3[1][1]]
        ]
    });
    let line7 = diagram.line({
@@ -224,7 +224,7 @@
        lineWidth: lineWidth,
        points: [
            [line16[0][0], line16[0][1]],
            [line15[1][0] - 10, line15[1][1]]
            [line15[1][0], line15[1][1]]
        ]
    });
    // 右边开始线条
@@ -299,7 +299,7 @@
        lineWidth: lineWidth,
        points: [
            [line22[0][0], line22[0][1]],
            [line21[1][0] - 10, line21[1][1]]
            [line21[1][0], line21[1][1]]
        ]
    });
    // 
@@ -370,7 +370,7 @@
        lineWidth: lineWidth,
        points: [
            [line25B[0][0], line25B[0][1]],
            [line4[1][0] - 10, line4[1][1]]
            [line4[1][0], line4[1][1]]
        ]
    });
    let line27 = diagram.line({
@@ -493,7 +493,7 @@
        lineWidth: lineWidth,
        points: [
            [line36[0][0], line36[0][1]],
            [line35[1][0] - 10, line35[1][1]]
            [line35[1][0], line35[1][1]]
        ]
    });
    // 右边开始线条
@@ -568,7 +568,7 @@
        lineWidth: lineWidth,
        points: [
            [line42[0][0], line42[0][1]],
            [line41[1][0] - 10, line41[1][1]]
            [line41[1][0], line41[1][1]]
        ]
    });
    // 

 src/pages/dynamometerMmotor/dynamometerMmotor.vue

@@ -8,9 +8,9 @@
                <el-form-item label="受试电机状态：">
                    <el-input size="mini" v-model="formData.thisInfo.ssdjzt" style="width:65px"></el-input>
                </el-form-item>
                <el-form-item label="直流调速柜：">
                <!-- <el-form-item label="直流调速柜：">
                    <el-input size="mini" v-model="formData.thisInfo.zltsg" style="width:65px"></el-input>
                </el-form-item>
                </el-form-item> -->

                <el-form-item label="受试侧轴联器：">
                    <el-input size="mini" v-model="formData.thisInfo.ssczlq" style="width:65px"></el-input>
@@ -82,11 +82,12 @@
    </div>
    <div class="left_Box">
        <!-- <div class="tipTitle">AFE变频驱动柜监控</div> -->
        <div class="content_cent canvs_box">
        <div class="content_cent canvs_box" style="position:relative;">
            <div class="diagram-content">
                    <div class="diagram-stc" ref="static"></div>
                    <div class="diagram-flush" ref="flush"></div>
            </div>
            <abs-panel class="diagramPanel2" title="受试电机" :list="underTestMotor"></abs-panel>
        </div>
        <div class="content_bottom list_box">
            <p class="title_into">报警情况</p>
@@ -120,6 +121,7 @@
import getWsUrl from "@/assets/js/getWsUrl";
import * as echarts from 'echarts';
import gridCircuitDiagram from '@/pages/dynamometerMmotor/js/gridCircuitDiagram'
import absPanel from '@/components/smallModule/absPanel.vue';
let diagram;
export default {
    chart: {},
@@ -127,6 +129,27 @@
        return {
            isOpen:false,
            tableData:[],
            underTestMotor: [{
                    label: '电压：',
                    value: 690,
                    unit: "V",
                },
                {
                    label: '频率：',
                    value: 44.5,
                    unit: "Hz",
                },
                {
                    label: '转速：',
                    value: 89,
                    unit: "r/min",
                },
                {
                    label: '输出功率:',
                    value: 980,
                    unit: "kW",
                },
            ],
            formData:{
                thisInfo:{
                    ssdjzt:"运行中",
@@ -154,6 +177,7 @@
        }
    },
    components:{
        absPanel
        // ContentBox
    },
    mounted() {
@@ -637,4 +661,8 @@
.list_box{
    height: 33.5%;
}
.diagramPanel2 {
    left: 350px;
    top: 230px;
}
</style>

 src/pages/dynamometerMmotor/js/gridCircuitDiagram.js

@@ -35,7 +35,7 @@
        lineWidth: lineWidth,
        points: [
            [line1[1][0],line1[1][1]],
            [line1[1][0]+260, line1[1][1]]
            [line1[1][0]+200, line1[1][1]]
        ]
    });

@@ -45,7 +45,7 @@
        lineWidth: lineWidth,
        points: [
            [line2[1][0]+2,line2[1][1]],
            [line2[1][0]+130, line2[1][1]]
            [line2[1][0]+190, line2[1][1]]
        ]
    });
    let line4 = diagram.line({
@@ -174,7 +174,7 @@
        fillStyle: '#1e9ff2',
        fontSize: 12,
        fontWidth:1,
        point:[line1[0][0]+30,line1[0][1]+50],
        point:[line1[0][0]+20,line1[0][1]+50],
        showPanel: false,
    });

@@ -330,6 +330,29 @@
        point:[Image6.top[0]-30,Image6.top[1]-15],
        showPanel: false,
    });

    // let text12 = diagram.text({
    //     id: "text12",
    //     text: '&电压：690V&频率：44.5Hz&转速：89r/min&输出功率：980kW',
    //     fillStyle: '#ffffff',
    //     fontSize: 12,
    //     fontWidth:1,
    //     point:[Image3.top[0]+50,Image3.top[1]-160],
    //     showPanel: false,
    //     type:true,
    //     radBorder: true,
    //     bgColor:"rgba(2, 151, 215, 0.3)",
    //     borderColor:"rgba(30, 159, 242, 1)"
    // });
    // let text13 = diagram.text({
    //     id: "text13",
    //     text: '      受功电机',
    //     fillStyle: "#ffff18",
    //     fontSize: 12,
    //     fontWidth:1,
    //     point:[Image3.top[0]+50,Image3.top[1]-160],
    //     showPanel: false,
    // });
// 



 src/pages/monitoring/intoLineMonitoring.vue

@@ -19,9 +19,9 @@
                <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">
@@ -134,7 +134,7 @@
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: {},
@@ -173,6 +173,7 @@
    mounted() {
        let self = this;
        diagram = gridCircuitDiagram(this.$refs.static, this.$refs.flush);
        diagramStates(diagram, 'run1');
        self.initEcharts();
        self.openSocket();
    },
@@ -209,17 +210,17 @@
            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);

@@ -228,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";
            }

 src/pages/monitoring/js/diagramStates.js

New file
@@ -0,0 +1,159 @@
// 基础配置
let springGreen = "#50cef5";
let red = "#b370fe";
let scalcRadius = 3;
// 放电状态
function diagramStates(diagram, type) {
    // 断开所有的开关
    // diagram.setOption('km1', 'state', false);
    // diagram.setOption('km2', 'state', false);
    // diagram.setOption('km3', 'state', false);
    // diagram.setOption('km4', 'state', false);
    // 清除电流
    // diagram.del(/^line.*dot$/);
    if (type == "run1") {
        run1Charge(diagram);
        // run2Charge(diagram);
        // run3Charge(diagram);
    }

    if (type == "run2") {
        run2Charge(diagram);
    }

    if (type == "run3") {
        run3Charge(diagram);
    }
}

// 运行状态1
function run1Charge(diagram) {
    // 线条1
    let line1 = diagram.getOption('line3').points;
    // 线条2
    let line2 = diagram.getOption('line2').points;
        diagram.moveDot({
            id: 'line1_dot',
            fillStyle: springGreen,
            strokeStyle: springGreen,
            radius: scalcRadius,
            flush: true,
            points: [line1[0], line2[0]],
        });
    // 线条3
    let line3 = diagram.getOption('line5').points;
        diagram.moveDot({
            id: 'line2_dot',
            fillStyle: springGreen,
            strokeStyle: springGreen,
            radius: scalcRadius,
            flush: true,
            points: [line2[0], line3[1]],
        });
    //线条4
    let line4 = diagram.getOption('line6').points;
        diagram.moveDot({
            id: 'line3_dot',
            fillStyle: springGreen,
            strokeStyle: springGreen,
            radius: scalcRadius,
            flush: true,
            points: [line3[0], line4[1]],
        });
    // 线条5
    let line5 = diagram.getOption('line12').points;  
        diagram.moveDot({
            id: 'line4_dot',
            fillStyle: springGreen,
            strokeStyle: springGreen,
            radius: scalcRadius,
            flush: true,
            points: [line4[1], line5[1]],
        });
    // 线条6
    let line6 = diagram.getOption('line13').points;  
        diagram.moveDot({
            id: 'line5_dot',
            fillStyle: springGreen,
            strokeStyle: springGreen,
            radius: scalcRadius,
            flush: true,
            points: [line5[1], line6[1]],
        });
}

// 运行状态2
function run2Charge(diagram) {
    
    // // 线条3
    // let line3 = diagram.getOption('line3').points;
    // // 线条4
    // let line4 = diagram.getOption('line4').points;
    // diagram.moveDot({
    //     id: 'line3_dot',
    //     fillStyle: springGreen,
    //     strokeStyle: springGreen,
    //     radius: scalcRadius,
    //     flush: true,
    //     points: [line3[0], line4[1]],
    // });
    // // 线条5
    // let line5 = diagram.getOption('line5').points;
    // // 线条6
    // let line6 = diagram.getOption('line6').points;
    // diagram.moveDot({
    //     id: 'line5_dot',
    //     fillStyle: springGreen,
    //     strokeStyle: springGreen,
    //     radius: scalcRadius,
    //     flush: true,
    //     points: [line5[0], line6[1]],
    // });
}

function run3Charge(diagram) {

    // 线条1
    let line1 = diagram.getOption('line1').points;
    // 线条2
    let line2 = diagram.getOption('line2').points;
    diagram.moveDot({
        id: 'line1_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [line1[0], line2[1]],
    });

    // 线条3
    let line3 = diagram.getOption('line3').points;
    // 线条4
    let line4 = diagram.getOption('line4').points;
    diagram.moveDot({
        id: 'line3_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [line3[0], line4[1]],
    });


    // 线条5
    let line5 = diagram.getOption('line5').points;
    // 线条6
    let line6 = diagram.getOption('line6').points;
    diagram.moveDot({
        id: 'line5_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [line5[0], line6[1]],
    });

}


export default diagramStates;

 src/pages/monitoring/js/gridCircuitDiagram.js

@@ -75,7 +75,7 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line3[1][0] - 30, line3[1][1]],
            [line3[1][0], line3[1][1]],
            [line2[1][0], line2[1][1]]
        ]
    })
@@ -138,7 +138,7 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line5[1][0] - 30, line5[1][1]],
            [line5[1][0], line5[1][1]],
            [line6[0][0], line6[0][1]]
        ]
    })
@@ -288,7 +288,7 @@
    let Image1 = diagram.drawImage({
        id: 'img1',
        url: rectifier,
        point: [line15[1][0] - 60, line15[1][1]],
        point: [line15[1][0] - 60, line15[1][1]-20],
        width: 70,
        height: 101,
    })

 src/pages/testedMotor/js/gridCircuitDiagram.js

@@ -138,7 +138,7 @@
        lineWidth: lineWidth,
        points: [
            [line7[1][0],line7[1][1]],
            [line8[0][0], line8[0][1]-10]
            [line8[0][0], line8[0][1]]
            
        ],
        hide: hideStatus,
@@ -173,7 +173,7 @@

    let text3 = diagram.text({
        id: "text3",
        text: '900V',
        text: '900V/DC',
        fillStyle: '#fff',
        fontSize: 12,
        fontWidth:1,

 src/pages/testedMotor/testedMotor.vue

@@ -8,9 +8,9 @@
                <el-form-item label="受试电机状态：">
                    <el-input size="mini" v-model="formData.thisInfo.ssdjzt" style="width:65px"></el-input>
                </el-form-item>
                <el-form-item label="直流调速柜：">
                <!-- <el-form-item label="直流调速柜：">
                    <el-input size="mini" v-model="formData.thisInfo.zltsg" style="width:65px"></el-input>
                </el-form-item>
                </el-form-item> -->

                <el-form-item label="受试侧轴联器：">
                    <el-input size="mini" v-model="formData.thisInfo.ssczlq" style="width:65px"></el-input>