修改字体

src/views/residentAnalysis/index.vue

@@ -2,11 +2,16 @@
   <div id="page">
     <div class="header">
       <div class="images flex a-c" v-for="item in imagesList" :key="item.id">
-        <img :src="item.src" @click="drawRectangle" />
+        <el-tooltip effect="dark" content="绘制矩形区域">
+          <img :src="item.src" @click="drawRectangle" />
+        </el-tooltip>
         <el-button class="form-btn" type="primary" size="mini" @click="analyzeAverageSlope">确定</el-button>
-        <el-button class="form-btn right" type="primary" size="mini" :disabled="showExport" @click="clickExport">
-          导出
-        </el-button>
+        <div class="right">
+          <el-button class="form-btn" type="primary" size="mini" :disabled="showExport" @click="clickExport">
+            导出
+          </el-button>
+          <el-button class="form-btn" type="primary" size="mini" @click="handleExportJosn"> json编辑 </el-button>
+        </div>
       </div>
     </div>
 
@@ -17,11 +22,10 @@
           <div class="control-panel">
             <div class="title">范围</div>
             <el-form-item label="左上角：">
-              <el-input v-model="form.leftTop" @blur="updateArea" placeholder="请输入经纬度，以 ',' 隔开'"></el-input>
+              <el-input v-model="form.leftTop" @blur="updateArea" placeholder="经纬度，以 ',' 隔开'"></el-input>
             </el-form-item>
             <el-form-item label="右下角：">
-              <el-input v-model="form.rightBottom" @blur="updateArea" placeholder="请输入经纬度，以 ',' 隔开'">
-              </el-input>
+              <el-input v-model="form.rightBottom" @blur="updateArea" placeholder="经纬度，以 ',' 隔开'"> </el-input>
             </el-form-item>
             <input type="file" ref="fileInput" @change="handleFileUpload" style="display: none" />
             <div class="importJson flex j-c a-c" @click="triggerFileUpload">导入json文件</div>
@@ -46,17 +50,17 @@
 
           <!-- 条件 -->
           <div class="control-panel">
-            <div class="title">条件</div>
-            <el-form-item label="长：">
+            <div class="title">网格条件</div>
+            <el-form-item label="列(个)：">
               <el-input v-model="form.xLength"></el-input>
             </el-form-item>
-            <el-form-item label="宽：">
+            <el-form-item label="行(个)：">
               <el-input v-model="form.yLength"></el-input>
             </el-form-item>
-            <el-form-item label="最大坡度：">
+            <el-form-item label="最大坡度(°)：">
               <el-input v-model="form.maxSlope"></el-input>
             </el-form-item>
-            <el-form-item label="居民地最小距离：">
+            <el-form-item label="居民地距离(米)：">
               <el-input v-model="form.minPeopleDis"></el-input>
             </el-form-item>
           </div>
@@ -292,6 +296,20 @@
           <el-button type="primary" size="mini" @click="exportJSON">导出</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>
@@ -361,6 +379,13 @@ export default {
 
       tableHeight: 280,
       showExport: true,
+
+      dialogJsonVisible: false,
+      jsonInfo: {
+        json: '',
+        path: '',
+      },
+      jsonLoading: false,
     }
   },
   created() {
@@ -478,7 +503,7 @@ export default {
       window.viewer.addLayer(window.shortestPathLayer)
       // 添加地图点击事件监听，用于结束绘制
       window.viewer.on(mars3d.EventType.dblClick, (event) => {
-        // 如果正在绘制，点击地图可以结束绘制（除了绘制点）
+        // 如果正在绘制，点击地图可以结束绘制(除了绘制点)
         window.graphicLayer.stopDraw()
         this.form.leftTop = ''
         this.form.rightBottom = ''
@@ -613,7 +638,7 @@ export default {
       })
     },
 
-    // 算矩形到 geoJSONLayer 的最小距离（米），判断是否在其内部
+    // 算矩形到 geoJSONLayer 的最小距离(米)，判断是否在其内部
     calcMinDistance(rectPositions, geoJSONLayer) {
       if (!geoJSONLayer || !rectPositions?.length) return Infinity
 
@@ -652,13 +677,13 @@ export default {
         })
       })
 
