内容提交

whychdw

2020-12-25 e08a120adda3b9ee591e46a3b24a0ef08310b31e

内容提交

 public/theme/science-black.css

@@ -358,7 +358,9 @@
.el-science-blue .el-table tr {
    background: none;
}

.el-science-blue .el-table tr {
    background: #00253F;
}
.el-science-blue .el-table th {
    font-size: 14px;
    background-color: #0d4f65;
@@ -389,7 +391,7 @@
}

.el-science-blue .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #153953;
    background-color: #153953;
}

.el-science-blue .el-table th>.cell {

 src/assets/css/common.css

@@ -37,8 +37,14 @@
.h540 {
    height: 540px;
}
.h30-percent {
    height: 30%;
}
.h50-percent {
    height: 50%;
}
.full-height {
    height: 100%;
}
/* */
.overflow-y {
@@ -202,4 +208,48 @@
}
.el-science-blue .handle {
    background: #1f66e7;
}

/* light */
.hdw-light {
    position: relative;
    display: inline-block;
    width: 22px;
    height: 22px;
}

.hdw-light:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -5px;
    margin-left: -5px;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: #4afd88;
    box-shadow: 0 0 6px 6px #4afd8880;
}

.hdw-light.error-light:before {
    background-color: #fd5b67;
    animation: errorLight 1000ms infinite;
    box-shadow: 0 0 6px 6px #fd586480;
}

@keyframes errorLight {
    0% {
        opacity: 1;
        box-shadow: 0 0 6px 6px #fd586480;
    }
    50% {
        opacity: 0.3;
        box-shadow: 0 0 0 0 #fd586480;
    }
    100% {
        opacity: 1;
        box-shadow: 0 0 6px 6px #fd586480;
    }
}

 src/components/PageHeader.vue

@@ -55,7 +55,7 @@
                        </div>
                    </div>
                    <div class="data-totals">
<!--            <hdw-badge-btn text="电源告警数"></hdw-badge-btn>-->
                        <hdw-badge-btn text="电源告警数"></hdw-badge-btn>
                        <hdw-badge-btn text="机房停电数" :value="numbers.powerOff" @click="goPages('powerOff')">
                        </hdw-badge-btn>
                        <hdw-badge-btn text="电池告警数" :value="numbers.battWarn" @click="goPages('battWarn')">

 src/components/chart/CirclePieChart.vue

New file
@@ -0,0 +1,175 @@
<template>
    <div class="e-chart-root">
        <div class="e-chart-container">
            <div class="e-chart" :id="id" :ref="id"></div>
        </div>
    </div>
</template>

<script>
// 引入 ECharts 主模块
import ECharts from "echarts/lib/echarts";
//引入图库
import "echarts/lib/chart/pie";
//引入提示框
import "echarts/lib/component/tooltip";
//引入标题
import "echarts/lib/component/title";
//引入图例标志
import "echarts/lib/component/legend";
//区域缩放
import "echarts/lib/component/dataZoom";

import "echarts/lib/component/angleAxis";

import "echarts/lib/component/polar";

//markeline
import "echarts/lib/component/markLine";

// 引入自定义主题
import "./theme/transparent";

export default {
    name: "CirclePieChart",
    props: {
        id: {
            type: String,
            required: true,
        },
        unit: {
            type: String,
            default: '',
        },
        value: {
            type: Number,
            default: 0
        },
        max: {
            type: Number,
            default: 100
        },
        color: {
            type: String,
            default: "#38fb6e"
        },
        resColor: {
            type: String,
            default: "#6f7cad"
        },
        fontColor: {
            type: String,
            default: '#fff'
        },
    },
    data() {
        return {
            fullScreenState: false,
        }
    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        let chart = ECharts.init(this.$refs[this.id], 'transparent');
        // 将图表添加到图表管理
        this.$G.chartManage.set(this.id, chart);
        // 设置配置项
        this.setOption();
    },
    methods: {
        getOption() {
            let unit = this.unit;
            let value = this.value;
            let max = this.max;
            let color = this.color;
            let resColor = this.resColor;
            let fontColor = this.fontColor;
            let option = {
                title: {
                    text: value+unit,
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        fontWeight: 'normal',
                        color: fontColor,
                        fontSize: 16
                    }
                },
                tooltip: {
                    show: false,
                },
                series: [{
                    name: 'circle',
                    type: 'pie',
                    clockWise: true,
                    radius: ['50%', '66%'],
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    },
                    hoverAnimation: false,
                    data: [{
                        value: value,
                        name: '占比',
                        itemStyle: {
                            normal: {
                                color: color,
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        }
                    }, {
                        name: '剩余',
                        value: max-value,
                        itemStyle: {
                            normal: {
                                color: resColor
                            }
                        }
                    }]
                }]
            };
            return option;
        },
        setOption(opt) {
            let option = this.getOption();
            // 清理画布
            this.$G.chartManage.get(this.id).clear();
            // 设置配置项
            this.$G.chartManage.get(this.id).setOption(option);
        },
        resize() {
            // 重置大小
            this.$G.chartManage.get(this.id).resize();
        },
    },
}
</script>

<style scoped>
.e-chart-root,
.e-chart-container,
.e-chart {
    height: 100%;
    box-sizing: border-box;
}

.e-chart-root.full-screen .e-chart-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 100% 100%;
    z-index: 9999;
}
</style>

 src/components/chart/LineChart.vue

