空载试验界面提交

whyczyk

2021-05-20 7d36b01cf3981ed86c7bcb89e8ea020c22aae1cc

空载试验界面提交

 src/components/chart/doubleLine.vue

@@ -36,7 +36,8 @@
            trigger: 'axis',
          },
          grid: {
            top: 10
            top: 10,
            bottom: 10
          },
          xAxis: [{
            type: 'category',

 src/components/smallModule/mwProcess.vue

New file
@@ -0,0 +1,60 @@
<template>
  <div class="processCon">
    <div class="inner" :style="{'width':+process+'%'}"></div>
    <div class="tips" :style="{'left':'calc('+process+'% - 10px)'}" style="left:">{{text}}</div>
  </div>
</template>

<script>
  export default {
    props: ['process', 'text'],
    data() {
      return {

      }
    },
  }
</script>

<style scoped>
  .processCon {
    width: 100%;
    height: 12px;
    border-radius: 4px;
    background-color: #f2f2f2;
    position: relative;
  }

  .processCon .inner {
    height: 12px;
    border-radius: 4px;
    background-color: #ffe328;
    position: absolute;
    top: 0;
    left: 0;
  }

  .processCon .tips {
    position: absolute;
    top: -40px;
    left: 0;
    background-color: #ffe328;
    color: #333333;
    font-size: 10px;
    padding: 6px 12px;
    border-radius: 4px;
  }

  .processCon .tips:before {
    position: absolute;
    content: '';
    border-top: 10px #ffe328 solid;
    border-left: 10px transparent dashed;
    border-bottom: 10px transparent dashed;
    border-right: 10px transparent dashed;
    left: 0;
    bottom: -16px;
    /*覆盖并错开1px*/
    border-top: 10px #ffe328 solid;
  }
</style>

 src/components/smallModule/mwSectionProcess.vue

New file
@@ -0,0 +1,74 @@
<template>
  <div class="sectionProcess">
    <div class="tipsText">
      {{title}}
    </div>
    <div class="tips"></div>
    <div class="left">{{leftText}}</div>
    <div class="right">{{rightText}}</div>
  </div>
</template>

<script>
  export default {
    props: ['title', 'leftText', 'rightText'],
    data() {
      return {

      }
    },
  }
</script>

<style scoped>
  .sectionProcess {
    width: 100%;
    height: 12px;
    border-radius: 4px;
    background-color: #ffe328;
    position: relative;
  }

  .sectionProcess .tips {
    position: absolute;
    border-top: 10px #ffe328 solid;
    border-left: 10px transparent dashed;
    border-bottom: 10px transparent dashed;
    border-right: 10px transparent dashed;
    left: calc(50% - 10px);
    top: -12px;
    /*覆盖并错开1px*/
    border-top: 10px #ffe328 solid;
  }

  .sectionProcess .tipsText {
    font-size: 10px;
    color: #ffffff;
    top: -36px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .sectionProcess .left {
    width: 12%;
    height: 12px;
    border-radius: 4px 0 0 4px;
    position: absolute;
    left: 38%;
    background-color: #666ee8;
    line-height: 44px;
    text-align: center;
  }

  .sectionProcess .right {
    width: 12%;
    height: 12px;
    border-radius: 0 4px 4px 0;
    position: absolute;
    left: 50%;
    background-color: #f78989;
    line-height: 44px;
    text-align: center;
  }
</style>

 src/components/smallModule/mwSwitch.vue

New file
@@ -0,0 +1,111 @@
<template>
  <div>
    <span class="weui-switch" :class="{'weui-switch-on' : isChecked}" :value="value" @click="toggle"
      style="position:relative">
      <div v-if="isChecked && direction.length > 0" style="width:100%;height:100%;position:absolute;padding:0 5px;display: flex;
    align-items: center;color:#FFF;user-select:none">
        {{direction[0]}}
      </div>
      <div v-if="!isChecked && direction.length > 0" style="width:100%;height:100%;position:absolute;padding:0 5px;right:2px;display: flex;flex-direction: row-reverse;
    align-items: center;color:#7A7A7A;user-select:none">
        {{direction[1]}}
      </div>
    </span>
  </div>
</template>
<script>
  export default {
    name: 'switchComponent',
    props: {
      value: {
        type: Boolean,
        default: true
      },
      text: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        isChecked: this.value
      }
    },
    computed: {
      direction() {
        if (this.text) {
          return this.text.split('|')
        } else {
          return []
        }
      }
    },
    watch: {
      value(val) {
        this.isChecked = val
      },
      isChecked(val) {
        this.$emit('change', val);
      }
    },
    methods: {
      toggle() {
        this.isChecked = !this.isChecked;
      }
    }
  }
</script>
<style>
  .weui-switch {
    display: block;
    position: relative;
    width: 72px;
    height: 28px;
    outline: 0;
    border-radius: 16px;
    box-sizing: border-box;
    background-color: #DFDFDF;
    transition: background-color 0.1s, border 0.1s;
    cursor: pointer;
    font-size: 12px;
  }

  .weui-switch:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    height: 28px;
    border-radius: 15px;
    background-color: #d7d7d7;
    transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
  }

  .weui-switch:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    border-radius: 15px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
  }

  .weui-switch-on {
    border-color: #6F6F6F;
    background-color: #1AAD19;
  }

  .weui-switch-on:before {
    border-color: #1AAD19;
    background-color: #409eff;
  }

  .weui-switch-on:after {
    transform: translateX(45px);
  }
