fix: 配置Vite代理解决跨域问题，并对接真实API接口

package-lock.json

@@ -1049,7 +1049,6 @@
       "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz",
       "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -1456,15 +1455,13 @@
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/lodash-es": {
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
       "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/lodash-unified": {
       "version": "1.0.3",
@@ -1592,7 +1589,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -1756,7 +1752,6 @@
       "integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -1831,7 +1826,6 @@
       "resolved": "https://registry.npmmirror.com/vue/-/vue-3.5.22.tgz",
       "integrity": "sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.22",
         "@vue/compiler-sfc": "3.5.22",

src/components/MapView.vue

@@ -55,37 +55,37 @@ const popupPos = ref({ x: 0, y: 0 });
 const districtUrl =
   "https://geo.datav.aliyun.com/areas_v3/bound/120000_full.json";
 
-// 区级与街道级指标（模拟数据）
-const indicatorData = {
-  完成状态: {
-    和平区: "已完成",
-    河东区: "未完成",
-    河西区: "已完成",
-    南开区: "未开始",
-    河北区: "未完成",
-    红桥区: "已完成",
-    滨海新区: "未完成",
-  },
-  图斑面积: {
-    和平区: 230,
-    河东区: 340,
-    河西区: 410,
-    南开区: 300,
-    河北区: 500,
-    红桥区: 270,
-    滨海新区: 1200,
-  },
-  图斑数量: {
-    和平区: 45,
-    河东区: 80,
-    河西区: 70,
-    南开区: 60,
-    河北区: 85,
-    红桥区: 50,
-    滨海新区: 150,
-  },
+
+const indicatorData =ref({
+  完成状态:{},
+  图斑面积:{},
+  图斑数量:{},
+})
+
+async function fetchDistrictStatus(){
+  console.log("🔥 正在尝试发起请求...");
+  try{
+    const response=await fetch('/api/stats/district')
+    const res=await response.json();
+    console.log("区级指标数据:",res);
+    if(res.code==0&&res.data){
+      indicatorData.value={
+        完成状态:res.data.completionStatus || {},
+        图斑面积:res.data.plotArea || {},
+        图斑数量:res.data.plotCount || {},
       };
   
+
+      if (map&&map.getSource("tianjin")){
+        updateMapColors("district");
+      }
+    }
+  
+  }catch(error){
+    console.error("获取区级指标数据失败:",error);
+  }
+}
+
 // 模拟街道级指标（真实项目应从接口获取）
 const streetIndicatorData = {
   完成状态: {
@@ -144,6 +144,9 @@ function handleMapClick(e) {
 
 // 初始化地图
 onMounted(async () => {
+  console.log("Vue组件已挂载");
+  fetchDistrictStatus();
+  console.log("初始化地图");
   map = new maplibregl.Map({
     container: mapContainer.value,
     style: {
@@ -224,9 +227,12 @@ function updateMapColors(level = currentLevel.value) {
   const data = map.getSource(sourceId)?._data;
   if (!data) return;
 
-  const indicator = level === "district" ? indicatorData : streetIndicatorData;
+  const indicator = level === "district" ? indicatorData.value : streetIndicatorData;
   const selected = selectedIndicator.value;
   
+  // 防止接口还没返回数据时报错
+  if (!indicator[selected]) return;
+
   if (selected === "完成状态") {
     const colors = { 已完成: "#4CAF50", 未完成: "#FFC107", 未开始: "#BDBDBD" };
     data.features.forEach((f) => {

vite.config.js

@@ -4,4 +4,18 @@ import vue from '@vitejs/plugin-vue'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  server: {
+    proxy: {
+      // 只要你请求以 /api 开头，就会被转发到目标服务器
+      '/api': {
+        target: 'http://192.168.1.254:9001',
+        changeOrigin: true,
+        // 如果后端路径本身就有 /api，就不需要 rewrite
+        // 如果你希望把 /api 前缀去掉再转发，就打开下面这行：
+        // rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+  },
 })
+
+