add json 编辑

package.json

@@ -9,8 +9,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@babel/preset-env": "^7.28.3",
     "axios": "0.21.0",
-    "core-js": "^3.8.3",
     "echarts": "^5.4.3",
     "element-ui": "2.9.2",
     "file-saver": "^2.0.5",
@@ -25,13 +25,15 @@
     "vxe-table": "~3.18.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.16",
+    "@babel/core": "^7.28.4",
     "@babel/eslint-parser": "^7.12.16",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "babel-loader": "^10.0.0",
+    "core-js": "^3.46.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",

src/views/home/home.vue

@@ -22,7 +22,8 @@
         <button @click="clear">清除所有</button>
       </div> -->
       <div class="home-header-right">
-        <div @click="handleExport" class="sure">导出</div>
+        <div @click="handleExport" :style="infoList && infoList.length > 0 ? { cursor: 'pointer' } : { cursor: 'not-allowed' }" class="sure">导出</div>
+        <div @click="handleExportJosn" class="sure">json编辑</div>
       </div>
     </div>
     <div class="home">
@@ -139,7 +140,13 @@
           <div class="importJson" @click="openDialog">数据选择</div>
         </div>
       </div>
-      <div id="map"></div>
+      <div
+        id="map"
+        v-loading="mapLoading"
+        element-loading-text="地图数据加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)">
+      </div>
       <div class="main-container" style="width: 452px">
         <div class="control-panel" style="width: 452px">
           <div style="font-size: 14px; margin-bottom: 10px">
@@ -351,6 +358,19 @@
           <el-button type="primary" size="mini" @click="confirmExport">导出</el-button>
         </div>
       </el-dialog>
+      <!-- 右侧json编辑 -->
+      <el-dialog :visible.sync="dialogJsonVisible" title="json编辑" width="600px">
+        <div v-loading="jsonLoading">
+          <div style="margin-bottom: 10px;">
+            <el-button type="primary" size="mini" @click="handleJson">选择</el-button>
+          </div>
+          <el-input type="textarea" resize="none" :rows="18" v-model="jsonInfo.json" size="mini"></el-input>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button size="mini" @click="closeJson">取消</el-button>
+          <el-button type="primary" size="mini" @click="confirmJson">保存</el-button>
+        </div>
+      </el-dialog>
     </div>
   </div>
 </template>
