large_screen/src/views/mining/machines/index.vue

<template>
  <div id="outer">
    <div class="title">
      <p style="color:#4adefe;">三机监控</p>
    </div>
    <img style="width: 1300px;margin-left:100px" src="./顶部.png" />
    <div style="height: 50px"></div>
    <div class="row">
      <div class="square">
        <img class="img" src="./刮板机.png" />
        <div class="inf">
          <div style="height: 20%;font-size: 20px;color: #4adefe;">刮板机 运行状态</div>
          <div class="details">
              <div>运行速度:
              <span>
                 {{ data[0].transporter_speed }}m/s
              </span>
             </div>
            <div>电机功率:
              <span>
                {{ data[0].transporter_power }}W
              </span>
            </div>
            <div>减速器油温:
              <span>
                {{ data[0].transporter_reducerOilTemperature }}℃
                </span>
              </div>
            <div>电机电流:
              <span>
                {{ data[0].transporter_current }}A
              </span>
            </div>
            <div>电机轴温:
              <span>
                {{ data[0].transporter_motorTemperature }}℃
              </span>
            </div>
            <div>冷却水水压:
             <span>
               {{ data[0].transporter_pressure }}Pa
              </span> 
              </div>
            <div>电机电压:
             <span>
               {{ data[0].transporter_voltage }}V
             </span> 
              </div>
            <div>减速器轴温:
              <span>
                {{ data[0].transporter_reducerShaftTemperature }}℃
              </span>
            </div>
            <div>冷却水水温:
              <span>
                {{ data[0].transporter_waterTemperature }}℃
              </span>
           </div>
          </div>
        </div>
      </div>
      <div class="square">
        <img class="img" src="./破碎机.png" />
        <div class="inf">
          <div style="height: 20%;font-size: 20px;color: #4adefe;">破碎机 运行状态</div>
          <div class="details">
           <div>运行速度:
              <span>
                 {{ data[1].transporter_speed }}m/s
              </span>
             </div>
            <div>电机功率:
              <span>
                {{ data[1].transporter_power }}W
              </span>
            </div>
            <div>减速器油温:
              <span>
                {{ data[1].transporter_reducerOilTemperature }}℃
                </span>
              </div>
            <div>电机电流:
              <span>
                {{ data[1].transporter_current }}A
              </span>
            </div>
            <div>电机轴温:
              <span>
                {{ data[1].transporter_motorTemperature }}℃
              </span>
            </div>
            <div>冷却水水压:
             <span>
               {{ data[1].transporter_pressure }}Pa
              </span> 
              </div>
            <div>电机电压:
             <span>
               {{ data[1].transporter_voltage }}V
             </span> 
              </div>
            <div>减速器轴温:
              <span>
                {{ data[1].transporter_reducerShaftTemperature }}℃
              </span>
            </div>
            <div>冷却水水温:
              <span>
                {{ data[1].transporter_waterTemperature }}℃
              </span>
           </div>
          </div>
        </div>
      </div>
      <div class="square">
        <img class="img" src="./转载机.png" />
        <div class="inf">
          <div style="height: 20%; font-size: 20px; color: #4adefe;">转载机 运行状态</div>
          <div class="details">
          <div>运行速度:
              <span>
                 {{ data[2].transporter_speed }}m/s
              </span>
             </div>
            <div>电机功率:
              <span>
                {{ data[2].transporter_power }}W
              </span>
            </div>
            <div>减速器油温:
              <span>
                {{ data[2].transporter_reducerOilTemperature }}℃
                </span>
              </div>
            <div>电机电流:
              <span>
                {{ data[2].transporter_current }}A
              </span>
            </div>
            <div>电机轴温:
              <span>
                {{ data[2].transporter_motorTemperature }}℃
              </span>
            </div>
            <div>冷却水水压:
             <span>
               {{ data[2].transporter_pressure }}Pa
              </span> 
              </div>
            <div>电机电压:
             <span>
               {{ data[2].transporter_voltage }}V
             </span> 
              </div>
            <div>减速器轴温:
              <span>
                {{ data[2].transporter_reducerShaftTemperature }}℃
              </span>
            </div>
            <div>冷却水水温:
              <span>
                {{ data[2].transporter_waterTemperature }}℃
              </span>
           </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  
  name: "compressors",
  data() {
    return {
      data: [{
        transporter_speed:0,
        transporter_power:10,
        transporter_reducerOilTemperature:30,
        transporter_current:20,
        transporter_motorTemperature:60,
        transporter_pressure:20,
        transporter_voltage:232,
        transporter_reducerShaftTemperature:10,
        transporter_waterTemperature:50,
      
      },{
         transporter_speed:3,
        transporter_power:10,
        transporter_reducerOilTemperature:30,
        transporter_current:20,
        transporter_motorTemperature:60,
        transporter_pressure:20,
        transporter_voltage:232,
        transporter_reducerShaftTemperature:10,
        transporter_waterTemperature:50,

      },{
         transporter_speed:30,
        transporter_power:10,
        transporter_reducerOilTemperature:30,
        transporter_current:20,
        transporter_motorTemperature:60,
        transporter_pressure:20,
        transporter_voltage:232,
        transporter_reducerShaftTemperature:10,
        transporter_waterTemperature:50,

      }
      ]
    };
  },

