go-viee-fetch-Demo/src/packages/components/Charts/IntegratedEnergy/EnergyOverview/index.vue

<template>
  <div class="go-energy-box">
    <div class="grid-container">
      <div class="grid-item">
        <span class="item">
          <img class="icon " src="./assets/cost.svg" alt="">
        </span>
        <span class="label item">费用</span>
        <span class="value item">{{ option.dataset.cost.toFixed(2) }}</span>
        <span class="unit item">单位</span>
      </div>

      <div class="grid-item">
        <span class="item">
          <img class="icon " src="./assets/cost.svg" alt="">
        </span>
        <span class="label item">市电</span>
        <span class="value item">{{ option.dataset.mainsElectricity.toFixed(2) }}</span>
        <span class="unit item">单位</span>
      </div>
      <div class="grid-item">
        <span class="item">
          <img class="icon " src="./assets/cost.svg" alt="">
        </span>
        <span class="label item">供水</span>
        <span class="value item">{{ option.dataset.waterSupply.toFixed(2) }}</span>
        <span class="unit item">单位</span>
      </div>
      <div class="grid-item">
        <span class="item">
          <img class="icon " src="./assets/cost.svg" alt="">
        </span>
        <span class="label item">燃气</span>
        <span class="value item">{{ option.dataset.gasSupply.toFixed(2) }}</span>
        <span class="unit item">单位</span>
      </div>
    </div>
  </div>

</template>

<script lang="ts" setup>
import { PropType, toRefs, shallowReactive, watch } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { option as configOption } from './config'
const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true
  }
})
const option = shallowReactive({
  dataset: configOption.dataset
})
watch(
  () => props.chartConfig.option.dataset,
  (newData: any) => {
    option.dataset = newData
  },
  {
    immediate: true,
    deep: false
  }
)

useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
  option.dataset = newData
})
</script>


<style lang="scss" scoped>
@include go('energy-box') {
  width: 100%;
  height: 100%;

  .grid-container {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;

    .grid-item {
      background-color: #043951;
      // padding: 20px;
      padding: 10px 20px 5px 20px;
      font-size: 30px;

      display: flex;
      align-items: center;
      /* 默认垂直居中对齐 */
      gap: 0px;

      .item {
        display: flex;
        align-items: center;
        font-family: 'CustomFont';
        // background-color: beige;
      }

      .label {
        color: #07A1C8;
        font-size: 22px;
        flex-shrink: 0;
        margin-left: 20px;
        align-self: flex-start;
      }

      .value {
        color: beige;
        font-size: 40px;
        letter-spacing: 3px;
        // 是否让value挤占单位生存空间
        flex-grow: 1;
        flex-shrink: 0;
        margin-right: 10px;
        align-self: flex-end;

        background: linear-gradient(to top, #0d78bb, #ffffff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }

      .unit {
        font-size: 20px;

        /* 防止被压缩 */
        flex-shrink: 0;

        /* 垂直置底 */
        align-self: flex-end;
        margin-bottom: 5px;
      }

      .icon {
        width: 50px;
        height: 50px;
        flex-shrink: 0;
      }
    }
  }
}
</style>