gas-injection/src/views/vent/home/configurable/components/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' | 'E' | 'F' |'New' | 'localFannew'
    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-areaNew: url('/@/assets/images/vent/homeNew/databg/1.png');
    --image-areaNew1: url('/@/assets/images/vent/homeNew/databg/2.png');
    --image-areaNew2: url('/@/assets/images/vent/homeNew/databg/3.png');
    --image-areaNew3: url('/@/assets/images/vent/homeNew/databg/8.png');
    --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
    --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-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-areaNew: url('/@/assets/images/vent/homeNew/databg/1.png');
  --image-areaNew1: url('/@/assets/images/vent/homeNew/databg/2.png');
  --image-areaNew2: url('/@/assets/images/vent/homeNew/databg/3.png');
  --image-areaNew3: url('/@/assets/images/vent/homeNew/databg/8.png');
  --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
  --image-area3: url('/@/assets/images/company/area3.png');
  --image-value-bg: url('/@/assets/images/vent/value-bg.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-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-board-bg-J: url('/@/assets/images/home-container/configurable/minehome/board-bg-j.png');
  --image-board-bg-k1: url('/@/assets/images/home-container/configurable/minehome/board-bg-k1.png');
  --image-board-bg-k2: url('/@/assets/images/home-container/configurable/minehome/board-bg-k2.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: 50px;
  line-height: 25px;
  width: 130px;
  padding: 0 5px 0 5px;
  text-align: center;
  background-size: 100% 100%;
  position: relative;
}

.mini-board_New {
  width: 120px;
  height: 60px;
  background-image: var(--image-areaNew);
  background-size: 100% 100%;
}
.mini-board_New1 {
  width: 118px;
  height: 60px;
  background-image: var(--image-areaNew1);
  background-size: 100% 100%;
}
.mini-board_New2 {
  width: 93px;
  height: 60px;
  margin: 0px;
  background-image: var(--image-areaNew2);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.mini-board_New3 {
  margin-bottom: 0;
  width: 170px;
  height: 50px;
}
.mini-board_New3_jin {
  background-image: var(--image-areaNew3);
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.mini-board_New3_hui {
  background-image: var(--image-areaNew4);
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.mini-board_A {
  width: 120px;
  height: 60px;
  background-image: var(--image-area3);
  background-size: 100% 100%;
}
.mini-board_B {
  width: 131px;
  height: 64px;
  background-image: var(--image-value-bg);
  background-size: auto 40px;
  background-position: center bottom;
  background-repeat: no-repeat;
}
.mini-board_C {
  width: 121px;
  height: 69px;
  background-image: var(--image-vent-param-bg);
}
.mini-board_D {
  // width: 105px;
  height: 58px;
  background-image: var(--image-mini-board-1);
  background-position: center bottom;
  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: 140px;
  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 {
  width: 110px;
  height: 58px;
  background-image: var(--image-board-bg-J);
  background-size: 100% 100%;
}
.mini-board_K {
  width: 170px;
  height: 70px;
  background-size: 100% 100%;
}
/* 第一个mini-board_K使用k1背景 */
.mini-board_K:first-of-type {
  background-image: var(--image-board-bg-k1);
}

/* 第二个mini-board_K使用k2背景 */
.mini-board_K:first-of-type + .mini-board_K { 
  background-image: var(--image-board-bg-k2);
}

.mini-board__value_New {
  color: @vent-gas-primary-text;
  font-size: 15px;
  float: left;
  margin: 0 0 0 13px;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
}
.mini-board__lable_New {
  line-height: 24px;
  height: 24px;
}
.mini-board__value_New1 {
  color: @vent-gas-primary-text;
  font-size: 16px;
  float: left;
  margin: 0 0 0 45%;
  height: 30px;
  line-height: 30px;
}
.mini-board__lable_New1 {
  line-height: 24px;
  height: 24px;
}
.mini-board__value_New2 {
  color: @vent-gas-primary-text;
  font-size: 15px;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
}
.mini-board__lable_New2 {
  line-height: 24px;
  height: 24px;
}
.mini-board__value_New3 {
  color: #afe6f2;
  font-size: 15px;
  font-weight: bold;
  margin-left: 10px;
}
.mini-board__lable_New3 {
  color: #afe6f2;
  height: 30px;
  font-size: 10px;
}
.mini-board__value_A {
  color: @vent-gas-primary-text;
  font-size: 20px;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
}

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

.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: 20px;
  font-weight: bold;
  height: 40px;
  line-height: 40px;
}
.mini-board__label_D {
  line-height: 17px;
  height: 17px;
}
.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: 50px;
}

.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__value_J {
  color: #b3ebf7;
  font-size: 16px;
  font-weight: bold;
  height: 25px;
  line-height: 25px;
}
.mini-board__label_J {
  line-height: 20px;
  height: 20px;
}

.mini-board__value_K {
  color: #fff;
  font-family: 'douyuFont';
  font-size: 16px;
  // font-weight: bold;
  height: 55px;
  line-height: 55px;
  padding-left: 60px;
}
.mini-board__label_K {
  line-height: 21px;
  height: 21px;
  text-align: end;
  font-size: 13px;
}

.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_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>