zhanhui_pad/src/views/screen/components/ltop3.vue

<template>
  <div class="lt-container">
    <div class="left">
      <div class="left-content">
        <div class="speed-box">
          <div class="speed-value">250rpm</div>
        </div>
        <div class="speed-title">{{ tLang('message', '设备转速') }}</div>
      </div>
    </div>
    <div class="right">
      <div class="right-item" v-for="item of devData">
        <div class="title">{{ item['label'] }}</div>
        <div class="content" v-if="item['type'] == 'status'">
          <div class="status-box" :style="{ background: statusList[item.value]['color'] }"></div>
          <div class="status-title">{{ statusList[item.value]['label'] }}</div>
        </div>
        <div class="content" v-else>
          {{ item['value'] }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

const { proxy } = getCurrentInstance();

let devData = reactive({
  status: { 'label': proxy.tLang('home', '设备状态'), 'value': '1', type: 'status' },
  runTime: { 'label': proxy.tLang('message', '运行时长'), 'value': '00:34:22', type: '' },
  prod: { 'label': proxy.tLang('message', '总产量'), 'value': '22', type: '' },
})

let statusList = {
  '0': { 'label': proxy.tLang('message', '停机中'), 'value': '1', 'color': '#f6f4f4' },
  '1': { 'label': proxy.tLang('message', '待机中'), 'value': '1', 'color': '#fddd60' },
  '2': { 'label': proxy.tLang('message', '运行中'), 'value': '1', 'color': '#7cffb2' },
  '3': { 'label': proxy.tLang('message', '待机中'), 'value': '1', 'color': '#fddd60' },
  '4': { 'label': proxy.tLang('message', '故障中'), 'value': '1', 'color': '#ff6e76' },


}
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #cfcfcf;

}

.content {
  width: 100%;
  height: calc(100% - 20px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.lt-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  .left {
    width: 25%;
    height: 100%;

    .left-content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .speed-box {
        width: 120px;
        height: 120px;
        background: url('./../image/u65.png') no-repeat;
        background-size: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;

      }
    }
  }

  .right {
    width: 75%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;

    .right-item {
      width: 200px;
      height: 120px;
      padding: 15px;
      border-radius: 5px;
      box-sizing: border-box;
      background: #1F2937;

      .content {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;

        .status-box {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          margin-bottom: 5px;
        }

        .status-title {
          font-size: 12px;
          color: #e7e7e7;
        }

      }
    }
  }
}
</style>