@@ -202,7 +202,11 @@
                    // 重置大小
                    this.$G.chartManage.get(this.id).resize();
                });
            }
            },
            resize() {
                // 重置大小
                this.$G.chartManage.get(this.id).resize();
            },
        },
        mounted() {
            // 基于准备好的dom，初始化echarts实例

 src/pages/dataMager/components/AnalogTabPane.vue

New file
@@ -0,0 +1,334 @@
<template>
    <div class="page-flex-layout">
        <div class="page-flex-content">
            <div class="page-division h50-percent">
                <el-row :gutter="16" class="full-height">
                    <el-col :span="12" class="full-height">
                        <flex-box title="三项交流电压（V）">
                            <div class="flex-box-list-full">
                                <div
                                    v-for="item in gaugeChart.ACVol" :key="item.id"
                                    class="flex-box">
                                    <gauge-chart
                                        :ref="item.id"
                                        :id="item.id"
                                        :unit="item.unit"
                                        :min="item.min"
                                        :max="item.max"
                                        :color="item.color"
                                        :number="item.number">
                                    </gauge-chart>
                                </div>
                            </div>
                        </flex-box>
                    </el-col>
                    <el-col :span="12" class="full-height">
                        <flex-box title="三项交流电流（A）">
                            <div class="flex-box-list-full">
                                <div
                                    v-for="item in gaugeChart.ACCurr" :key="item.id"
                                    class="flex-box">
                                    <gauge-chart
                                        :ref="item.id"
                                        :id="item.id"
                                        :unit="item.unit"
                                        :min="item.min"
                                        :max="item.max"
                                        :color="item.color"
                                        :number="item.number">
                                    </gauge-chart>
                                </div>
                            </div>
                        </flex-box>
                    </el-col>
                </el-row>
            </div>
            <div class="page-division h50-percent">
                <el-row :gutter="16" class="full-height">
                    <el-col :span="12" class="full-height">
                        <flex-box no-header>
                            <bar-chart-y ref="vol" id="vol" unit="V"></bar-chart-y>
                        </flex-box>
                    </el-col>
                    <el-col :span="12" class="full-height">
                        <flex-box no-header>
                            <bar-chart-y-on-line ref="curr" id="curr" unit="A"></bar-chart-y-on-line>
                        </flex-box>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="page-flex-footer page-right-width">
            <div class="h500" v-if="reset">
                <table-list title="整流器输出电流（A）">
                    <el-table :data="simulation" stripe :show-header="false" height="100%"
                              size="small">
                        <el-table-column
                            prop="name"
                            label="名称"
                            align="center"
                            min-width="100"
                            class-name="table-list-name">
                        </el-table-column>
                        <el-table-column
                            prop="value"
                            label="值"
                            align="center"
                            class-name="table-list-value"></el-table-column>
                    </el-table>
                </table-list>
            </div>
            <div class="temp-chart-wrapper">
                <flex-box title="环境温度（℃）">
                    <circle-chart ref="amTemp" id="amTemp" unit="℃"></circle-chart>
                </flex-box>
            </div>
        </div>
    </div>
</template>

<script>
import BarChartY from "@/components/chart/BarChartY";
import GaugeChart from "@/components/chart/GaugeChart";
import CircleChart from "@/components/chart/CircleChart";
import BarChartYOnLine from "@/components/chart/BarChartYOnLine";
import TableList from "@/components/TableList";
import FlexBox from "@/components/FlexBox";

export default {
    name: "AnalogTabPane",
    components: {
        BarChartY,
        GaugeChart,
        CircleChart,
        BarChartYOnLine,
        TableList,
        FlexBox,
    },
    props: {
        name: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            reset: true,
            gaugeChart: {
                ACVol: [
                    {
                        id: "ACVolA",
                        name: '三项交流电压',
                        number: "A",
                        min: 0,
                        max: 250,
                        unit: '伏特(V)',
                        color: [[0.2, '#F8BD45'], [0.8, '#00FFFF'], [1, '#F3535F']],
                    },
                    {
                        id: "ACVolB",
                        name: '三项交流电压',
                        number: "B",
                        min: 0,
                        max: 250,
                        unit: '伏特(V)',
                        color: [[0.2, '#F8BD45'], [0.8, '#00FFFF'], [1, '#F3535F']],
                    },
                    {
                        id: "ACVolC",
                        name: '三项交流电压',
                        number: "C",
                        min: 0,
                        max: 250,
                        unit: '伏特(V)',
                        color: [[0.2, '#F8BD45'], [0.8, '#00FFFF'], [1, '#F3535F']],
                    },
                ],
                ACCurr: [
                    {
                        id: "ACCurrA",
                        name: '三项交流电流',
                        number: "A",
                        min: 0,
                        max: 100,
                        unit: '安培(A)',
                        color: [[0.2, '#F8BD45'], [0.8, '#00FFFF'], [1, '#F3535F']],
                    },
                    {
                        id: "ACCurrB",
                        name: '三项交流电流',
                        number: "B",
                        min: 0,
                        max: 100,
                        unit: '安培(A)',
                        color: [[0.2, '#F8BD45'], [0.8, '#00FFFF'], [1, '#F3535F']],
                    },
                    {
                        id: "ACCurrC",
                        name: '三项交流电流',
                        number: "C",
                        min: 0,
                        max: 100,
                        unit: '安培(A)',
                        color: [[0.2, '#F8BD45'], [0.8, '#00FFFF'], [1, '#F3535F']],
                    },
                ],
            },
            volChart: {
                name: '电压值',
                data: [
                    {
                        label: '直流\n\n输出电压',
                        value: 23.1,
                        color: '#f3535f',
                    },
                    {
                        label: '电池组1\n\n电压',
                        value: 65.2,
                        color: '#f1e287',
                    },
                    {
                        label: '电池组2\n\n电压',
                        value: 23.1,
                        color: '#00fefe',
                    },
                    {
                        label: '整流器\n\n输出电压',
                        value: 65.2,
                        color: '#0081ff',
                    },
                ]
            },
            currChart: {
                data: [
                    {
                        name: '直流输出电流',
                        value: 12.3,
                    },
                    {
                        name: '电池组1电流',
                        value: 35.4,
                    },
                    {
                        name: '电池组2电流',
                        value: 12.3
                    }
                ],
            },
            amTemp: {name: '环境温度', value: 23.1},
            simulation: [
                {name: '整流器1输出电流', value: '35.4'},
                {name: '整流器2输出电流', value: '23.1'},
                {name: '整流器3输出电流', value: '12.3'},
                {name: '整流器4输出电流', value: '65.2'},
                {name: '整流器5输出电流', value: '35.4'},
                {name: '整流器6输出电流', value: '32.5'},
                {name: '整流器7输出电流', value: '65.2'},
                {name: '整流器8输出电流', value: '35.4'},
                {name: '整流器9输出电流', value: '23.1'},
                {name: '整流器10输出电流', value: '12.3'},
                {name: '整流器11输出电流', value: '35.2'},
                {name: '整流器12输出电流', value: '23.1'},
                {name: '整流器13输出电流', value: '12.3'},
                {name: '整流器14输出电流', value: '65.2'},
                {name: '整流器15输出电流', value: '35.4'},
                {name: '整流器16输出电流', value: '35.2'},
            ],
        }
    },
    mounted() {
        this.setOption();
        // 初始化echarts大小
        this.resize();
    },
    methods: {
        // 模拟量图表重置大小
        resize() {
            // 重置表格
            this.reset = false;
            this.$nextTick(() => {
                // 三项交流电压
                this.gaugeChart.ACVol.forEach(item => {
                    this.$refs[item.id][0].resize();
                });

                // 三项交流电流
                this.gaugeChart.ACCurr.forEach(item => {
                    this.$refs[item.id][0].resize();
                });

                // 电压柱状图
                this.$refs.vol.resize();

                // 电流柱状图
                this.$refs.curr.resize();

                // 环境温度
                this.$refs.amTemp.resize();

                // 重置表格
                this.reset = true;
            });
        },
        setOption() {
            if (this.name == 'analog') {
                // 电压柱状图
                this.$refs.vol.setOption(this.volChart);
                // 电流柱状图
                this.$refs.curr.setOption(this.currChart);
                // 设置环境温度
                this.$refs.amTemp.setOption(this.amTemp.name, this.amTemp.value);
            }
        },
    },
}
</script>

