pm/pm_ui/src/views/energyManagement/dataComparison/index.vue

<template>
  <div class="app">
    <!-- 上半部分：两个卡片 -->
    <div class="top-section">
      <!-- 本月 -->
      <div class="card">
        <h3>本月</h3>
        <div class="data-container">
          <div class="data-row">
            <div class="data-item">
              <span class="value">8.405</span><span class="unit">t</span>
              <span class="label">当月</span>
            </div>
            <div class="data-item">
              <span class="value">8.477</span><span class="unit">t</span>
              <span class="label">上月同期</span>
            </div>
            <div class="data-item trend">
              <span class="value" style="color: #00c853;">-0.072</span><span class="unit">↓</span>
              <span class="label">趋势</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 本年 -->
      <div class="card">
        <h3>本年</h3>
        <div class="data-container">
          <div class="data-row">
            <div class="data-item">
              <span class="value">144.747</span><span class="unit">t</span>
              <span class="label">当年</span>
            </div>
            <div class="data-item">
              <span class="value">123.812</span><span class="unit">t</span>
              <span class="label">去年同期</span>
            </div>
            <div class="data-item trend">
              <span class="value" style="color: #d50000;">20.935</span><span class="unit">↑</span>
              <span class="label">趋势</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-container">
      <span>分类能耗</span>
      <select v-model="selectedCategory">
        <option value="电">电</option>
        <option value="水">水</option>
        <option value="天然气">天然气</option>
      </select>
      <input type="text" v-model="selectedYear" placeholder="输入年份" />
      <button @click="fetchData">查询</button>
    </div>

    <!-- 图表区域 -->
    <div id="chart" ref="chartRef" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      selectedCategory: '电',
      selectedYear: '',
      chartInstance: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chartRef;
      this.chartInstance = echarts.init(chartDom);

      const option = {
        title: { text: '能耗分布', left: 'center' },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月'],
          axisLabel: { color: '#333' }
        },
        yAxis: {
          type: 'value',
          axisLabel: { color: '#333' }
        },
        series: [
          {
            name: '能耗',
            type: 'bar',
            data: [39, 30, 28, 22, 6],
            itemStyle: { color: '#2196f3' }
          }
        ],
        grid: {
          top: 30,
          bottom: 30,
          left: 60,
          right: 20
        }
      };

      this.chartInstance.setOption(option);
    },
    fetchData() {
      console.log('查询:', this.selectedCategory, this.selectedYear);
      // 模拟数据更新
      this.updateChart([40, 32, 29, 23, 7]);
    },
    updateChart(data) {
      if (this.chartInstance) {
        this.chartInstance.setOption({
          series: [{ data: data }]
        });
      }
    }
  }
};
</script>

<style scoped>
.app {
  background-color: #fff;
  color: #333;
  font-family: "Segoe UI", sans-serif;
  padding: 30px;
}

/* 上方两个卡片并列 */
.top-section {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 30px;
}

.card {
  flex: 1;
  background-color: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e0e0e0;
  height: 300px; /* 固定高度 */
  position: relative; /* 用于绝对定位标题 */
}

.card h3 {
  margin: 15px;
  font-size: 18px;
  font-weight: 600;
  color: #212121;
  position: absolute;
  top: 15px;
  left: 15px; /* 标题固定在左上角 */
}

.data-container {
  width: 100%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: calc(100% - 40px); /* 减去标题的高度 */
}

.data-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 80%; /* 调整宽度以适应居中 */
}

.data-item {
  text-align: center;
}

.value {
  font-size: 24px;
  font-weight: bold;
  color: #000;
}

.unit {
  font-size: 14px;
  margin-left: 4px;
  color: #666;
}

.label {
  font-size: 12px;
  color: #999;
  display: block;
  margin-top: 4px;
}

.trend .value {
  font-size: 20px;
}

/* 筛选区域 */
.filter-container {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  gap: 15px;
}

.filter-container span {
  font-weight: 500;
  min-width: 70px;
}

.filter-container select,
.filter-container input {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  outline: none;
  font-size: 14px;
}

.filter-container button {
  padding: 8px 16px;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.filter-container button:hover {
  background-color: #1976d2;
}
</style>