add json 编辑

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;