soilgd12/src/components/atmpollution/atmcompanyline.vue

<template>
  <div class="region-average-chart">
    <!-- 错误提示 -->
    <div v-if="error" class="status error">
      <i class="fa fa-exclamation-circle"></i> {{ error }}
      <div class="raw-response" v-if="rawResponse">
        <button @click="showRaw = !showRaw">
          {{ showRaw ? '收起原始响应' : '查看原始响应（前1000字符）' }}
        </button>
        <pre v-if="showRaw">{{ truncatedRawResponse }}</pre>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state">
      <div class="spinner"></div>
      <p>数据加载中...</p>
    </div>

    <!-- 数据表格 -->
    <div v-else class="table-container">
      <table class="data-table">
        <thead>
          <tr>
            <th>污染源序号</th>
            <th>公司名称</th>
            <th>公司类型</th>
            <th>所属区县</th>
            <th>颗粒物排放(t/a)</th>
            <th>经度</th>
            <th>纬度</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in tableData" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.company_name }}</td>
            <td>{{ item.company_type }}</td>
            <td>{{ item.county }}</td>
            <td>{{ item.particulate_emission }}</td>
            <td>{{ item.longitude.toFixed(6) }}</td>
            <td>{{ item.latitude.toFixed(6) }}</td>
          </tr>
          <tr v-if="tableData.length === 0">
            <td colspan="7" class="empty-state">暂无有效数据</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { wgs84togcj02 } from 'coordtransform'; // 经纬度转换（按需保留）

// ========== 接口配置 ==========
const apiUrl = 'http://localhost:8000/api/vector/export/all?table_name=atmo_company'; 

// ========== 响应式数据 ==========
const error = ref('');        // 错误信息
const loading = ref(true);    // 加载状态
const tableData = ref([]);    // 表格数据
const rawResponse = ref('');  // 原始响应文本（调试用）
const showRaw = ref(false);   // 是否展开原始响应

// 截断原始响应（前1000字符）
const truncatedRawResponse = computed(() => {
  return rawResponse.value.length > 1000 
    ? rawResponse.value.slice(0, 1000) + '...' 
    : rawResponse.value;
});

// ========== 数据请求 & 修复逻辑 ==========
const fetchData = async () => {
  try {
    loading.value = true;
    error.value = '';
    rawResponse.value = '';

    // 1. 发起请求（获取原始文本）
    const response = await fetch(apiUrl);
    if (!response.ok) {
      throw new Error(`HTTP 错误：${response.status}`);
    }

    // 2. 获取原始响应文本（关键：避免自动解析错误）
    let rawText = await response.text();
    rawResponse.value = rawText; // 保存原始响应

    // 3. 暴力替换 NaN 为 null（核心修复！）
    rawText = rawText.replace(/:\s*NaN/g, ': null'); 

    // 4. 解析 JSON（若失败，报错含修复后内容）
    const geoJSONData = JSON.parse(rawText);

    // 5. 校验 GeoJSON 结构（兜底）
    if (!geoJSONData.features || !Array.isArray(geoJSONData.features)) {
      throw new Error('修复后仍无有效 features 数组');
    }

    // 6. 处理数据（转换经纬度 + 字段兜底）
    tableData.value = geoJSONData.features
      .map(feature => feature.properties || {}) // 兜底空 properties
      .map(props => {
        // 经纬度转换（按需调整，若不需要可移除）
        const lng = Number(props.longitude);
        const lat = Number(props.latitude);
        if (isNaN(lng) || isNaN(lat)) {
          console.warn('无效经纬度，跳过该数据：', props);
          return null;
        }
        const [gcjLng, gcjLat] = wgs84togcj02(lng, lat); // 或直接用 lng/lat

        return {
          id: props.id || '未知',
          company_name: props.company_name || '未知',
          company_type: props.company_type || '未知',
          county: props.county || '未知',
          particulate_emission: props.particulate_emission !== undefined 
            ? props.particulate_emission 
            : '未知',
          longitude: gcjLng,
          latitude: gcjLat
        };
      })
      .filter(item => item !== null); // 过滤无效项

  } catch (err) {
    error.value = `数据加载失败：${err.message}`;
    console.error('详细错误：', err);
  } finally {
    loading.value = false;
  }
};

// ========== 生命周期 ==========
onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.region-average-chart {
  width: 100%;
  margin: 20px 0;
  padding: 10px;
}

/* 错误提示 */
.status.error {
  color: #dc2626;
  border: 1px solid #dc2626;
  padding: 10px;
  margin-bottom: 10px;
}
.status.error button {
  padding: 2px 6px;
  cursor: pointer;
  margin-top: 5px;
}
.raw-response pre {
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 12px;
  margin: 5px 0;
  padding: 5px;
  border: 1px solid #ccc;
}

/* 加载状态 */
.loading-state {
  padding: 20px 0;
  text-align: center;
}
.spinner {
  width: 30px;
  height: 30px;
  margin: 0 auto 10px;
  border: 3px solid #e5e7eb;
  border-top: 3px solid #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 最基础的表格样式 */
.table-container {
  overflow-x: auto;
  background-color: white;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
}
.data-table th, .data-table td {
  padding: 8px 10px;
  text-align: center;
  border: 1px solid #ccc;
  font-size: 14px;
}
.data-table th {
  font-weight: bold;
}
/* 完全移除所有行的背景色和悬停效果 */
.data-table tr {
  background-color: transparent;
}
.data-table tr:hover {
  background-color: transparent;
}
.empty-state {
  padding: 20px 0;
  color: #666;
}
</style>