add 导出

package.json

@@ -13,6 +13,7 @@
     "core-js": "^3.8.3",
     "echarts": "^5.4.3",
     "element-ui": "2.9.2",
+    "file-saver": "^2.0.5",
     "gsap": "^3.13.0",
     "ini-parser": "^0.0.2",
     "js-cookie": "2.2.1",

src/views/home/home.vue

@@ -1,15 +1,17 @@
 <template>
   <div>
     <div class="home-header">
-      <img @click="drawStartPoint" src="@/assets/image/start.png" />
+      <div class="home-header-left">
-      <img @click="drawEndPoint" src="@/assets/image/end.png" />
+        <img @click="drawStartPoint" src="@/assets/image/start.png" />
-      <img @click="drawViaPoint" src="@/assets/image/add.png" />
+        <img @click="drawEndPoint" src="@/assets/image/end.png" />
-      <img @click="drawAvoidPoint" src="@/assets/image/avoidP.png" />
+        <img @click="drawViaPoint" src="@/assets/image/add.png" />
-      <img @click="drawAvoidArea" src="@/assets/image/updown.png" />
+        <img @click="drawAvoidPoint" src="@/assets/image/avoidP.png" />
-      <div @click="clear" class="sure">清除</div>
+        <img @click="drawAvoidArea" src="@/assets/image/updown.png" />
-      <div @click="calculateShortestPath" class="sure">确定</div>
+        <div @click="clear" class="sure">清除</div>
-      <div @click="hadBuffer" class="sure">路线隐蔽规划</div>
+        <div @click="calculateShortestPath" class="sure">确定</div>
-      <div @click="pointBuffer" class="sure">点隐蔽规划</div>
+        <div @click="hadBuffer" class="sure">路线隐蔽规划</div>
+        <div @click="pointBuffer" class="sure">点隐蔽规划</div>
+      </div>
       <!-- <div class="control-panel">
         <button @click="drawStartPoint">绘制起点</button>
         <button @click="drawEndPoint">绘制终点</button>
@@ -19,6 +21,9 @@
         <button @click="calculateShortestPath">计算最短路径</button>
         <button @click="clear">清除所有</button>
       </div> -->
+      <div class="home-header-right">
+        <div @click="handleExport" class="sure">导出</div>
+      </div>
     </div>
     <div class="home">
       <div class="main-container">
@@ -180,6 +185,7 @@
           </vxe-table>
         </div>
       </div>
+      <!-- 数据选择 / 车辆选择 -->
       <el-dialog :visible.sync="dialogVisible" title="车辆选择" width="800px">
         <div style="margin-bottom: 10px;">
           <el-button type="primary" size="mini" @click="handleAdd">新增</el-button>
@@ -240,6 +246,111 @@
           <el-button type="primary" size="mini" @click="suerCofirm">保存</el-button>
         </div>
       </el-dialog>
