zs_aucma-mes-ui/src/views/board/board1/index.vue

<template>
  <div class="app-container">
    <div class="headTitle">注塑车间设备运行监控平台</div>
    <div class="topNum deviceNum">
      <span class="text">设备数量</span>
      <span>：</span>
      <span class="num">16</span>
      <span class="unit">台</span>
    </div>
    <div class="topNum bootRate">
      <span class="text">开机率</span>
      <span>：</span>
      <span class="num">80</span>
      <span class="unit">%</span>
    </div>
    <div class="topNum runNum">
      <span class="text">运行</span>
      <span>：</span>
      <span class="num">11</span>
      <span class="unit">台</span>
    </div>
    <div class="topNum shutdownNum">
      <span class="text">停机</span>
      <span>：</span>
      <span class="num">02</span>
      <span class="unit">台</span>
    </div>
    <div class="topNum standbyNum">
      <span class="text">待机</span>
      <span>：</span>
      <span class="num">01</span>
      <span class="unit">台</span>
    </div>
    <div class="topNum waitMaterials">
      <span class="text">待料</span>
      <span>：</span>
      <span class="num">01</span>
      <span class="unit">台</span>
    </div>
    <div class="topNum unactivatedNum">
      <span class="text">未开机</span>
      <span>：</span>
      <span class="num">01</span>
      <span class="unit">台</span>
    </div>
    <div class="centerContent">
      <div class="item" v-for="i in list">
        <div class="itemTitle">AE-MD-S10</div>
        <div class="itemImg"></div>
        <div class="itemType itemType0" v-if="i.type===0">停机</div>
        <div class="itemType itemType1" v-if="i.type===1">待机</div>
        <div class="itemType itemType2" v-if="i.type===2">正常运行</div>
        <div class="itemType itemType3" v-if="i.type===3">待料</div>
        <div class="itemTime itemTime0" v-if="i.type===0">
          <span style="font-size: 1.5vw;margin-right: 0.2vw;;font-weight: 700">6</span>
          <span>min</span>
        </div>
        <div class="itemTime itemTime1" v-if="i.type===1">
          <span style="font-size: 1.5vw;margin-right: 0.2vw;;font-weight: 700">6</span>
          <span>min</span>
        </div>
        <div class="itemTime itemTime2" v-if="i.type===2">
          <span style="font-size: 1.5vw;margin-right: 0.2vw;;font-weight: 700">6</span>
          <span>min</span>
        </div>
        <div class="itemTime itemTime3" v-if="i.type===3">
          <span style="font-size: 1.5vw;margin-right: 0.2vw;;font-weight: 700">6</span>
          <span>min</span>
        </div>
        <div class="itemText">待机时长</div>
      </div>
    </div>
  </div>
</template>

<script>

const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
  components: {},
  name: "Liner",
  data() {
    return {}
  },
  mounted() {
  },
  methods: {},
  computed: {
    list() {
      return Array(222).fill(0).map(i => {
        return {
          type: Math.floor(Math.random() * 4)
        }
      })
    }
  },
  beforeDestroy() {
  }
};
</script>
<style scoped>
.app-container {
  background-image: url("../../../assets/board/boardBg1.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.headTitle {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size: 1.5vw;
  color: #d6eaed;
  letter-spacing: 0.3vw;
}

.topNum {
  position: absolute;
  top: 11.7%;
  transform: translateY(-50%);
  font-size: 1.3vw;
  vertical-align: middle;

  .text {
    color: #51A1D0;
    display: inline-block;
    width: 6vw;
    white-space: nowrap;
  }

  .num {
    letter-spacing: 0.2vw;
  }
}

.deviceNum {
  left: 4.5%;
  color: #DCDFDF;

  .text {
    letter-spacing: 0.3vw;
  }
}

.bootRate {
  left: 18%;
  color: #DCDFDF;

  .text {
    letter-spacing: 1vw;
  }
}

.runNum {
  left: 31.5%;
  color: #DCDFDF;

  .text {
    width: 5vw;
    letter-spacing: 2vw;
  }

  .num {
    color: #01F437;
  }
}

.shutdownNum {
  left: 45%;
  color: #DCDFDF;

  .text {
    width: 5vw;
    letter-spacing: 2vw;
  }

  .num {
    color: #D8070D;
  }
}

.standbyNum {
  left: 58.5%;
  color: #DCDFDF;

  .text {
    width: 5vw;
    letter-spacing: 2vw;
  }

  .num {
    color: #E1B00D;
  }
}

.waitMaterials {
  left: 72%;
  color: #DCDFDF;

  .text {
    width: 5vw;
    letter-spacing: 2vw;
  }

  .num {
    color: #E1B00D;
  }
}

.unactivatedNum {
  left: 85.5%;
  color: #DCDFDF;

  .text {
    letter-spacing: 1vw;
  }
}

.centerContent {
  position: absolute;
  top: 17%;
  left: 3.3%;
  width: 93.4%;
  height: 78%;
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .item {
    display: inline-block;
    width: calc(25% - 1vw);
    height: 13.91vw;
    margin: 0.5vw;
    position: relative;
    background-image: url("../../../assets/board/boardItemBg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .itemTitle {
      position: absolute;
      color: #DCDFDF;
      left: 10%;
      top: 11%;
      transform: translateY(-50%);
      font-size: 1.3vw;
    }

    .itemType {
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: absolute;
      left: 78%;
      top: 40%;
      width: 8vw;
      height: 2.22vw;
      line-height: 2.22vw;
      text-align: center;
      transform: translate(-50%, -50%);
      font-size: 1.2vw;
      color: #DCDFDF;
    }

    .itemType0 {
      background-image: url("../../../assets/board/boardDeviceStatus0.png");
      letter-spacing: 0.5vw;
    }

    .itemType1 {
      background-image: url("../../../assets/board/boardDeviceStatus1.png");
      letter-spacing: 0.5vw;
    }

    .itemType2 {
      background-image: url("../../../assets/board/boardDeviceStatus2.png");
    }

    .itemType3 {
      background-image: url("../../../assets/board/boardDeviceStatus3.png");
      letter-spacing: 0.5vw;
    }

    .itemImg {
      position: absolute;
      left: 4%;
      top: 28%;
      width: 51%;
      height: 65%;
      background-image: url("../../../assets/board/boardDevice.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .itemTime {
      position: absolute;
      left: 78%;
      top: 65%;
      transform: translate(-50%, -50%);
      font-size: 1.2vw;
      color: #DCDFDF;
    }

    .itemTime0 {
      color: #FB0102;
    }

    .itemTime1 {
      color: #FC7F03;
    }

    .itemTime2 {
      color: #02FD56;
    }

    .itemTime3 {
      color: #68CBFD;
    }

    .itemText {
      position: absolute;
      left: 78%;
      top: 80%;
      transform: translate(-50%, -50%);
      font-size: 0.8vw;
      color: #DCDFDF;
    }
  }
}

</style>