修改代码样式

.gitignore

@@ -21,3 +21,4 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+*.zip

README.md

@@ -1,29 +1,3 @@
 # kxfx
 
-## Project setup
+## 机动路线规划
-
-```
-npm install
-```
-
-### Compiles and hot-reloads for development
-
-```
-npm run serve
-```
-
-### Compiles and minifies for production
-
-```
-npm run build
-```
-
-### Lints and fixes files
-
-```
-npm run lint
-```
-
-### Customize configuration
-
-See [Configuration Reference](https://cli.vuejs.org/config/).

public/config.ini

@@ -1,5 +1,5 @@
 [http]
-port=8081
+port=8083
 address=127.0.0.1
 
 [title]

public/data/points.json

@@ -1,16 +1,16 @@
 {
-  "startPoint": "114.26344,27.800982",
+  "startPoint": "114.312888,27.796612",
-  "endPoint": "114.284668,27.794961",
+  "endPoint": "114.336525,27.767989",
   "viaPoints": [
     {
       "time": "1694352000000",
-      "points": "114.272329,27.797299"
+      "points": "114.334239,27.779261"
     }
   ],
   "avoidPoints": [
     {
       "time": "1694352003000",
-      "points": "114.27882,27.792857"
+      "points": ""
     }
   ],
   "avoidAreas": [

src/assets/scss/index.scss

@@ -1,11 +1,58 @@
+@font-face {
+  font-family: 'Dengxian';
+  src: url('@/assets/scss/Dengxian.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+/* 全局强制继承 */
+html, body, #app, .cesium-widget, .mars3d-container,
+.mars3d-popup, .mars3d-tooltip, .mars3d-contextmenu,
+.mars3d-measure-result, .cesium-credit-text,
+.el-button, .el-input, .el-select, .el-table, .el-form, .el-dialog,
+.el-message, .el-notification, .el-tooltip,
+.el-menu, .el-breadcrumb, .el-pagination,
+.el-radio, .el-checkbox, .el-tag, .el-badge,
+.el-alert, .el-steps, .el-tabs, .el-calendar,
+.el-date-picker, .el-cascader, .el-transfer,
+.el-slider, .el-upload,
+.el-empty, .el-result,
+.el-loading-text,.el-table,
+.el-table__body-wrapper span,
+.el-table__footer-wrapper span,
+.el-table__header-wrapper span,
+.el-table__fixed span,
+.el-table__fixed-right span,.vxe-table *,
+.vxe-table--render-default .vxe-cell span,
+.vxe-table--render-default .vxe-cell--title,
+.vxe-table--render-default .vxe-cell--label,
+.vxe-toolbar *,
+.vxe-pager *,
+.vxe-modal--wrapper *,
+.vxe-tooltip--wrapper *  {
+  font-family: 'DengXian', sans-serif !important;
+}
+/* 覆盖 mars3d 所有内部 UI */
+.mars3d-draw-tooltip,
+.mars3d-measure-tooltip,
+.mars3d-contextmenu *,
+.mars3d-popup *,
+.mars3d-measure-result *,
+.mars3d-control-btn {
+  font-family: 'DengXian', sans-serif !important;
+}
+
+.Dengxian {
+  font-family: 'Dengxian' !important;
+}
+
 body,
 html {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+  font-family: 'Dengxian' !important;
-    Microsoft YaHei, Arial, sans-serif;
   user-select: none;
   scrollbar-width: none;
   -ms-overflow-style: none;
@@ -33,3 +80,20 @@ html {
 .flex-warp {
   flex-wrap: wrap;
 }
+.el-form-item {
+  display: flex!important;
+  justify-content: space-between;
+  margin-bottom: 12px!important;
+}
+.el-form-item__label {
+  letter-spacing: -1px;
+  min-width: 130px!important;
+  padding: 0!important;
+  white-space: nowrap;      /* 强制不换行 */
+  flex-shrink: 0;
+  font-size: 16px!important;
+}
+.el-input__inner {
+  height: 24px;
+  line-height: 24px;
+}

src/router/index.js

@@ -6,11 +6,11 @@ import residentAnalysis from '@/views/residentAnalysis/index.vue'
 Vue.use(VueRouter)
 
 const routes = [
-  // {
+  {
-  //   path: '/',
+    path: '/home',
-  //   name: 'home',
+    name: 'home',
-  //   component: HomeView,
+    component: HomeView,
-  // },
+  },
   {
     path: '/',
     name: 'residentAnalysis',

src/views/header/index.vue

@@ -64,7 +64,7 @@ $label_height: 50px;
       line-height: $label_height;
       padding: 0 30px;
       margin-right: 20px;
-      font-family: 'HarmonyOS Sans';
+      // font-family: 'HarmonyOS Sans';
       font-weight: 400;
       font-size: 20px;
       cursor: pointer;

src/views/residentAnalysis/index.vue

@@ -2,26 +2,30 @@
   <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="绘制矩形区域">
-        <el-button class="form-btn" type="primary" size="mini" @click="analyzeAverageSlope">确定</el-button>
+          <img :src="item.src" @click="drawRectangle" />
-        <el-button class="form-btn right" type="primary" size="mini" :disabled="showExport" @click="clickExport">
+        </el-tooltip>
-          导出
+        <div class="sure" @click="analyzeAverageSlope">确定</div>
-        </el-button>
+        <div class="right flex a-c">
+          <div class="sure" :style="!showExport ? {cursor: 'pointer'} : {cursor: 'not-allowed'}" @click="clickExport">
+            导出
+          </div>
+          <div class="sure" @click="handleExportJosn">json编辑</div>
+        </div>
       </div>
     </div>
 
     <div class="content flex j-s a-c">
       <div class="left">
-        <el-form label-width="140px" label-position="left" size="small">
+        <el-form label-position="left" size="mini">
           <!-- 范围 -->
           <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 v-model="form.rightBottom" @blur="updateArea" placeholder="经纬度，以 ',' 隔开'"> </el-input>
-              </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>
+            <div class="title">网格条件</div>
-            <el-form-item label="长：">
+            <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>
@@ -64,7 +68,14 @@
       </div>
 
       <!-- 地图 -->
-      <div class="center" id="cesiumContainer" v-loading="mapLoading" :element-loading-text="mapLoadText"></div>
+      <div
+        class="center"
+        id="cesiumContainer"
+        v-loading="mapLoading"
+        :element-loading-text="mapLoadText"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      ></div>
 
       <div class="right flex column" v-loading="showLoading" element-loading-text="数据加载中">
         <!-- 路点 -->
@@ -145,8 +156,8 @@
                   </vxe-column>
                   <vxe-column title="操作" width="100">
                     <template v-slot="{row}">
-                      <el-button v-if="!row.editing" type="text" size="mini" @click="handleEdit(row)">编辑</el-button>
+                      <el-button type="text" size="mini" v-if="!row.editing" @click="handleEdit(row)">编辑</el-button>
-                      <el-button v-else type="text" size="mini" @click="handleSave(row)">保存</el-button>
+                      <el-button type="text" size="mini" v-else @click="handleSave(row)">保存</el-button>
                       <el-button type="text" size="mini" @click="handleDelete('roadPointList', row)">删除</el-button>
                     </template>
                   </vxe-column>
@@ -188,8 +199,8 @@
                   </vxe-column>
                   <vxe-column title="操作" width="100">
                     <template v-slot="{row}">
-                      <el-button v-if="!row.editing" type="text" size="mini" @click="handleEdit(row)">编辑</el-button>
+                      <el-button type="text" size="mini" v-if="!row.editing" @click="handleEdit(row)">编辑</el-button>
-                      <el-button v-else type="text" size="mini" @click="handleSave(row)">保存</el-button>
+                      <el-button type="text" size="mini" v-else @click="handleSave(row)">保存</el-button>
                       <el-button type="text" size="mini" @click="handleDelete('roadLineList', row)">删除</el-button>
                     </template>
                   </vxe-column>
@@ -233,8 +244,8 @@
                   </vxe-column>
                   <vxe-column title="操作" width="100">
                     <template v-slot="{row}">
-                      <el-button v-if="!row.editing" type="text" size="mini" @click="handleEdit(row)">编辑</el-button>
+                      <el-button type="text" size="mini" v-if="!row.editing" @click="handleEdit(row)">编辑</el-button>
-                      <el-button v-else type="text" size="mini" @click="handleSave(row)">保存</el-button>
+                      <el-button type="text" size="mini" v-else @click="handleSave(row)">保存</el-button>
                       <el-button type="text" size="mini" @click="handleDelete('waterPointList', row)">删除</el-button>
                     </template>
                   </vxe-column>
@@ -276,8 +287,8 @@
                   </vxe-column>
                   <vxe-column title="操作" width="100">
                     <template v-slot="{row}">
-                      <el-button v-if="!row.editing" type="text" size="mini" @click="handleEdit(row)">编辑</el-button>
+                      <el-button type="text" size="mini" v-if="!row.editing" @click="handleEdit(row)">编辑</el-button>
-                      <el-button v-else type="text" size="mini" @click="handleSave(row)">保存</el-button>
+                      <el-button type="text" size="mini" v-else @click="handleSave(row)">保存</el-button>
                       <el-button type="text" size="mini" @click="handleDelete('waterLineList', row)">删除</el-button>
                     </template>
                   </vxe-column>
@@ -289,7 +300,21 @@
 
         <div slot="footer" class="dialog-footer">
           <el-button size="mini" @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" size="mini" @click="exportJSON">导出</el-button>
+          <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>
@@ -300,7 +325,6 @@
 import {getStorage} from '@/utils/localStorage'
 import plantJson from '/public/config/plant.json'
 import soilJson from '/public/config/soil.json'
-import FileSaver from 'file-saver'
 import axios from 'axios'
 import iniParser from 'ini-parser'
 
@@ -361,6 +385,13 @@ export default {
 
       tableHeight: 280,
       showExport: true,
+
+      dialogJsonVisible: false,
+      jsonInfo: {
+        json: '',
+        path: '',
+      },
+      jsonLoading: false,
     }
   },
   created() {
@@ -478,7 +509,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 +644,7 @@ export default {
       })
     },
 
-    // 算矩形到 geoJSONLayer 的最小距离（米），判断是否在其内部
+    // 算矩形到 geoJSONLayer 的最小距离(米)，判断是否在其内部
     calcMinDistance(rectPositions, geoJSONLayer) {
       if (!geoJSONLayer || !rectPositions?.length) return Infinity
 
@@ -652,27 +683,21 @@ 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
 
       const rectCoords = position.concat([position[0]]) // 闭合
 
-      console.log('rectCoords===>', rectCoords)
-
       const rectPoly = turf.polygon([rectCoords])
-      console.log('rectPoly===>', rectPoly)
       const [minX, minY, maxX, maxY] = turf.bbox(rectPoly) // 矩形 bbox
 
-      console.log('minX, minY, maxX, maxY===>', minX, minY, maxX, maxY)
-
       let fc = this._polyCache.get(layer)
 
       if (!fc) {
@@ -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,
@@ -1231,6 +1256,8 @@ export default {
 
     // 点击导出按钮
     clickExport() {
+      if (this.showExport) return
+
       this.rectangles.forEach((rectGraphic) => {
         this.selectRectangle(rectGraphic)
       })
@@ -1257,7 +1284,6 @@ export default {
                 }
               )
               .then((res) => {
-                this.$message.success(res)
                 this.$message.success('导出成功!')
               })
               .catch((error) => {
@@ -1269,6 +1295,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(this.decodeEscapedJson(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)
@@ -1334,31 +1432,26 @@ export default {
 </script>
 
 <style scoped lang="scss">
-::v-deep .el-button--primary {
+.sure {
-  background-color: #176363;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  background: #176363;
   border-radius: 4px;
-  &:hover {
+  min-width: 14px;
-    background-color: #176363;
+  padding: 0 10px;
-  }
+  height: 24px;
-  &:active {
+  color: #ffffff;
-    background-color: #176363;
+  font-weight: 400;
-  }
+  font-size: 14px;
-}
+  margin-right: 10px;
-
+  cursor: pointer;
-::v-deep .el-form-item--mini.el-form-item,
-.el-form-item--small.el-form-item {
-  margin-bottom: 8px;
-}
-
-::v-deep .el-button--primary.is-disabled,
-.el-button--primary.is-disabled:active,
-.el-button--primary.is-disabled:focus,
-.el-button--primary.is-disabled:hover {
-  background-color: #176363;
 }
 
 #page {
-  width: 100%;
+  width: 340px;
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
@@ -1373,11 +1466,11 @@ export default {
     position: relative;
     top: 50%;
     transform: translateY(-50%);
-    cursor: pointer;
     margin-left: 32px;
-  }
+    img {
-  .form-btn {
+      margin-right: 30px;
-    margin-left: 30px;
+      cursor: pointer;
+    }
   }
   .btn {
     position: absolute;
@@ -1401,14 +1494,14 @@ export default {
     background-color: #d4e5db;
     .control-panel {
       width: 340px;
-      padding: 5px 20px;
+      padding: 20px 26px;
       box-sizing: border-box;
       background-size: cover;
       background: #d4e5db;
       .title {
-        font-size: 16px;
-        margin-bottom: 5px;
         color: #1c1c1c;
+        font-size: 16px;
+        margin-bottom: 10px;
       }
     }
 
@@ -1420,7 +1513,8 @@ export default {
       height: 24px;
       font-size: 14px;
       text-align: center;
-      padding: 3px 0;
+      margin-left: 20px;
+      cursor: pointer;
     }
   }
 
@@ -1445,10 +1539,9 @@ export default {
 }
 .table-title {
   font-size: 16px;
-  font-family: 'Pingfang';
+  color: #1c1c1c;
-  font-weight: bold;
   letter-spacing: 0.1em;
-  margin-bottom: 10px;
+  margin: 20px 0 10px 0;
   span {
     margin-right: 10px;
   }

vue.config.js

@@ -21,25 +21,25 @@ module.exports = defineConfig({
     })
 
     /* 2. 追加 ES5 规则（只转 src，不转 node_modules） */
-    config.module.rules.push({
+    //   config.module.rules.push({
-      test: /\.js$/,
+    //     test: /\.js$/,
-      include: path.resolve(__dirname, 'src'),
+    //     include: path.resolve(__dirname, 'src'),
-      use: {
+    //     use: {
-        loader: 'babel-loader',
+    //       loader: 'babel-loader',
-        options: {
+    //       options: {
-          presets: [
+    //         presets: [
-            [
+    //           [
-              '@babel/preset-env',
+    //             '@babel/preset-env',
-              {
+    //             {
-                targets: {ie: '11'}, // 强制 ES5
+    //               targets: {ie: '11'}, // 强制 ES5
-                corejs: 3,
+    //               corejs: 3,
-                useBuiltIns: 'entry',
+    //               useBuiltIns: 'entry',
-              },
+    //             },
-            ],
+    //           ],
-          ],
+    //         ],
-        },
+    //       },
-      },
+    //     },
-    })
+    //   })
   },
 
   css: {