bxztApp/packages/screen/src/views/cockpit/components/YearStatistics.vue

<template>
  <div class="year-statistics">
    <div class="panel-header">
      <span class="title">往年统计</span>
    </div>

    <!-- 图表标题和图例 -->
    <div class="chart-header">
      <span class="y-axis-label">数量</span>
      <span class="chart-title">冰雪事件对比趋势图</span>
      <div class="legend">
        <div class="legend-item">
          <div class="legend-color blue"></div>
          <span>限速通行</span>
        </div>
        <div class="legend-item">
          <div class="legend-color cyan"></div>
          <span>封闭交通</span>
        </div>
      </div>
    </div>

    <!-- 图表区域 (这里需要集成图表库如ECharts) -->
    <div class="chart-container">
      <div class="y-axis">
        <span v-for="value in yAxisValues" :key="value">{{ value }}</span>
      </div>
      <div class="chart-area">
        <img src="../assets/img/statistics-chart-image.png" alt="chart" class="chart-image" />
      </div>
    </div>

    <!-- X轴标签 -->
    <div class="x-axis">
      <span v-for="year in xAxisYears" :key="year">{{ year }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const yAxisValues = ref([6000, 5000, 4000, 3000, 2000, 1000, 0])
const xAxisYears = ref([
  '2020～2021',
  '2021～2022',
  '2022～2023',
  '2023～2024',
  '2024～2025'
])
</script>

<style scoped lang="scss">
@import '@/styles/mixins.scss';

.year-statistics {
  background: url(../assets/img/statistics-panel-bg.png) no-repeat;
  background-size: 100% 100%;
  padding: vw(20) vw(30);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.panel-header {
  position: relative;
  width: vw(293);
  height: vh(49);
  background: url(../assets/img/common-panel-header-bg.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  padding-left: vw(24);
  margin-bottom: vh(25);

  .title {
    color: rgba(255, 255, 255, 1);
    font-size: fs(22);
    font-family: SourceHanSansCN-Medium, sans-serif;
    font-weight: 500;
  }
}

.chart-header {
  display: flex;
  align-items: center;
  gap: vw(15);
  margin-bottom: vh(10);
  padding-left: vw(10);

  .y-axis-label {
    color: rgba(255, 255, 255, 1);
    font-size: fs(12);
  }

  .chart-title {
    color: rgba(255, 255, 255, 1);
    font-size: fs(16);
    font-family: PingFangSC-Semibold, sans-serif;
    font-weight: 600;
    margin-left: auto;
  }

  .legend {
    display: flex;
    gap: vw(15);

    .legend-item {
      display: flex;
      align-items: center;
      gap: vw(5);

      .legend-color {
        width: vw(9);
        height: vh(9);
        border-radius: vw(4);

        &.blue {
          background-color: rgba(0, 143, 255, 1);
        }

        &.cyan {
          background-color: rgba(0, 242, 245, 1);
        }
      }

      span {
        color: rgba(255, 255, 255, 1);
        font-size: fs(10);
      }
    }
  }
}

.chart-container {
  flex: 1;
  display: flex;
  gap: vw(10);
  margin-bottom: vh(10);

  .y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: vh(5) 0;

    span {
      color: rgba(255, 255, 255, 1);
      font-size: fs(12);
      font-family: HelveticaNeue, sans-serif;
      text-align: right;
    }
  }

  .chart-area {
    flex: 1;
    background: url(../assets/img/statistics-chart-area-bg.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: vw(15);

    .chart-image {
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  }
}

.x-axis {
  display: flex;
  justify-content: space-around;
  padding: 0 vw(40) 0 vw(60);

  span {
    color: rgba(255, 255, 255, 1);
    font-size: fs(12);
    text-align: center;
  }
}
</style>