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-green} {
    .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-areaR: url('/@/assets/images/themify/deepblue/company/areaR.png');
      // --image-areaT: url('/@/assets/images/themify/deepblue/company/areaT.png');
      // --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
      // --image-value-S: url('/@/assets/images/themify/deepblue/vent/value-S.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/green/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');
      --image-hycd: url(/@/assets/images/themify/green/home-container/configurable/dusthome/hycd.png);
      --image-dyfl: url(/@/assets/images/themify/green/home-container/configurable/dusthome/dyfl.png);
      --image-jdjl: url(/@/assets/images/themify/green/home-container/configurable/dusthome/jdjl.png);
    }
    // type E 专用样式调整
    .mini-board_E .mini-board__label {
      height: 100px;
      white-space: normal;
    }
    .mini-board_E:nth-child(1) {
      background-image: var(--image-hycd);
      .mini-board__label_E {
        background-image: none;
      }
    }
    .mini-board_E:nth-child(2) {
      background-image: var(--image-dyfl);
      .mini-board__label_E {
        background-image: none;
      }
    }
    .mini-board_E:nth-child(3) {
      background-image: var(--image-jdjl);
      .mini-board__label_E {
        background-image: none;
      }
    }
  }
  @{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-areaR: url('/@/assets/images/themify/deepblue/company/areaR.png');
      --image-areaT: url('/@/assets/images/themify/deepblue/company/areaT.png');
      --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
      --image-value-S: url('/@/assets/images/themify/deepblue/vent/value-S.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-areaT: url('/@/assets/images/company/areaT.png');
    --image-areaR: url('/@/assets/images/company/areaR.png');
    --image-value-bg: url('/@/assets/images/vent/value-bg.png');
    --image-value-S: url('/@/assets/images/vent/value-S.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-board-bg-l1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-l1.png');
    --image-board-bg-l2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-l2.png');
    --image-board-bg-m1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-m1.png');
    --image-board-bg-m2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-m2.png');
    --image-board-bg-nl1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n1.png');
    --image-board-bg-nr1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n2.png');
    --image-board-bg-nl2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n3.png');
    --image-board-bg-nr2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n4.png');
    --image-board-bg-o: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-o.png');
    --image-board_bg_7: url('/@/assets/images/home-container/configurable/board_bg_7.png');
    --image-board_bg_8: url('/@/assets/images/home-container/configurable/board_bg_8.png');
    --image-board_bg_9: url('/@/assets/images/home-container/configurable/board_bg_9.png');
    --image-board_bg_10: url('/@/assets/images/home-container/configurable/board_bg_10.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__label {
    white-space: nowrap;
  }
  .mini-board__value {
    white-space: nowrap;
  }

  .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_R {
    width: 120px;
    height: 90px;
    background-image: var(--image-areaR);
    background-size: 100% 100%;
    position: relative;
    .mini-board__value_R {
      position: absolute;
      left: 30%;
      top: 30%;
      font-family: 'douyuFont';
      color: @vent-gas-primary-text;
    }
    .mini-board__label_R {
      position: absolute;
      right: 0;
      bottom: 20px;
      font-size: 15px;
    }
  }
  .mini-board_S {
    width: 131px;
    height: 64px;
    background-image: var(--image-value-S);
    background-size: auto 40px;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
  .mini-board_T {
    width: 120px;
    height: 80px;
    background-image: var(--image-areaT);
    background-size: 100% 100%;
  }
  .mini-board__label_T {
    margin-top: 15px;
  }
  .mini-board__value_T {
    font-family: 'douyuFont';
    color: @vent-gas-primary-text;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
  }

  .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_L {
    width: 120px;
    height: 100px;
    background-size: 100% 100%;
  }
  .mini-board_L:nth-child(odd) {
    background-image: var(--image-board-bg-l1);
  }
  .mini-board_L:nth-child(even) {
    background-image: var(--image-board-bg-l2);
  }

  .mini-board_M {
    width: 180px;
    height: 60px;
    background-image: var(--image-board-bg-m1);
    background-size: 100% 100%;
    margin: 5px 0 15px 0;
  }
  .mini-board_M:nth-child(2),
  .mini-board_M:nth-child(3),
  .mini-board_M:nth-child(6),
  .mini-board_M:nth-child(7) {
    background-image: var(--image-board-bg-m2);
    .mini-board__value_M {
      color: #27cab7;
    }
  }

  .mini-board_N {
    width: 200px;
    height: 68px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px 0 20px;
    margin-top: -15px;
    background-image: var(--image-board-bg-nl1);
    background-size: 100% 100%;
  }
  .mini-board_N:nth-child(2) {
    background-image: var(--image-board-bg-nr1);
  }
  .mini-board_N:nth-child(3) {
    background-image: var(--image-board-bg-nl2);
  }
  .mini-board_N:nth-child(4) {
    background-image: var(--image-board-bg-nr2);
  }
  .mini-board_N:nth-child(5) {
    background-image: var(--image-board-bg-nl1);
  }
  .mini-board_N:nth-child(6) {
    background-image: var(--image-board-bg-nr1);
  }

  .mini-board_O {
    width: 110px;
    height: 50px;
    background-image: var(--image-board-bg-o);
    background-size: 100% 100%;
  }

  .mini-board_P {
    width: 97px;
    height: 170px;
    padding-top: 105px;
    background-image: var(--image-board_bg_7), var(--image-board_bg_10);
    background-size:
      97px 105px,
      100% 40px;
    background-repeat: no-repeat;
    background-position:
      center top,
      center bottom;
  }
  .mini-board_P:nth-of-type(2) {
    width: 97px;
    height: 170px;
    padding-top: 105px;
    background-image: var(--image-board_bg_8), var(--image-board_bg_9);
    background-size:
      97px 105px,
      100% 40px;
    background-repeat: no-repeat;
    background-position:
      center top,
      center bottom;
  }

  .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: 19px;
    font-weight: bold;
  }
  .mini-board__label_E {
    line-height: 20px;
    height: 90px;
    padding-top: 30%;
    background-repeat: no-repeat;
    background-position: center top;
    white-space: normal;
  }

  .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__label_L {
    line-height: 21px;
    height: 21px;
    text-align: center;
    font-size: 14px;
    margin-top: 30px;
  }
  .mini-board__value_L {
    font-family: 'douyuFont';
    color: @vent-gas-primary-text;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
  }

  .mini-board__label_M {
    line-height: 21px;
    height: 21px;
    text-align: center;
    font-size: 14px;
  }
  .mini-board__value_M {
    font-family: 'douyuFont';
    color: @vent-gas-primary-text;
    font-size: 12px;
    height: 23px;
    margin-top: 5px;
  }

  .mini-board__value_O {
    font-family: 'douyuFont';
    font-size: 11px;
    color: @vent-gas-primary-text;
  }

  .mini-board__value_P {
    font-family: 'douyuFont';
    font-size: 20px;
    margin-top: 10px;
  }

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