<template>
  <div class="overview-container">
    <h1>产业概览</h1>
    <div class="charts-container">
      <RealtimeChart :data="overviewData" />
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import RealtimeChart from '@/components/RealtimeChart.vue';
import { fetchOverviewData } from '@/services/dashboard';

export default {
  name: 'Overview',
  components: { RealtimeChart },
  setup() {
    const overviewData = ref({});

    const loadData = async () => {
      try {
        overviewData.value = await fetchOverviewData();
      } catch (error) {
        console.error('获取产业概览数据失败:', error);
      }
    };

    onMounted(() => {
      loadData();
    });

    return {
      overviewData
    };
  }
};
</script>

<style scoped>
.overview-container {
  padding: 20px;
}
.charts-container {
  margin-top: 20px;
}
</style>