large_screen/src/views/ventilate/dataBoard/dataBoard.vue

<template>
  <div class="main">
    <div class="header">
      <div class="select-veido">
        <el-select
          style="margin-top: 10px"
          v-model="currentVenId"
          placeholder="请选择"
          @change="selectChart"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="item in venOptions"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="top">
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="top_left">
            <!-- 三相线电压/三相相电流 -->
            <vol-and-current ref="volAndCurrent"></vol-and-current>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="top_center">
            <!-- 三相绕组温度（定子温度） -->
            <threeline
              ref="separate"
              :id="89"
              title="三相绕组温度"
              unit="°C"
              :type="separateType"
              :legend="separateLegand"
            ></threeline>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="top_right">
            <!-- 轴承温度 -->
            <twoline
              ref="bearing"
              :id="89"
              title="轴承温度"
              unit="°C"
              :type="bearingType"
              :legend="bearingLegand"
            ></twoline>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="center">
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="center_left">
            <!-- 振动 -->
            <twoline
              ref="vibrate"
              :id="89"
              title="振动"
              unit="um/s"
              :type="vibrateType"
              :legend="vibrateLegand"
            ></twoline>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="center_center">
            <!-- 风流/风速 -->
            <wind ref="wind"></wind>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="center_right">
            <!-- 全压 -->
            <oneline
              ref="pressure"
              :id="91"
              title="管道全压"
              unit="Mpa"
              type="quanya_after"
            ></oneline>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="bottom">
      <el-row :gutter="130">
        <el-col :span="12">
          <div class="bottom_left">
            <fault-alarm></fault-alarm>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="bottom_right">
            <running-msg></running-msg>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import oneline from "@/common/oneline";
import twoline from "@/common/twoline";
import threeline from "@/common/threeline";
import volAndCurrent from "./volAndCurrent";
import separate from "./separate";
import bearing from "./bearing";
import vibrate from "./vibrate";
import wind from "./wind";
import pressure from "./pressure";
import faultAlarm from "./faultAlarm";
import runningMsg from "./runningMsg";
export default {
  data() {
    return {
      currentVenId: this.title,
      venOptions: [
        {
          id: "1",
          label: "1号风机",
        },
        {
          id: "2",
          label: "2号风机",
        },
      ],
      separateType: [
        "raozuyiwendu_after",
        "raozuerwendu_after",
        "raozusanwendu_after",
      ],
      separateLegand: ["绕组1温度", "绕组2温度", "绕组3温度"],
      bearingType: ["qianzhouwen_after", "houzhouwen_after"],
      bearingLegand: ["前轴温", "后轴温"],
      vibrateType: ["shuipingzhendong_after", "chuizhizhendong_after"],
      vibrateLegand: ["水平振动", "垂直振动"],
    };
  },
  props:["title"],
  methods: {
    selectChart(val) {
      console.log("val", val);
      this.$bus.$emit("changeVenId", String(val));
      this.$refs.volAndCurrent.idChange(val);
      this.$refs.separate.idChange(val);
      this.$refs.bearing.idChange(val);
      this.$refs.vibrate.idChange(val);
      this.$refs.wind.idChange(val);
      this.$refs.pressure.idChange(val);
      //   this.$refs.faultAlarm.idChange(val);
      //   this.$refs.runningMsg.idChange(val);
    },
  },
 
  components: {
    volAndCurrent,
    wind,
    faultAlarm,
    runningMsg,
    oneline,
    twoline,
    threeline,
  },
};
</script>
<style scoped>
.select-veido .el-select {
  width: 140px;
  margin-left: 10px;
}
.select-veido >>> .el-input--small .el-input__inner {
  background: none;
  color: #4adefe;
  font-size: 20px;
}
.select-veido >>> .el-input__inner {
  border: 0;
}
.select-veido >>> .el-scrollbar {
  background: rgba(255, 255, 255, 1);
  border: 0;
}
.main {
  width: 100%;
  height: 845px;
  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
    linear-gradient(
      to top,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(0, 0, 0, 0.25) 200%
    );
  /* 正片叠底模式。 */
  background-blend-mode: multiply;
  /* background-color: antiquewhite; */
}
.header {
  margin: 0 auto;
  position: relative;
  width: 100%;
  height: 10%;
  max-width: 1920px;
  background: url("../../../assets/img/gas/header.png") center no-repeat;
  box-sizing: border-box;
}
.select-veido {
  margin: 0;
  padding: 0;
  line-height: 50px;
  text-align: center;
  font-size: 22px;
  color: #ffffff;
}
.top {
  height: 30%;
}
.top_left {
  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
  background-size: 100%;
  height: 210px;
}
.top_center {
  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
  background-size: 100%;
  height: 210px;
}
.top_right {
  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
  background-size: 100%;
  height: 210px;
}

.center {
  height: 30%;
}
.center_left {
  width: 100%;
  height: 210px;
  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
  background-size: 100%;
}
.center_center {
  width: 100%;
  height: 210px;
  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
  background-size: 100%;
}
.center_right {
  /* margin-left: -25px; */
  width: 100%;
  height: 210px;
  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
  background-size: 100%;
}
.bottom {
  /* height: 30%; */
  /* display: inline; */
  /* height: 400px; */
  margin-top: -40px;
  display: flex;
  justify-content: space-around;
}
.bottom_left {
  width: 500px;
  height: 210px;
  margin-top: -10px;
  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
  background-size: 100%;
}
.bottom_right {
  width: 500px;
  height: 210px;
   margin-top: -10px;
  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
  background-size: 100%;
}
</style>