修改代码样式

1
修改样式
2025-10-27 11:06:03 +08:00 · 2025-10-27 10:35:37 +08:00 · 2025-10-27 10:33:48 +08:00 · 2025-10-27 09:54:17 +08:00 · 2025-10-27 09:50:49 +08:00 · 2025-10-27 09:46:51 +08:00
8 changed files with 153 additions and 118 deletions
--- a/.gitignore
+++ b/.gitignore
@ -21,3 +21,4 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+*.zip
--- a/dist.zip
+++ b/dist.zip
--- a/public/data/points.json
+++ b/public/data/points.json
@ -1,16 +1,16 @@
 {
-  "startPoint": "114.26344,27.800982",
-  "endPoint": "114.284668,27.794961",
+  "startPoint": "114.312888,27.796612",
+  "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": [
--- a/src/assets/scss/index.scss
+++ b/src/assets/scss/index.scss
@ -80,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;
+}
--- a/src/router/index.js
+++ b/src/router/index.js
@ -6,11 +6,11 @@ import residentAnalysis from '@/views/residentAnalysis/index.vue'
 Vue.use(VueRouter)

 const routes = [
-  // {
-  //   path: '/',
-  //   name: 'home',
-  //   component: HomeView,
-  // },
+  {
+    path: '/home',
+    name: 'home',
+    component: HomeView,
+  },
  {
    path: '/',
    name: 'residentAnalysis',
--- a/src/views/home/home.vue
+++ b/src/views/home/home.vue
@ -2,11 +2,21 @@
  <div>
    <div class="home-header">
      <div class="home-header-left">
-        <img @click="drawStartPoint" src="@/assets/image/start.png" />
-        <img @click="drawEndPoint" src="@/assets/image/end.png" />
-        <img @click="drawViaPoint" src="@/assets/image/add.png" />
-        <img @click="drawAvoidPoint" src="@/assets/image/avoidP.png" />
-        <img @click="drawAvoidArea" src="@/assets/image/updown.png" />
+        <el-tooltip content="起点绘制">
+          <img @click="drawStartPoint" src="@/assets/image/start.png" />
+        </el-tooltip>
+        <el-tooltip content="终点绘制">
+          <img @click="drawEndPoint" src="@/assets/image/end.png" />
+        </el-tooltip>
+        <el-tooltip content="途径点绘制">
+          <img @click="drawViaPoint" src="@/assets/image/add.png" />
+        </el-tooltip>
+        <el-tooltip content="避让点绘制">
+          <img @click="drawAvoidPoint" src="@/assets/image/avoidP.png" />
+        </el-tooltip>
+        <el-tooltip content="避让区域绘制">
+          <img @click="drawAvoidArea" src="@/assets/image/updown.png" />
+        </el-tooltip>
        <div @click="clear" class="sure">清除</div>
        <div @click="calculateShortestPath" class="sure">确定</div>
        <div @click="hadBuffer" class="sure">路线隐蔽规划</div>
@ -36,14 +46,8 @@
      <div class="main-container">
        <div class="control-panel">
          <div class="title">参数</div>
-          <el-form
-            @submit.native.prevent="calculateShortestPath"
-            label-width="120px"
-            label-position="left"
-            size="mini"
-            :model="form"
-          >
-            <el-form-item label="起点">
+          <el-form @submit.native.prevent="calculateShortestPath" label-position="left" size="mini" :model="form">
+            <el-form-item label="起点：">
              <el-input
                v-model="form.startPoint"
                @blur="pointsChange('startPoint')"
@ -51,7 +55,7 @@
                clearable
              ></el-input>
            </el-form-item>
-            <el-form-item label="终点">
+            <el-form-item label="终点：">
              <el-input
                v-model="form.endPoint"
                @blur="pointsChange('endPoint')"
@ -59,7 +63,7 @@
                clearable
              ></el-input>
            </el-form-item>
-            <el-form-item label="途经点">
+            <el-form-item label="途经点：">
              <div v-for="(item, index) in form.viaPoints" :key="index">
                <el-input
                  v-model="item.points"
@ -70,7 +74,7 @@
                ></el-input>
              </div>
            </el-form-item>
-            <el-form-item label="避让点">
+            <el-form-item label="避让点：">
              <div v-for="(item, index) in form.avoidPoints" :key="index">
                <el-input
                  v-model="item.points"
@ -81,7 +85,7 @@
                ></el-input>
              </div>
            </el-form-item>
-            <el-form-item label="避让区域">
+            <el-form-item label="避让区域：">
              <div v-for="(item, index) in form.avoidAreas" :key="index">
                <el-input
                  v-model="item.points"
@ -98,11 +102,11 @@
        </div>
        <div class="control-panel">
          <div class="title">隐蔽添加</div>
-          <el-form label-width="120px" label-position="left" size="mini">
-            <el-form-item label="缓冲半径（m）">
+          <el-form label-position="left" size="mini">
+            <el-form-item label="缓冲半径(m)：">
              <el-input v-model="hideform.radius"></el-input>
            </el-form-item>
-            <el-form-item label="面积冗余（%）">
+            <el-form-item label="面积冗余(%)：">
              <el-input v-model="hideform.redundancy" placeholder=""></el-input>
            </el-form-item>
          </el-form>
@ -115,14 +119,14 @@
              <span>参与路线规划</span>
            </div>
          </div>
-          <el-form @submit.native.prevent="calculateShortestPath" label-width="120px" label-position="left" size="mini">
-            <el-form-item label="宽度">
+          <el-form @submit.native.prevent="calculateShortestPath" label-position="left" size="mini">
+            <el-form-item label="宽度(m)：">
              <el-input v-model="inputform.width"></el-input>
            </el-form-item>
-            <el-form-item label="载重（吨）">
+            <el-form-item label="载重(吨)：">
              <el-input v-model="inputform.load" placeholder=""></el-input>
            </el-form-item>
-            <el-form-item label="最小转弯半径">
+            <el-form-item label="最小转弯半径(m)：">
              <el-input v-model="inputform.minTurnRadius" placeholder=""></el-input>
            </el-form-item>
          </el-form>
@ -426,6 +430,7 @@ export default {
    }
  },
  async mounted() {
+    ;[...document.querySelectorAll('*')].forEach((n) => console.log(window.getComputedStyle(n).fontFamily))
    this.viewer = null
    await this.getMapOption()
    this.$nextTick(async () => {
@ -466,6 +471,9 @@ export default {
              pitch: -35,
            },
          },
+          defaultLabelStyle: {
+            font: '16px "DengXian",sans-serif',
+          },
          // basemaps: [
          //   {
          //     id: "image-tdss",
@ -1264,8 +1272,14 @@ export default {
          graphic?.remove()
          this.viaPoints = this.viaPoints.filter((viaPoint) => viaPoint.style.time !== row.time)
        } else {
-          const graphic = this.viaPoints.find((viaPoint) => viaPoint.style.time === row.time)
-          this.updatePointPosition(graphic, row.points)
+          if (this.viaPoints.length > 0) {
+            const graphic = this.viaPoints.find((viaPoint) => viaPoint.style.time === row.time)
+            this.updatePointPosition(graphic, row.points)
+          } else {
+            const time = new Date().getTime()
+            row.time = time
+            this.addPointToMap('viaPoints', row, time)
+          }
        }
      } else if (type === 'avoidPoints') {
        if (!row.points) {
@ -1279,8 +1293,14 @@ export default {
          graphic?.remove()
          this.avoidPoints = this.avoidPoints.filter((avoidPoint) => avoidPoint.style.time !== row.time)
        } else {
-          const graphic = this.avoidPoints.find((avoidPoint) => avoidPoint.style.time === row.time)
-          this.updatePointPosition(graphic, row.points)
+          if (this.avoidPoints.length > 0) {
+            const graphic = this.avoidPoints.find((avoidPoint) => avoidPoint.style.time === row.time)
+            this.updatePointPosition(graphic, row.points)
+          } else {
+            const time = new Date().getTime()
+            row.time = time
+            this.addPointToMap('avoidPoints', row, time)
+          }
        }
      } else if (type === 'avoidAreas') {
        if (!row.points) {
@ -1294,8 +1314,14 @@ export default {
          graphic?.remove()
          this.avoidAreas = this.avoidAreas.filter((avoidArea) => avoidArea.style.time !== row.time)
        } else {
-          const graphic = this.avoidAreas.find((avoidArea) => avoidArea.style.time === row.time)
-          this.updatePolygonPosition(graphic, row.points)
+          if (this.avoidAreas.length > 0) {
+            const graphic = this.avoidAreas.find((avoidArea) => avoidArea.style.time === row.time)
+            this.updatePolygonPosition(graphic, row.points)
+          } else {
+            const time = new Date().getTime()
+            row.time = time
+            this.addPolygonToMap('avoidAreas', row, time)
+          }
        }
      }
    },
--- a/src/views/residentAnalysis/index.vue
+++ b/src/views/residentAnalysis/index.vue
@ -5,19 +5,19 @@
        <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>
-        <div class="right">
-          <el-button class="form-btn" type="primary" size="mini" :disabled="showExport" @click="clickExport">
+        <div class="sure" @click="analyzeAverageSlope">确定</div>
+        <div class="right flex a-c">
+          <div class="sure" :style="!showExport ? {cursor: 'pointer'} : {cursor: 'not-allowed'}" @click="clickExport">
            导出
-          </el-button>
-          <el-button class="form-btn" type="primary" size="mini" @click="handleExportJosn"> json编辑 </el-button>
+          </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>
@ -68,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="数据加载中">
        <!-- 路点 -->
@ -149,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 v-else type="text" size="mini" @click="handleSave(row)">保存</el-button>
+                      <el-button type="text" size="mini" v-if="!row.editing" @click="handleEdit(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>
@ -192,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 v-else type="text" size="mini" @click="handleSave(row)">保存</el-button>
+                      <el-button type="text" size="mini" v-if="!row.editing" @click="handleEdit(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>
@ -237,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 v-else type="text" size="mini" @click="handleSave(row)">保存</el-button>
+                      <el-button type="text" size="mini" v-if="!row.editing" @click="handleEdit(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>
@ -280,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 v-else type="text" size="mini" @click="handleSave(row)">保存</el-button>
+                      <el-button type="text" size="mini" v-if="!row.editing" @click="handleEdit(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>
@ -293,7 +300,7 @@

        <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>

@ -318,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'

@ -685,19 +691,13 @@ export default {

    // 判断矩形与 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) {
@ -1256,6 +1256,8 @@ export default {

    // 点击导出按钮
    clickExport() {
+      if (this.showExport) return
+
      this.rectangles.forEach((rectGraphic) => {
        this.selectRectangle(rectGraphic)
      })
@ -1282,7 +1284,6 @@ export default {
                }
              )
              .then((res) => {
-                this.$message.success(res)
                this.$message.success('导出成功!')
              })
              .catch((error) => {
@ -1327,7 +1328,7 @@ export default {
            .then((response) => {
              this.jsonInfo = {
                path: response.data.path,
-                json: JSON.stringify(response.data.json, null, 2),
+                json: JSON.stringify(this.decodeEscapedJson(response.data.json), null, 2),
              }
              this.jsonLoading = false
            })
@ -1431,34 +1432,26 @@ export default {
 </script>

 <style scoped lang="scss">
-::v-deep .el-button--primary {
-  background-color: #176363;
+.sure {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  background: #176363;
  border-radius: 4px;
-  &:hover {
-    background-color: #176363;
-  }
-  &:active {
-    background-color: #176363;
-  }
-  &:focus {
-    background-color: #176363;
-  }
-}
-
-::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;
+  min-width: 14px;
+  padding: 0 10px;
+  height: 24px;
+  color: #ffffff;
+  font-weight: 400;
+  font-size: 14px;
+  margin-right: 10px;
+  cursor: pointer;
 }

 #page {
-  width: 100%;
+  width: 340px;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
@ -1473,15 +1466,12 @@ export default {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
-    cursor: pointer;
    margin-left: 32px;
    img {
-      margin-right: 10px;
+      margin-right: 30px;
+      cursor: pointer;
    }
  }
-  .form-btn {
-    margin-left: 20px;
-  }
  .btn {
    position: absolute;
    top: 50%;
@ -1504,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;
      }
    }

@ -1523,7 +1513,8 @@ export default {
      height: 24px;
      font-size: 14px;
      text-align: center;
-      padding: 3px 0;
+      margin-left: 20px;
+      cursor: pointer;
    }
  }

@ -1548,9 +1539,9 @@ export default {
 }
 .table-title {
  font-size: 16px;
-  font-weight: bold;
+  color: #1c1c1c;
  letter-spacing: 0.1em;
-  margin-bottom: 10px;
+  margin: 20px 0 10px 0;
  span {
    margin-right: 10px;
  }
--- a/vue.config.js
+++ b/vue.config.js
@ -21,25 +21,25 @@ module.exports = defineConfig({
    })

    /* 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',
-              },
-            ],
-          ],
-        },
-      },
-    })
+    //   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',
+    //             },
+    //           ],
+    //         ],
+    //       },
+    //     },
+    //   })
  },

  css: {
Author	SHA1	Message	Date
yiqiuyang	faae591f4c	修改代码样式	2025-10-27 11:06:03 +08:00
yiqiuyang	da4b440b0e	1	2025-10-27 10:35:37 +08:00
yiqiuyang	d8bf6fd1b5	修改样式	2025-10-27 10:33:48 +08:00
yiqiuyang	ffe45a240d	合并代码	2025-10-27 09:54:17 +08:00
yiqiuyang	0ed458cb08	Merge branch 'pathPlan' of https://git.rangutech.com/yiqiuyang/kxfx into yqy	2025-10-27 09:50:49 +08:00
gcw_IJ7DAiVL	a562e2cea8	add 样式	2025-10-27 09:46:51 +08:00
gcw_IJ7DAiVL	af252cd65e	fix	2025-10-24 09:02:28 +08:00