uk_front/components/FootprintReportDialog.vue

<template>
  <el-dialog :visible.sync="visible" width="550px" :title="'Carbon Footprint Report'" :before-close="handleClose" :lock-scroll="false">
    <div>
      <el-form label-width="70px">
        <el-form-item label="Model">
          <el-select v-model="form.model" placeholder="Please select" style="width:100%;" clearable filterable>
            <el-option
                :label="item.accountName.replace(/\s*[\(\（][^)\）]*[\)\）]$/, '')"
              v-for="(item, idx) in carbon"
              :value="idx"
              :key="idx"
            />
          </el-select>
        </el-form-item>
        <div class="form-row">
          <el-form-item label="Quantity" style="flex:1;">
            <el-input v-model="form.quantity" type="number" :min="1" :step="1" :controls="false"
              placeholder="Please input" class="left-input-number" />
          </el-form-item>
          <el-form-item label="Transport" style="flex:1;margin-left:10px;">
            <el-select v-model="form.transport" placeholder="Please select" style="width:100%;" clearable>
              <el-option label="AU-Sea" value="AU-Sea" />
              <el-option label="AU-Air" value="AU-Air" />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <div class="carbon-report-card">
        <div class="carbon-report-main">
          <div class="carbon-report-header">
            <span>Product Carbon Footprint</span>
          </div>
          <div class="carbon-report-value">{{ comEmissionTotal }}</div>
          <div class="carbon-report-date">kgCO₂e per product unit</div>
          <div class="carbon-report-date">Accounting Period：{{ this.carbon[this.form.model]?.accountTime }}</div>
          <img src="@/assets/img/esg/bg_city.png" alt="bg" class="carbon-bg" />
          <div class="carbon-report-equal">
            <div class="equal-title">Equivalent to</div>
            <div class="equal-list">
              <div class="equal-item">
                <img src="@/assets/img/esg/tree.png" alt="tree" />
                <div>{{ multiply(comEquallist.equallist[0]?.amount, form.quantity) || 0 }} <span>tree</span></div>
                <div class="equal-desc">CO₂ uptake by 1 ammodendron tree</div>
              </div>
              <div class="equal-item">
                <img src="@/assets/img/esg/electricity.png" alt="electricity" />
                <div>{{ multiply(comEquallist.equallist[1]?.amount, form.quantity) || 0 }} <span>kWh</span></div>
                <div class="equal-desc">Household electricity consumption</div>
              </div>
              <div class="equal-item">
                <img src="@/assets/img/esg/iphone.png" alt="iphone" />
                <div>{{ multiply(comEquallist.equallist[2]?.amount, form.quantity) || 0 }} <span>day</span></div>
                <div class="equal-desc">The number of days an iPhone is used</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="text-align:right;margin-top:20px;">
        <el-button type="primary" class="report-btn"
          @click="download(comEquallist?.url)">Download</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { times as npTimes } from 'number-precision';

export default {
  props: {
    visible: { type: Boolean, default: false },
    carbon: { type: Array, default: () => [] }
  },
  data() {
    return {
      form: {
        model: '',
        quantity: 1,
        transport: ''
      }
    }
  },
  computed: {
    comEquallist() {
      return this.carbon[this.form.model]?.accountlist?.find(item => item.code === this.form.transport) || { equallist: [], emissionTotal: 0 };
    },
    comEmissionTotal() {
      return this.multiply(this.comEquallist.emissionTotal, this.form.quantity).toFixed(2) || 0;
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false);
    },
    multiply(a, b) {
      return npTimes(Number(a), b);
    },
    download(url) {
      if (!url) {
        this.$message.error('No report available for download');
        return
      }
      var urlStr = url.match('[^/]+(?!.*/)')[0]
      this.$utils.downloadBlob(url, urlStr)
    },
  },
}
</script>

<style lang="scss" scoped>
$green: #006D28;
$blue-dark: #15395A;
$white: #fff;
$gray: #666;
$radius-lg: 16px;
$shadow-green: 0 2px 8px rgba($green, 0.08);

:deep(.el-dialog__header) {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.form-row {
  display: flex;
  gap: 10px;
}

.carbon-report-card {
  background: transparent;

  .carbon-report-main {
    background: $green;
    border-radius: 10px;
    color: $white;
    padding: 18px;
    position: relative;
    overflow: hidden;
    min-height: 120px;

    .carbon-report-header {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .carbon-report-value {
      font-size: 32px;
      font-weight: bold;

      .unit {
        font-size: 18px;
        font-weight: normal;
      }
    }

    .carbon-report-date {
      font-size: 14px;
      margin-bottom: 10px;
    }
  }

  .carbon-bg {
    position: absolute;
    right: 20PX;
    top: 20PX;
    width: 232px;
    height: 126px;
    opacity: 0.7;
    pointer-events: none;
  }

  .carbon-report-equal {
    background: $white;
    color: $green;
    border-radius: 10px;
    padding: 18px;
    position: relative;
    z-index: 2;
    box-shadow: $shadow-green;

    .equal-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 8px;
      color: #000;
    }

    .equal-list {
      display: flex;
      justify-content: space-around;
      align-items: flex-start;
      margin-top: 20px;

      .equal-item {
        text-align: center;
        width: 130px;

        img {
          width: 32px;
          height: 32px;
          margin-bottom: 4px;
        }

        div {
          &:nth-child(2) {
            font-size: 14px;
            font-weight: 600;
            color: #000;
          }
        }

        .equal-desc {
          font-size: 12px;
          color: $gray;
          margin-top: 2px;
          word-break: break-word;
        }
      }
    }
  }
}

.report-btn {
  background: $blue-dark !important;
  border: none !important;
  height: 40px;
  font-size: 16px;
  font-weight: 500;
}

:deep(.el-input__inner) {
  padding-right: 0;
}
</style>