goaf-monitoring-system/src/components/Configurable/detail/MiniBoard.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="mini-board" :class="`mini-board_${type} mini-board_${type}_${getValueDecoClass(value)}`">
    <template v-if="layout === 'val-top'">
      <slot name="value">
        <div class="mini-board__value" :class="`mini-board__value_${type}`">
          {{ value }}
        </div>
      </slot>
      <slot name="label">
        <div class="mini-board__label" :class="`mini-board__label_${type}`">
          {{ label }}
        </div>
      </slot>
    </template>
    <template v-if="layout === 'label-top'">
      <slot name="label">
        <div class="mini-board__label" :class="`mini-board__label_${type}`">
          {{ label }}
        </div>
      </slot>
      <slot name="value">
        <div class="mini-board__value" :class="`mini-board__value_${type}`">
          {{ value }}
        </div>
      </slot>
    </template>
    <template v-if="layout === 'new-top'">
      <slot name="label">
        <div class="mini-board__label" :class="`mini-board__label_${type}`">{{ label }}</div>
      </slot>
      <slot name="value">
        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
      </slot>
    </template>
    <template v-if="layout === 'new1-top'">
      <slot name="label">
        <div class="mini-board__label" :class="`mini-board__label_${type}`">{{ label }}</div>
      </slot>
      <slot name="value">
        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
      </slot>
    </template>
    <template v-if="layout === 'new2-top'">
      <slot name="value">
        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
      </slot>
      <slot name="label">
        <div class="mini-board__label" :class="`mini-board__label_${type}`">{{ label }}</div>
      </slot>
    </template>
    <template v-if="layout === 'new3-top'">
      <div v-if="label === '进风(m³/min)'" class="mini-board_New3_jin">
        <div class="mini-board__label" style="color: #afe6f2" :class="`mini-board__label_${type}`">{{ label }}</div>
        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
      </div>
      <div v-if="label === '回风(m³/min)'" class="mini-board_New3_hui">
        <div class="mini-board__label" style="color: #afe6f2" :class="`mini-board__label_${type}`">{{ label }}</div>
        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
      </div>
      <!-- <slot name="value">
        <div class="mini-board__label" :class="`mini-board__label_${type}`">{{ label }}</div>
      </slot> -->
      <!-- <slot name="lable">
        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
      </slot> -->
    </template>
  </div>
</template>
<script lang="ts" setup>
  withDefaults(
    defineProps<{
      label: string;
      value?: string;
      // 告示牌布局，类型为：'val-top' | 'label-top'
      layout: string;
      // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D' 
      type?: string;
    }>(),
    {
      value: '/',
      type: 'A',
      layout: 'val-top',
    }
  );

  // 获取某些 value 对应的特殊的 装饰用的类名
  function getValueDecoClass(value) {
    switch (value) {
      case '低风险':
        return 'low_risk';
      case '一般风险':
        return 'risk';
      case '较大风险':
        return 'high_risk';
      case '报警':
        return 'warning';
      default:
        return '';
    }
  }

  defineEmits(['click']);
