large_screen/src/views/drain/dataBoard/dataBoard.vue

<template>
  <div class="main">
    <div class="header">
      <div class="select-veido">
        <el-select
          style="margin-top: 10px"
          v-model="currentComId"
          placeholder="请选择"
          @change="selectChart"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="item in pumpOptions"
            :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">
            <!-- 电机电压 -->
            <oneline
              ref="voltage"
              :id="92"
              title="电机电压"
              unit="V"
              type="dianya_after"
            ></oneline>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="top_center">
            <!-- 电机电流 -->
            <oneline
              ref="current"
              :id="92"
              title="电机电流"
              unit="A"
              type="dianliu_after"
            ></oneline>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="top_right">
            <!-- 电机前后轴温 -->
            <twoline
              ref="bearing"
              :id="92"
              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">
            <!-- 电机振动 -->
            <oneline
              ref="virbrate"
              :id="92"
              title="电机振动"
              unit="mm/s"
              type="zhendong_after"
            ></oneline>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="center_center">
            <!-- 水泵出口管道压力 -->
            <twoline
              ref="pressure"
              :id="93"
              title="水泵出口管道压力"
              unit="Mpa"
              :type="pressureType"
              :legend="pressureLegand"
            ></twoline>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="center_right">
            <!-- 水仓水位 -->
            <oneline
              ref="water_level"
              :id="94"
              title="水仓水位"
              unit="m"
              type="shuiwei_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 faultAlarm from "./faultAlarm";
import runningMsg from "./runningMsg";
export default {
  data() {
    return {
      currentComId: this.title,
      pumpOptions: [
        {
          id: "1",
          label: "1号水泵",
        },
        {
          id: "2",
          label: "2号水泵",
        },
        {
          id: "3",
          label: "3号水泵",
        },
      ],

      pressureType: ["zhengya_after", "fuya_after"],
      pressureLegand: ["正压", "负压"],
      bearingType: ["qianzhouwen_after", "houzhouwen_after"],
      bearingLegand: ["电机前轴温", "电机后轴温"],
    };
  },
  props: ["title"],
  methods: {
    selectChart(val) {
      this.$bus.$emit("changeDrainId", String(val));
      let chartRefs = [
        "voltage",
        "current",
        "bearing",
        "virbrate",
        "pressure",
        "water_level",
      ];
      for (let i = 0; i < chartRefs.length; i++) {
        this.$refs[chartRefs[i]].clearData();
        this.$refs[chartRefs[i]].idChange(val);
      }
      //   this.$refs.faultAlarm.idChange(val);
      //   this.$refs.runningMsg.idChange(val);
    },
  },
  components: {
    oneline,
    twoline,
    threeline,
    faultAlarm,
    runningMsg,
  },
};
</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: 900px;
  position: relative;

  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 {
  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: -60px;
  display: flex;
  justify-content: space-around;
}
.bottom_left {
  width: 500px;
  height: 210px;
  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
  background-size: 100%;
}
.bottom_right {
  width: 500px;
  height: 210px;
  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
  background-size: 100%;
}
</style>