add json 编辑

2025-10-14 17:23:54 +08:00
parent 328700ec89
commit 7d22506f18
3 changed files with 136 additions and 36 deletions
--- a/package.json
+++ b/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",
--- a/src/views/home/home.vue
+++ b/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;
--- a/vue.config.js
+++ b/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: {
-    client: {
-      overlay: false,
-    },
-  },
-  configureWebpack: (config) => {
-    //调试JS
+  devServer: {client: {overlay: false}},
+
+  configureWebpack(config) {
+    // 调试
    config.devtool = 'source-map'
-    config.resolve = {
-      alias: {
-        '@': path.resolve(__dirname, 'src'),
+    // 别名
+    config.resolve.alias['@'] = path.resolve(__dirname, 'src')
+
+    /* 1. 追加 ini 规则 */
+    config.module.rules.push({
+      test: /\.ini$/,
+      use: 'raw-loader',
+    })
+
+    /* 2. 追加 ES5 规则（只转 src，不转 node_modules） */
+    config.module.rules.push({
+      test: /\.js$/,
+      include: path.resolve(__dirname, 'src'),
+      use: {
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            [
+              '@babel/preset-env',
+              {
+                targets: {ie: '11'}, // 强制 ES5
+                corejs: 3,
+                useBuiltIns: 'entry',
+              },
+            ],
+          ],
+        },
      },
-    }
-     // 添加 .ini 文件处理规则
-    if (config.module && config.module.rules) {
-      config.module.rules.push({
-        test: /\.ini$/,
-        use: 'raw-loader'
-      })
-    } else {
-      config.module = {
-        rules: [
-          {
-            test: /\.ini$/,
-            use: 'raw-loader'
-          }
-        ]
-      }
-    }
+    })
  },
+
  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,
            }),