<style scoped>
.page-flex-footer {
    position: relative;
    padding: 0 8px;
    box-sizing: border-box;
}
.page-flex-layout {
    display: flex;
    height: 100%;
}

.page-flex-content {
    flex: 1;
}

.page-right-width {
    width: 360px;
}

.page-division {
    box-sizing: border-box;
    padding-bottom: 16px;
}

.temp-chart-wrapper {
    position: absolute;
    box-sizing: border-box;
    top: 508px;
    bottom: 16px;
    left: 8px;
    right: 8px;
}
.flex-box-list-full {
    display: flex;
    flex-direction: row;
    height: 50%;
    box-sizing: border-box;
}

.flex-box-list-full {
    height: 100%;
}

.flex-box {
    flex: 1;
    overflow: hidden;
}
</style>

 src/pages/dataMager/components/IsolatingDeviceTabPane.vue

New file
@@ -0,0 +1,294 @@
<template>
    <div class="content-container">
        <div class="content-wrapper content-wrapper-main">
            <div class="h50-percent main-top">
                <el-row class="full-height">
                    <el-col :span="12" class="full-height">
                        <div class="h50-percent padding0880">
                            <flex-box title="记录时间"></flex-box>
                        </div>
                        <div class="h50-percent padding0880">
                            <flex-box title="绝缘监测模块系统状态">
                                <el-table :data="systemState" stripe :show-header="false" height="100%"
                                          size="small">
                                    <el-table-column
                                        prop="name"
                                        label="名称"
                                        align="center"
                                        min-width="100"
                                        class-name="table-list-name no-border white-color">
                                    </el-table-column>
                                    <el-table-column
                                        prop="value"
                                        label="值"
                                        align="center"
                                        class-name="table-list-value">
                                        <template slot-scope="scope">
                                            <div class="hdw-light" :class="{'error-light':scope.row.value == 1}"></div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </flex-box>
                        </div>
                    </el-col>
                    <el-col :span="12" class="padding0888 full-height">
                        <flex-box title="充电机电压电流">
                            <el-row :gutter="16" class="h30-percent">
                                <el-col :span="12" class="full-height"
                                        v-for="item in volCurr.top" :key="item.id">
                                    <div class="circle-pie-chart-container">
                                        <div class="circle-pie-chart-wrapper">
                                            <circle-pie-chart :ref="item.id" :id="item.id"
                                                              :color="item.color" :max="item.max"
                                                              :unit="item.unit" :value="item.value"></circle-pie-chart>
                                        </div>
                                        <div class="circle-pie-chart-text">
                                            <span>绝缘监测模块</span><br>
                                            <span>{{item.name}}</span>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row :gutter="16" class="h30-percent">
                                <el-col :span="12" class="full-height"
                                        v-for="item in volCurr.middle" :key="item.id">
                                    <div class="circle-pie-chart-container">
                                        <div class="circle-pie-chart-wrapper">
                                            <circle-pie-chart :ref="item.id" :id="item.id"
                                                              :color="item.color" :max="item.max"
                                                              :unit="item.unit" :value="item.value"></circle-pie-chart>
                                        </div>
                                        <div class="circle-pie-chart-text">
                                            <span>绝缘监测模块</span><br>
                                            <span>{{item.name}}</span>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row :gutter="16" class="h30-percent">
                                <el-col :span="12" class="full-height"
                                        v-for="item in volCurr.bottom" :key="item.id">
                                    <div class="circle-pie-chart-container">
                                        <div class="circle-pie-chart-wrapper">
                                            <circle-pie-chart :ref="item.id" :id="item.id"
                                                              :color="item.color" :max="item.max"
                                                              :unit="item.unit" :value="item.value"></circle-pie-chart>
                                        </div>
                                        <div class="circle-pie-chart-text">
                                            <span>绝缘监测模块</span><br>
                                            <span>{{item.name}}</span>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </flex-box>
                    </el-col>
                </el-row>
            </div>
            <div class="h50-percent main-bottom">
                <div class="content-container">
                    <div class="content-wrapper content-wrapper-main padding0880">
                        <flex-box title="绝缘监测模块支路正/负对地电阻">
                            <line-chart ref="resLine" id="resLine"></line-chart>
                        </flex-box>
                    </div>
                    <div class="content-wrapper content-wrapper-w450 padding0888">
                        <flex-box title="绝缘监测模块故障电池信息"></flex-box>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-wrapper content-wrapper-w300 padding0088">
            <table-list title="绝缘监测模块接地支路号">
                <el-table :data="branchNumber" stripe :show-header="false" height="100%"
                          size="small">
                    <el-table-column
                        prop="name"
                        label="名称"
                        align="center"
                        min-width="100"
                        class-name="table-list-name no-border white-color">
                    </el-table-column>
                    <el-table-column
                        prop="value"
                        label="值"
                        align="center"
                        class-name="table-list-value">

                    </el-table-column>
                </el-table>
            </table-list>
        </div>
    </div>
</template>

<script>
import CirclePieChart from "@/components/chart/CirclePieChart";
import LineChart from "@/components/chart/LineChart";
import TableList from "@/components/TableList";
import FlexBox from "@/components/FlexBox";

export default {
    name: "IsolatingDeviceTabPane",
    components: {
        CirclePieChart,
        LineChart,
        TableList,
        FlexBox
    },
    props: {
        name: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            branchNumber: [
                {name: '模块1', value: '???'},
                {name: '模块2', value: '???'},
                {name: '模块3', value: '???'},
                {name: '模块4', value: '???'},
                {name: '模块5', value: '???'},
                {name: '模块6', value: '???'},
                {name: '模块7', value: '???'},
                {name: '模块8', value: '???'},
                {name: '模块9', value: '???'},
                {name: '模块10', value: '???'},
                {name: '模块11', value: '???'},
                {name: '模块12', value: '???'},
                {name: '模块13', value: '???'},
                {name: '模块14', value: '???'},
                {name: '模块15', value: '???'},
                {name: '模块16', value: '???'},
            ],
            systemState:[
                {name: '绝缘监测模块瞬时记录状态', value: 0},
                {name: '绝缘监测模块系统状态', value: 1},
                {name: '绝缘监测模块装置状态', value: 0},
            ],
            volCurr: {
                top: [
                    {
                        id: 'systemVol',
                        name: '系统电压',
                        color: '#F2535F',
                        value: 220,
                        unit: 'V',
                        max: 480,
                    },
                    {
                        id: 'volCurrACVol',
                        name: '交流电压',
                        color: '#4AFD88',
                        value: 220,
                        unit: 'V',
                        max: 480,
                    },
                ],
                middle:[
                    {
                        id: 'posFloorVol',
                        name: '正对地电压',
                        color: '#DCFD00',
                        value: 220,
                        unit: 'V',
                        max: 480,
                    },
                    {
                        id: 'nesFloorVol',
                        name: '负对地电压',
                        color: '#FA62E8',
                        value: 220,
                        unit: 'V',
                        max: 480,
                    },
                ],
                bottom: [
                    {
                        id: 'posFloorRes',
                        name: '正对地电阻',
                        color: '#F1E287',
                        value: 10,
                        unit: 'Ω',
                        max: 50,
                    },
                    {
                        id: 'NesFloorRes',
                        name: '负对地电阻',
                        color: '#00FEFF',
                        value: 10,
                        unit: 'Ω',
                        max: 50,
                    },
                ]
            },
        }
    },
    mounted() {
        this.resize();
    },
    methods: {
        // 绝缘装置图表重置大小
        resize() {
            this.$nextTick(()=>{
                this.$refs.resLine.resize();
                // 重置大小
                for(let key in this.volCurr) {
                    this.volCurr[key].map(item=>{
                        this.$refs[item.id][0].resize();
                    });
                }
            });
        },
    },
}
</script>

