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="./top.png" />
    <div style="height: 50px"></div>
    <div class="row">
      <div class="square">
        <img class="img" src="./sc.png" />
        <div class="inf">
          <div style="height: 20%;font-size: 20px;color: #4adefe;">刮板机 运行状态</div>
          <div class="details">
              <div>运行速度:
              <span>
                 {{ data.transporter_speed }}m/s
              </span>
             </div>
            <div>电机功率:
              <span>
                {{ data.transporter_power }}W
              </span>
            </div>
            <div>减速器油温:
              <span>
                {{ data.transporter_reducerOilTemperature }}℃
                </span>
              </div>
            <div>电机电流:
              <span>
                {{ data.transporter_current }}A
              </span>
            </div>
            <div>电机轴温:
              <span>
                {{ data.transporter_motorTemperature }}℃
              </span>
            </div>
            <div>冷却水水压:
             <span>
               {{ data.transporter_pressure }}Pa
              </span> 
              </div>
            <div>电机电压:
             <span>
               {{ data.transporter_voltage }}V
             </span> 
              </div>
            <div>减速器轴温:
              <span>
                {{ data.transporter_reducerShaftTemperature }}℃
              </span>
            </div>
            <div>冷却水水温:
              <span>
                {{ data.transporter_waterTemperature }}℃
              </span>
           </div>
          </div>
        </div>
      </div>
      <div class="square">
        <img class="img" src="./breaker.png" />
        <div class="inf">
          <div style="height: 20%;font-size: 20px;color: #4adefe;">破碎机 运行状态</div>
          <div class="details">
             <div>运行速度:
              <span>
                 {{ data.transporter_speed }}m/s
              </span>
             </div>
            <div>电机功率:
              <span>
                {{ data.transporter_power }}W
              </span>
            </div>
            <div>减速器油温:
              <span>
                {{ data.transporter_reducerOilTemperature }}℃
                </span>
              </div>
            <div>电机电流:
              <span>
                {{ data.transporter_current }}A
              </span>
            </div>
            <div>电机轴温:
              <span>
                {{ data.transporter_motorTemperature }}℃
              </span>
            </div>
            <div>冷却水水压:
             <span>
               {{ data.transporter_pressure }}Pa
              </span> 
              </div>
            <div>电机电压:
             <span>
               {{ data.transporter_voltage }}V
             </span> 
              </div>
            <div>减速器轴温:
              <span>
                {{ data.transporter_reducerShaftTemperature }}℃
              </span>
            </div>
            <div>冷却水水温:
              <span>
                {{ data.transporter_waterTemperature }}℃
              </span>
           </div>
          </div>
        </div>
      </div>
      <div class="square">
        <img class="img" src="./tr.png" />
        <div class="inf">
          <div style="height: 20%; font-size: 20px; color: #4adefe;">转载机 运行状态</div>
          <div class="details">
            <div>运行速度:
              <span>
                 {{ data.transporter_speed }} m/s
              </span>
             </div>
            <div>电机功率:
              <span>
                {{ data.transporter_power }}W
              </span>
            </div>
            <div>减速器油温:
              <span>
                {{ data.transporter_reducerOilTemperature }}℃
                </span>
              </div>
            <div>电机电流:
              <span>
                {{ data.transporter_current }}A
              </span>
            </div>
            <div>电机轴温:
              <span>
                {{ data.transporter_motorTemperature }}℃
              </span>
            </div>
            <div>冷却水水压:
             <span>
               {{ data.transporter_pressure }}Pa
              </span> 
              </div>
            <div>电机电压:
             <span>
               {{ data.transporter_voltage }}V
             </span> 
              </div>
            <div>减速器轴温:
              <span>
                {{ data.transporter_reducerShaftTemperature }}℃
              </span>
            </div>
            <div>冷却水水温:
              <span>
                {{ data.transporter_waterTemperature }}℃
              </span>
           </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
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,
      },
    };
  },
  props: {
    url: String,
  },
  mounted() {
    
   
  },
  beforeDestroy() {
    
  },
};
</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: 6%;
    p {
      color: #fff;
      font-size: 40px;
      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: -20px
  }
  .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>