slibra-module-web/src/views/carbon/components/screen/DataBorad.vue

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  data: {
    type: Object,
    required: {}
  }
})

const avgEnum = {
  "-1" : "低于",
  "0"  : "持平",
  "1"  : "高于"
}

const boardList = ref([
  {
    label: '总碳排放量',
    key: 'ztTotalCo2',
    hbKey: 'ztTotalCo2Hb',
    desc: '环比上月',
    unit: 't CO₂-eq',
    value: ''
  },
  {
    label: '污水厂行业碳排放强度',
    key: 'wschytpfqd',
    hbKey: 'wschytpfqdHb',
    strong: true,
    desc: '同行业平均水平',
    unit: 'Kg CO₂-eq/m³',
    value: ''
  },
  {
    label: '替碳、碳汇',
    key: 'ttthTotalCo2',
    hbKey: 'ttthTotalCo2Hb',
    desc: '环比上月',
    unit: 't CO₂-eq',
    value: ''
  },
  {
    label: '污水 - 生化反应',
    key: 'wsclTotalCo2',
    hbKey: 'wsclTotalCo2Hb',
    desc: '环比上月',
    unit: 't CO₂-eq',
    value: ''
  },
  {
    label: '能源、药剂',
    key: 'nyyjTotalCo2',
    hbKey: 'nyyjTotalCo2Hb',
    desc: '环比上月',
    unit: 't CO₂-eq',
    value: ''
  },
  {
    label: '污泥 - 生化反应',
    key: 'wnclTotalCo2',
    hbKey: 'wnclTotalCo2Hb',
    desc: '环比上月',
    unit: 't CO₂-eq',
    value: ''
  },
]);
</script>

<template>
  <div class="data-board-view">
    <div class="board-item" v-for="item, index in boardList" :key="item.key">
      <p class="title">{{ item.label }}</p>
      <p class="statement">
        <span class="num">{{ data[item.key] }} </span>
        <span class="unit"> {{ item.unit }}</span>
      </p>
      <div class="info-wrapper">
        <p class="desc">
          <span v-if="item.strong">
            <strong class="text-[#e5773f]">{{ avgEnum[data.exceedAvgHY] }}</strong>
            <span>{{ item.desc }}</span>
          </span>
          <span v-else>{{ item.desc }}</span>
        </p>
        <p :class="['info', 'space-x-[5px]', { down: data[item.hbKey] < 0 }]" v-if="index !== 1">
          <span class="num">{{ data[item.hbKey] ?? '-'}} %</span>
          <span class="icon" v-if="data[item.hbKey]"></span>
        </p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>

@mixin bg-img ($url) {
  background: url($url) 80% 10% no-repeat,
  url("@/assets/images/carbon/bg-board-bottom.png") center bottom no-repeat,
  url("@/assets/images/carbon/bg-board-right.png") right bottom no-repeat,
  linear-gradient(180deg, #0C1E3C 0%, #132B51 100%);
}

.data-board-view {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 20px;

  .board-item {
    position: relative;
    @include flex(y, start, between);
    padding: 40px 0 10px 20px;
    border-radius: 8px;

    &:nth-child(1) {
      @include bg-img("@/assets/images/carbon/svg/icon-borad-one.svg");
      background-size: auto, 100%;
    }
    &:nth-child(2) {
      @include bg-img("@/assets/images/carbon/svg/icon-borad-two.svg");
      background-size: auto, 100%;
    }
    &:nth-child(3) {
      @include bg-img("@/assets/images/carbon/svg/icon-borad-three.svg");
      background-size: auto, 100%;
    }
    &:nth-child(4) {
      @include bg-img("@/assets/images/carbon/svg/icon-borad-four.svg");
      background-size: auto, 100%;
    }
    &:nth-child(5) {
      @include bg-img("@/assets/images/carbon/svg/icon-borad-five.svg");
      background-size: auto, 100%;
    }
    &:nth-child(6) {
      @include bg-img("@/assets/images/carbon/svg/icon-borad-six.svg");
      background-size: auto, 100%;
    }

    &::after, &::before {
      content: ' ';
      position: absolute;
      left: -2px;
      display: block;
      width: calc(100% + 4px);
      height: 18px;
    }

    &::before {
      top: 0px;
      background: url("@/assets/images/carbon/svg/icon-top-left.svg") left center no-repeat,
      url("@/assets/images/carbon/svg/icon-top-right.svg") right center no-repeat;
    }

    &::after {
      bottom: 0px;
      background: url("@/assets/images/carbon/svg/icon-bottom-left.svg") left center no-repeat,
      url("@/assets/images/carbon/svg/icon-bottom-right.svg") right center no-repeat;
    }

    .title {
      height: 40px;
      font-size: 14px;
      line-height: 20px;
      color: #fff;
    }

    &:nth-child(2) {
      .title {
        width: 80px;
      }
    }

    .statement {
      color: #FFF;
      text-shadow: 0px 0px 6.3px #C9FDF3;
      .num {
        line-height: 20px;
        font-family: 'D-DIN-PRO-700-Bold';
        font-size: 32px;
        font-weight: bold;
      }
      .unit {
        font-size: 12px;
      }
    }

    .info-wrapper {
      height: 38px;
      line-height: 16px;
      .desc {
        line-height: 22px;
        color: rgba(255, 255, 255, 0.5);
      }
    }

    .info {
      @include flex(x, center, start);
      .num {
        font-family: 'D-DIN-PRO-700-Bold';
        font-size: 18px;
        font-weight: bold;
        color: rgba(0, 255, 0, 1);
      }
      .icon {
        width: 14px;
        height: 8px;
        background: url('@/assets/images/carbon/svg/icon-up.svg') no-repeat;
      }
    }

    .down {
      .num {
        color: #e9672c;
      }
      .icon {
        background: url('@/assets/images/carbon/svg/icon-down.svg') no-repeat;
        transform: rotate(60deg);
      }
    }
  }
}
</style>