+      <!-- 右侧数据导出 -->
+      <el-dialog :visible.sync="dialogExportVisible" title="导出" width="800px">
+        <div style="margin-bottom: 10px;">
+          <el-button type="primary" size="mini" @click="handleRouteAdd">新增</el-button>
+        </div>
+        <vxe-table
+          height="300px"
+          ref="routeTable"
+          :data="routeData"
+          :row-config="{isCurrent: true, isHover: true, keyField: 'id'}"
+          @close="closeExport"
+          align="center"
+        >
+          <vxe-column field="编码" title="编码" width="100">
+            <template v-slot="{ row }">
+              <el-input v-if="row.editing" v-model="row.编码" size="mini"></el-input>
+              <span v-else>{{ row.编码 }}</span>
+            </template>
+          </vxe-column>
+          <vxe-column field="名称" title="名称">
+            <template v-slot="{ row }">
+              <el-input v-if="row.editing" v-model="row.名称" size="mini"></el-input>
+              <span v-else>{{ row.名称 }}</span>
+            </template>
+          </vxe-column>
+          <vxe-column field="宽度" title="宽度">
+            <template v-slot="{ row }">
+              <el-input v-if="row.editing" v-model="row.宽度" size="mini"></el-input>
+              <span v-else>{{ row.宽度 }}</span>
+            </template>
+          </vxe-column>
+          <vxe-column field="曲率半" title="曲率半">
+            <template v-slot="{ row }">
+              <el-input v-if="row.editing" v-model="row.曲率半" size="mini"></el-input>
+              <span v-else>{{ row.曲率半 }}</span>
+            </template>
+          </vxe-column>
+          <vxe-column field="载重吨" title="载重吨">
+            <template v-slot="{ row }">
+              <el-input v-if="row.editing" v-model="row.载重吨" size="mini"></el-input>
+              <span v-else>{{ row.载重吨 }}</span>
+            </template>
+          </vxe-column>
+          <vxe-column field="水深" title="水深">
+            <template v-slot="{ row }">
+              <el-input v-if="row.editing" v-model="row.水深" size="mini"></el-input>
+              <span v-else>{{ row.水深 }}</span>
+            </template>
+          </vxe-column>
+          <vxe-column field="净空高" title="净空高">
+            <template v-slot="{ row }">
+              <el-input v-if="row.editing" v-model="row.净空高" size="mini"></el-input>
+              <span v-else>{{ row.净空高 }}</span>
+            </template>
+          </vxe-column>
+          <vxe-column title="操作" width="100">
+            <template v-slot="{ row }">
+              <el-button v-if="!row.editing" type="text" size="mini" @click="handleRouteEdit(row)">编辑</el-button>
+              <el-button v-else type="text" size="mini" @click="handleRouteSave(row)">保存</el-button>
+              <el-button type="text" size="mini" @click="handleRouteDelete(row)">删除</el-button>
+            </template>
+          </vxe-column>
+        </vxe-table>
+        <div style="margin: 10px 0;">
+          <el-button type="primary" size="mini" @click="handleHideAdd">新增</el-button>
+        </div>
+        <vxe-table
+          height="300px"
+          ref="hideTable"
+          :data="hideData"
+          :row-config="{isCurrent: true, isHover: true, keyField: 'id'}"
+          @close="closeSelection"
+          align="center"
+        >
+          <vxe-column field="FID_1" title="厂房id">
+            <template v-slot="{ row }">
+              <el-input v-if="row.editing" v-model="row.FID_1" size="mini"></el-input>
+              <span v-else>{{ row.FID_1 }}</span>
+            </template>
+          </vxe-column>
+          <vxe-column field="area" title="面积">
+            <template v-slot="{ row }">
+              <el-input v-if="row.editing" v-model="row.area" size="mini"></el-input>
+              <span v-else>{{ row.area }}</span>
+            </template>
+          </vxe-column>
+          <vxe-column field="vehiclesNum" title="车辆">
+            <template v-slot="{ row }">
+              <el-input v-if="row.editing" v-model="row.vehiclesNum" size="mini"></el-input>
+              <span v-else>{{ row.vehiclesNum }}</span>
+            </template>
+          </vxe-column>
+          <vxe-column title="操作">
+            <template v-slot="{ row }">
+              <el-button v-if="!row.editing" type="text" size="mini" @click="handleHideEdit(row)">编辑</el-button>
+              <el-button v-else type="text" size="mini" @click="handleHideSave(row)">保存</el-button>
+              <el-button type="text" size="mini" @click="handleHideDelete(row)">删除</el-button>
+            </template>
+          </vxe-column>
+        </vxe-table>
+        <div slot="footer" class="dialog-footer">
+          <el-button size="mini" @click="closeExport">取消</el-button>
+          <el-button type="primary" size="mini" @click="confirmExport">导出</el-button>
+        </div>
+      </el-dialog>
     </div>
   </div>
 </template>
@@ -249,6 +360,7 @@ import Cookies from 'js-cookie'
 import axios from 'axios'
 import iniParser from 'ini-parser'
 import configIni from '/config.ini';
