1.改变设置禁飞区的目录结构 删掉列表页 add页改为set页 2.更改路由无 设置进飞机无子项
3.设置禁飞区样式 颜色 红色 4.添加设置按钮 保存按钮及其回调 删除按钮
This commit is contained in:
parent
90c15e81d4
commit
57ee5a54b4
117
package-lock.json
generated
117
package-lock.json
generated
@ -1,18 +1,19 @@
|
||||
{
|
||||
"name": "food",
|
||||
"version": "0.1.0",
|
||||
"version": "1.1.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "food",
|
||||
"version": "0.1.0",
|
||||
"version": "1.1.0",
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^2.6.11",
|
||||
"vuex": "^3.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@mapbox/mapbox-gl-draw": "^1.5.0",
|
||||
"@vue/cli-plugin-babel": "~4.4.0",
|
||||
"@vue/cli-plugin-eslint": "~4.4.0",
|
||||
"@vue/cli-plugin-router": "~4.4.0",
|
||||
@ -1932,6 +1933,24 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@mapbox/geojson-area": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/geojson-area/-/geojson-area-0.2.2.tgz",
|
||||
"integrity": "sha512-bBqqFn1kIbLBfn7Yq1PzzwVkPYQr9lVUeT8Dhd0NL5n76PBuXzOcuLV7GOSbEB1ia8qWxH4COCvFpziEu/yReA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"wgs84": "0.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@mapbox/geojson-normalize": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/geojson-normalize/-/geojson-normalize-0.0.1.tgz",
|
||||
"integrity": "sha512-82V7YHcle8lhgIGqEWwtXYN5cy0QM/OHq3ypGhQTbvHR57DF0vMHMjjVSQKFfVXBe/yWCBZTyOuzvK7DFFnx5Q==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"geojson-normalize": "geojson-normalize"
|
||||
}
|
||||
},
|
||||
"node_modules/@mapbox/geojson-rewind": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmmirror.com/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
|
||||
@ -1963,6 +1982,46 @@
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@mapbox/mapbox-gl-draw": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-draw/-/mapbox-gl-draw-1.5.0.tgz",
|
||||
"integrity": "sha512-uchQbTa8wiv6GWWTbxW1g5b8H6VySz4t91SmduNH6jjWinPze7cjcmsPUEzhySXsYpYr2/50gRJLZz3bx7O88A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@mapbox/geojson-area": "^0.2.2",
|
||||
"@mapbox/geojson-normalize": "^0.0.1",
|
||||
"@mapbox/point-geometry": "^1.1.0",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"nanoid": "^5.0.9"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.0.0 || >=20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@mapbox/mapbox-gl-draw/node_modules/@mapbox/point-geometry": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-1.1.0.tgz",
|
||||
"integrity": "sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@mapbox/mapbox-gl-draw/node_modules/nanoid": {
|
||||
"version": "5.1.5",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
|
||||
"integrity": "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"bin": {
|
||||
"nanoid": "bin/nanoid.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18 || >=20"
|
||||
}
|
||||
},
|
||||
"node_modules/@mapbox/mapbox-gl-supported": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
|
||||
@ -17064,6 +17123,12 @@
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/wgs84": {
|
||||
"version": "0.0.0",
|
||||
"resolved": "https://registry.npmjs.org/wgs84/-/wgs84-0.0.0.tgz",
|
||||
"integrity": "sha512-ANHlY4Rb5kHw40D0NJ6moaVfOCMrp9Gpd1R/AIQYg2ko4/jzcJ+TVXYYF6kXJqQwITvEZP4yEthjM7U6rYlljQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
|
||||
@ -18732,6 +18797,21 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
}
|
||||
},
|
||||
"@mapbox/geojson-area": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/geojson-area/-/geojson-area-0.2.2.tgz",
|
||||
"integrity": "sha512-bBqqFn1kIbLBfn7Yq1PzzwVkPYQr9lVUeT8Dhd0NL5n76PBuXzOcuLV7GOSbEB1ia8qWxH4COCvFpziEu/yReA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"wgs84": "0.0.0"
|
||||
}
|
||||
},
|
||||
"@mapbox/geojson-normalize": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/geojson-normalize/-/geojson-normalize-0.0.1.tgz",
|
||||
"integrity": "sha512-82V7YHcle8lhgIGqEWwtXYN5cy0QM/OHq3ypGhQTbvHR57DF0vMHMjjVSQKFfVXBe/yWCBZTyOuzvK7DFFnx5Q==",
|
||||
"dev": true
|
||||
},
|
||||
"@mapbox/geojson-rewind": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmmirror.com/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
|
||||
@ -18756,6 +18836,33 @@
|
||||
"integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@mapbox/mapbox-gl-draw": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-draw/-/mapbox-gl-draw-1.5.0.tgz",
|
||||
"integrity": "sha512-uchQbTa8wiv6GWWTbxW1g5b8H6VySz4t91SmduNH6jjWinPze7cjcmsPUEzhySXsYpYr2/50gRJLZz3bx7O88A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@mapbox/geojson-area": "^0.2.2",
|
||||
"@mapbox/geojson-normalize": "^0.0.1",
|
||||
"@mapbox/point-geometry": "^1.1.0",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"nanoid": "^5.0.9"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mapbox/point-geometry": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-1.1.0.tgz",
|
||||
"integrity": "sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ==",
|
||||
"dev": true
|
||||
},
|
||||
"nanoid": {
|
||||
"version": "5.1.5",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
|
||||
"integrity": "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"@mapbox/mapbox-gl-supported": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
|
||||
@ -30851,6 +30958,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"wgs84": {
|
||||
"version": "0.0.0",
|
||||
"resolved": "https://registry.npmjs.org/wgs84/-/wgs84-0.0.0.tgz",
|
||||
"integrity": "sha512-ANHlY4Rb5kHw40D0NJ6moaVfOCMrp9Gpd1R/AIQYg2ko4/jzcJ+TVXYYF6kXJqQwITvEZP4yEthjM7U6rYlljQ==",
|
||||
"dev": true
|
||||
},
|
||||
"which": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"vuex": "^3.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@mapbox/mapbox-gl-draw": "^1.5.0",
|
||||
"@vue/cli-plugin-babel": "~4.4.0",
|
||||
"@vue/cli-plugin-eslint": "~4.4.0",
|
||||
"@vue/cli-plugin-router": "~4.4.0",
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
<script>
|
||||
import mapboxgl from 'mapbox-gl'
|
||||
import { MapboxStyleSwitcherControl, FollowControl, CustomFullscreenControl } from '@/utils/mapboxgl_plugs'
|
||||
import { MapboxStyleSwitcherControl, FollowControl, CustomFullscreenControl, NoFlyControl } from '@/utils/mapboxgl_plugs'
|
||||
import planeIcon from '@/assets/svg/plane.svg'
|
||||
|
||||
export default {
|
||||
@ -159,6 +159,10 @@ export default {
|
||||
enblueScale: { // 开启 地图 距离比例 组件
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
enableNofly: { // 禁飞区 设置 组件
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -315,6 +319,41 @@ export default {
|
||||
}
|
||||
}), 'top-right')
|
||||
}
|
||||
|
||||
// 禁飞区 设置组件
|
||||
if (this.enableNofly) {
|
||||
const defaultPolygons = [
|
||||
[
|
||||
[113.0, 23.0],
|
||||
[113.1, 23.0],
|
||||
[113.1, 23.1],
|
||||
[113.0, 23.1],
|
||||
[113.0, 23.0]
|
||||
],
|
||||
[
|
||||
[113.2, 23.2],
|
||||
[113.3, 23.2],
|
||||
[113.3, 23.3],
|
||||
[113.2, 23.3],
|
||||
[113.2, 23.2]
|
||||
],
|
||||
[
|
||||
[113.2, 24.2],
|
||||
[113.5, 23.1],
|
||||
[113.5, 23.2],
|
||||
[113.3, 23.2],
|
||||
[113.3, 23.3],
|
||||
[113.2, 23.3],
|
||||
[113.4, 23.2]
|
||||
]
|
||||
]
|
||||
this.map.addControl(new NoFlyControl({
|
||||
defaultPolygons,
|
||||
onSave: (polygons) => {
|
||||
console.log('polygons', polygons)
|
||||
}
|
||||
}), 'top-left')
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description: 清除地图上的航线
|
||||
@ -745,4 +784,5 @@ export default {
|
||||
background-size: cover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -105,44 +105,23 @@ const routes = [
|
||||
{
|
||||
path: '/nofly',
|
||||
component: Layout,
|
||||
redirect: '/nofly/index',
|
||||
redirect: '/nofly/set',
|
||||
meta: {
|
||||
title: '禁飞区',
|
||||
title: '设置禁飞区',
|
||||
icon: 'iconfont icon-feihangluxian',
|
||||
roles: ['admin', 'editor'],
|
||||
tapName: 'plane'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '/nofly/index',
|
||||
component: () => import('@/views/layout/components/main/route/index'),
|
||||
path: '/nofly/set',
|
||||
component: () => import('@/views/layout/components/main/route/set'),
|
||||
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
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import mapboxgl from 'mapbox-gl'
|
||||
import MapboxDraw from '@mapbox/mapbox-gl-draw'
|
||||
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
|
||||
|
||||
/**
|
||||
* 自定义地图样式切换控件
|
||||
@ -213,3 +215,156 @@ export class CustomFullscreenControl extends mapboxgl.FullscreenControl {
|
||||
this.handleResize() // 调用自定义的 handleResize 方法
|
||||
}
|
||||
}
|
||||
|
||||
// 禁飞区控件
|
||||
export class NoFlyControl {
|
||||
constructor (options = {}) {
|
||||
this._map = null
|
||||
this._container = null
|
||||
this._draw = null
|
||||
this._onDrawFinish = options.onDrawFinish || function () {}
|
||||
this._defaultPolygons = options.defaultPolygons || []
|
||||
this._onSave = options.onSave || function () {}
|
||||
}
|
||||
|
||||
onAdd (map) {
|
||||
this._map = map
|
||||
|
||||
// 创建按钮容器
|
||||
this._container = document.createElement('div')
|
||||
this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group'
|
||||
|
||||
// 绘制按钮
|
||||
const drawButton = document.createElement('button')
|
||||
drawButton.className = 'mapboxgl-ctrl-icon'
|
||||
drawButton.type = 'button'
|
||||
drawButton.innerHTML = '✏️'
|
||||
drawButton.title = '绘制禁飞区'
|
||||
drawButton.onclick = () => this._enableDraw()
|
||||
this._container.appendChild(drawButton)
|
||||
|
||||
// 保存按钮（磁盘图标）
|
||||
const saveButton = document.createElement('button')
|
||||
saveButton.className = 'mapboxgl-ctrl-icon'
|
||||
saveButton.type = 'button'
|
||||
saveButton.innerHTML = '💾'
|
||||
saveButton.title = '保存禁飞区'
|
||||
saveButton.onclick = () => this._savePolygons()
|
||||
this._container.appendChild(saveButton)
|
||||
|
||||
// 删除按钮（仅删除选中的图形）
|
||||
const deleteButton = document.createElement('button')
|
||||
deleteButton.className = 'mapboxgl-ctrl-icon'
|
||||
deleteButton.type = 'button'
|
||||
deleteButton.innerHTML = '🗑️'
|
||||
deleteButton.title = '删除选中图形'
|
||||
deleteButton.onclick = () => this._deleteSelected()
|
||||
this._container.appendChild(deleteButton)
|
||||
|
||||
// 初始化 Draw 控件
|
||||
this._draw = new MapboxDraw({
|
||||
displayControlsDefault: false,
|
||||
styles: [
|
||||
{
|
||||
id: 'gl-draw-polygon-fill',
|
||||
type: 'fill',
|
||||
filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
|
||||
paint: {
|
||||
'fill-color': '#ff0000',
|
||||
'fill-opacity': 0.3
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'gl-draw-polygon-stroke-active',
|
||||
type: 'line',
|
||||
filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
|
||||
paint: {
|
||||
'line-color': '#ff0000',
|
||||
'line-width': 2
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'gl-draw-polygon-and-line-vertex-halo-active',
|
||||
type: 'circle',
|
||||
filter: ['all', ['==', 'meta', 'vertex'], ['==', '$type', 'Point']],
|
||||
paint: {
|
||||
'circle-radius': 7,
|
||||
'circle-color': '#FFF'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'gl-draw-polygon-and-line-vertex-active',
|
||||
type: 'circle',
|
||||
filter: ['all', ['==', 'meta', 'vertex'], ['==', '$type', 'Point']],
|
||||
paint: {
|
||||
'circle-radius': 5,
|
||||
'circle-color': '#f00'
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
map.addControl(this._draw)
|
||||
|
||||
// 加载默认禁飞区
|
||||
if (this._defaultPolygons.length > 0) {
|
||||
const features = this._defaultPolygons.map(coords => ({
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: [coords]
|
||||
},
|
||||
properties: {}
|
||||
}))
|
||||
this._draw.set({
|
||||
type: 'FeatureCollection',
|
||||
features
|
||||
})
|
||||
}
|
||||
|
||||
map.on('draw.create', this._handleDraw.bind(this))
|
||||
|
||||
return this._container
|
||||
}
|
||||
|
||||
onRemove () {
|
||||
if (this._map && this._draw) {
|
||||
this._map.removeControl(this._draw)
|
||||
}
|
||||
if (this._container?.parentNode) {
|
||||
this._container.parentNode.removeChild(this._container)
|
||||
}
|
||||
this._map = null
|
||||
}
|
||||
|
||||
_enableDraw () {
|
||||
if (this._draw && this._map) {
|
||||
this._draw.changeMode('draw_polygon')
|
||||
}
|
||||
}
|
||||
|
||||
_handleDraw (e) {
|
||||
const features = this._draw.getAll()
|
||||
if (features.features.length > 0) {
|
||||
const coordinates = features.features.map(f => f.geometry.coordinates)
|
||||
this._onDrawFinish(coordinates)
|
||||
}
|
||||
}
|
||||
|
||||
_deleteSelected () {
|
||||
if (this._draw) {
|
||||
const selected = this._draw.getSelectedIds()
|
||||
if (selected.length > 0) {
|
||||
this._draw.delete(selected)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_savePolygons () {
|
||||
if (!this._draw) return
|
||||
const allFeatures = this._draw.getAll()
|
||||
const polygons = allFeatures.features.map(f => f.geometry.coordinates)
|
||||
// 调用传入的保存回调
|
||||
this._onSave(polygons)
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,218 +0,0 @@
|
||||
<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>
|
||||
@ -1,125 +0,0 @@
|
||||
<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>
|
||||
80
src/views/layout/components/main/nofly/set.vue
Normal file
80
src/views/layout/components/main/nofly/set.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="h-100">
|
||||
<map-box ref="mapbox" :enableNofly="true"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MapBox from '@/components/MapBox'
|
||||
|
||||
export default {
|
||||
name: 'Nofly',
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
components: {
|
||||
MapBox
|
||||
},
|
||||
computed: {
|
||||
airList () {
|
||||
return this.$store.state.airList
|
||||
},
|
||||
/**
|
||||
* @description: 侧边栏显隐
|
||||
*/
|
||||
isCollapse () {
|
||||
return this.$store.state.app.isCollapse
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @description: 创建飞机图标
|
||||
*/
|
||||
makePlanes (planes) {
|
||||
this.$refs.mapbox.removePlanes()// 先清除画布上现有的飞机
|
||||
planes.forEach((plane, index) => { // 创建所有飞机
|
||||
let planeDefaultLonLat
|
||||
if (localStorage.getItem(plane.name) !== null) { // 从本地缓存 拿飞机得初始位置
|
||||
planeDefaultLonLat = JSON.parse(localStorage.getItem(plane.name))
|
||||
plane.lon = planeDefaultLonLat.lon
|
||||
plane.lat = planeDefaultLonLat.lat
|
||||
} else {
|
||||
plane.lon = 0
|
||||
plane.lat = 0
|
||||
}
|
||||
this.$refs.mapbox.makePlane(plane, index)
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.airList.length > 0) {
|
||||
this.makePlanes(this.airList)// 创建飞机图标
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/**
|
||||
* @description: 飞机列表更新时候 更新地图
|
||||
*/
|
||||
airList: {
|
||||
handler (val) {
|
||||
this.makePlanes(val)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description: 侧边栏缩进有变化时 地图重新自适应
|
||||
*/
|
||||
isCollapse: {
|
||||
handler (val) {
|
||||
if (val) {
|
||||
this.$refs.mapbox.handleResize()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
destroyed () {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Loading…
Reference in New Issue
Block a user