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="less">
.year-statistics {
  background: url(../assets/img/statistics-panel-bg.png) no-repeat;
  background-size: 100% 100%;
  padding: 20px 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

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

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

.chart-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
  padding-left: 10px;

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

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

  .legend {
    display: flex;
    gap: 15px;

    .legend-item {
      display: flex;
      align-items: center;
      gap: 5px;

      .legend-color {
        width: 9px;
        height: 9px;
        border-radius: 4px;

        &.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: 10px;
      }
    }
  }
}

.chart-container {
  flex: 1;
  display: flex;
  gap: 10px;
  margin-bottom: 10px;

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

    span {
      color: rgba(255, 255, 255, 1);
      font-size: 12px;
      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: 15px;

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

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

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