</style>

 src/components/smallModule/mwThermometer.vue

New file
@@ -0,0 +1,81 @@
<template>
  <div class="thermometer" :class="{ active: state}">
    <div class="line"></div>
    <div class="arc"></div>
  </div>
</template>

<script>
  export default {
    props: ['switch'],
    data() {
      return {
        state: false
      }
    },
    watch: {
      'switch': {
        handler(val) {
          this.state = val
        },
        deep: true
      },
    },
    mounted() {
      this.state = this.switch
    }
  }
</script>

<style scoped>
  .thermometer {
    width: 16px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .line {
    width: 8px;
    height: 54px;
    background-color: #ffffff;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    position: relative;
  }

  .thermometer.active .line::before {
    content: "";
    display: block;
    width: 6px;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 1px;
    background: -webkit-linear-gradient(top, #ffffff, #318bf1);
  }

  .arc {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #ffffff;
    margin-top: -1px;
    overflow: hidden;
    position: relative;
  }

  .thermometer.active .arc::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #318bf1;
    position: absolute;
    bottom: -1px;
    left: -1px;
  }
</style>

 src/components/smallModule/statusModule.vue

New file
@@ -0,0 +1,60 @@
<template>
  <div class="statusModule">
    <div class="item" v-for="(item,i) in statusList" :key="i">
      <div class="text">{{item.text}}</div>
      <div class="tai" :style="{'background':item.color}" v-if="item.status"></div>
      <div class="tai" v-else></div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['statusList'],
    data() {
      return {

      }
    },
  }
</script>

<style scoped>
  .statusModule {
    background-color: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(30, 159, 242, 1);
    border-radius: 5px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-size: 10px;
    color: #02A7F0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 8px 8px;
  }

  .statusModule .item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .statusModule .item .text {
    font-size: 10px;
    color: #ffffff;
    margin-bottom: 8px;
  }

  .statusModule .item .tai {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #999999;
  }
</style>

 src/components/smallModule/stepList.vue

@@ -10,133 +10,175 @@
        <div class="step-item">
            {{ status.text }}
        </div>
        <div class="step-item">
        <div class="step-item" v-if="startArr.length>0">
            {{ startArr[0] }}<br>{{ startArr[1] }}
        </div>
        <div class="step-item" v-else>
            {{ data.start }}
        </div>
        <div class="step-item">
        <div class="step-item" v-if="endArr.length>0">
            {{ endArr[0] }}<br>{{ endArr[1] }}
        </div>
        <div class="step-item" v-else>
            {{ data.end }}
        </div>
        <div class="step-item" v-if="endTextArr.length>0">
            {{ endTextArr[0] }}<br>{{ endTextArr[1] }}
        </div>
        <div class="step-item" v-else>
            {{ data.endText }}
        </div>
    </div>
