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)} ${to ? 'cursor-pointer' : ''}`"
    @click="redirectTo(to)"
  >
    <!-- Type H 的特殊布局: 左边 SVG, 右边 Label/Value -->
    <template v-if="type === 'H'">
      <div class="mini-board__icon-h">
        <div class="icon-item"></div>
      </div>
      <div class="mini-board__content-h">
        <slot name="label">
          <div class="mini-board__label mini-board__label_H">
            {{ label }}
          </div>
        </slot>
        <slot name="value">
          <div class="mini-board__value mini-board__value_H">
            {{ value }}
          </div>
        </slot>
      </div>
    </template>
    <template v-else-if="layout === 'val-top'">
      <slot name="value">
        <div class="mini-board__value" :class="`mini-board__value_${type}`" :title="value">
          {{ value }}
        </div>
      </slot>
      <slot name="label">
        <div class="mini-board__label" :class="`mini-board__label_${type}`">
          {{ label }}
        </div>
      </slot>
    </template>
    <template v-else-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}`" :title="value">
          {{ value }}
        </div>
      </slot>
    </template>
  </div>
</template>
<script lang="ts" setup>
  import { redirectTo } from '../hooks/helper';

  withDefaults(
    defineProps<{
      label: string;
      value?: string;
      // 告示牌布局，类型为：'val-top' | 'label-top'
      layout: string;
      // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D'
      type?: string;
      to?: 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';
  @font-face {
    font-family: 'DDIN-Bold';
    src: url('/@/assets/font//D-DIN-Bold.otf');
  }
  @font-face {
    font-family: 'DDIN';
    src: url('/@/assets/font//D-DIN.otf');
  }

  .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');
    --image-board-bg-E: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-E.png');
    --image-board-bg-G: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-G.png');
    --image-board-bg-H: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-H.png');
    --image-board-bg-H-CH4: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-H-CH4.svg');
    --image-board-bg-H-CO: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-H-CO.svg');
    --image-board-bg-H-CO2: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-H-CO2.svg');
    --image-board-bg-H-O2: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-H-O2.svg');
    --image-board-bg-H-C2H4: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-H-C2H4.svg');
    --image-board-bg-H-C2H2: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-H-C2H2.svg');
    --image-board-bg-H-pre: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-H-pre.svg');
    --image-board-bg-H-tem: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-H-tem.svg');
    --image-board-bg-content-H: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-content-H.png');
    --image-board-bg-I-label: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-I-label.png');
    --image-board-bg-I-value: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-I-value.png');

    height: 50px;
    line-height: 25px;
    width: 130px;
    padding: 0 5px 0 5px;
    text-align: center;
    background-size: 100% 100%;
    position: relative;
    pointer-events: all;
  }

  .mini-board__label {
    white-space: nowrap;
  }
  .mini-board__value {
    white-space: nowrap;
  }
  .mini-board_A {
    width: 190px;
    height: 43px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding: 0 5px 0 10px;
    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: 137x;
    font-family: 'Source Han Sans SC';
    font-style: normal;
    font-weight: 700;
    padding-bottom: 5px;
  }
  .mini-board__value_A {
    width: 55px;
    color: #000000;
    font-size: 26px;
    padding-bottom: 10px;
    font-family: 'DDIN-Bold';
  }
  .mini-board_B {
    width: 98px;
    height: 110px;
    background-image: var(--image-board-bg-B);
    background-size: 100% 100%;
    padding-top: 38px;
  }

  .mini-board__label_B {
    color: #000000;
    font-size: 14px;
    font-family: 'Source Han Sans SC';
    font-weight: 700;
  }
  .mini-board__value_B {
    color: #000000;
    font-size: 26px;
    font-family: 'DDIN-Bold';
    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: #0052cc;
  }

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

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

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

  .mini-board__label_C {
    color: #000000;
    font-size: 14px;
    font-family: 'Source Han Sans SC';
    font-weight: 700;
  }
  .mini-board__value_C {
    color: #000000;
    font-size: 26px;
    font-family: 'DDIN-Bold';
    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: #0052cc;
  }

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

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

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

  .mini-board__label_D {
    color: #000000;
    font-size: 14px;
    font-weight: 800;
  }
  .mini-board__value_D {
    color: #2b6ff0;
    font-size: 22px;
    font-family: 'DDIN-Bold';
    padding-bottom: 3px;
  }

  .mini-board_E {
    width: 310px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 18px 0 20px;
    color: #676869;
    background-image: var(--image-board-bg-E);
    background-size: 100% 100%;
  }
  .mini-board__label_E {
    font-size: 16px;
  }
  .mini-board__value_E {
    // width: 55px;
    font-size: 20px;
  }
  // 矿端首页特定版本F
  .mini-board_F {
    width: 210px;
    height: 43px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding: 0 12px 0 20px;
    background-image: var(--image-board-bg-A-1);
    background-size: 100% 100%;
  }
  .mini-board_F:nth-child(2) {
    background-image: var(--image-board-bg-A-2);
  }
  .mini-board_F:nth-child(3) {
    background-image: var(--image-board-bg-A-3);
  }
  .mini-board_F:nth-child(4) {
    background-image: var(--image-board-bg-A-4);
  }
  .mini-board_F:nth-child(5) {
    background-image: var(--image-board-bg-A-5);
  }
  .mini-board_F:last-child {
    margin: 0 auto 0 5px;
  }
  .mini-board__label_F {
    color: #000000;
    font-size: 137x;
    font-family: 'Source Han Sans SC';
    font-style: normal;
    font-weight: 700;
    padding-bottom: 5px;
  }
  .mini-board__value_F {
    width: 55px;
    color: #000000;
    font-size: 26px;
    padding-bottom: 10px;
    font-family: 'DDIN-Bold';
  }

  .mini-board_G {
    width: 95px;
    height: 67px;
    background-image: var(--image-board-bg-G);
    background-size: 100% 100%;
    padding-top: 4px;
  }

  .mini-board__label_G {
    color: #000000;
    font-size: 14px;
    font-weight: 800;
  }
  .mini-board__value_G {
    color: #2b6ff0;
    font-size: 22px;
    font-family: 'DDIN-Bold';
    padding-bottom: 3px;
  }

  .mini-board_H {
    width: 190px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
  }

  .mini-board__icon-h {
    width: 60px;
    height: 60px;
    display: flex;
    // align-items: center;
    justify-content: center;
    background-image: var(--image-board-bg-H);
    background-size: 100% 100%;
    flex-shrink: 0;

    .icon-item {
      width: 25px;
      height: 25px;
      background-image: var(--image-board-bg-H-CH4);
      background-size: 100% 100%;
      margin-top: 7px;
    }
  }
  .mini-board_H:nth-child(1) .mini-board__icon-h .icon-item {
    background-image: var(--image-board-bg-H-CH4);
  }
  .mini-board_H:nth-child(2) .mini-board__icon-h .icon-item {
    width: 21px;
    background-image: var(--image-board-bg-H-CO);
  }
  .mini-board_H:nth-child(3) .mini-board__icon-h .icon-item {
    background-image: var(--image-board-bg-H-CO2);
  }
  .mini-board_H:nth-child(4) .mini-board__icon-h .icon-item {
    width: 20px;
    background-image: var(--image-board-bg-H-O2);
  }
  .mini-board_H:nth-child(5) .mini-board__icon-h .icon-item {
    width: 28px;
    background-image: var(--image-board-bg-H-C2H4);
  }
  .mini-board_H:nth-child(6) .mini-board__icon-h .icon-item {
    width: 28px;
    background-image: var(--image-board-bg-H-C2H2);
  }
  .mini-board_H:nth-child(7) .mini-board__icon-h .icon-item {
    width: 20px;
    background-image: var(--image-board-bg-H-pre);
  }
  .mini-board_H:nth-child(8) .mini-board__icon-h .icon-item {
    width: 20px;
    background-image: var(--image-board-bg-H-tem);
  }

  .mini-board__content-h {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    padding-left: 10px;
    overflow: hidden;
    background-image: var(--image-board-bg-content-H);
    background-size: 100% 100%;
  }

  .mini-board__label_H {
    color: #000;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-bottom: 6px;
    margin-top: 5px;
  }

  .mini-board__value_H {
    color: #0070ff;
    font-size: 20px;
    font-family: 'DDIN-Bold';
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-bottom: 5px;
  }

  .mini-board_I {
    width: 170px;
    height: auto;
    margin-top: 10px;
  }

  .mini-board__label_I {
    width: 100%;
    height: 53px;
    color: #000000;
    font-size: 14px;
    font-weight: 800;
    background-image: var(--image-board-bg-I-label);
    background-size: 100% 100%;
    padding-top: 23px;
  }
  .mini-board__value_I {
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #2b6ff0;
    font-size: 16px;
    font-weight: 500;
    font-family: 'DDIN-Bold';
    padding: 0 13px;
    background-image: var(--image-board-bg-I-value);
    background-size: 100% 100%;
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis; 
    margin-bottom: -4px;
  }
</style>