-      console.log('矩形 → polygonP 边界最短距离（米）', inside, minDist)
+      console.log('矩形 → polygonP 边界最短距离(米)', inside, minDist)
 
       // 5. 面内直接返回 -1
       return inside ? -1 : minDist
     },
 
-    // 判断矩形与 mars3d GeoJSON 图层是否相交（不转 GeoJSON）
+    // 判断矩形与 mars3d GeoJSON 图层是否相交(不转 GeoJSON)
     getIntersectId(position, layer) {
       console.log('position===>', position, layer)
       if (!position || !layer || !layer.graphics) return null
@@ -788,7 +813,7 @@ export default {
           },
           label: {
             text: '分析区域',
-            font: '16px sans-serif',
+            font: '16px 等线',
             color: '#ffffff',
             outline: true,
             outlineColor: '#000000',
@@ -823,7 +848,7 @@ export default {
       // 更新多边形位置
       this.polygon.positions = cartesianPositions
 
-      // 触发更新（根据mars3d的具体API可能需要调用其他方法）
+      // 触发更新(根据mars3d的具体API可能需要调用其他方法)
       if (this.polygon.update) {
         this.polygon.update()
       }
@@ -965,7 +990,7 @@ export default {
     drawLabelAndRec() {
       this.analyzing = false
 
-      /* 1. 计算总分（保持原逻辑） */
+      /* 1. 计算总分(保持原逻辑) */
       const list = this.calcTotalScore(this.validBlocks)
       const len = list.length
       if (!len) {
@@ -1028,7 +1053,7 @@ export default {
           style: {
             text: String(b.totalScore),
             font_size: 24,
-            font_family: '楷体',
+            font_family: '等线',
             color: '#000000',
             outline: false,
             horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
@@ -1269,6 +1294,78 @@ export default {
       }
     },
 
+    // json编辑
+    handleExportJosn() {
+      this.dialogJsonVisible = true
+    },
+
+    decodeEscapedJson(str) {
+      // 去掉字符串首尾的空白字符
+      str = str.trim()
+      // 直接解析 JSON 字符串
+      try {
+        return JSON.parse(str)
+      } catch (e) {
+        console.error('Error parsing JSON:', e)
+        return null
+      }
+    },
+
+    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: JSON.stringify(response.data.json, null, 2),
+              }
+              this.jsonLoading = false
+            })
+            .catch((error) => {
+              this.jsonLoading = 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(JSON.parse(this.jsonInfo.json)),
+              {
+                headers: {
+                  'Content-Type': 'application/json',
+                },
+              }
+            )
+            .then((response) => {
+              this.$message.success('保存成功')
+              this.closeJson()
+            })
+            .catch((error) => {})
+        })
+    },
+
+    closeJson() {
+      this.jsonInfo.path = ''
+      this.jsonInfo.json = ''
+      this.dialogJsonVisible = false
+    },
+
     // 新增
     handleAdd(type) {
       let tabIndex = this.tabList.findIndex((item) => item.id === this.activeName)
@@ -1343,6 +1440,9 @@ export default {
   &:active {
     background-color: #176363;
   }
+  &:focus {
+    background-color: #176363;
+  }
 }
 
 ::v-deep .el-form-item--mini.el-form-item,
@@ -1375,9 +1475,12 @@ export default {
     transform: translateY(-50%);
     cursor: pointer;
     margin-left: 32px;
+    img {
+      margin-right: 10px;
+    }
   }
   .form-btn {
-    margin-left: 30px;
+    margin-left: 20px;
   }
   .btn {
     position: absolute;
@@ -1445,7 +1548,6 @@ export default {
 }
 .table-title {
   font-size: 16px;
-  font-family: 'Pingfang';
   font-weight: bold;
   letter-spacing: 0.1em;
   margin-bottom: 10px;