soilgd12/src/views/User/hmInFlux/subsurfaceLeakage/subsurfaceLeakageInputFlux.vue

<template>
  <div class="agricultural-input-management">
    <div class="page-container">
      <el-card class="results-card">
        <div class="results-content">
          <!-- 地图区域 -->
          <div class="map-section">
            <h3>地下渗漏Cd通量分布图</h3>
            <div v-if="isLoading" class="loading-container">
              <el-icon class="loading-icon"><Loading /></el-icon>
              <span>数据加载中...</span>
            </div>
            <div v-else-if="isError" class="error-container">
              <el-icon class="error-icon"><Warning /></el-icon>
              <span>{{ errorMessage }}</span>
              <el-button class="retry-btn" @click="fetchMap">
                <el-icon><Refresh /></el-icon> 重新加载
              </el-button>
            </div>
            <div v-else class="image-container">
              <img :src="mapImageUrl" class="result-image"></img>
              </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ElButton, ElCard, ElIcon } from 'element-plus';
import { Loading, Warning, Picture, Refresh } from '@element-plus/icons-vue';
import { api8000 } from '@/utils/request';

export default {
  name: 'LeakageFluxMap',
  components: {
    ElButton,
    ElCard,
    ElIcon,
    Loading,
    Warning,
    Picture,
    Refresh
  },
  data() {
    return {
      mapImageUrl: null,
      isLoading: true,
      isError: false,
      errorMessage: '',
      area: '乐昌市',
      level: 'county',
      colormap: 'blues',
    };
  },
  mounted() {
    this.fetchMap();
  },
  methods: {
    async fetchMap() {
      this.isLoading = true;
      this.isError = false;
      
      try {
        const response = await api8000.get(
          `/api/cd-flux-removal/groundwater_leaching/latest-map/乐昌市`,
          {
            params: {
              area: this.area,
              level: this.level,
              colormap: this.colormap
            },
            responseType: 'blob'
          }
        );
        
        const blob = new Blob([response.data], { type: response.headers['content-type'] });
        this.mapImageUrl = URL.createObjectURL(blob);
        
      } catch (error) {
        console.error('加载地图失败:', error);
        this.isError = true;
        this.errorMessage = '地图加载失败，请稍后重试';
      } finally {
        this.isLoading = false;
      }
    },
    handleImageLoad() {
      console.log('地图图片加载完成');
    }
  }
};
</script>

<style scoped>

.page-container {
  width: 100%;
  height: 100%;
}
/* 结果卡片样式 */
.results-card {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  height: 100%;
  box-sizing: border-box;
}

.results-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.map-section {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

h3 {
  margin-bottom: 15px;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

/* 图片容器限定大小 */
.image-container {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
}

.result-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.result-image:hover {
  transform: scale(1.02);
}

/* 加载和错误状态 */
.loading-container, .error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  gap: 15px;
}

.loading-container {
  color: #47C3B9;
}

.error-container {
  color: #F56C6C;
}

.loading-icon {
  font-size: 36px;
  margin-bottom: 10px;
  animation: rotate 2s linear infinite;
}

.error-icon {
  font-size: 36px;
  margin-bottom: 10px;
}

.retry-btn {
  margin-top: 15px;
}

.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: #999;
  font-size: 16px;
}

.no-data .el-icon {
  font-size: 48px;
  margin-bottom: 10px;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .image-container {
    height: 400px;
  }
}

@media (max-width: 480px) {
  .agricultural-input-management {
    padding: 10px;
  }
  
  .image-container {
    height: 300px;
  }
}
</style>