large_screen/src/views/ventilate/configImg/configImg.vue

<template>
  <div class="main">
    <el-container>
      <el-header>
        <div class="image">
          <h2>通风系统系统图</h2>
          <img src="@/assets/img/风机组态图.png" />
        </div>
      </el-header>
      <el-main style="margin-top:-20px">
        <el-row :gutter="10">
          <el-col :span="12">
            <div class="center">
              <h2>一号风机运行参数</h2>
              <table>
                <tr>
                  <th><img src="@/assets/img/柱形图.png" />1级电机参数</th>
                  <th><img src="@/assets/img/柱形图.png" />2级电机风机</th>
                  <th><img src="@/assets/img/柱形图.png" />管道风量参数</th>
                </tr>
                <tr>
                  <td>
                    电压Uab: <span>{{ fan1.motor1[0] }}</span> V
                  </td>
                  <td>
                    电压Uab: <span>{{ fan1.motor2[0] }}</span> V
                  </td>
                  <td>
                    风流: <span>{{ fan1.pipeline[0] }}</span> m³/s
                  </td>
                </tr>
                <tr>
                  <td>
                    电压Ubc: <span>{{ fan1.motor1[1] }}</span> V
                  </td>
                  <td>
                    电压Ubc: <span>{{ fan1.motor2[1] }}</span> V
                  </td>
                  <td>
                    风速: <span>{{ fan1.pipeline[1] }}</span> m/s
                  </td>
                </tr>
                <tr>
                  <td>
                    电压Uac: <span>{{ fan1.motor1[2] }}</span> V
                  </td>
                  <td>
                    电压Uac: <span>{{ fan1.motor2[2] }}</span> V
                  </td>
                  <td>
                    全压: <span>{{ fan1.pipeline[2] }}</span> Pa
                  </td>
                </tr>
                <tr>
                  <td>
                    电流IA: <span>{{ fan1.motor1[3] }}</span> A
                  </td>
                  <td>
                    电流IA: <span>{{ fan1.motor2[3] }}</span> A
                  </td>
                  <td>
                    静压: <span>{{ fan1.pipeline[4] }}</span> Pa
                  </td>
                </tr>
                <tr>
                  <td>
                    电流IB: <span>{{ fan1.motor1[4] }}</span> A
                  </td>
                  <td>
                    电流IC: <span>{{ fan1.motor2[4] }}</span> A
                  </td>
                  <td>
                    动压: <span>{{ fan1.pipeline[4] }}</span> Pa
                  </td>
                </tr>
                <tr>
                  <td>
                    绕组1温度: <span>{{ fan1.motor1[5] }}</span> ℃
                  </td>
                  <td>
                    绕组1温度: <span>{{ fan1.motor2[5] }}</span> ℃
                  </td>
                  <td>
                    水平风门: <span>{{ fan1.pipeline[5] }}</span>
                  </td>
                </tr>
                <tr>
                  <td>
                    绕组2温度: <span>{{ fan1.motor1[6] }}</span> ℃
                  </td>
                  <td>
                    绕组2温度: <span>{{ fan1.motor2[6] }}</span> ℃
                  </td>
                  <td>
                    垂直风门: <span>{{ fan1.pipeline[6] }}</span>
                  </td>
                </tr>
                <tr>
                  <td>
                    前轴温度: <span>{{ fan1.motor1[7] }}</span> ℃
                  </td>
                  <td>
                    后轴温度: <span>{{ fan1.motor2[7] }}</span> ℃
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td>
                    水平震动: <span>{{ fan1.motor1[8] }}</span> um/s
                  </td>
                  <td>
                    垂直震动: <span>{{ fan1.motor2[8] }}</span> um/s
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td>
                    运行频率: <span>{{ fan1.motor1[9] }}</span> w
                  </td>
                  <td>
                    运行频率: <span>{{ fan1.motor2[9] }}</span> w
                  </td>
                  <td></td>
                </tr>
              </table>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="center">
              <h2>二号风机运行参数</h2>
              <table>
                <tr>
                  <th><img src="@/assets/img/柱形图.png" />1级电机参数</th>
                  <th><img src="@/assets/img/柱形图.png" />2级电机风机</th>
                  <th><img src="@/assets/img/柱形图.png" />管道风量参数</th>
                </tr>
                <tr>
                  <td>
                    电压Uab: <span>{{ fan2.motor1[0] }}</span> V
                  </td>
                  <td>
                    电压Uab: <span>{{ fan2.motor2[0] }}</span> V
                  </td>
                  <td>
                    风流: <span>{{ fan2.pipeline[0] }}</span> m³/s
                  </td>
                </tr>
                <tr>
                  <td>
                    电压Ubc: <span>{{ fan2.motor1[1] }}</span> V
                  </td>
                  <td>
                    电压Ubc: <span>{{ fan2.motor2[1] }}</span> V
                  </td>
                  <td>
                    风速: <span>{{ fan2.pipeline[1] }}</span> m/s
                  </td>
                </tr>
                <tr>
                  <td>
                    电压Uac: <span>{{ fan2.motor1[2] }}</span> V
                  </td>
                  <td>
                    电压Uac: <span>{{ fan2.motor2[2] }}</span> V
                  </td>
                  <td>
                    全压: <span>{{ fan2.pipeline[2] }}</span> Pa
                  </td>
                </tr>
                <tr>
                  <td>
                    电流IA: <span>{{ fan2.motor1[3] }}</span> A
                  </td>
                  <td>
                    电流IA: <span>{{ fan2.motor2[3] }}</span> A
                  </td>
                  <td>
                    静压: <span>{{ fan2.pipeline[4] }}</span> Pa
                  </td>
                </tr>
                <tr>
                  <td>
                    电流IB: <span>{{ fan2.motor1[4] }}</span> A
                  </td>
                  <td>
                    电流IC: <span>{{ fan2.motor2[4] }}</span> A
                  </td>
                  <td>
                    动压: <span>{{ fan2.pipeline[4] }}</span> Pa
                  </td>
                </tr>
                <tr>
                  <td>
                    绕组1温度: <span>{{ fan2.motor1[5] }}</span> ℃
                  </td>
                  <td>
                    绕组1温度: <span>{{ fan2.motor2[5] }}</span> ℃
                  </td>
                  <td>
                    水平风门: <span>{{ fan2.pipeline[5] }}</span>
                  </td>
                </tr>
                <tr>
                  <td>
                    绕组2温度: <span>{{ fan2.motor1[6] }}</span> ℃
                  </td>
                  <td>
                    绕组2温度: <span>{{ fan2.motor2[6] }}</span> ℃
                  </td>
                  <td>
                    垂直风门: <span>{{ fan2.pipeline[6] }}</span>
                  </td>
                </tr>
                <tr>
                  <td>
                    前轴温度: <span>{{ fan2.motor1[7] }}</span> ℃
                  </td>
                  <td>
                    后轴温度: <span>{{ fan2.motor2[7] }}</span> ℃
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td>
                    水平震动: <span>{{ fan2.motor1[8] }}</span> um/s
                  </td>
                  <td>
                    垂直震动: <span>{{ fan2.motor2[8] }}</span> um/s
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td>
                    运行频率: <span>{{ fan2.motor1[9] }}</span> w
                  </td>
                  <td>
                    运行频率: <span>{{ fan2.motor2[9] }}</span> w
                  </td>
                  <td></td>
                </tr>
              </table>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fan1: {
        motor1: [1, 3, 3, 2, 3, 1, 1, 2, 2, 2],
        motor2: [2, 3, 3, 1, 1, 1, 2, 3, 1, 1],
        pipeline:[2, 3, 3, 2, 3, 2, 1],
      },
      fan2: {
        motor1: [1, 3, 3, 2, 3, 1, 1, 2, 2, 2],
        motor2: [1, 2, 2, 2, 3, 3, 3, 2, 2, 2],
        pipeline: [1, 1, 1, 3, 1, 3, 3]
      },
    };
  },
  mounted(){
    // setInterval(() => {
    //   this.fan1.motor1.shift();
    //   this.fan1.motor1.push(this.generate(1,3));
    
    //   console.log(this.fan1.motor1);
    // }, 3000);

  },
  methods: {
    generate(min,max) {
       return (parseInt(Math.random() * (max - min + 1) + min, 10));
    },
  }
};
</script>

<style scoped>
.main {
  width: 100%;
  height: 850px;
  background-image: linear-gradient(
    to right,
    rgb(6, 19, 60) 0%,
    rgb(1, 22, 105) 50%,
    rgb(6, 19, 60) 100%
  );
  position: relative;
}
.image {
  /* background-color: black; */
  height: 300px;
}
.image img {
  margin-left: 160px;
  margin-top: -80px;
  width: auto;
  height: 300px;
}
.image h2 {
  text-align: center;
  font-size: 40px;
  color: #4adefe;
}
.center {
  width: 100%;
  height: 540px;
  margin-top: 220px;
  background: url("../../../assets/img/tunneling/dataBg.png") no-repeat;
  background-size: 100%;
}
.center h2 {
  text-align: center;
  font-size: 30px;
  color: #4adefe;
  margin-bottom: -10px;
}
.center table {
  width: 98%;
  text-align: center;
  min-height: 500px;
  border-collapse: separate;
  border-spacing: 0;
}
.center span {
  color: #f3db5c;
}
.center img {
  height: 20px;
}
.center th {
  font-size: 20px;
  color: #4adefe;
}
.center td {
  font-size: 15px;
  color: #4adefe;
}
</style>