<style scoped>
.content-container {
    display: flex;
    height: 100%;
}
.content-wrapper {
    height: 100%;
}
.content-wrapper-main {
    flex:1;
}
.content-wrapper.content-wrapper-w300 {
    width: 300px;
}
.content-wrapper-w450 {
    width: 450px;
}
.h50-percent {
    box-sizing: border-box;
}
.padding0880{
    box-sizing: border-box;
    padding: 0 8px 8px 0;
}
.padding0888 {
    box-sizing: border-box;
    padding: 0 8px 8px 8px;
}
.padding0088 {
    box-sizing: border-box;
    padding: 0 0 8px 8px;
}
.circle-pie-chart-container {
    height: 100%;
}
.circle-pie-chart-wrapper {
    display: inline-block;
    width: 120px;
    height: 120px;
    vertical-align: middle;
}
.circle-pie-chart-text {
    display: inline-block;
    font-size: 14px;
    vertical-align: middle;
}
</style>

 src/pages/dataMager/components/StateTabPane.vue

New file
@@ -0,0 +1,97 @@
<template>
    <el-row class="full-height">
        <el-col :span="12" class="full-height">
            <table-list title="浮充指示" style="border-right: none">
                <el-table :data="statusList.float" stripe :show-header="false" height="100%"
                          size="small">
                    <el-table-column
                        prop="name"
                        label="名称"
                        align="center"
                        min-width="100"
                        class-name="table-list-name no-border white-color">
                    </el-table-column>
                    <el-table-column
                        prop="value"
                        label="值"
                        align="center"
                        class-name="table-list-value">
                        <template slot-scope="scope">
                            <div class="hdw-light" :class="{'error-light':scope.row.value == 1}"></div>
                        </template>
                    </el-table-column>
                </el-table>
            </table-list>
        </el-col>
        <el-col :span="12" class="full-height">
            <table-list title="整流器开关显示" style="border-right: none">
                <el-table :data="statusList.onOff" stripe :show-header="false" height="100%"
                          size="small">
                    <el-table-column
                        prop="name"
                        label="名称"
                        align="center"
                        min-width="100"
                        class-name="table-list-name no-border white-color">
                    </el-table-column>
                    <el-table-column
                        prop="value"
                        label="值"
                        align="center"
                        class-name="table-list-value">
                        <template slot-scope="scope">
                            <div class="hdw-light" :class="{'error-light':scope.row.value == 1}"></div>
                        </template>
                    </el-table-column>
                </el-table>
            </table-list>
        </el-col>
    </el-row>
</template>

<script>
import TableList from "@/components/TableList";
export default {
    name: "StateTabPane",
    components: {
        TableList
    },
    props: {
        name: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            statusList:{
                float: [
                    {name: '整流器均浮充指示', value: '0'},
                ],
                onOff: [
                    {name: '整流器1开关机指示', value: '0'},
                    {name: '整流器2开关机指示', value: '0'},
                    {name: '整流器3开关机指示', value: '0'},
                    {name: '整流器4开关机指示', value: '0'},
                    {name: '整流器5开关机指示', value: '0'},
                    {name: '整流器6开关机指示', value: '0'},
                    {name: '整流器7开关机指示', value: '0'},
                    {name: '整流器8开关机指示', value: '0'},
                    {name: '整流器9开关机指示', value: '0'},
                    {name: '整流器10开关机指示', value: '0'},
                    {name: '整流器11开关机指示', value: '1'},
                    {name: '整流器12开关机指示', value: '0'},
                    {name: '整流器13开关机指示', value: '0'},
                    {name: '整流器14开关机指示', value: '0'},
                    {name: '整流器15开关机指示', value: '0'},
                    {name: '整流器16开关机指示', value: '1'},
                ]
            },
        }
    }
}
</script>

<style scoped>

</style>

 src/pages/dataMager/components/WarnTabPane.vue

