<template>
  <div class="monitor-container">
    <h1>养殖监控</h1>
    <DataLoader 
      :loading="loading" 
      :error="error"
      :empty="!environmentData.length"
      empty-message="暂无环境数据"
    >
      <template #default>
        <div class="map-container">
          <!-- 3D地图组件 -->
          <ThreeDMap :height="mapHeight" :map-data="farmLocations" />
        </div>
        <div class="data-panel">
          <EnvironmentData :data="environmentData" />
        </div>
      </template>
    </DataLoader>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue';
import { fetchFarmData } from '@/services/dashboard';
import ThreeDMap from '@/components/map/ThreeDMap.vue';
import EnvironmentData from '@/components/data/EnvironmentData.vue';
import DataLoader from '@/components/common/DataLoader.vue';

export default {
  name: 'Monitor',
  components: {
    ThreeDMap,
    EnvironmentData,
    DataLoader
  },
  setup() {
    // 响应式状态
    const environmentData = ref([]);
    const farmLocations = ref([]);
    const loading = ref(true);
    const error = ref(false);
    
    // 根据屏幕尺寸计算地图高度
    const mapHeight = computed(() => {
      return window.innerWidth <= 768 ? 300 : 500;
    });

    // 数据加载
    const loadData = async () => {
      try {
        loading.value = true;
        error.value = false;
        
        // 模拟获取农场位置数据
        farmLocations.value = [
          { id: 1, name: '锡林浩特牧场A', position: [116.08, 43.95], status: '正常' },
          { id: 2, name: '东乌旗牧场B', position: [116.95, 45.55], status: '正常' },
          { id: 3, name: '西乌旗牧场C', position: [117.60, 44.60], status: '警告' },
          { id: 4, name: '镶黄旗牧场D', position: [114.20, 42.25], status: '正常' }
        ];
        
        // 模拟获取环境数据
        environmentData.value = [
          { id: 1, name: '温度', value: '22°C', status: '正常' },
          { id: 2, name: '湿度', value: '65%', status: '正常' },
          { id: 3, name: '氨气浓度', value: '8ppm', status: '警告' },
          { id: 4, name: 'PM2.5', value: '35μg/m³', status: '正常' }
        ];
      } catch (err) {
        error.value = true;
        console.error('获取数据失败:', err);
      }
    };

    // 生命周期钩子
    onMounted(() => {
      loadData();
    });

    return {
      environmentData,
      loading,
      error,
      mapHeight
    };
  }
};
</script>

<style scoped>
.monitor-container {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.map-container {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.data-panel {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.loading-indicator,
.error-message {
  text-align: center;
  padding: 20px;
  font-size: 16px;
  color: #666;
}

.error-message {
  color: #ff4d4f;
}

@media (max-width: 768px) {
  .monitor-container {
    padding: 10px;
  }
}
</style>
```

```
/src/components/map/FarmMap.vue
```
```