</template>

<script>
export default {
    name: "stepList",
    props: {
        end: {
            type: Boolean,
            default: false,
        },
        data: {
            type: Object,
            default() {
                return {
                    name: '',
                    status: 0,
                    start: '',
                    end: ''
    export default {
        name: "stepList",
        props: {
            end: {
                type: Boolean,
                default: false,
            },
            data: {
                type: Object,
                default () {
                    return {
                        name: '',
                        status: 0,
                        start: '',
                        end: '',
                        endText: ''
                    }
                }
            },
            size: {
                type: String,
                default: ''
            },
        },
        data() {
            return {
                startArr: [],
                endArr: [],
                endTextArr: []
            }
        },
        size: {
            type: String,
            default: ''
        computed: {
            status() {
                let data = this.data;
                let result = {
                    class: 'not-start',
                    text: '未开始'
                };
                switch (data.status) {
                    case 1:
                        result.class = 'in-process';
                        result.text = '进行中';
                        break;
                    case 2:
                        result.class = 'complete';
                        result.text = '已完成';
                        break;
                }
                return result;
            },
            sizeClass() {
                let sizeClass = "";
                switch (this.size) {
                    case 'mini':
                        sizeClass = "mini-size";
                        break;
                    case 'small':
                        sizeClass = "small-size";
                        break;
                }
                return sizeClass;
            }
        },
    },
    data() {
        return {}
    },
    computed: {
        status() {
        mounted() {
            let data = this.data;
            let result = {
                class: 'not-start',
                text: '未开始'
            };
            switch(data.status) {
                case 1:
                    result.class = 'in-process';
                    result.text = '进行中';
                    break;
                case 2:
                    result.class = 'complete';
                    result.text = '已完成';
                    break;
            if (data.start && data.start.indexOf("\n") != -1) {
                this.startArr = data.start.split("\n")
            }
            return result;
        },
        sizeClass() {
            let sizeClass = "";
            switch (this.size) {
                case 'mini':
                    sizeClass = "mini-size";
                    break;
                case 'small':
                    sizeClass = "small-size";
                    break;
            if (data.end && data.end.indexOf("\n") != -1) {
                this.endArr = data.end.split("\n")
            }
            return sizeClass;
            if (data.endText && data.endText.indexOf("\n") != -1) {
                this.endTextArr = data.endText.split("\n")
            }
        }
    }
}
</script>

<style scoped>
.step-list {
    display: flex;
    flex-direction: row;
    font-size: 13px;
}
.step-item {
    padding-right: 36px;
}
.mini-size .step-item {
    padding-right: 24px;
}
.mini-size .step-item {
    padding-right: 12px;
}
.step-status-circle {
    background-color: #FFFFFF;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
}
.small-size .step-status-circle {
    width: 18px;
    height: 18px;
    border-width: 2px;
}
.mini-size .step-status-circle {
    width: 16px;
    height: 16px;
    border-width: 2px;
}
.step-status-circle.complete {
    border-color: #666EE8;
}
.step-status-circle.in-process {
    border-color: #82e866;
}
.step-status-circle.not-start {
    border-color: #686868;
}
.step-status-line {
    position: relative;
    width: 2px;
    background-color: #999999;
    background-image: linear-gradient(to right,#999999, #FFFFFF, #999999);
    height: 30px;
    margin-left: 50%;
    left: -1px;
}
.small-size .step-status-line {
    height: 25px;
}
.mini-size .step-status-line {
    height: 20px;
}
    .step-list {
        display: flex;
        flex-direction: row;
        font-size: 13px;
    }

    .step-item {
        padding-right: 36px;
    }

    .small-size .step-item {
        padding-right: 24px;
    }

    .mini-size .step-item {
        padding-right: 12px;
        font-size: 10px;
    }

    .step-status-circle {
        background-color: #FFFFFF;
        width: 24px;
        height: 24px;
        box-sizing: border-box;
        border-radius: 50%;
        border-width: 3px;
        border-style: solid;
    }

    .small-size .step-status-circle {
        width: 18px;
        height: 18px;
        border-width: 2px;
    }

    .mini-size .step-status-circle {
        width: 16px;
        height: 16px;
        border-width: 2px;
    }

    .step-status-circle.complete {
        border-color: #666EE8;
    }

    .step-status-circle.in-process {
        border-color: #82e866;
    }

    .step-status-circle.not-start {
        border-color: #686868;
    }

    .step-status-line {
        position: relative;
        width: 2px;
        background-color: #999999;
        background-image: linear-gradient(to right, #999999, #FFFFFF, #999999);
        height: 30px;
        margin-left: 50%;
        left: -1px;
    }

    .small-size .step-status-line {
        height: 25px;
    }

    .mini-size .step-status-line {
        height: 20px;
    }
</style>

 src/pages/test/noLoadTest.vue

@@ -35,11 +35,45 @@
      <div class="modelItemWarp top" style="width:50%;">
        <div class="content">
          <div class="title">试验拓扑图</div>
          <div class="con">
          <div class="con" style="position:relative;">
            <div class="diagram-content">
              <div class="diagram-stc" ref="static"></div>
              <div class="diagram-flush" ref="flush"></div>
            </div>
            <div class="diagramStatus">
              <status-module :statusList="diagramStatus"></status-module>
            </div>
            <div class="diagram-panel diagramPanel1">
              <h4 class="diagram-panel-title">直流配电柜</h4>
              <div class="panel-item"><span class="label">电压:</span>
                <el-input class="input" readonly="readonly" value="900"></el-input>
                <span class="unit">V</span>
              </div>
              <div class="panel-item"><span class="label">电流:</span>
                <el-input class="input" readonly="readonly" value="10"></el-input>
                <span class="unit">A</span>
              </div>
            </div>
            <div class="diagram-panel diagramPanel2">
              <h4 class="diagram-panel-title">受试电机</h4>
              <div class="panel-item"><span class="label">转速:</span>
                <el-input class="input" readonly="readonly" value="2"></el-input>
                <span class="unit">r/min</span>
              </div>
              <div class="panel-item"><span class="label">功率:</span>
                <el-input class="input" readonly="readonly" value="3213"></el-input>
                <span class="unit">kW</span>
              </div>
              <div class="panel-item"><span class="label">噪声:</span>
                <el-input class="input" readonly="readonly" value="20"></el-input>
                <span class="unit">dB</span>
              </div>
            </div>
            <div class="thermometerCon">
              <mw-thermometer :switch="true"></mw-thermometer>
              受试电机<br>水冷开启
            </div>

          </div>
        </div>
      </div>
@@ -51,6 +85,18 @@
            <div class="lineCon">
              <double-line id="DoubleLine" ref="DoubleLine"></double-line>
            </div>
            <div class="chartTitle">高速齿轮转速</div>
            <div class="chartTitle mw-process-warp">
              <mw-process :process="60" text="600"></mw-process>
            </div>
            <div class="chartTitle">受试电机电压</div>
            <div class="chartTitle mw-process-warp">
              <mw-section-process title="当前电压 600V" leftText="-5V" rightText="+6V"></mw-section-process>
            </div>
            <div class="chartTitle">受试电机电流</div>
            <div class="chartTitle mw-process-warp">
              <mw-section-process title="当前电压 2200mA" leftText="-20mA" rightText="+20mA"></mw-section-process>
            </div>
          </div>
        </div>
      </div>
@@ -58,7 +104,15 @@
        <div class="content">
          <div class="title">直流调速柜操作</div>
          <div class="con">

            <div class="speedCon">
              <el-slider v-model="speedValue"></el-slider>
            </div>
            <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-button type="primary" size="mini">确认调速</el-button>
            </div>
          </div>
        </div>
      </div>
@@ -66,7 +120,47 @@
        <div class="content">
          <div class="title">AFE变频操作</div>
          <div class="con">

            <div class="flexWarp">
              <div class="status">
                <div class="text">整流启动</div>
                <div class="moduleCon">
                  <status-module :statusList="statusList1"></status-module>
                </div>
              </div>
              <div class="status">
                <div class="text">整流逆变</div>
                <div class="moduleCon">
                  <status-module :statusList="statusList2"></status-module>
                </div>
              </div>
              <div class="status">
                <div class="text">整流模式</div>
                <div class="moduleCon">
                  <status-module :statusList="statusList3"></status-module>
                </div>
              </div>
              <div class="status lineCon">
                <div class="line">
                  <div class="text">VF</div>
                  <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>
                  <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>
                  <div class="text">参考值1~1000</div>
                </div>
              </div>
              <div class="status">
                <el-button type="primary" size="mini">整流复位</el-button>
                <el-button type="danger" size="mini">紧急停止</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
@@ -74,7 +168,10 @@
        <div class="content">
          <div class="title">整流电压操作</div>
          <div class="con">

            <div class="couflex">
              <el-button type="primary" size="mini" class="stopBtn">停止</el-button>
              <el-button type="danger" size="mini" class="stopBtn">紧急停止</el-button>
            </div>
          </div>
        </div>
      </div>
@@ -82,15 +179,36 @@
        <div class="content">
          <div class="title">水冷操作</div>
          <div class="con">

            <div class="couflex">
              <div class="optItem">
                <div class="lineTit">AFE变频器水冷</div>
                <mw-switch v-model="value1" text="开启|关闭"></mw-switch>
              </div>
              <div class="optItem">
                <div class="lineTit">受试电机水冷</div>
                <mw-switch v-model="value1" text="开启|关闭"></mw-switch>
              </div>
              <div class="optItem">
                <div class="lineTit">测功电机水冷</div>
                <mw-switch v-model="value1" text="开启|关闭"></mw-switch>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modelItemWarp bottom" style="width:31%;">
        <div class="content">
          <div class="title">试验状态</div>
          <div class="con">

          <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">
              </step-list>
            </div>
            <div class="stepBtnCon">
              <el-button type="primary" size="mini">查看结果</el-button>
              <el-button type="primary" size="mini">完成试验</el-button>
            </div>
          </div>
        </div>
      </div>
@@ -103,22 +221,146 @@
  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 DiagramPanel from '@/components/smallModule/DiagramPanel.vue';
  import MwProcess from '@/components/smallModule/mwProcess.vue';
  import MwSectionProcess from '@/components/smallModule/mwSectionProcess.vue';
  import MwThermometer from '@/components/smallModule/mwThermometer.vue';
  let diagram;
  export default {
    components: {
      barChart,
      DoubleLine
      DoubleLine,
      StepList,
      MwSwitch,
      StatusModule,
      DiagramPanel,
      MwProcess,
      MwSectionProcess,
      MwThermometer,
    },
    data() {
      return {

        text1Pos: [20, 20],
        value1: true,
        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
        }],
        list: [{
            name: '负载点一',
            status: 2,
            start: '开始时间\n10:30',
            end: '完成时间\n10:30',
            endText: '平均功率\n100kW'
          },
          {
            name: '负载点二',
            status: 2,
            start: '开始时间\n10:30',
            end: '完成时间\n10:30',
            endText: '平均功率\n100kW'
          },
          {
            name: '负载点三',
            status: 2,
            start: '开始时间\n10:30',
            end: '完成时间\n10:30'
          },
          {
            name: '负载点四',
            status: 1,
            start: '开始时间\n10:30',
            end: ''
          },
          {
            name: '负载点五',
            status: 0,
            start: '开始时间\n10:30',
            end: ''
          },
          {
            name: '负载点六',
            status: 0,
            start: '开始时间\n10:30',
            end: ''
          },
        ]
      }
    },
    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);
    },
    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'],
@@ -166,11 +408,11 @@
  }

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

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

  .chart {
@@ -220,4 +462,168 @@
    font-size: 14px;
    padding: 8px 15px;
  }

  .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 /deep/ .el-slider {
    width: 100%;
  }

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

  .speedInput {
    margin: 0 10px;
  }

  .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;
  }

  .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;
  }

  .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 .text {
    font-size: 10px;
  }

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

  .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:first-of-type {
    width: 30px;
  }

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

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

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

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

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

  .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 /deep/ .el-button {
    margin: 0;
    margin-bottom: 10px;
  }

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