g-cesium-map/public/map/components/ShorePowerUsage.vue

<template>
  <div class="shore-power-usage">
    <div class="left" style="width: 40%;">
      <div class="card digital-twin-card--deep-blue ">
        <div class="card-title">
          <div class="vertical-line"></div>
          <img src="@/assets/svgs/data.svg" class="title-icon" />
          <span class="title-text">总览</span>
        </div>
        <div class="card-content">
          <div class="overview-grid">
            <div class="overview-item">
              <div class="overview-value">{{ totalPower }}</div>
              <div class="overview-label">累计用电（千瓦时）</div>
            </div>
            <div class="overview-item">
              <div class="overview-value">{{ fuelReduction }}</div>
              <div class="overview-label">减少燃油（吨）</div>
            </div>
            <div class="overview-item">
              <div class="overview-value">{{ co2Reduction }}</div>
              <div class="overview-label">减少二氧化碳排放（千克）</div>
            </div>
            <div class="overview-item">
              <div class="overview-value">{{ pm25Reduction }}</div>
              <div class="overview-label">减少PM2.5排放（千克）</div>
            </div>
            <div class="overview-item">
              <div class="overview-value">{{ noxReduction }}</div>
              <div class="overview-label">减少氮氧化物（千克）</div>
            </div>
            <div class="overview-item">
              <div class="overview-value">{{ so2Reduction }}</div>
              <div class="overview-label">减少二氧化硫（千克）</div>
            </div>
          </div>
        </div>
      </div>

      <div class="card digital-twin-card--deep-blue">
        <div class="card-title">
          <div class="vertical-line"></div>
          <img src="@/assets/svgs/data.svg" class="title-icon" />
          <span class="title-text">减少燃油（吨）</span>
        </div>
        <div class="card-content">
          <LineChart :chart-data="fuelReductionData" title="减少燃油趋势" color="#4CAF50" />
        </div>
      </div>

      <div class="card digital-twin-card--deep-blue">
        <div class="card-title">
          <div class="vertical-line"></div>
          <img src="@/assets/svgs/data.svg" class="title-icon" />
          <span class="title-text">减少CO₂排放（千克）</span>
        </div>
        <div class="card-content">
          <LineChart :chart-data="co2ReductionData" title="减少CO₂排放趋势" color="#F44336" />
        </div>
      </div>

      <div class="card digital-twin-card--deep-blue">
        <div class="card-title">
          <div class="vertical-line"></div>
          <img src="@/assets/svgs/data.svg" class="title-icon" />
          <span class="title-text">减少PM2.5排放（千克）</span>
        </div>
        <div class="card-content">
          <LineChart :chart-data="pm25ReductionData" title="减少PM2.5排放趋势" color="#FF9800" />
        </div>
      </div>

      <div class="card digital-twin-card--deep-blue">
        <div class="card-title">
          <div class="vertical-line"></div>
          <img src="@/assets/svgs/data.svg" class="title-icon" />
          <span class="title-text">减少NOₓ排放（千克）</span>
        </div>
        <div class="card-content">
          <LineChart :chart-data="noxReductionData" title="减少NOₓ排放趋势" color="#9C27B0" />
        </div>
      </div>

      <div class="card digital-twin-card--deep-blue">
        <div class="card-title">
          <div class="vertical-line"></div>
          <img src="@/assets/svgs/data.svg" class="title-icon" />
          <span class="title-text">减少SO₂排放（千克）</span>
        </div>
        <div class="card-content">
          <LineChart :chart-data="so2ReductionData" title="减少SO₂排放趋势" color="#00BCD4" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import LineChart from './charts/LineChart.vue'

// 定义组件属性
interface ChartDataItem {
  name: string;
  value: number;
}

interface Props {
  totalPower: number;
  fuelReduction: number;
  co2Reduction: number;
  pm25Reduction: number;
  noxReduction: number;
  so2Reduction: number;
  fuelReductionData: ChartDataItem[];
  co2ReductionData: ChartDataItem[];
  pm25ReductionData: ChartDataItem[];
  noxReductionData: ChartDataItem[];
  so2ReductionData: ChartDataItem[];
}

defineProps<Props>()
</script>

<style scoped>
.shore-power-usage {
  display: flex;
  height: 100%;
  gap: 10px;
}
</style>