New file
@@ -0,0 +1,270 @@
<template>
    <div class="page-flex-layout">
        <div class="page-flex-footer page-right-width overflow-y">
            <div class="table-list-wrapper">
                <table-list title="三项交流过压">
                    <el-table :data="warning.overVol" stripe :show-header="false" height="100%"
                              size="small">
                        <el-table-column
                            prop="name"
                            label="名称"
                            align="center"
                            min-width="100"
                            class-name="table-list-name white-color">
                        </el-table-column>
                        <el-table-column
                            prop="value"
                            label="值"
                            align="center"
                            class-name="table-list-value">
                            <template slot-scope="scope">
                                <div class="hdw-light" :class="{'error-light':scope.row.value == 1}"></div>
                            </template>
                        </el-table-column>
                    </el-table>
                </table-list>
            </div>
            <div class="table-list-wrapper">
                <table-list title="三项交流欠压">
                    <el-table :data="warning.underVol" stripe :show-header="false" height="100%"
                              size="small">
                        <el-table-column
                            prop="name"
                            label="名称"
                            align="center"
                            min-width="100"
                            class-name="table-list-name white-color">
                        </el-table-column>
                        <el-table-column
                            prop="value"
                            label="值"
                            align="center"
                            class-name="table-list-value">
                            <template slot-scope="scope">
                                <div class="hdw-light" :class="{'error-light':scope.row.value == 1}"></div>
                            </template>
                        </el-table-column>
                    </el-table>
                </table-list>
            </div>
            <div class="table-list-wrapper">
                <table-list title="三项交流缺项">
                    <el-table :data="warning.missItem" stripe :show-header="false" height="100%"
                              size="small">
                        <el-table-column
                            prop="name"
                            label="名称"
                            align="center"
                            min-width="100"
                            class-name="table-list-name white-color">
                        </el-table-column>
                        <el-table-column
                            prop="value"
                            label="值"
                            align="center"
                            class-name="table-list-value">
                            <template slot-scope="scope">
                                <div class="hdw-light" :class="{'error-light':scope.row.value == 1}"></div>
                            </template>
                        </el-table-column>
                    </el-table>
                </table-list>
            </div>
            <div class="table-list-wrapper">
                <table-list title="交流">
                    <el-table :data="warning.AC" stripe :show-header="false" height="100%"
                              size="small">
                        <el-table-column
                            prop="name"
                            label="名称"
                            align="center"
                            min-width="100"
                            class-name="table-list-name white-color">
                        </el-table-column>
                        <el-table-column
                            prop="value"
                            label="值"
                            align="center"
                            class-name="table-list-value">
                            <template slot-scope="scope">
                                <div class="hdw-light" :class="{'error-light':scope.row.value == 1}"></div>
                            </template>
                        </el-table-column>
                    </el-table>
                </table-list>
            </div>
            <div class="table-list-wrapper">
                <table-list title="熔断">
                    <el-table :data="warning.break" stripe :show-header="false" height="100%"
                              size="small">
                        <el-table-column
                            prop="name"
                            label="名称"
                            align="center"
                            min-width="100"
                            class-name="table-list-name white-color">
                        </el-table-column>
                        <el-table-column
                            prop="value"
                            label="值"
                            align="center"
                            class-name="table-list-value">
                            <template slot-scope="scope">
                                <div class="hdw-light" :class="{'error-light':scope.row.value == 1}"></div>
                            </template>
                        </el-table-column>
                    </el-table>
                </table-list>
            </div>
        </div>
        <div class="page-flex-content">
            <el-row class="full-height">
                <el-col :span="12" class="full-height">
                    <table-list title="整流器故障" style="border-right: none">
                        <el-table :data="warning.fault" stripe :show-header="false" height="100%"
                                  size="small">
                            <el-table-column
                                prop="name"
                                label="名称"
                                align="center"
                                min-width="100"
                                class-name="table-list-name no-border white-color">
                            </el-table-column>
                            <el-table-column
                                prop="value"
                                label="值"
                                align="center"
                                class-name="table-list-value">
                                <template slot-scope="scope">
                                    <div class="hdw-light" :class="{'error-light':scope.row.value == 1}"></div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </table-list>
                </el-col>
                <el-col :span="12" class="full-height">
                    <table-list title="总故障">
                        <el-table :data="warning.total" stripe :show-header="false" height="100%"
                                  size="small">
                            <el-table-column
                                prop="name"
                                label="名称"
                                align="center"
                                min-width="100"
                                class-name="table-list-name no-border white-color">
                            </el-table-column>
                            <el-table-column
                                prop="value"
                                label="值"
                                align="center"
                                class-name="table-list-value">
                                <template slot-scope="scope">
                                    <div class="hdw-light" :class="{'error-light':scope.row.value == 1}"></div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </table-list>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import TableList from "@/components/TableList";
export default {
    name: "WarnTabPane",
    components: {
        TableList
    },
    props: {
        name: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            warning: {
                overVol: [
                    {name: '交流A相电压', value: '0'},
                    {name: '交流B相电压', value: '0'},
                    {name: '交流C相电压', value: '0'},
                ],
                underVol: [
                    {name: '交流A相欠压', value: '0'},
                    {name: '交流B相欠压', value: '0'},
                    {name: '交流C相欠压', value: '0'},
                ],
                missItem: [
                    {name: '交流A相缺相', value: '0'},
                    {name: '交流B相缺相', value: '0'},
                    {name: '交流C相缺相', value: '0'},
                ],
                AC: [
                    {name: '交流停电', value: '0'},
                    {name: '直流电压过高', value: '0'},
                    {name: '直流电压过低', value: '0'},
                ],
                break: [
                    {name: '负载熔断', value: '0'},
                    {name: '电池组1熔断', value: '0'},
                    {name: '电池组2熔断', value: '0'},
                ],
                fault: [
                    {name: '整流器1总故障', value: '0'},
                    {name: '整流器2总故障', value: '0'},
                    {name: '整流器3总故障', value: '0'},
                    {name: '整流器4总故障', value: '0'},
                    {name: '整流器5总故障', value: '1'},
                    {name: '整流器6总故障', value: '0'},
                    {name: '整流器7总故障', value: '0'},
                    {name: '整流器8总故障', value: '0'},
                    {name: '整流器9总故障', value: '0'},
                    {name: '整流器10总故障', value: '1'},
                    {name: '整流器11总故障', value: '0'},
                    {name: '整流器12总故障', value: '0'},
                    {name: '整流器13总故障', value: '0'},
                    {name: '整流器14总故障', value: '0'},
                    {name: '整流器15总故障', value: '0'},
                    {name: '整流器16总故障', value: '0'},
                ],
                total: [
                    {name: '交流总故障', value: '0'},
                    {name: '直流总故障', value: '0'},
                    {name: '开关柜总故障', value: '1'},
                ]
            },
        }
    }
}
</script>

<style scoped>
.page-flex-footer {
    position: relative;
    padding: 0 8px 8px 0;
    box-sizing: border-box;
}

.page-flex-layout {
    display: flex;
    height: 100%;
}

.page-flex-content {
    flex: 1;
}

.page-flex-content.mg {
    margin-left: 16px;
    margin-bottom: 16px;
}

.page-right-width {
    width: 360px;
}
.table-list-wrapper {
    margin-bottom: 8px;
}
</style>

 src/pages/dataMager/realTimeData.vue

