动图

whycwx

2021-07-22 4bfe87304988cfa2338bb58210ee227b917a9247

 src/pages/dynamometerMmotor/dynamometerMmotor.vue

@@ -1,6 +1,6 @@
<template>
<div class="body_box">
    <div class="tipTitle">测功机监测</div>
    <div class="tipTitle">测功电机监测</div>
    <div class="content_box">
        <div class="content_top">
            <p class="title_into">当前运行情况</p>
@@ -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,21 +82,22 @@
    </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>
            <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="告警时间"></el-table-column>
                        <el-table-column prop="name" label="告警名称"></el-table-column>
                        <el-table-column prop="address" label="告警描述"></el-table-column>
                        <el-table-column prop="date" label="报警时间"></el-table-column>
                        <el-table-column prop="name" label="报警名称"></el-table-column>
                        <el-table-column prop="address" label="报警描述"></el-table-column>
                    </el-table>
                </div>
            </div>
@@ -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() {
@@ -253,7 +277,7 @@
            // 关闭websocket
            if (this.isOpen) {
                // 打印关闭信息
                console.log("关闭电源实时告警WebSocket");
                console.log("关闭电源实时报警WebSocket");
                this.socket.close();
            }
        },
@@ -307,6 +331,7 @@
                        // xAxisIndex: 0,
                        yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        type: 'line',
                        symbol: 'none',
                        step: false,
                        smooth: true
                    },{
@@ -314,6 +339,7 @@
                        // xAxisIndex: 0,
                        yAxisIndex: 1,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        type: 'line',
                        symbol: 'none',
                        // step: false,
                        smooth: true
                    },]
@@ -403,7 +429,7 @@
                    yData.push(a.value);
                }
            });
        let option = {
            let option = {
                backgroundColor: "#111c4e",
                color: ['#3398DB'],
                tooltip: {
@@ -635,4 +661,8 @@
.list_box{
    height: 33.5%;
}
.diagramPanel2 {
    left: 350px;
    top: 230px;
}
</style>