mky-vent-base/src/views/vent/home/configurable/components/detail/MiniBoard-bule.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="label">
        <div class="mini-board__label" :class="`mini-board__label_${type}`">
          {{ dw ? `${label}${dw}` : label }}
        </div>
      </slot>
      <slot name="value">
        <div class="mini-board__value" :class="`mini-board__value_${type}`">
          {{ value }}
        </div>
      </slot>
    </template>
    <template v-if="layout === 'label-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>
  </div>
</template>
<script lang="ts" setup>
withDefaults(
  defineProps<{
    label: string;
    value?: string;
    dw?: string;
    // 告示牌布局，类型为：'val-top' | 'label-top'
    layout: string;
    // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D' | 'E' | 'F'
    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';
@import '/@/design/theme.less';

@{theme-deepblue} {
  .mini-board {
    --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
    // --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
    --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
    //   --image-mini-board-1: url('/@/assets/images/themify/deepblue/vent/home/mini-board-1.png');
    --image-mini-board-1: url('/@/assets/images/themify/deepblue/vent/home/mini-board-1.png');
    --image-board_bg_1: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_1.png');
    --image-miehuo: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/miehuo.png');
    --image-value-bg-2: url('/@/assets/images/themify/deepblue/vent/value-bg-2.png');
    --image-board_bg_3: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_3.png');
    --image-board_bg_2: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_2.png');
    --image-board_bg_5: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_5.png');
    --image-board_bg_4: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_4.png');
  }
}

.mini-board {
  --image-area3: url('/@/assets/images/company/area3.png');
  // --image-value-bg: url('/@/assets/images/vent/value-bg.png');
  --image-value-bg: url('/@/assets/images/home-green/green-tag.png');
  --image-vent-param-bg: url('/@/assets/images/vent/vent-param-bg.png');
  // --image-mini-board-1: url('/@/assets/images/vent/home/mini-board-1.png');
  --image-mini-board-1: url('/@/assets/images/home-green/green-tag.png');
  --image-board_bg_1: url('/@/assets/images/home-container/configurable/board_bg_1.png');
  --image-miehuo: url('/@/assets/images/home-container/configurable/firehome/miehuo.png');
  --image-value-bg-2: url('/@/assets/images/vent/value-bg-2.png');
  --image-board_bg_3: url('/@/assets/images/home-container/configurable/board_bg_3.png');
  --image-board_bg_2: url('/@/assets/images/home-container/configurable/board_bg_2.png');
  --image-board_bg_5: url('/@/assets/images/home-container/configurable/board_bg_5.png');
  --image-board_bg_4: url('/@/assets/images/home-container/configurable/board_bg_4.png');
  --image-board_bg_6: url('/@/assets/images/home-container/configurable/board_bg_6.png');

  --image-hycd: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);
  --image-dyfl: url(/@/assets/images/home-container/configurable/dusthome/dyfl.png);
  --image-jdjl: url(/@/assets/images/home-container/configurable/dusthome/jdjl.png);
  height: 52px;
  line-height: 25px;
  width: 110px;
  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: 120px;
  height: 60px;
  background-image: var(--image-area3);
  background-size: 100% 100%;
}

.mini-board_B {
  width: 115px;
  height: 50px;
  background-image: var(--image-value-bg);
  background-size: auto 40px;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.mini-board_C {
  width: 121px;
  height: 69px;
  background-image: var(--image-vent-param-bg);
}

.mini-board_D {
  // width: 105px;
  height: 50px;
  background-image: var(--image-mini-board-1);
  background-position: center bottom;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.mini-board_E {
  width: 30%;
  height: 180px;
  padding: 20px 5px;
  background-image: var(--image-board_bg_1);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.mini-board_F {
  width: 125px;
  height: 70px;
  background-image: var(--image-miehuo);
  background-size: 100% 80%;
  background-position: center bottom;
  background-repeat: no-repeat;
}

.mini-board_G {
  width: 98px;
  height: 70px;
  background-image: var(--image-value-bg-2);
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
}

.mini-board_H {
  width: 174px;
  height: 104px;
  background-image: var(--image-board_bg_3);
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  padding: 45px 0 0 0;
}

.mini-board_I {
  width: 139px;
  height: 67px;
  background-image: var(--image-board_bg_6);
  background-size: 100% 100%;
}

.mini-board_J {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 121px;
  height: 100%;
}

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

  &:nth-child(1) {
    .mini-board__value_K {
      width: 69px;
      height: 76px;
      background: url('@/assets/images/home-green/800.png') no-repeat;
      background-size: 100% 100%;
    }
  }

  &:nth-child(2) {
    .mini-board__value_K {
      height: 76px;
      width: 69px;
      background: url('@/assets/images/home-green/1000.png') no-repeat;
      background-size: 100% 100%;
    }
  }
}

.mini-board__value_A {
  color: @vent-gas-primary-text;
  font-size: 16px;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
}

.mini-board__value_B {
  // color: @vent-gas-primary-text;
  color: #3ecca7;
  font-size: 12px;
  font-family: 'douyuFont';
  height: 28px;
  line-height: 28px;
}

.mini-board__label_B {
  line-height: 16px;
  height: 16px;
  font-size: 12px;
}

.mini-board__value_C {
  color: @vent-gas-primary-text;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  font-weight: bold;
}

.mini-board__value_D {
  font-size: 12px;
  height: 28px;
  line-height: 32px;
  color: #3ecca7;
  font-family: 'douyuFont';
}

.mini-board__label_D {
  line-height: 18px;
  height: 18px;
  font-size: 12px;
}

.mini-board__value_E {
  font-size: 20px;
  font-weight: bold;
}

.mini-board__label_E {
  line-height: 20px;
  height: 90px;
  padding-top: 30%;
  background-repeat: no-repeat;
  background-position: center top;
}

.mini-board__value_F {
  font-size: 20px;
  font-weight: bold;
  color: @vent-gas-primary-text;
}

.mini-board__label_F {
  line-height: 34px;
}

.mini-board__value_G {
  color: @vent-gas-primary-text;
  font-size: 20px;
  font-weight: bold;
  height: 42px;
  line-height: 42px;
}

.mini-board__label_G {
  line-height: 20px;
  height: 20px;
}

.mini-board_E:nth-child(1) {
  .mini-board__label_E {
    background-image: var(--image-hycd);
  }
}

.mini-board_E:nth-child(2) {
  .mini-board__label_E {
    background-image: var(--image-dyfl);
  }
}

.mini-board_E:nth-child(3) {
  .mini-board__label_E {
    background-image: var(--image-jdjl);
  }
}

.mini-board__label_J {
  width: 100%;
  padding-top: 10px;
}

.mini-board__value_J {
  position: relative;
  width: 102px;
  height: 45px;
  font-family: 'douyuFont';
  font-size: 12px;
  color: #3afde7;
  background: url('@/assets/images/home-green/100.png') no-repeat;
  background-size: 100% 100%;
}

.mini-board__label_K {
  z-index: 999;
}

.mini-board_H_low_risk {
  background-image: var(--image-board_bg_3);
}

.mini-board_H_risk {
  background-image: var(--image-board_bg_2);
}

.mini-board_H_high_risk {
  background-image: var(--image-board_bg_5);
}

.mini-board_H_warning {
  background-image: var(--image-board_bg_4);
}
</style>