@@ -1,603 +1,71 @@
<template>
    <!-- 用户人脸管理页面 -->
    <flex-layout class="flex-page-wrapper-border">
        <div class="flex-page-content">
            <el-tabs type="border-card" class="flex-layout noborder top-border" v-model="acTabs">
            <el-tabs type="border-card" class="flex-layout noborder top-border" v-model="acTabs" @tab-click="tabsChange">
                <el-tab-pane label="模拟量" name="analog">
                    <div class="page-flex-layout">
                        <div class="page-flex-content">
                            <div class="page-division h50-percent">
                                <el-row :gutter="16">
                                    <el-col :span="12">
                                        <flex-box title="三项交流电压（V）">
                                            <div class="flex-box-list-full">
                                                <div
                                                    v-for="item in gaugeChart.ACVol" :key="item.id"
                                                    class="flex-box">
                                                    <gauge-chart
                                                        :ref="item.id"
                                                        :id="item.id"
                                                        :unit="item.unit"
                                                        :min="item.min"
                                                        :max="item.max"
                                                        :color="item.color"
                                                        :number="item.number">
                                                    </gauge-chart>
                                                </div>
                                            </div>
                                        </flex-box>
                                    </el-col>
                                    <el-col :span="12">
                                        <flex-box title="三项交流电流（A）">
                                            <div class="flex-box-list-full">
                                                <div
                                                    v-for="item in gaugeChart.ACCurr" :key="item.id"
                                                    class="flex-box">
                                                    <gauge-chart
                                                        :ref="item.id"
                                                        :id="item.id"
                                                        :unit="item.unit"
                                                        :min="item.min"
                                                        :max="item.max"
                                                        :color="item.color"
                                                        :number="item.number">
                                                    </gauge-chart>
                                                </div>
                                            </div>
                                        </flex-box>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="page-division h50-percent">
                                <el-row :gutter="16">
                                    <el-col :span="12">
                                        <flex-box no-header>
                                            <bar-chart-y ref="vol" id="vol" unit="V"></bar-chart-y>
                                        </flex-box>
                                    </el-col>
                                    <el-col :span="12">
                                        <flex-box no-header>
                                            <bar-chart-y-on-line ref="curr" id="curr" unit="A"></bar-chart-y-on-line>
                                        </flex-box>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                        <div class="page-flex-footer page-right-width">
                            <div class="h500" v-if="reset">
                                <table-list title="整流器输出电流（A）">
                                    <el-table :data="simulation" stripe :show-header="false" height="100%"
                                              size="small">
                                        <el-table-column
                                            prop="name"
                                            label="名称"
                                            align="center"
                                            min-width="100"
                                            class-name="table-list-name">
                                        </el-table-column>
                                        <el-table-column
                                            prop="value"
                                            label="值"
                                            align="center"
                                            class-name="table-list-value"></el-table-column>
                                    </el-table>
                                </table-list>
                            </div>
                            <div class="temp-chart-wrapper">
                                <flex-box title="环境温度（℃）">
                                    <circle-chart ref="amTemp" id="amTemp" unit="℃"></circle-chart>
                                </flex-box>
                            </div>
                        </div>
                    </div>
                    <analog-tab-pane ref="analog" :name="acTabs"></analog-tab-pane>
                </el-tab-pane>
                <el-tab-pane label="告警量" name="warn">
                    <div class="page-flex-layout">
                        <div class="page-flex-footer page-right-width overflow-y">
                            <div class="table-list-wrapper">
                                <table-list title="三项交流过压">
                                    <el-table :data="warning.overVol" stripe :show-header="false" height="100%"
                                              size="small">
                                        <el-table-column
                                            prop="name"
                                            label="名称"
                                            align="center"
                                            min-width="100"
                                            class-name="table-list-name white-color">
                                        </el-table-column>
                                        <el-table-column
                                            prop="value"
                                            label="值"
                                            align="center"
                                            class-name="table-list-value">
                                            <template slot-scope="scope">
                                                <div class="hdw-light" :class="{'error-light':scope.row.value == 1}"></div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </table-list>
                            </div>
                            <div class="table-list-wrapper">
                                <table-list title="三项交流欠压">
                                    <el-table :data="warning.underVol" stripe :show-header="false" height="100%"
                                              size="small">
                                        <el-table-column
                                            prop="name"
                                            label="名称"
                                            align="center"
                                            min-width="100"
                                            class-name="table-list-name white-color">
                                        </el-table-column>
                                        <el-table-column
                                            prop="value"
                                            label="值"
                                            align="center"
                                            class-name="table-list-value">
                                            <template slot-scope="scope">
                                                <div class="hdw-light" :class="{'error-light':scope.row.value == 1}"></div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </table-list>
                            </div>
                            <div class="table-list-wrapper">
                                <table-list title="三项交流缺项">
                                    <el-table :data="warning.missItem" stripe :show-header="false" height="100%"
                                              size="small">
                                        <el-table-column
                                            prop="name"
                                            label="名称"
                                            align="center"
                                            min-width="100"
                                            class-name="table-list-name white-color">
                                        </el-table-column>
                                        <el-table-column
                                            prop="value"
                                            label="值"
                                            align="center"
                                            class-name="table-list-value">
                                            <template slot-scope="scope">
                                                <div class="hdw-light" :class="{'error-light':scope.row.value == 1}"></div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </table-list>
                            </div>
                            <div class="table-list-wrapper">
                                <table-list title="交流">
                                    <el-table :data="warning.AC" stripe :show-header="false" height="100%"
                                              size="small">
                                        <el-table-column
                                            prop="name"
                                            label="名称"
                                            align="center"
                                            min-width="100"
                                            class-name="table-list-name white-color">
                                        </el-table-column>
                                        <el-table-column
                                            prop="value"
                                            label="值"
                                            align="center"
                                            class-name="table-list-value">
                                            <template slot-scope="scope">
                                                <div class="hdw-light" :class="{'error-light':scope.row.value == 1}"></div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </table-list>
                            </div>
                            <div class="table-list-wrapper">
                                <table-list title="熔断">
                                    <el-table :data="warning.break" stripe :show-header="false" height="100%"
                                              size="small">
                                        <el-table-column
                                            prop="name"
                                            label="名称"
                                            align="center"
                                            min-width="100"
                                            class-name="table-list-name white-color">
                                        </el-table-column>
                                        <el-table-column
                                            prop="value"
                                            label="值"
                                            align="center"
                                            class-name="table-list-value">
                                            <template slot-scope="scope">
                                                <div class="hdw-light" :class="{'error-light':scope.row.value == 1}"></div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </table-list>
                            </div>
                        </div>
                        <div class="page-flex-content">
                            <el-row>
                                <el-col :span="12">
                                    <table-list title="整流器故障" style="border-right: none">
                                        <el-table :data="warning.fault" stripe :show-header="false" height="100%"
                                                  size="small">
                                            <el-table-column
                                                prop="name"
                                                label="名称"
                                                align="center"
                                                min-width="100"
                                                class-name="table-list-name no-border white-color">
                                            </el-table-column>
                                            <el-table-column
                                                prop="value"
                                                label="值"
                                                align="center"
                                                class-name="table-list-value">
                                                <template slot-scope="scope">
                                                    <div class="hdw-light" :class="{'error-light':scope.row.value == 1}"></div>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </table-list>
                                </el-col>
                                <el-col :span="12">
                                    <table-list title="总故障">
                                        <el-table :data="warning.total" stripe :show-header="false" height="100%"
                                                  size="small">
                                            <el-table-column
                                                prop="name"
                                                label="名称"
                                                align="center"
                                                min-width="100"
                                                class-name="table-list-name no-border white-color">
                                            </el-table-column>
                                            <el-table-column
                                                prop="value"
                                                label="值"
                                                align="center"
                                                class-name="table-list-value">
                                                <template slot-scope="scope">
                                                    <div class="hdw-light" :class="{'error-light':scope.row.value == 1}"></div>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </table-list>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <warn-tab-pane :name="acTabs"></warn-tab-pane>
                </el-tab-pane>
                <el-tab-pane label="状态量" name="state">
                    <el-row>
                        <el-col :span="12">
                            <table-list title="浮充指示" style="border-right: none">
                                <el-table :data="statusList.float" stripe :show-header="false" height="100%"
                                          size="small">
                                    <el-table-column
                                        prop="name"
                                        label="名称"
                                        align="center"
                                        min-width="100"
                                        class-name="table-list-name no-border white-color">
                                    </el-table-column>
                                    <el-table-column
                                        prop="value"
                                        label="值"
                                        align="center"
                                        class-name="table-list-value">
                                        <template slot-scope="scope">
                                            <div class="hdw-light" :class="{'error-light':scope.row.value == 1}"></div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </table-list>
                        </el-col>
                        <el-col :span="12">
                            <table-list title="整流器开关显示" style="border-right: none">
                                <el-table :data="statusList.onOff" stripe :show-header="false" height="100%"
                                          size="small">
                                    <el-table-column
                                        prop="name"
                                        label="名称"
                                        align="center"
                                        min-width="100"
                                        class-name="table-list-name no-border white-color">
                                    </el-table-column>
                                    <el-table-column
                                        prop="value"
                                        label="值"
                                        align="center"
                                        class-name="table-list-value">
                                        <template slot-scope="scope">
                                            <div class="hdw-light" :class="{'error-light':scope.row.value == 1}"></div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </table-list>
                        </el-col>
                    </el-row>
                    <state-tab-pane :name="acTabs"></state-tab-pane>
                </el-tab-pane>
                <el-tab-pane label="绝缘装置" name="isolatingDevice">

                <el-tab-pane label="绝缘装置"  name="isolatingDevice">
                    <isolating-device-tab-pane ref="isolatingDevice" :name="acTabs"></isolating-device-tab-pane>
                </el-tab-pane>
                <el-tab-pane label="充电机状态" name="chargerStatus">

                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 人脸登陆 -->
    </flex-layout>