@@ -363,6 +383,7 @@ import iniParser from 'ini-parser'
 export default {
   data() {
     return {
+      mapLoading: false,
       dialogVisible: false,
       tableData: [],
       multipleSelection: [],
@@ -407,6 +428,12 @@ export default {
       dialogExportVisible: false,
       routeData: [],
       hideData: [],
+      dialogJsonVisible: false,
+      jsonInfo: {
+        json: '',
+        path: ''
+      },
+      jsonLoading: false
     }
   },
   async mounted() {
@@ -434,6 +461,7 @@ export default {
         .catch((error) => {})
     },
     async initMap() {
+      this.mapLoading = true
       this.viewer = new window.mars3d.Map(
         'map',
         {
@@ -565,6 +593,7 @@ export default {
           this.graphicLayer.addGraphic(graphicLine);
         })
         this.roadNetworkGeoJSONBuild = this.buildGraph(this.roadNetworkGeoJSON)
+        this.mapLoading = false
         this.loadFactoryGeoJson() // 拿到厂房数据
       } catch (error) {
         console.error('加载 Shapefile 数据失败:', error)
@@ -2391,6 +2420,7 @@ export default {
     },
     /** 右侧表单导出 */
     handleExport() {
+      if (this.infoList && this.infoList.length == 0) return
       const hideData = []
       if (this.factoriesWithVehicles.length > 0) {
         this.factoriesWithVehicles.forEach((item, index) => [
@@ -2515,6 +2545,67 @@ export default {
           });
         });
     },
+    /** json编辑 */
+    handleExportJosn() {
+      this.dialogJsonVisible = true
+    },
+     decodeEscapedJson(str) {
+      // 去掉最外层的转义引号
+      str = str.slice(1, -1);
+      // 循环解码，直到字符串不再包含转义字符
+      while (str.includes('\\')) {
+          str = JSON.parse('"' + str + '"');
+      }
+      return str
+    },
+    handleJson() {
+      this.jsonLoading = true
+      fetch('./config.ini')
+        .then(response => response.text())
+        .then(text => {
+          const parsedData = iniParser.parse(text);
+          axios.post(`http://${parsedData.http.address}:${parsedData.http.port}/api/json/select`, {
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            timeout: 10 * 60 * 1000
+          })
+          .then(response => {
+            this.jsonInfo = { 
+              path: response.data.path,
+              json: this.decodeEscapedJson(response.data.json)
+            }
+            this.jsonLoading = false
+          })
+          .catch(error => {
+            this.jsonLoading = false
+          });
+        });
+    },
+    closeJson() {
+      this.jsonInfo.path = ''
+      this.jsonInfo.json = ''
+      this.dialogJsonVisible = false
+    },
+    confirmJson() {
+      fetch('./config.ini')
+        .then(response => response.text())
+        .then(text => {
+          const parsedData = iniParser.parse(text);
+          axios.post(`http://${parsedData.http.address}:${parsedData.http.port}/api/json/save?path=${this.jsonInfo.path}`, JSON.stringify(this.jsonInfo.json), {
+            headers: {
+              'Content-Type': 'application/json'
+            }
+          })
+          .then(response => {
+            this.$message.success('保存成功')
+            this.closeJson()
+          })
+          .catch(error => {
+          });
+        });
+
+    },
   },
 }
 </script>
@@ -2530,7 +2621,8 @@ export default {
   box-sizing: border-box;
   background: #abc6bc;
 }
-.home-header-left {
+.home-header-left,
+.home-header-right {
   display: flex;
   align-items: center;
   box-sizing: border-box;

vue.config.js

@@ -1,46 +1,52 @@
 const {defineConfig} = require('@vue/cli-service')
 const postcssPxToViewport = require('postcss-px-to-viewport')
-const path = require('path') // 需要引入 path 模块
+const path = require('path')
 
 module.exports = defineConfig({
   publicPath: './',
-  transpileDependencies: false,
+  transpileDependencies: false, // 我们自己管，不让 CLI 插手
   lintOnSave: false,
-  devServer: {
+  devServer: {client: {overlay: false}},
-    client: {
+
-      overlay: false,
+  configureWebpack(config) {
-    },
+    // 调试
-  },
-  configureWebpack: (config) => {
-    //调试JS
     config.devtool = 'source-map'
-    config.resolve = {
+    // 别名
-      alias: {
+    config.resolve.alias['@'] = path.resolve(__dirname, 'src')
-        '@': path.resolve(__dirname, 'src'),
+
-      },
+    /* 1. 追加 ini 规则 */
-    }
-     // 添加 .ini 文件处理规则
-    if (config.module && config.module.rules) {
     config.module.rules.push({
       test: /\.ini$/,
-        use: 'raw-loader'
+      use: 'raw-loader',
     })
-    } else {
+
-      config.module = {
+    /* 2. 追加 ES5 规则（只转 src，不转 node_modules） */
-        rules: [
+    config.module.rules.push({
+      test: /\.js$/,
+      include: path.resolve(__dirname, 'src'),
+      use: {
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            [
+              '@babel/preset-env',
               {
-            test: /\.ini$/,
+                targets: {ie: '11'}, // 强制 ES5
-            use: 'raw-loader'
+                corejs: 3,
-          }
+                useBuiltIns: 'entry',
-        ]
-      }
-    }
               },
+            ],
+          ],
+        },
+      },
+    })
+  },
+
   css: {
+    /* 你的 px-to-viewport 配置不动 */
     loaderOptions: {
       postcss: {
         postcssOptions: {
-          // 增加这一层 postcssOptions
           plugins: [
             postcssPxToViewport({
               unitToConvert: 'px',
@@ -53,7 +59,7 @@ module.exports = defineConfig({
               minPixelValue: 1,
               mediaQuery: false,
               replace: true,
-              exclude: /(\/|\\)(node_modules)(\/|\\)/,
+              exclude: /node_modules/,
               include: [],
               landscape: false,
             }),