From d751a1897ac7e4b86a26481444eb4ab9ed9ef80c Mon Sep 17 00:00:00 2001
From: oldHome <szdot@qq.com>
Date: Sun, 1 Jun 2025 02:39:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=A6=81=E9=A3=9E=E5=8C=BA?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=20=E8=AE=BE=E7=BD=AE=E7=A6=81=E9=A3=9E?=
 =?UTF-8?q?=E5=8C=BA=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |  44 ++++
 .../layout/components/main/nofly/add.vue      | 218 ++++++++++++++++++
 .../layout/components/main/nofly/index.vue    | 125 ++++++++++
 3 files changed, 387 insertions(+)
 create mode 100644 src/views/layout/components/main/nofly/add.vue
 create mode 100644 src/views/layout/components/main/nofly/index.vue

diff --git a/src/router/index.js b/src/router/index.js
index 130429d..8945643 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -102,6 +102,50 @@ const routes = [
       }
     ]
   },
+  {
+    path: '/nofly',
+    component: Layout,
+    redirect: '/nofly/index',
+    meta: {
+      title: '禁飞区',
+      icon: 'iconfont icon-feihangluxian',
+      roles: ['admin', 'editor'],
+      tapName: 'plane'
+    },
+    children: [
+      {
+        path: '/nofly/index',
+        component: () => import('@/views/layout/components/main/route/index'),
+        meta: {
+          title: '禁飞区列表',
+          icon: 'iconfont icon-a-05-1-1jihuazhihanggenzong',
+          roles: ['admin', 'editor'],
+          tapName: 'plane'
+        }
+      },
+      {
+        path: '/nofly/add',
+        component: () => import('@/views/layout/components/main/route/add'),
+        meta: {
+          title: '设置禁飞区',
+          icon: 'iconfont icon-huizhi',
+          roles: ['admin', 'editor'],
+          tapName: 'plane'
+        }
+      },
+      {
+        path: '/nofly/edit/:id',
+        component: () => import('@/views/layout/components/main/route/add'),
+        meta: {
+          title: '编辑禁飞区',
+          icon: 'iconfont icon-huizhi',
+          roles: ['admin', 'editor'],
+          tapName: 'plane',
+          hidden: true
+        }
+      }
+    ]
+  },
   {
     path: '/route',
     component: Layout,
diff --git a/src/views/layout/components/main/nofly/add.vue b/src/views/layout/components/main/nofly/add.vue
new file mode 100644
index 0000000..67e4f01
--- /dev/null
+++ b/src/views/layout/components/main/nofly/add.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="h-100">
+    <map-box ref="mapbox">
+      <template #content>
+        <el-row class="w-40 m-t-20 m-l-20" style="position: absolute;">
+          <el-col :span="24">
+            <el-container>
+              <el-header height="42px" class="l-h-42 p-l-10 p-r-10 border border-b-n">
+                <div class="l">
+                  <i v-if="pageState === 'add'" class="el-icon-plus f-s-20"></i>
+                  <i v-else class="el-icon-edit f-s-20"></i>
+                  <font class="m-l-10 f-s-18 fb">{{ $route.meta.title }}</font>
+                </div>
+              </el-header>
+              <el-main class="border p-20 mainBox bg-white">
+                <el-form ref="form" :model="form" label-width="120px">
+                  <el-form-item v-if="pageState === 'add'" label="所属商铺">
+                    <SelectionShopId v-model="form.shop_id" />
+                  </el-form-item>
+                  <el-form-item label="航线标题">
+                    <el-input v-model="form.name" placeholder="航线标题" />
+                  </el-form-item>
+                  <el-form-item label="航线文件上传">
+                    <el-upload class="upload-demo" drag name="file" :action="action" :headers="myheader"
+                      :on-success="handleUpSuccess" :on-exceed="handleExceed" :on-error="handleUpErr"
+                      :on-remove="handleRemove" :limit="1" :file-list="fileList" :before-upload="beforeAvatarUpload">
+                      <i class="el-icon-upload"></i>
+                      <div class="el-upload__text"><em>点击上传</em></div>
+                    </el-upload>
+                  </el-form-item>
+                  <el-form-item label="航线描述">
+                    <el-input v-model="form.desc" type="textarea" placeholder="非必填" />
+                  </el-form-item>
+                  <el-form-item v-if="pageState == 'add' ? true : false">
+                    <el-button type="primary" icon="el-icon-plus" @click="addRoute">创建</el-button>
+                  </el-form-item>
+                  <el-form-item v-else>
+                    <el-button type="primary" icon="el-icon-edit" @click="saveRoute">更新</el-button>
+                  </el-form-item>
+                </el-form>
+              </el-main>
+            </el-container>
+          </el-col>
+        </el-row>
+      </template>
+    </map-box>
+  </div>
+</template>
+
+<script>
+import MapBox from '@/components/MapBox'
+import SelectionShopId from '@/components/SelectionShopId'
+
+export default {
+  name: 'RouteAdd',
+  data () {
+    return {
+      action: this.$store.state.settings.baseURL + this.$store.state.settings.apiPlanePath + 'upTxtFile',
+      myheader: { token: this.$store.state.user.token },
+      form: {
+        shop_id: '',
+        name: '',
+        desc: '',
+        upFile: '',
+        route_data: ''
+      },
+      routeId: this.$route.params.id,
+      fileList: [],
+      pageState: 'add', // 页面状态
+      route: null
+    }
+  },
+  components: {
+    MapBox,
+    SelectionShopId
+  },
+  computed: {
+    /**
+     * @description: 获取航线列表
+     */
+    routeList () {
+      return this.$store.state.routeList
+    }
+  },
+  methods: {
+    /* 文件上传表单 */
+    handleExceed () {
+      this.$message.warning('需先删除之前上传文件')
+    },
+    handleRemove () {
+      this.form.upFile = ''
+    },
+    handleUpSuccess (res) {
+      this.$refs.mapbox.makeRoute(res.content)// 绘出航线
+      if (res.status === 0) {
+        this.fileList = []
+        this.$message.error(res.msg)
+      } else {
+        this.form.upFile = res.data
+        this.$message.success(res.msg)
+      }
+    },
+    handleUpErr () {
+      this.$message.error('接口访问失败')
+    },
+    beforeAvatarUpload (file) {
+      const isTxt = file.type === 'text/plain' || file.type === 'application/json'
+      if (!isTxt) {
+        this.$message.error('航点文件仅支持txt或json格式!')
+      }
+      return isTxt
+    },
+    /* ED 文件上传表单 */
+    // 设置表单
+    setForm (data) {
+      if (data.desc == null) {
+        data.desc = ''
+      }
+      this.form.shop_id = data.shop_id
+      this.form.name = data.name
+      this.form.upFile = data.upFile
+      this.form.desc = data.desc
+      this.form.route_data = data.route_data
+      if (Object.keys(data).length === 0) {
+        this.$message.warning('清空表单')
+      }
+    },
+    // 初始化页面 添加or编辑
+    initPage () {
+      if (this.routeId === undefined) {
+        this.pageState = 'add'
+      } else {
+        this.pageState = 'edit'
+        this.route = this.routeList.find((item) => item.id === this.routeId)
+        if (this.route) {
+          const data = {
+            shop_id: this.route.shop_id,
+            name: this.route.name,
+            route_data: this.route.route_data,
+            upFile: ''
+          }
+          this.setForm(data)
+          setTimeout(() => {
+            this.$refs.mapbox.makeRoute(JSON.parse(this.route.route_data))// 更新页面 绘出航线 初始化
+          }, 0)
+        }
+      }
+    },
+    /**
+     * @description: 创建新站点
+     */
+    async addRoute () {
+      const res = await this.$store.dispatch('fetchAddRoute', this.form)
+      if (res.data.status === 1) {
+        this.$router.push('/route/index')
+      }
+    },
+    /**
+     * @description: 更新站点
+     */
+    async saveRoute () {
+      this.form.id = this.routeId
+      const res = await this.$store.dispatch('fetchSaveRoute', this.form)
+      if (res.data.status === 1) {
+        this.$router.push('/route/index')
+      }
+    }
+  },
+  watch: {
+    routeList () {
+      this.initPage()// 初始化页面
+    }
+  },
+  created () {
+    if (this.routeList.length > 0) {
+      this.initPage()// 初始化页面
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.line {
+  text-align: center;
+}
+
+.el-header,
+.el-main {
+  z-index: 1001;
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
diff --git a/src/views/layout/components/main/nofly/index.vue b/src/views/layout/components/main/nofly/index.vue
new file mode 100644
index 0000000..f7eb553
--- /dev/null
+++ b/src/views/layout/components/main/nofly/index.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="app-container">
+    <!-- 组合按钮 -->
+    <el-button-group>
+      <el-button type="primary" icon="el-icon-plus" @click="$router.replace('/route/add')">添加</el-button>
+      <el-button type="danger" icon="el-icon-delete" @click="deleteRoute(countSelIdArr($refs.myTable.selection))">删除
+      </el-button>
+      <el-button type="warning" icon="el-icon-edit" @click="toEditPage()">编辑</el-button>
+    </el-button-group>
+    <!-- 用户select选项 -->
+    <el-button-group class="m-l-20">
+      <SelectionShopId v-model="form.shop_id" :allSel="true" />
+    </el-button-group>
+    <!-- 航线表格 -->
+    <el-table class="m-t-20 w-100" ref="myTable"
+      :data="routeListArr.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border tooltip-effect="dark">
+      <el-table-column align="center" type="selection" width="40">
+      </el-table-column>
+      <el-table-column align="center" prop="id" label="id" width="50">
+      </el-table-column>
+      <el-table-column prop="name" label="任务标题" width="150" min-width="150">
+      </el-table-column>
+      <el-table-column prop="route_data" label="航线" min-width="150" show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column prop="controler" label="操作" width="150" min-width="150">
+        <template slot-scope="scope">
+          <el-button-group>
+            <el-button type="danger" icon="el-icon-delete" @click="deleteRoute([scope.row.id])">删除</el-button>
+          </el-button-group>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <el-pagination class="m-t-20" layout="prev, pager, next" :current-page.sync="currentPage" :page-size="pageSize"
+      :total="routeListArr.length">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { countSelIdArr } from '@/utils'
+import SelectionShopId from '@/components/SelectionShopId'
+
+export default {
+  name: 'Route',
+  data () {
+    return {
+      pageSize: 8, // 每页显示记录条数
+      currentPage: 1, // 当前页
+      form: {
+        shop_id: ''
+      }
+    }
+  },
+  components: {
+    SelectionShopId
+  },
+  computed: {
+    /**
+     * @description: 获取航线列表
+     */
+    routeList () {
+      return this.$store.state.routeList
+    },
+    /**
+     * @description: 过滤掉 不对应客户的 航线列表
+     * @return: 航线列表
+     */
+    routeListArr () {
+      if (this.form.shop_id !== '') {
+        return this.routeList.filter((item) => item.shop_id === this.form.shop_id)
+      } else {
+        return this.routeList
+      }
+    }
+  },
+  methods: {
+    countSelIdArr,
+    /**
+     * @description: 跳转到编辑页面
+     */
+    toEditPage () {
+      const selId = this.countSelIdArr(this.$refs.myTable.selection)
+      switch (selId.length) {
+        case 0:
+          this.$message.error('请选择一条需要编辑的记录')
+          break
+        case 1:
+          this.$router.push('/route/edit/' + selId['0'])
+          break
+        default:
+          this.$message.error('只能选择一条记录')
+      }
+    },
+    /**
+     * @description: 删除航线
+     */
+    deleteRoute (idArr) {
+      this.$store.dispatch('fetchDelRoute', idArr)
+    }
+  },
+  watch: {
+  },
+  created () {
+  },
+  filters: {
+    countSelIdArr
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/theme.scss";
+
+.el-tag {
+  i {
+    vertical-align: middle
+  }
+}
+
+.image-placeholder {
+  position: relative;
+  display: inline-block;
+}
+</style>