</script>
<style lang="less" scoped>
  @import '/@/design/theme.less';

  .mini-board {
    --image-board-bg-A-1: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-A-1.png');
    --image-board-bg-A-2: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-A-2.png');
    --image-board-bg-A-3: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-A-3.png');
    --image-board-bg-A-4: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-A-4.png');
    --image-board-bg-A-5: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-A-5.png');
    --image-board-bg-B: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-B.png');
    --image-board-bg-D: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-D.png');
    height: 50px;
    line-height: 25px;
    width: 130px;
    padding: 0 5px 0 5px;
    text-align: center;
    background-size: 100% 100%;
    position: relative;
  }

  .mini-board__label {
    white-space: nowrap;
  }
  .mini-board__value {
    white-space: nowrap;
  }
  .mini-board_A {
    width: 220px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px 0 20px;
    background-image: var(--image-board-bg-A-1);
    background-size: 100% 100%;
  }
  .mini-board_A:nth-child(2) {
    background-image: var(--image-board-bg-A-2);
  }
  .mini-board_A:nth-child(3) {
    background-image: var(--image-board-bg-A-3);
  }
  .mini-board_A:nth-child(4) {
    background-image: var(--image-board-bg-A-4);
  }
  .mini-board_A:nth-child(5) {
    background-image: var(--image-board-bg-A-5);
  }
  .mini-board_A:nth-child(6) {
    background-image: var(--image-board-bg-A-1);
  }
  .mini-board__label_A {
    color: #000000;
    font-size: 13px;
    font-family: 'Microsoft YaHei';
    font-weight: bold;
    padding-bottom: 6px;
  }
  .mini-board__value_A {
    width: 55px;
    color: #000000;
    font-size: 25px;
    padding-bottom: 13px;
    font-family: 'Microsoft YaHei';
  }
  .mini-board_B {
    width: 100px;
    height: 115px;
    background-image: var(--image-board-bg-B);
    background-size: 100% 100%;
    padding-top: 42px;
  }

  .mini-board__label_B {
    color: #000000;
    font-size: 14px;
    font-family: 'Microsoft YaHei';
  }
  .mini-board__value_B {
    color: #000000;
    font-size: 26px;
    font-weight: bold;
    font-family: 'Microsoft YaHei';
    padding-bottom: 17px;
  }
  /* 1. 第一个容器：label和value为蓝色 */
  .mini-board_B:nth-child(1) .mini-board__label_B,
  .mini-board_B:nth-child(1) .mini-board__value_B {
    color: #1890ff;
  }

  /* 2. 第二个容器：label和value为黄色 */
  .mini-board_B:nth-child(2) .mini-board__label_B,
  .mini-board_B:nth-child(2) .mini-board__value_B {
    color: #36a64d;
  }

  /* 3. 第三个容器：label和value为橙色 */
  .mini-board_B:nth-child(3) .mini-board__label_B,
  .mini-board_B:nth-child(3) .mini-board__value_B {
    color: #a97523;
  }

  /* 4. 第四个容器：label和value为红色 */
  .mini-board_B:nth-child(4) .mini-board__label_B,
  .mini-board_B:nth-child(4) .mini-board__value_B {
    color: #d6666c;
  }
  .mini-board_C {
    width: 100px;
    height: 115px;
    background-image: var(--image-board-bg-B);
    background-size: 100% 100%;
    padding-top: 42px;
  }

  .mini-board__label_C {
    color: #000000;
    font-size: 14px;
    font-family: 'Microsoft YaHei';
  }
  .mini-board__value_C {
    color: #000000;
    font-size: 26px;
    font-weight: bold;
    font-family: 'Microsoft YaHei';
    padding-bottom: 17px;
  }
  /* 1. 第一个容器：label和value为蓝色 */
  .mini-board_C:nth-child(1) .mini-board__label_C,
  .mini-board_C:nth-child(1) .mini-board__value_C {
    color: #1890ff;
  }

  /* 2. 第二个容器：label和value为黄色 */
  .mini-board_C:nth-child(2) .mini-board__label_C,
  .mini-board_C:nth-child(2) .mini-board__value_C {
    color: #ffc107;
  }

  /* 3. 第三个容器：label和value为橙色 */
  .mini-board_C:nth-child(3) .mini-board__label_C,
  .mini-board_C:nth-child(3) .mini-board__value_C {
    color: #ff7a45;
  }

  /* 4. 第四个容器：label和value为红色 */
  .mini-board_C:nth-child(4) .mini-board__label_C,
  .mini-board_C:nth-child(4) .mini-board__value_C {
    color: #ff4d4f;
  }
  .mini-board_D {
    width: 96px;
    height: 81px;
    background-image: var(--image-board-bg-D);
    background-size: 100% 100%;
    padding-top: 12px;
  }

  .mini-board__label_D {
    color: #000000;
    font-size: 14px;
    font-family: 'Microsoft YaHei';
  }
  .mini-board__value_D {
    color: #2b6ff0;
    font-size: 22px;
    font-family: 'Microsoft YaHei';
    padding-bottom: 8px;
  }

</style>