空载试验及负载试验优化

whyczyk

2021-06-25 721f0f47db74d425940e0727035eefa0f72748f8

空载试验及负载试验优化

 src/pages/test/js/noLoadTestDiagram.js

@@ -74,9 +74,9 @@
    let Image2 = diagram.drawImage({
        id: 'img2',
        url: testedmotor,
        point: [line3[1][0], line3[1][1] - 289*270/395/2],
        width: 270/395*395,
        height: 289*270/395,
        point: [line3[1][0], line3[1][1] - 289 * 270 / 395 / 2],
        width: 270 / 395 * 395,
        height: 289 * 270 / 395,
    })

    let line4 = diagram.line({
@@ -107,42 +107,36 @@
        ]
    })

    let line6 = diagram.line({
        id: 'line6',
        strokeStyle: '#d9001b',
        lineWidth: lineWidth,
        points: [
            [line5[1][0], line5[1][1] - 15],
            [line5[1][0], line5[1][1] + 15]
        ]
    })

    let line7 = diagram.line({
        id: 'line7',
        strokeStyle: '#d9001b',
        lineWidth: lineWidth,
        points: [
            [line5[1][0] + 30, line5[1][1] - 15],
            [line5[1][0] + 30, line5[1][1] + 15]
        ]
    })
    let onOff5 = diagram.onOff({
        id: 'km5',
        point: line5[1],
        direction: 'left',
        color: '#c0becf',
        onOffBase: {
            radius: 6,
            width: 32,
            lineWidth: 4,
        },
        state: true,
        flush: true,
    });

    let line8 = diagram.line({
        id: 'line8',
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line7[1][0], line5[1][1]],
            [line7[1][0] + 40, line5[1][1]]
            onOff5.arc2.right,
            [onOff5.arc2.right[0] + 40, onOff5.arc2.right[1]]
        ]
    })

    let Image4 = diagram.drawImage({
        id: 'img4',
        url: dynamometry,
        point: [line8[1][0]-4, line8[1][1] - 229*180/347/2+10],
        point: [line8[1][0] - 4, line8[1][1] - 229 * 180 / 347 / 2 + 10],
        width: 180,
        height: 229*180/347,
        height: 229 * 180 / 347,
    })

    let line9 = diagram.line({
@@ -314,7 +308,7 @@
        fillStyle: "#ffffff",
        fontSize: 28,
        fontWidth: 1,
        point: [Image2.bottom[0]-80, Image2.bottom[1] + 20],
        point: [Image2.bottom[0] - 80, Image2.bottom[1] + 20],
        showPanel: false,
    });


 src/pages/test/loadTest.vue

@@ -100,8 +100,8 @@
                        <div class="flexCon">
                            <el-button type="primary" size="mini" @click="changeSpeed('add')">加速</el-button>
                            <el-button type="primary" size="mini" @click="changeSpeed('reduce')">减速</el-button>
                            <el-input v-model="nbmspeedValue" placeholder="请输入内容" size="mini"
                                      class="speedInput"></el-input>
                            <el-input v-model="nbmspeedValue" placeholder="请输入内容" size="mini" class="speedInput">
                            </el-input>
                            <el-button type="primary" size="mini">确认调速</el-button>
                        </div>
                    </div>
@@ -133,20 +133,20 @@
                            <div class="status lineCon">
                                <div class="line">
                                    <div class="text">VF</div>
                                    <el-input v-model="VFValue" placeholder="请输入内容" size="mini"
                                              class="input"></el-input>
                                    <el-input v-model="VFValue" placeholder="请输入内容" size="mini" class="input">
                                    </el-input>
                                    <div class="text">参考值1~50</div>
                                </div>
                                <div class="line">
                                    <div class="text">SVC</div>
                                    <el-input v-model="SVCValue" placeholder="请输入内容" size="mini"
                                              class="input"></el-input>
                                    <el-input v-model="SVCValue" placeholder="请输入内容" size="mini" class="input">
                                    </el-input>
                                    <div class="text">参考值1~200</div>
                                </div>
                                <div class="line">
                                    <div class="text">FVC</div>
                                    <el-input v-model="FVCValue" placeholder="请输入内容" size="mini"
                                              class="input"></el-input>
                                    <el-input v-model="FVCValue" placeholder="请输入内容" size="mini" class="input">
                                    </el-input>
                                    <div class="text">参考值1~1000</div>
                                </div>
                            </div>
@@ -160,7 +160,7 @@
            </div>
            <div class="modelItemWarp bottom" style="width:8.5%;">
                <div class="content">
                    <div class="title">整流电压操作</div>
                    <div class="title">整流电源操作</div>
                    <div class="con">
                        <div class="couflex">
                            <el-button type="primary" size="mini" class="stopBtn">停止</el-button>
@@ -196,14 +196,14 @@
                    <div class="con" style="position:relative;overflow:auto;">
                        <div class="stepCont">
                            <step-list v-for="(item, index) in list" :key="'key'+index" :data="item"
                                       :end="(list.length-1) == index"
                                       size="mini">
                                :end="(list.length-1) == index" size="mini">
                            </step-list>
                        </div>
                        <div class="stepBtnCon">
                            <el-button type="primary" size="mini">查看结果</el-button>
                            <el-button type="primary" size="mini" @click="closeTest=true">关闭试验</el-button>
                            <el-button type="primary" size="mini" :disabled="!progressStep" @click="nextStepTest">下步试验</el-button>
                            <el-button type="primary" size="mini" :disabled="!progressStep" @click="nextStepTest">下步试验
                            </el-button>
                        </div>
                    </div>
                </div>
@@ -218,574 +218,661 @@
</template>

<script>
import barChart from '@/components/chart/barChart.vue';
import StatusModule from '@/components/smallModule/statusModule.vue';
import MwThermometer from '@/components/smallModule/mwThermometer.vue';
import DoubleLine from '@/components/chart/doubleLine.vue';
import gridCircuitDiagram from '@/pages/test/js/noLoadTestDiagram';
import MwSwitch from '@/components/smallModule/mwSwitch.vue';
import StepList from '@/components/smallModule/stepList.vue';
import absPanel from '@/components/smallModule/absPanel.vue';
import LoadTestDialog from "@/pages/test/dialog/LoadTestDialog";
import {stopTestPoint} from "@/pages/test/js/api";
import MwDrawer from "@/components/smallModule/mwDrawer";
import PreOptionList from "@/components/smallModule/preOptionList";
import CloseTest from "@/pages/test/dialog/closeTest";
    import barChart from '@/components/chart/barChart.vue';
    import StatusModule from '@/components/smallModule/statusModule.vue';
    import MwThermometer from '@/components/smallModule/mwThermometer.vue';
    import DoubleLine from '@/components/chart/doubleLine.vue';
    import gridCircuitDiagram from '@/pages/test/js/noLoadTestDiagram';
    import MwSwitch from '@/components/smallModule/mwSwitch.vue';
    import StepList from '@/components/smallModule/stepList.vue';
    import absPanel from '@/components/smallModule/absPanel.vue';
    import LoadTestDialog from "@/pages/test/dialog/LoadTestDialog";
    import {
        stopTestPoint
    } from "@/pages/test/js/api";
    import MwDrawer from "@/components/smallModule/mwDrawer";
    import PreOptionList from "@/components/smallModule/preOptionList";
    import CloseTest from "@/pages/test/dialog/closeTest";