</template>
<script>
import FlexBox from "@/components/FlexBox";
import GaugeChart from "@/components/chart/GaugeChart";
import BarChartY from "@/components/chart/BarChartY";
import TableList from "@/components/TableList";
import CircleChart from "@/components/chart/CircleChart";
import BarChartYOnLine from "@/components/chart/BarChartYOnLine";
import AnalogTabPane from "@/pages/dataMager/components/AnalogTabPane";
import WarnTabPane from "@/pages/dataMager/components/WarnTabPane";
import StateTabPane from "@/pages/dataMager/components/StateTabPane";
import IsolatingDeviceTabPane from "@/pages/dataMager/components/IsolatingDeviceTabPane";

export default {
    components: {
        TableList,
        BarChartY,
        FlexBox,
        GaugeChart,
        CircleChart,
        BarChartYOnLine
        IsolatingDeviceTabPane,
        StateTabPane,
        WarnTabPane,
        AnalogTabPane,
    },
    data() {
        return {
            acTabs: 'analog',
            reset: true,
            simulation: [
                {name: '整流器1输出电流', value: '35.4'},
                {name: '整流器2输出电流', value: '23.1'},
                {name: '整流器3输出电流', value: '12.3'},
                {name: '整流器4输出电流', value: '65.2'},
                {name: '整流器5输出电流', value: '35.4'},
                {name: '整流器6输出电流', value: '32.5'},
                {name: '整流器7输出电流', value: '65.2'},
                {name: '整流器8输出电流', value: '35.4'},
                {name: '整流器9输出电流', value: '23.1'},
                {name: '整流器10输出电流', value: '12.3'},
                {name: '整流器11输出电流', value: '35.2'},
                {name: '整流器12输出电流', value: '23.1'},
                {name: '整流器13输出电流', value: '12.3'},
                {name: '整流器14输出电流', value: '65.2'},
                {name: '整流器15输出电流', value: '35.4'},
                {name: '整流器16输出电流', value: '35.2'},
            ],
            amTemp: {name: '环境温度', value: 23.1},
            warning: {
                overVol: [
                    {name: '交流A相电压', value: '0'},
                    {name: '交流B相电压', value: '0'},
                    {name: '交流C相电压', value: '0'},
                ],
                underVol: [
                    {name: '交流A相欠压', value: '0'},
                    {name: '交流B相欠压', value: '0'},
                    {name: '交流C相欠压', value: '0'},
                ],
                missItem: [
                    {name: '交流A相缺相', value: '0'},
                    {name: '交流B相缺相', value: '0'},
                    {name: '交流C相缺相', value: '0'},
                ],
                AC: [
                    {name: '交流停电', value: '0'},
                    {name: '直流电压过高', value: '0'},
                    {name: '直流电压过低', value: '0'},
                ],
                break: [
                    {name: '负载熔断', value: '0'},
                    {name: '电池组1熔断', value: '0'},
                    {name: '电池组2熔断', value: '0'},
                ],
                fault: [
                    {name: '整流器1总故障', value: '0'},
                    {name: '整流器2总故障', value: '0'},
                    {name: '整流器3总故障', value: '0'},
                    {name: '整流器4总故障', value: '0'},
                    {name: '整流器5总故障', value: '1'},
                    {name: '整流器6总故障', value: '0'},
                    {name: '整流器7总故障', value: '0'},
                    {name: '整流器8总故障', value: '0'},
                    {name: '整流器9总故障', value: '0'},
                    {name: '整流器10总故障', value: '1'},
                    {name: '整流器11总故障', value: '0'},
                    {name: '整流器12总故障', value: '0'},
                    {name: '整流器13总故障', value: '0'},
                    {name: '整流器14总故障', value: '0'},
                    {name: '整流器15总故障', value: '0'},
                    {name: '整流器16总故障', value: '0'},
                ],
                total: [
                    {name: '交流总故障', value: '0'},
                    {name: '直流总故障', value: '0'},
                    {name: '开关柜总故障', value: '1'},
                ]
            },
            statusList:{
                float: [
                    {name: '整流器均浮充指示', value: '0'},
                ],
                onOff: [
                    {name: '整流器1开关机指示', value: '0'},
                    {name: '整流器2开关机指示', value: '0'},
                    {name: '整流器3开关机指示', value: '0'},
                    {name: '整流器4开关机指示', value: '0'},
                    {name: '整流器5开关机指示', value: '0'},
                    {name: '整流器6开关机指示', value: '0'},
                    {name: '整流器7开关机指示', value: '0'},
                    {name: '整流器8开关机指示', value: '0'},
                    {name: '整流器9开关机指示', value: '0'},
                    {name: '整流器10开关机指示', value: '0'},
                    {name: '整流器11开关机指示', value: '1'},
                    {name: '整流器12开关机指示', value: '0'},
                    {name: '整流器13开关机指示', value: '0'},
                    {name: '整流器14开关机指示', value: '0'},
                    {name: '整流器15开关机指示', value: '0'},
                    {name: '整流器16开关机指示', value: '1'},
                ]
            },
            gaugeChart: {
                ACVol: [
                    {
                        id: "ACVolA",
                        name: '三项交流电压',
                        number: "A",
                        min: 0,
                        max: 250,
                        unit: '伏特(V)',
                        color: [[0.2, '#F8BD45'], [0.8, '#00FFFF'], [1, '#F3535F']],
                    },
                    {
                        id: "ACVolB",
                        name: '三项交流电压',
                        number: "B",
                        min: 0,
                        max: 250,
                        unit: '伏特(V)',
                        color: [[0.2, '#F8BD45'], [0.8, '#00FFFF'], [1, '#F3535F']],
                    },
                    {
                        id: "ACVolC",
                        name: '三项交流电压',
                        number: "C",
                        min: 0,
                        max: 250,
                        unit: '伏特(V)',
                        color: [[0.2, '#F8BD45'], [0.8, '#00FFFF'], [1, '#F3535F']],
                    },
                ],
                ACCurr: [
                    {
                        id: "ACCurrA",
                        name: '三项交流电流',
                        number: "A",
                        min: 0,
                        max: 100,
                        unit: '安培(A)',
                        color: [[0.2, '#F8BD45'], [0.8, '#00FFFF'], [1, '#F3535F']],
                    },
                    {
                        id: "ACCurrB",
                        name: '三项交流电流',
                        number: "B",
                        min: 0,
                        max: 100,
                        unit: '安培(A)',
                        color: [[0.2, '#F8BD45'], [0.8, '#00FFFF'], [1, '#F3535F']],
                    },
                    {
                        id: "ACCurrC",
                        name: '三项交流电流',
                        number: "C",
                        min: 0,
                        max: 100,
                        unit: '安培(A)',
                        color: [[0.2, '#F8BD45'], [0.8, '#00FFFF'], [1, '#F3535F']],
                    },
                ],
            },
            volChart: {
                name: '电压值',
                data: [
                    {
                        label: '直流\n\n输出电压',
                        value: 23.1,
                        color: '#f3535f',
                    },
                    {
                        label: '电池组1\n\n电压',
                        value: 65.2,
                        color: '#f1e287',
                    },
                    {
                        label: '电池组2\n\n电压',
                        value: 23.1,
                        color: '#00fefe',
                    },
                    {
                        label: '整流器\n\n输出电压',
                        value: 65.2,
                        color: '#0081ff',
                    },
                ]
            },
            currChart: {
                data: [
                    {
                        name: '直流输出电流',
                        value: 12.3,
                    },
                    {
                        name: '电池组1电流',
                        value: 35.4,
                    },
                    {
                        name: '电池组2电流',
                        value: 12.3
                    }
                ],
            }
        }
    },
    methods: {
        init() {

        tabsChange() {
            // 重置图表的大小
            this.resize();
        },
        resize() {
            // 模拟量图标大小重置
            this.analogChartResize();
        },
        analogChartResize() {
            if (this.acTabs == 'analog') {
                // 重置表格
                this.reset = false;

                this.$nextTick(() => {
                    // 三项交流电压
                    this.gaugeChart.ACVol.forEach(item => {
                        this.$refs[item.id][0].resize();
                    });

                    // 三项交流电流
                    this.gaugeChart.ACCurr.forEach(item => {
                        this.$refs[item.id][0].resize();
                    });

                    // 电压柱状图
                    this.$refs.vol.resize();

                    // 电流柱状图
                    this.$refs.curr.resize();

                    // 环境温度
                    this.$refs.amTemp.resize();

                    // 重置表格
                    this.reset = true;
                });
            }
        },
        setOption() {
            if (this.acTabs == 'analog') {
                // 电压柱状图
                this.$refs.vol.setOption(this.volChart);
                // 电流柱状图
                this.$refs.curr.setOption(this.currChart);
                // 设置环境温度
                this.$refs.amTemp.setOption(this.amTemp.name, this.amTemp.value);
            switch (this.acTabs) {
                case "analog":
                    this.$refs.analog.resize();
                    break;
                case "isolatingDevice":
                    this.$refs.isolatingDevice.resize();
                    break;
            }
        },
    },
    mounted() {
        this.setOption();
        // 初始化echarts大小
        //this.resize();
        // 监听window窗口的变化
        this.resize();
        // 窗口大小改变重置内容大小
        let self = this;
        window.addEventListener('resize', () => {
        window.onresize = function() {
            self.resize();
        });
        }
    },
    destroyed() {
        window.onresize = null;
    }
}
</script>
<style scoped>
@@ -609,120 +77,5 @@
.flex-page-content {
    padding: 4px 8px 0;
    box-sizing: border-box;
}

.page-flex-footer {
    position: relative;
    padding: 0 8px;
    box-sizing: border-box;
}

.pd {
    padding: 16px 8px;
}

.hdw-light {
    position: relative;
    display: inline-block;
    width: 22px;
    height: 22px;
}

.hdw-light:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -5px;
    margin-left: -5px;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: #4afd88;
    box-shadow: 0 0 6px 6px #4afd8880;
}

.hdw-light.error-light:before {
    background-color: #fd5b67;
    animation: errorLight 1000ms infinite;
    box-shadow: 0 0 6px 6px #fd586480;
}

@keyframes errorLight {
    0% {
        opacity: 1;
        box-shadow: 0 0 6px 6px #fd586480;
    }
    50% {
        opacity: 0.3;
        box-shadow: 0 0 0 0 #fd586480;
    }
    100% {
        opacity: 1;
        box-shadow: 0 0 6px 6px #fd586480;
    }
}

.page-flex-layout {
    display: flex;
    height: 100%;
}

.page-flex-layout.page-flex-column {
    flex-direction: column;
}

.page-flex-content {
    flex: 1;
}

.overflow-hidden {
    overflow: hidden;;
}

.page-flex-content.mg {
    margin-left: 16px;
    margin-bottom: 16px;
}

.page-right-width {
    width: 360px;
}

.el-row,
.el-col {
    height: 100%;
}

.flex-box-list-full {
    display: flex;
    flex-direction: row;
    height: 50%;
    box-sizing: border-box;
}

.flex-box-list-full {
    height: 100%;
}

.flex-box {
    flex: 1;
    overflow: hidden;
}
.temp-chart-wrapper {
    position: absolute;
    box-sizing: border-box;
    top: 508px;
    bottom: 16px;
    left: 8px;
    right: 8px;
}
.table-list-wrapper {
    margin-bottom: 8px;
}
.page-division {
    box-sizing: border-box;
    padding-bottom: 16px;
}
</style>

 src/pages/dataTest/realTime.vue

@@ -178,10 +178,9 @@
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="逆变信息" name="niBianInfo">
                        </el-tab-pane>
                        <el-tab-pane label="汇集器状态" name="collectState">

                        </el-tab-pane>
                        <el-tab-pane label="汇集器状态" name="collectState"></el-tab-pane>
                    </el-tabs>
                </div>
            </flex-layout>
@@ -1929,26 +1928,5 @@

.el-table-wrapper {
    background-color: #052272;
}

.flex-box-list,
.flex-box-list-full {
    display: flex;
    flex-direction: row;
    height: 50%;
    box-sizing: border-box;
}

.flex-box-list-full {
    height: 100%;
}

.flex-box-mgr {
    margin: 16px;
}

.page-content .flex-box {
    flex: 1;
    overflow: hidden;
}
</style>