+import { saveAs } from 'file-saver';
 
 export default {
   data() {
@@ -294,6 +406,9 @@ export default {
       factoriesWithVehicles: [], // 塞入车的厂房集合
       accordFactoryLayer: null, // 隐蔽规划
       accordPoint: null, // 隐蔽规划点
+      dialogExportVisible: false,
+      routeData: [],
+      hideData: [],
     }
   },
   async mounted() {
@@ -2274,6 +2389,104 @@ export default {
       
       return [tip, left, right, tip] // 闭合三角形
     },
+    /** 右侧表单导出 */
+    handleExport() {
+      const hideData = []
+      if (this.factoriesWithVehicles.length > 0) {
+        this.factoriesWithVehicles.forEach((item) => [
+          hideData.push({
+            FID_1: item.options.style.properties.FID_1,
+            vehiclesNum: (item.vehicles.map(e => e.name)).join(','),
+            area: item.area.toFixed(2)
+          })
+        ])
+      }
+      this.hideData = JSON.parse(JSON.stringify(hideData))
+      const routeData = []
+      if (this.infoList.length > 0) {
+        this.infoList.forEach((item) => [
+          routeData.push({
+            编码: item.编码,
+            名称: item.名称,
+            宽度: item.宽度,
+            曲率半: item.曲率半,
+            载重吨: item.载重吨,
+            水深: item.水深,
+            净空高: item.净空高,
+          })
+        ])
+      }
+      this.routeData = JSON.parse(JSON.stringify(routeData))
+      this.dialogExportVisible = true
+    },
+    /** 增删改查 */
+    handleRouteAdd() {
+      const newRow = {
+        编码: null,
+        名称: null,
+        宽度: null,
+        曲率半: null,
+        载重吨: null,
+        水深: null,
+        净空高: null,
+        editing: true,
+      };
+      this.routeData.push(newRow);
+    },
+    handleRouteDelete(row) {
+      const index = this.routeData.findIndex(item => item.id === row.id);
+      if (index !== -1) {
+        this.routeData.splice(index, 1);
+      }
+    },
+    handleRouteEdit(row) {
+      this.$set(row, 'editing', true);
+    },
+    handleRouteSave(row) {
+      this.$set(row, 'editing', false);
+    },
+    handleHideAdd() {
+      const newRow = {
+        id: this.hideData.length + 1,
+        FID_1: '',
+        vehiclesNum: '',
+        area: '',
+        editing: true,
+      };
+      this.hideData.push(newRow);
+    },
+    handleHideDelete(row) {
+      const index = this.hideData.findIndex(item => item.id === row.id);
+      if (index !== -1) {
+        this.hideData.splice(index, 1);
+      }
+    },
+    handleHideEdit(row) {
+      this.$set(row, 'editing', true);
+    },
+    handleHideSave(row) {
+      this.$set(row, 'editing', false);
+    },
+    closeExport() {
+      this.dialogExportVisible = false
+    },
+    confirmExport() {
+      this.hideData = this.hideData.map(item => {
+        const { editing, ...rest } = item; // 解构赋值，移除 age 键
+        return rest;
+      });
+      this.routeData = this.routeData.map(item => {
+        const { editing, ...rest } = item; // 解构赋值，移除 age 键
+        return rest;
+      });
+      const info = JSON.stringify({
+        hideData: this.hideData,
+        routeData: this.routeData,
+      }, null, 2)
+      const blob = new Blob([info], { type: 'application/json;charset=utf-8' })
+      saveAs(blob, '机动路线规划.json')
+      this.closeExport()
+    },
   },
 }
 </script>
@@ -2284,10 +2497,16 @@ export default {
   line-height: 60px;
   display: flex;
   align-items: center;
-  padding-left: 34px;
+  justify-content: space-between;
+  padding: 0 34px;
   box-sizing: border-box;
   background: #abc6bc;
 }
+.home-header-left {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
 .home-header img {
   height: 24px;
   width: 24px;
@@ -2406,4 +2625,10 @@ export default {
 }
 .popDiloag .popDiloag-p {
 }
+::v-deep .el-dialog__body{
+  padding: 0px 20px!important;
+}
+::v-deep .el-dialog {
+  margin-top: 6vh !important;
+}
 </style>