let diagram;
export default {
    name: 'loadTest',
    components: {
        CloseTest,
        LoadTestDialog,
        barChart,
        StatusModule,
        MwThermometer,
        DoubleLine,
        MwSwitch,
        StepList,
        absPanel,
        MwDrawer,
        PreOptionList,
    },
    data() {
        return {
            type: 'fz',
            dialogVisible: false,
            speedValue: 0,
            nbmspeedValue: 0,
            VFValue: 10,
            SVCValue: 30,
            FVCValue: 110,
            value1: true,
            value2: true,
            value3: true,
            closeTest: false,
            statusList1: [
                {
                    text: '运行中',
                    color: '#82e866',
                    status: false
                },
                {
                    text: '已停止',
                    color: '#f78989',
                    status: true
                }
            ],
            statusList2: [
                {
                    text: '运行中',
                    color: '#82e866',
                    status: true
                },
                {
                    text: '已停止',
                    color: '#f78989',
                    status: false
                }
            ],
            statusList3: [
                {
                    text: '速度',
                    color: '#82e866',
                    status: false
                },
                {
                    text: '转矩',
                    color: '#82e866',
                    status: true
                }
            ],
            diagramStatus: [
                {
                    text: '运行',
                    color: '#82e866',
                    status: true
                },
                {
                    text: '报警',
                    color: '#ffff00',
                    status: true
                },
                {
                    text: '故障',
                    color: '#f78989',
                    status: true
                },
                {
                    text: '紧停',
                    color: '#666ee8',
                    status: true
                }
            ],
            experimentId: 0,
            list: [],
            gearBox: [
                {
                    label: '当前转距：',
                    value: 0,
                    unit: "kN·m",
                },
                {
                    label: '受试电机转速：',
                    value: 0,
                    unit: "r/min",
                },
                {
                    label: '测功电机转速：',
                    value: 0,
                    unit: "r/min",
                }
            ],
            underTestMotor: [
                {
                    label: '转速：',
                    value: 0,
                    unit: "r/min",
                },
                {
                    label: '功率：',
                    value: 0,
                    unit: "kW",
                },
                {
                    label: '噪声：',
                    value: 0,
                    unit: "dB",
                },
            ],
            dcBox: [
                {
                    label: '电压：',
                    value: 0,
                    unit: "V",
                },
                {
                    label: '电流：',
                    value: 0,
                    unit: "A",
                },
            ],
            underServiceMotor: [
                {
                    label: '电压：',
                    value: 0,
                    unit: "V",
                },
                {
                    label: '频率：',
                    value: 0,
                    unit: "HZ",
                },
                {
                    label: '转速：',
                    value: 0,
                    unit: "r/min",
                },
                {
                    label: '效率：',
                    value: 0,
                    unit: "%",
                },
            ],
            afeBox: [
                {
                    label: '当前电压：',
                    value: 0,
                    unit: "V",
                },
                {
                    label: '额定电压：',
                    value: 0,
                    unit: "V",
                },
            ],
            drawer: false,
        }
    },
    watch: {
        'nbmspeedValue': {
            handler(val) {
                this.speedValue = Number(val)
            },
            deep: true
    let diagram;
    export default {
        name: 'loadTest',
        components: {
            CloseTest,
            LoadTestDialog,
            barChart,
            StatusModule,
            MwThermometer,
            DoubleLine,
            MwSwitch,
            StepList,
            absPanel,
            MwDrawer,
            PreOptionList,
        },
        'speedValue': {
            handler(val) {
                this.nbmspeedValue = Number(val)
            },
            deep: true
        },
    },
    methods: {
        changeSpeed(type) {
            if (type == 'add') {
                this.speedValue += 1
            } else {
                this.speedValue -= 1
            }
        },
        initChart() {
            this.$refs.temperatureBar.setData({
                xData: ['#1', '#2', '#3', '#4', '#5', '#6', '#7', '#8', '#9', '#10', '#11', '#12'],
                series: [{
                    color: '#ffc71c',
                    name: '定子温度情况',
                    data: [38, 56, 80, 64, 58, 36, 1, 1, 1, 1, 1, 1],
                    smooth: false,
                    showlabel: false
                }]
            });

            this.$refs.DoubleLine.setData({
                xData: ['9:44:05', '9:44:10', '9:44:15', '9:44:20', '9:44:25', '9:44:30', '9:44:35'],
                series: [{
                    color: '#1e9ff2',
                    name: '空载电机电压',
                    data: [10, 10, 30, 12, 15, 3, 7],
                    showSymbol: true,
                    yAxisIndex: 0,
                }, {
                    color: '#1bd9a0',
                    name: '高速齿轮',
                    data: [150, 120, 170, 140, 500, 160, 110],
                    showSymbol: true,
                    yAxisIndex: 1,
                }]
            });

            this.$refs.DoubleLine2.setData({
                xData: ['9:44:05', '9:44:10', '9:44:15', '9:44:20', '9:44:25', '9:44:30', '9:44:35'],
                series: [{
                    color: '#1e9ff2',
                    name: '空载电机电压',
                    data: [10, 10, 30, 12, 15, 3, 7],
                    showSymbol: true,
                    yAxisIndex: 0,
                }, {
                    color: '#1bd9a0',
                    name: '高速齿轮',
                    data: [150, 120, 170, 140, 500, 160, 110],
                    showSymbol: true,
                    yAxisIndex: 1,
                }]
            });

            this.$refs.DoubleLine3.setData({
                xData: ['9:44:05', '9:44:10', '9:44:15', '9:44:20', '9:44:25', '9:44:30', '9:44:35'],
                series: [{
                    color: '#1e9ff2',
                    name: '空载电机电压',
                    data: [10, 10, 30, 12, 15, 3, 7],
                    showSymbol: true,
                    yAxisIndex: 0,
                }, {
                    color: '#1bd9a0',
                    name: '高速齿轮',
                    data: [150, 120, 170, 140, 500, 160, 110],
                    showSymbol: true,
                    yAxisIndex: 1,
                }]
            });
        },
        updateList(list) {
            if(list && list.length>0) {
                let item = list[0];
                this.experimentId = item.experimentId;
            }
            this.list = list;
        },
        nextStepTest() {
            let step = this.progressStep;
            let id = step.id;
            let name = step.name;
            this.$confirm("确认手动完成"+name+'测试', "系统提示", {
                type: 'warning'
            }).then(res=>{
                stopTestPoint(id).then(res=>{
                    let rs = res.data;
                    if(rs.code == 1) {
                        this.$layer.msg("手动完成成功！");
                    }else {
                        this.$layer.msg("手动完成失败！");
        data() {
            return {
                type: 'fz',
                dialogVisible: false,
                speedValue: 0,
                nbmspeedValue: 0,
                VFValue: 10,
                SVCValue: 30,
                FVCValue: 110,
                value1: true,
                value2: true,
                value3: true,
                closeTest: false,
                statusList1: [{
                        text: '运行中',
                        color: '#82e866',
                        status: false
                    },
                    {
                        text: '已停止',
                        color: '#f78989',
                        status: true
                    }
                }).catch(error=>{
                    this.$layer.msg("网络通讯异常");
                });
            }).catch(error=>{});
        }
    },
    computed: {
        progressStep() {
            let list = this.list;
            let step = false;
            for(let i=0; i<list.length; i++) {
                let item = list[i];
                if(item.status == 1) {
                    step = item;
                    break;
                }
                ],
                statusList2: [{
                        text: '运行中',
                        color: '#82e866',
                        status: true
                    },
                    {
                        text: '已停止',
                        color: '#f78989',
                        status: false
                    }
                ],
                statusList3: [{
                        text: '速度',
                        color: '#82e866',
                        status: false
                    },
                    {
                        text: '转矩',
                        color: '#82e866',
                        status: true
                    }
                ],
                diagramStatus: [{
                        text: '运行',
                        color: '#82e866',
                        status: true
                    },
                    {
                        text: '报警',
                        color: '#ffff00',
                        status: true
                    },
                    {
                        text: '故障',
                        color: '#f78989',
                        status: true
                    },
                    {
                        text: '紧停',
                        color: '#666ee8',
                        status: true
                    }
                ],
                experimentId: 0,
                list: [],
                gearBox: [{
                        label: '当前转距：',
                        value: 0,
                        unit: "kN·m",
                    },
                    {
                        label: '受试电机转速：',
                        value: 0,
                        unit: "r/min",
                    },
                    {
                        label: '测功电机转速：',
                        value: 0,
                        unit: "r/min",
                    }
                ],
                underTestMotor: [{
                        label: '转速：',
                        value: 0,
                        unit: "r/min",
                    },
                    {
                        label: '功率：',
                        value: 0,
                        unit: "kW",
                    },
                    {
                        label: '噪声：',
                        value: 0,
                        unit: "dB",
                    },
                ],
                dcBox: [{
                        label: '电压：',
                        value: 0,
                        unit: "V",
                    },
                    {
                        label: '电流：',
                        value: 0,
                        unit: "A",
                    },
                ],
                underServiceMotor: [{
                        label: '电压：',
                        value: 0,
                        unit: "V",
                    },
                    {
                        label: '频率：',
                        value: 0,
                        unit: "HZ",
                    },
                    {
                        label: '转速：',
                        value: 0,
                        unit: "r/min",
                    },
                    {
                        label: '效率：',
                        value: 0,
                        unit: "%",
                    },
                ],
                afeBox: [{
                        label: '当前电压：',
                        value: 0,
                        unit: "V",
                    },
                    {
                        label: '额定电压：',
                        value: 0,
                        unit: "V",
                    },
                ],
                drawer: false,
            }
            return step;
        },
    },
    mounted() {
        this.initChart();
        diagram = gridCircuitDiagram(this.$refs.static, this.$refs.flush);
        watch: {
            'nbmspeedValue': {
                handler(val) {
                    this.speedValue = Number(val)
                },
                deep: true
            },
            'speedValue': {
                handler(val) {
                    this.nbmspeedValue = Number(val)
                },
                deep: true
            },
        },
        methods: {
            loadDialogData() {
                this.gearBox = [{
                        label: '当前转距：',
                        value: this.randomNum(100, 999),
                        unit: "kN·m",
                    },
                    {
                        label: '受试电机转速：',
                        value: this.randomNum(100, 999),
                        unit: "r/min",
                    },
                    {
                        label: '测功电机转速：',
                        value: this.randomNum(100, 999),
                        unit: "r/min",
                    }
                ]
                this.underTestMotor = [{
                        label: '转速：',
                        value: this.randomNum(100, 999),
                        unit: "r/min",
                    },
                    {
                        label: '功率：',
                        value: this.randomNum(100, 999),
                        unit: "kW",
                    },
                    {
                        label: '噪声：',
                        value: this.randomNum(100, 999),
                        unit: "dB",
                    },
                ]
                this.dcBox = [{
                        label: '电压：',
                        value: this.randomNum(100, 999),
                        unit: "V",
                    },
                    {
                        label: '电流：',
                        value: this.randomNum(100, 999),
                        unit: "A",
                    },
                ]
                this.underServiceMotor = [{
                        label: '电压：',
                        value: this.randomNum(100, 999),
                        unit: "V",
                    },
                    {
                        label: '频率：',
                        value: this.randomNum(100, 999),
                        unit: "HZ",
                    },
                    {
                        label: '转速：',
                        value: this.randomNum(100, 999),
                        unit: "r/min",
                    },
                    {
                        label: '效率：',
                        value: this.randomNum(0, 100),
                        unit: "%",
                    },
                ]
                this.afeBox = [{
                        label: '当前电压：',
                        value: this.randomNum(100, 999),
                        unit: "V",
                    },
                    {
                        label: '额定电压：',
                        value: this.randomNum(100, 999),
                        unit: "V",
                    },
                ]
            },
            randomNum(minNum, maxNum) {
                switch (arguments.length) {
                    case 1:
                        return parseInt(Math.random() * minNum + 1, 10);
                        break;
                    case 2:
                        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                        break;
                    default:
                        return 0;
                        break;
                }
            },
            changeSpeed(type) {
                if (type == 'add') {
                    this.speedValue += 1
                } else {
                    this.speedValue -= 1
                }
            },
            initChart() {
                this.$refs.temperatureBar.setData({
                    xData: ['#1', '#2', '#3', '#4', '#5', '#6', '#7', '#8', '#9', '#10', '#11', '#12'],
                    series: [{
                        color: '#ffc71c',
                        name: '定子温度情况',
                        data: [38, 56, 80, 64, 58, 36, 1, 1, 1, 1, 1, 1],
                        smooth: false,
                        showlabel: false
                    }]
                });

                this.$refs.DoubleLine.setData({
                    xData: ['9:44:05', '9:44:10', '9:44:15', '9:44:20', '9:44:25', '9:44:30', '9:44:35'],
                    series: [{
                        color: '#1e9ff2',
                        name: '空载电机电压',
                        data: [10, 10, 30, 12, 15, 3, 7],
                        showSymbol: true,
                        yAxisIndex: 0,
                    }, {
                        color: '#1bd9a0',
                        name: '高速齿轮',
                        data: [150, 120, 170, 140, 500, 160, 110],
                        showSymbol: true,
                        yAxisIndex: 1,
                    }]
                });

                this.$refs.DoubleLine2.setData({
                    xData: ['9:44:05', '9:44:10', '9:44:15', '9:44:20', '9:44:25', '9:44:30', '9:44:35'],
                    series: [{
                        color: '#1e9ff2',
                        name: '空载电机电压',
                        data: [10, 10, 30, 12, 15, 3, 7],
                        showSymbol: true,
                        yAxisIndex: 0,
                    }, {
                        color: '#1bd9a0',
                        name: '高速齿轮',
                        data: [150, 120, 170, 140, 500, 160, 110],
                        showSymbol: true,
                        yAxisIndex: 1,
                    }]
                });

                this.$refs.DoubleLine3.setData({
                    xData: ['9:44:05', '9:44:10', '9:44:15', '9:44:20', '9:44:25', '9:44:30', '9:44:35'],
                    series: [{
                        color: '#1e9ff2',
                        name: '空载电机电压',
                        data: [10, 10, 30, 12, 15, 3, 7],
                        showSymbol: true,
                        yAxisIndex: 0,
                    }, {
                        color: '#1bd9a0',
                        name: '高速齿轮',
                        data: [150, 120, 170, 140, 500, 160, 110],
                        showSymbol: true,
                        yAxisIndex: 1,
                    }]
                });
            },
            updateList(list) {
                if (list && list.length > 0) {
                    let item = list[0];
                    this.experimentId = item.experimentId;
                }
                this.list = list;
            },
            nextStepTest() {
                let step = this.progressStep;
                let id = step.id;
                let name = step.name;
                this.$confirm("确认手动完成" + name + '测试', "系统提示", {
                    type: 'warning'
                }).then(res => {
                    stopTestPoint(id).then(res => {
                        let rs = res.data;
                        if (rs.code == 1) {
                            this.$layer.msg("手动完成成功！");
                        } else {
                            this.$layer.msg("手动完成失败！");
                        }
                    }).catch(error => {
                        this.$layer.msg("网络通讯异常");
                    });
                }).catch(error => {});
            }
        },
        computed: {
            progressStep() {
                let list = this.list;
                let step = false;
                for (let i = 0; i < list.length; i++) {
                    let item = list[i];
                    if (item.status == 1) {
                        step = item;
                        break;
                    }
                }
                return step;
            },
        },
        mounted() {
            this.initChart();
            diagram = gridCircuitDiagram(this.$refs.static, this.$refs.flush);
            setInterval(() => {
                this.loadDialogData();
            }, 2000);

        }
    }
}
</script>

<style scoped>
.flex-warp {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 25px;
}
    .flex-warp {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 25px;
    }

.flex-warp .top {
    height: 68%;
}
    .flex-warp .top {
        height: 68%;
    }

.flex-warp .bottom {
    height: 32%;
}
    .flex-warp .bottom {
        height: 32%;
    }

.chart {
    width: 100%;
    height: 100%;
}
    .chart {
        width: 100%;
        height: 100%;
    }

.diagram-content {
    top: -24px;
}
    .diagram-content {
        top: -24px;
    }

.scrollCon {
    width: 100%;
    height: 100%;
    overflow: auto;
}
    .scrollCon {
        width: 100%;
        height: 100%;
        overflow: auto;
    }

.scrollCon .list {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 12px;
    padding: 6px 14px;
    justify-content: space-between;
}
    .scrollCon .list {
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 12px;
        padding: 6px 14px;
        justify-content: space-between;
    }

.scrollCon .list .text {
    color: #ffffff;
    width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
    .scrollCon .list .text {
        color: #ffffff;
        width: 80%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.scrollCon .list .see {
    color: #02A7F0;
    cursor: pointer;
}
    .scrollCon .list .see {
        color: #02A7F0;
        cursor: pointer;
    }

.lineCon {
    width: 100%;
    height: calc(100% - 20px);
}
    .lineCon {
        width: 100%;
        height: calc(100% - 20px);
    }

.double-line-wrapper {
    height: calc(100% - 30px);
}
    .double-line-wrapper {
        height: calc(100% - 30px);
    }

.h30percent {
    height: 33%;
}
    .h30percent {
        height: 33%;
    }

.chartTitle {
    width: 100%;
    font-size: 14px;
    padding: 8px 15px;
}
    .chartTitle {
        width: 100%;
        font-size: 14px;
        padding: 8px 15px;
    }

.stepCont {
    padding: 10px;
}
    .stepCont {
        padding: 10px;
    }

.speedCon {
    width: 86%;
    height: 60px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 8px;
    -moz-box-shadow: 0px 0px 5px rgba(228, 228, 228, 1);
    -webkit-box-shadow: 0px 0px 5px rgb(228 228 228);
    box-shadow: 0px 0px 5px rgb(228 228 228);
    margin: 40px auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
}
    .speedCon {
        width: 86%;
        height: 60px;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        border: none;
        border-radius: 8px;
        -moz-box-shadow: 0px 0px 5px rgba(228, 228, 228, 1);
        -webkit-box-shadow: 0px 0px 5px rgb(228 228 228);
        box-shadow: 0px 0px 5px rgb(228 228 228);
        margin: 40px auto;
        padding: 0 20px;
        display: flex;
        align-items: center;
    }

.speedCon /deep/ .el-slider {
    width: 100%;
}
    .speedCon /deep/ .el-slider {
        width: 100%;
    }

.flexCon {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 7%;
}
    .flexCon {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0 7%;
    }

.speedInput {
    margin: 0 10px;
}
    .speedInput {
        margin: 0 10px;
    }

.couflex {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}
    .couflex {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

.stopBtn {
    width: 60%;
    margin-top: 20px;
    margin-left: 0;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
    .stopBtn {
        width: 60%;
        margin-top: 20px;
        margin-left: 0;
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.couflex .optItem {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 10px;
}
    .couflex .optItem {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-top: 10px;
    }

.couflex .lineTit {
    font-size: 12px;
    margin-bottom: 6px;
}
    .couflex .lineTit {
        font-size: 12px;
        margin-bottom: 6px;
    }

.flexWarp {
    display: flex;
    flex-wrap: wrap;
    padding: 6px;
}
    .flexWarp {
        display: flex;
        flex-wrap: wrap;
        padding: 6px;
    }

.flexWarp .status {
    width: 48%;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    padding: 0 2px 0 10px;
}
    .flexWarp .status {
        width: 48%;
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
        padding: 0 2px 0 10px;
    }

.flexWarp .status .text {
    font-size: 10px;
}
    .flexWarp .status .text {
        font-size: 10px;
    }

.flexWarp .status .moduleCon {
    flex: 1;
    margin-left: 6px;
}
    .flexWarp .status .moduleCon {
        flex: 1;
        margin-left: 6px;
    }

.flexWarp .status .line {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 4px;
}
    .flexWarp .status .line {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 4px;
    }

.flexWarp .status .line .text {
    margin: 0 8px 0 4px;
}
    .flexWarp .status .line .text {
        margin: 0 8px 0 4px;
    }

.flexWarp .status .line .text:first-of-type {
    width: 30px;
}
    .flexWarp .status .line .text:first-of-type {
        width: 30px;
    }

.flexWarp .status .line .input {
    width: 58px;
}
    .flexWarp .status .line .input {
        width: 58px;
    }

.flexWarp .status.lineCon {
    display: block;
    width: 52%;
    height: 60px;
}
    .flexWarp .status.lineCon {
        display: block;
        width: 52%;
        height: 60px;
    }

.diagramStatus {
    width: 200px;
    position: absolute;
    bottom: 20px;
    left: 20px;
}
    .diagramStatus {
        width: 200px;
        position: absolute;
        bottom: 20px;
        left: 20px;
    }

.modelItemWarp .diagramPanel1 {
    left: 150px;
    top: 100px;
}
    .modelItemWarp .diagramPanel1 {
        left: 150px;
        top: 100px;
    }

.modelItemWarp .diagramPanel2 {
    left: 320px;
    top: 220px;
}
    .modelItemWarp .diagramPanel2 {
        left: 320px;
        top: 220px;
    }

.modelItemWarp .diagramPanel3 {
    left: 380px;
    top: 400px;
}
    .modelItemWarp .diagramPanel3 {
        left: 380px;
        top: 400px;
    }

.modelItemWarp .diagramPanel4 {
    left: 520px;
    top: 190px;
}
    .modelItemWarp .diagramPanel4 {
        left: 520px;
        top: 190px;
    }

.modelItemWarp .diagramPanel5 {
    left: 520px;
    top: 70px;
}
    .modelItemWarp .diagramPanel5 {
        left: 520px;
        top: 70px;
    }

.mw-process-warp {
    margin-bottom: 20px;
}
    .mw-process-warp {
        margin-bottom: 20px;
    }

.stepBtnCon {
    position: absolute;
    width: 100px;
    right: 10px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
    .stepBtnCon {
        position: absolute;
        width: 100px;
        right: 10px;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

.stepBtnCon /deep/ .el-button {
    margin: 0;
    margin-bottom: 10px;
}
    .stepBtnCon /deep/ .el-button {
        margin: 0;
        margin-bottom: 10px;
    }

.thermometerCon {
    position: absolute;
    bottom: 20px;
    right: 16px;
    color: #318bf1;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
</style>
    .thermometerCon {
        position: absolute;
        bottom: 20px;
        right: 16px;
        color: #318bf1;
        font-size: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
</style>

 src/pages/test/noLoadTest.vue

@@ -80,8 +80,8 @@
                        </div>
                        <div class="chartTitle">受试电机电流</div>
                        <div class="chartTitle mw-process-warp">
                            <mw-section-process title="当前电压 2200mA" leftText="-20mA"
                                                rightText="+20mA"></mw-section-process>
                            <mw-section-process title="当前电压 2200mA" leftText="-20mA" rightText="+20mA">
                            </mw-section-process>
                        </div>
                    </div>
                </div>
@@ -96,8 +96,8 @@
                        <div class="flexCon">
                            <el-button type="primary" size="mini" @click="changeSpeed('add')">加速</el-button>
                            <el-button type="primary" size="mini" @click="changeSpeed('reduce')">减速</el-button>
                            <el-input v-model="nbmspeedValue" placeholder="请输入内容" size="mini"
                                      class="speedInput"></el-input>
                            <el-input v-model="nbmspeedValue" placeholder="请输入内容" size="mini" class="speedInput">
                            </el-input>
                            <el-button type="primary" size="mini">确认调速</el-button>
                        </div>
                    </div>
@@ -129,20 +129,20 @@
                            <div class="status lineCon">
                                <div class="line">
                                    <div class="text">VF</div>
                                    <el-input v-model="VFValue" placeholder="请输入内容" size="mini"
                                              class="input"></el-input>
                                    <el-input v-model="VFValue" placeholder="请输入内容" size="mini" class="input">
                                    </el-input>
                                    <div class="text">参考值1~50</div>
                                </div>
                                <div class="line">
                                    <div class="text">SVC</div>
                                    <el-input v-model="SVCValue" placeholder="请输入内容" size="mini"
                                              class="input"></el-input>
                                    <el-input v-model="SVCValue" placeholder="请输入内容" size="mini" class="input">
                                    </el-input>
                                    <div class="text">参考值1~200</div>
                                </div>
                                <div class="line">
                                    <div class="text">FVC</div>
                                    <el-input v-model="FVCValue" placeholder="请输入内容" size="mini"
                                              class="input"></el-input>
                                    <el-input v-model="FVCValue" placeholder="请输入内容" size="mini" class="input">
                                    </el-input>
                                    <div class="text">参考值1~1000</div>
                                </div>
                            </div>
@@ -156,7 +156,7 @@
            </div>
            <div class="modelItemWarp bottom" style="width:8.5%;">
                <div class="content">
                    <div class="title">整流电压操作</div>
                    <div class="title">整流电源操作</div>
                    <div class="con">
                        <div class="couflex">
                            <el-button type="primary" size="mini" class="stopBtn">停止</el-button>
@@ -192,14 +192,14 @@
                    <div class="con" style="position:relative;overflow:auto;">
                        <div class="stepCont">
                            <step-list v-for="(item, index) in list" :key="'key'+index" :data="item"
                                       :end="(list.length-1) == index"
                                       size="mini">
                                :end="(list.length-1) == index" size="mini">
                            </step-list>
                        </div>
                        <div class="stepBtnCon">
                            <el-button type="primary" size="mini">查看结果</el-button>
                            <el-button type="primary" size="mini" @click="closeTest=true">关闭试验</el-button>
                            <el-button type="primary" size="mini" :disabled="!progressStep" @click="nextStepTest">下步试验</el-button>
                            <el-button type="primary" size="mini" :disabled="!progressStep" @click="nextStepTest">下步试验
                            </el-button>
                        </div>
                    </div>
                </div>
@@ -214,459 +214,508 @@
</template>

<script>
import barChart from '@/components/chart/barChart.vue'
import gridCircuitDiagram from '@/pages/test/js/noLoadTestDiagram'
import DoubleLine from '@/components/chart/doubleLine.vue';
import StepList from '@/components/smallModule/stepList.vue';
import MwSwitch from '@/components/smallModule/mwSwitch.vue';
import StatusModule from '@/components/smallModule/statusModule.vue';
import absPanel from '@/components/smallModule/absPanel.vue';
import MwProcess from '@/components/smallModule/mwProcess.vue';
import MwSectionProcess from '@/components/smallModule/mwSectionProcess.vue';
import MwThermometer from '@/components/smallModule/mwThermometer.vue';
import LoadTestDialog from "@/pages/test/dialog/LoadTestDialog";
import {stopTestPoint} from "@/pages/test/js/api";
import MwDrawer from "@/components/smallModule/mwDrawer";
import PreOptionList from "@/components/smallModule/preOptionList";
import CloseTest from "@/pages/test/dialog/closeTest";
    import barChart from '@/components/chart/barChart.vue'
    import gridCircuitDiagram from '@/pages/test/js/noLoadTestDiagram'
    import DoubleLine from '@/components/chart/doubleLine.vue';
    import StepList from '@/components/smallModule/stepList.vue';
    import MwSwitch from '@/components/smallModule/mwSwitch.vue';
    import StatusModule from '@/components/smallModule/statusModule.vue';
    import absPanel from '@/components/smallModule/absPanel.vue';
    import MwProcess from '@/components/smallModule/mwProcess.vue';
    import MwSectionProcess from '@/components/smallModule/mwSectionProcess.vue';
    import MwThermometer from '@/components/smallModule/mwThermometer.vue';
    import LoadTestDialog from "@/pages/test/dialog/LoadTestDialog";
    import {
        stopTestPoint
    } from "@/pages/test/js/api";
    import MwDrawer from "@/components/smallModule/mwDrawer";
    import PreOptionList from "@/components/smallModule/preOptionList";
    import CloseTest from "@/pages/test/dialog/closeTest";

let diagram;
export default {
    components: {
        CloseTest,
        PreOptionList,
        MwDrawer,
        barChart,
        DoubleLine,
        StepList,
        MwSwitch,
        StatusModule,
        MwProcess,
        MwSectionProcess,
        MwThermometer,
        absPanel,
        LoadTestDialog,
    },
    data() {
        return {
            type: 'kz',
            dialogVisible: false,
            dcBox: [{
                label: '电压：',
                value: 0,
                unit: "V",
            },
                {
                    label: '电流：',
                    value: 0,
                    unit: "A",
                },
            ],
            underTestMotor: [{
                label: '转速：',
                value: 0,
                unit: "r/min",
            },
                {
                    label: '功率：',
                    value: 0,
                    unit: "kW",
                },
                {
                    label: '噪声：',
                    value: 0,
                    unit: "dB",
                },
            ],
            text1Pos: [20, 20],
            value1: true,       // AFE变频器水冷
            value2: true,       // 受试电机水冷
            value3: true,       // 测工电机水冷
            closeTest: false,
            speedValue: 0,
            nbmspeedValue: 0,
            VFValue: 10,
            SVCValue: 30,
            FVCValue: 110,
            statusList1: [{
                text: '运行中',
                color: '#82e866',
                status: false
            }, {
                text: '已停止',
                color: '#f78989',
                status: true
            }],
            statusList2: [{
                text: '运行中',
                color: '#82e866',
                status: true
            }, {
                text: '已停止',
                color: '#f78989',
                status: false
            }],
            statusList3: [{
                text: '速度',
                color: '#82e866',
                status: false
            }, {
                text: '转矩',
                color: '#82e866',
                status: true
            }],
            diagramStatus: [{
                text: '运行',
                color: '#82e866',
                status: true
            }, {
                text: '报警',
                color: '#ffff00',
                status: true
            }, {
                text: '故障',
                color: '#f78989',
                status: true
            }, {
                text: '紧停',
                color: '#666ee8',
                status: true
            }],
            experimentId: 0,
            list: [],
            drawer: false,
        }
    },
    watch: {
        'nbmspeedValue': {
            handler(val) {
                this.speedValue = Number(val)
            },
            deep: true
    let diagram;
    export default {
        components: {
            CloseTest,
            PreOptionList,
            MwDrawer,
            barChart,
            DoubleLine,
            StepList,
            MwSwitch,
            StatusModule,
            MwProcess,
            MwSectionProcess,
            MwThermometer,
            absPanel,
            LoadTestDialog,
        },
        'speedValue': {
            handler(val) {
                this.nbmspeedValue = Number(val)
            },
            deep: true
        },
    },
    mounted() {
        this.initChart();
        diagram = gridCircuitDiagram(this.$refs.static, this.$refs.flush);
    },
    methods: {
        changeSpeed(type) {
            if (type == 'add') {
                this.speedValue += 1
            } else {
                this.speedValue -= 1
            }
        },
        initChart() {
            this.$refs.temperatureBar.setData({
                xData: ['#1', '#2', '#3', '#4', '#5', '#6', '#7', '#8', '#9', '#10', '#11', '#12'],
                series: [{
                    color: '#ffc71c',
                    name: '定子温度情况',
                    data: [38, 56, 80, 64, 58, 36, 1, 1, 1, 1, 1, 1],
                    smooth: false,
                    showlabel: false
                }]
            });
            this.$refs.DoubleLine.setData({
                xData: ['9:44:05', '9:44:10', '9:44:15', '9:44:20', '9:44:25', '9:44:30', '9:44:35'],
                series: [{
                    color: '#1e9ff2',
                    name: '空载电机电压',
                    data: [10, 10, 30, 12, 15, 3, 7],
                    showSymbol: true,
                    yAxisIndex: 0,
        data() {
            return {
                type: 'kz',
                dialogVisible: false,
                dcBox: [{
                        label: '电压：',
                        value: 0,
                        unit: "V",
                    },
                    {
                        label: '电流：',
                        value: 0,
                        unit: "A",
                    },
                ],
                underTestMotor: [{
                        label: '转速：',
                        value: 0,
                        unit: "r/min",
                    },
                    {
                        label: '功率：',
                        value: 0,
                        unit: "kW",
                    },
                    {
                        label: '噪声：',
                        value: 0,
                        unit: "dB",
                    },
                ],
                text1Pos: [20, 20],
                value1: true, // AFE变频器水冷
                value2: true, // 受试电机水冷
                value3: true, // 测工电机水冷
                closeTest: false,
                speedValue: 0,
                nbmspeedValue: 0,
                VFValue: 10,
                SVCValue: 30,
                FVCValue: 110,
                statusList1: [{
                    text: '运行中',
                    color: '#82e866',
                    status: false
                }, {
                    color: '#1bd9a0',
                    name: '高速齿轮',
                    data: [150, 120, 170, 140, 500, 160, 110],
                    showSymbol: true,
                    yAxisIndex: 1,
                }]
            });
        },
        updateList(list) {
            if(list && list.length>0) {
                let item = list[0];
                this.experimentId = item.experimentId;
                    text: '已停止',
                    color: '#f78989',
                    status: true
                }],
                statusList2: [{
                    text: '运行中',
                    color: '#82e866',
                    status: true
                }, {
                    text: '已停止',
                    color: '#f78989',
                    status: false
                }],
                statusList3: [{
                    text: '速度',
                    color: '#82e866',
                    status: false
                }, {
                    text: '转矩',
                    color: '#82e866',
                    status: true
                }],
                diagramStatus: [{
                    text: '运行',
                    color: '#82e866',
                    status: true
                }, {
                    text: '报警',
                    color: '#ffff00',
                    status: true
                }, {
                    text: '故障',
                    color: '#f78989',
                    status: true
                }, {
                    text: '紧停',
                    color: '#666ee8',
                    status: true
                }],
                experimentId: 0,
                list: [],
                drawer: false,
            }
            this.list = list;
        },
        nextStepTest() {
            let step = this.progressStep;
            let id = step.id;
            let name = step.name;
            this.$confirm("确认手动完成"+name+'测试', "系统提示", {
                type: 'warning'
            }).then(res=>{
                stopTestPoint(id).then(res=>{
                    let rs = res.data;
                    if(rs.code == 1) {
                        this.$layer.msg("手动完成成功！");
                    }else {
                        this.$layer.msg("手动完成失败！");
                    }
                }).catch(error=>{
                    this.$layer.msg("网络通讯异常");
                });
            }).catch(error=>{});

        }
    },
    computed: {
        progressStep() {
            let list = this.list;
            let step = false;
            for(let i=0; i<list.length; i++) {
                let item = list[i];
                if(item.status == 1) {
                    step = item;
                    break;
        watch: {
            'nbmspeedValue': {
                handler(val) {
                    this.speedValue = Number(val)
                },
                deep: true
            },
            'speedValue': {
                handler(val) {
                    this.nbmspeedValue = Number(val)
                },
                deep: true
            },
        },
        mounted() {
            this.initChart();
            diagram = gridCircuitDiagram(this.$refs.static, this.$refs.flush);
            console.log('asdadasdad````````````````', diagram.getOption('km5'))
            diagram.getOption('km5').state = false;
            setInterval(() => {
                this.loadDialogData();
            }, 2000);
        },
        methods: {
            loadDialogData() {
                this.dcBox = [{
                        label: '电压：',
                        value: this.randomNum(100, 999),
                        unit: "V",
                    },
                    {
                        label: '电流：',
                        value: this.randomNum(100, 999),
                        unit: "A",
                    },
                ];
                this.underTestMotor = [{
                        label: '转速：',
                        value: this.randomNum(100, 999),
                        unit: "r/min",
                    },
                    {
                        label: '功率：',
                        value: this.randomNum(100, 999),
                        unit: "kW",
                    },
                    {
                        label: '噪声：',
                        value: this.randomNum(100, 999),
                        unit: "dB",
                    },
                ];
            },
            randomNum(minNum, maxNum) {
                switch (arguments.length) {
                    case 1:
                        return parseInt(Math.random() * minNum + 1, 10);
                        break;
                    case 2:
                        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                        break;
                    default:
                        return 0;
                        break;
                }
            },
            changeSpeed(type) {
                if (type == 'add') {
                    this.speedValue += 1
                } else {
                    this.speedValue -= 1
                }
            },
            initChart() {
                this.$refs.temperatureBar.setData({
                    xData: ['#1', '#2', '#3', '#4', '#5', '#6', '#7', '#8', '#9', '#10', '#11', '#12'],
                    series: [{
                        color: '#ffc71c',
                        name: '定子温度情况',
                        data: [38, 56, 80, 64, 58, 36, 1, 1, 1, 1, 1, 1],
                        smooth: false,
                        showlabel: false
                    }]
                });
                this.$refs.DoubleLine.setData({
                    xData: ['9:44:05', '9:44:10', '9:44:15', '9:44:20', '9:44:25', '9:44:30', '9:44:35'],
                    series: [{
                        color: '#1e9ff2',
                        name: '空载电机电压',
                        data: [10, 10, 30, 12, 15, 3, 7],
                        showSymbol: true,
                        yAxisIndex: 0,
                    }, {
                        color: '#1bd9a0',
                        name: '高速齿轮',
                        data: [150, 120, 170, 140, 500, 160, 110],
                        showSymbol: true,
                        yAxisIndex: 1,
                    }]
                });
            },
            updateList(list) {
                if (list && list.length > 0) {
                    let item = list[0];
                    this.experimentId = item.experimentId;
                }
                this.list = list;
            },
            nextStepTest() {
                let step = this.progressStep;
                let id = step.id;
                let name = step.name;
                this.$confirm("确认手动完成" + name + '测试', "系统提示", {
                    type: 'warning'
                }).then(res => {
                    stopTestPoint(id).then(res => {
                        let rs = res.data;
                        if (rs.code == 1) {
                            this.$layer.msg("手动完成成功！");
                        } else {
                            this.$layer.msg("手动完成失败！");
                        }
                    }).catch(error => {
                        this.$layer.msg("网络通讯异常");
                    });
                }).catch(error => {});

            }
            return step;
        },
        computed: {
            progressStep() {
                let list = this.list;
                let step = false;
                for (let i = 0; i < list.length; i++) {
                    let item = list[i];
                    if (item.status == 1) {
                        step = item;
                        break;
                    }
                }
                return step;
            },
        }
    }
}
</script>

<style scoped>
.noLoadTest {
    width: 100%;
    height: 100%;
}
    .noLoadTest {
        width: 100%;
        height: 100%;
    }

.flex-warp {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 25px;
}
    .flex-warp {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 25px;
    }

.flex-warp .top {
    height: 68%;
}
    .flex-warp .top {
        height: 68%;
    }

.flex-warp .bottom {
    height: 32%;
}
    .flex-warp .bottom {
        height: 32%;
    }

.chart {
    width: 100%;
    height: 100%;
}
    .chart {
        width: 100%;
        height: 100%;
    }

.diagram-content {
    top: -24px;
}
    .diagram-content {
        top: -24px;
    }

.scrollCon {
    width: 100%;
    height: 100%;
    overflow: auto;
}
    .scrollCon {
        width: 100%;
        height: 100%;
        overflow: auto;
    }

.scrollCon .list {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 12px;
    padding: 6px 14px;
    justify-content: space-between;
}
    .scrollCon .list {
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 12px;
        padding: 6px 14px;
        justify-content: space-between;
    }

.scrollCon .list .text {
    color: #ffffff;
    width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
    .scrollCon .list .text {
        color: #ffffff;
        width: 80%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.scrollCon .list .see {
    color: #02A7F0;
    cursor: pointer;
}
    .scrollCon .list .see {
        color: #02A7F0;
        cursor: pointer;
    }

.lineCon {
    width: 100%;
    height: 200px;
}
    .lineCon {
        width: 100%;
        height: 200px;
    }

.chartTitle {
    width: 100%;
    font-size: 14px;
    padding: 8px 15px;
}
    .chartTitle {
        width: 100%;
        font-size: 14px;
        padding: 8px 15px;
    }

.stepCont {
    padding: 10px;
}
    .stepCont {
        padding: 10px;
    }

.speedCon {
    width: 86%;
    height: 60px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 8px;
    -moz-box-shadow: 0px 0px 5px rgba(228, 228, 228, 1);
    -webkit-box-shadow: 0px 0px 5px rgb(228 228 228);
    box-shadow: 0px 0px 5px rgb(228 228 228);
    margin: 40px auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
}
    .speedCon {
        width: 86%;
        height: 60px;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        border: none;
        border-radius: 8px;
        -moz-box-shadow: 0px 0px 5px rgba(228, 228, 228, 1);
        -webkit-box-shadow: 0px 0px 5px rgb(228 228 228);
        box-shadow: 0px 0px 5px rgb(228 228 228);
        margin: 40px auto;
        padding: 0 20px;
        display: flex;
        align-items: center;
    }

.speedCon /deep/ .el-slider {
    width: 100%;
}
    .speedCon /deep/ .el-slider {
        width: 100%;
    }

.flexCon {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 7%;
}
    .flexCon {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0 7%;
    }

.speedInput {
    margin: 0 10px;
}
    .speedInput {
        margin: 0 10px;
    }

.couflex {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}
    .couflex {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

.stopBtn {
    width: 60%;
    margin-top: 20px;
    margin-left: 0;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
    .stopBtn {
        width: 60%;
        margin-top: 20px;
        margin-left: 0;
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.couflex .optItem {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 10px;
}
    .couflex .optItem {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-top: 10px;
    }

.couflex .lineTit {
    font-size: 12px;
    margin-bottom: 6px;
}
    .couflex .lineTit {
        font-size: 12px;
        margin-bottom: 6px;
    }

.flexWarp {
    display: flex;
    flex-wrap: wrap;
    padding: 6px;
}
    .flexWarp {
        display: flex;
        flex-wrap: wrap;
        padding: 6px;
    }

.flexWarp .status {
    width: 48%;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    padding: 0 2px 0 10px;
}
    .flexWarp .status {
        width: 48%;
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
        padding: 0 2px 0 10px;
    }

.flexWarp .status .text {
    font-size: 10px;
}
    .flexWarp .status .text {
        font-size: 10px;
    }

.flexWarp .status .moduleCon {
    flex: 1;
    margin-left: 6px;
}
    .flexWarp .status .moduleCon {
        flex: 1;
        margin-left: 6px;
    }

.flexWarp .status .line {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 4px;
}
    .flexWarp .status .line {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 4px;
    }

.flexWarp .status .line .text {
    margin: 0 8px 0 4px;
}
    .flexWarp .status .line .text {
        margin: 0 8px 0 4px;
    }

.flexWarp .status .line .text:first-of-type {
    width: 30px;
}
    .flexWarp .status .line .text:first-of-type {
        width: 30px;
    }

.flexWarp .status .line .input {
    width: 58px;
}
    .flexWarp .status .line .input {
        width: 58px;
    }

.flexWarp .status.lineCon {
    display: block;
    width: 52%;
    height: 60px;
}
    .flexWarp .status.lineCon {
        display: block;
        width: 52%;
        height: 60px;
    }

.diagramStatus {
    width: 200px;
    position: absolute;
    bottom: 20px;
    left: 20px;
}
    .diagramStatus {
        width: 200px;
        position: absolute;
        bottom: 20px;
        left: 20px;
    }

.modelItemWarp .diagramPanel1 {
    left: 140px;
    top: 130px;
}
    .modelItemWarp .diagramPanel1 {
        left: 140px;
        top: 130px;
    }

.modelItemWarp .diagramPanel2 {
    left: 290px;
    top: 190px;
}
    .modelItemWarp .diagramPanel2 {
        left: 290px;
        top: 190px;
    }

.mw-process-warp {
    margin-bottom: 20px;
}
    .mw-process-warp {
        margin-bottom: 20px;
    }

.stepBtnCon {
    position: absolute;
    width: 100px;
    right: 10px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
    .stepBtnCon {
        position: absolute;
        width: 100px;
        right: 10px;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

.stepBtnCon /deep/ .el-button {
    margin: 0;
    margin-bottom: 10px;
}
    .stepBtnCon /deep/ .el-button {
        margin: 0;
        margin-bottom: 10px;
    }

.thermometerCon {
    position: absolute;
    bottom: 20px;
    right: 16px;
    color: #318bf1;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
    .thermometerCon {
        position: absolute;
        bottom: 20px;
        right: 16px;
        color: #318bf1;
        font-size: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
</style>