computed: {
    ...mapState(["websocketIP"]),
  },
  mounted() {
    //如果id确定，再修改
//     let data0 = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/8`);
//     this.initWebSocket(data0, "data0");
//   let data1 = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/8`);
//     this.initWebSocket(data1, "data1");
// let data2 = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/8`);
//     this.initWebSocket(data2, "data2");

  },
  methods: {
    getData0(data) {
      this.data[0]=data[0];

    },
        getData1(data) {
      this.data[1]=data[1];

    },
        getData2(data) {
      this.data[2]=data[2];

    },
    initWebSocket(websocket, type, select) {
      // 连接错误
      websocket.onerror = () => {
        console.log("WebSocket连接发生错误   状态码：" + websocket.readyState);
      };
      // 连接成功
      websocket.onopen = () => {
        console.log("WebSocket连接成功    状态码：" + websocket.readyState);
      };
      // 收到消息的回调
      websocket.onmessage = (event) => {
        if (!JSON.parse(event.data).length) {
          return;
        }
        if (type == "data0") {
          this.getData0(JSON.parse(event.data));
        } else if (type == "data1") {
        this.getData1(JSON.parse(event.data));
        } else if (type == "data2") {
          this.getData2(JSON.parse(event.data));
        } 
      };
      // 连接关闭的回调
      websocket.onclose = () => {
        console.log("WebSocket连接关闭    状态码：" + websocket.readyState);
      };
      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
      this.$once("hook:beforeDestroy", () => {
        websocket.close();
      });
    },
  },



};
</script>

<style lang="less" scoped>
#outer {
  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;
  .title {
    position: relative;
    height: 5%;
    p {
      color: #fff;
      font-size: 30px;
      margin: 0;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .square {
    border: 3px solid;
    border-color: #302b33;
    margin-left: 200px;
    margin-bottom: 20px;
    margin-top: -25px
  }
  .container {
    display: grid;
    width: 1200px;
    height: 1000px;
    grid-template-rows: 100%;
    grid-template-columns: 50% 50%;
  }
  .details {
    display: grid;
    height: 90%;
    grid-template-rows: 33.3% 33.3% 33.3%;
    grid-template-columns: 33.3% 33.3% 33.3%;
    font-size: 18px;
    color: #4adefe;
    span {
      border-radius: 0.7rem;
      width: 2.5rem;
      height: 2.25rem;
      color: #f3db5c;
    }
  }
  .row {
    display: grid;
    width: 1300px;
    height: 600px;
    left: 640px;
    grid-template-rows: 33.3% 33.3% 33.3%;
    grid-template-columns: 100%;
  }
  .img {
    //border: 1px solid;
    //border-color: #29b35e;
    float: left;
    border-radius: 10%;
    width: 17%;
    height: 100%;
  }
  .inf {
    //border: 1px solid;
    //border-color: #4729b3;
    float: right;
    width: 83%;
    height: 100%;
  }
}
</style>