gitY
/
DiKongGanZhiPingTai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

媒体库-作业区域-可测试版（自定义禁降区未实装）

main
滕嵩 2025-07-11 15:38:12 +08:00
parent 9b74b459ff
commit 63fe7f7424
6 changed files with 1020 additions and 432 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/api/demo/mediaLibrary.ts Normal file
View File

@ -0,0 +1,40 @@
import { defHttp } from '@/utils/http/axios';
enum Api {
// 获取地图作业区域列表
GetWorkAreaList = '/api/Manage/GetWorkAreaList',
// 添加地图作业区域
AddWorkArea = '/api/Manage/AddWorkArea',
// 更新地图作业区域
UpdateWorkArea = '/api/Manage/UpdateWorkArea',
// 删除地图作业区域
DeleteWorkArea = '/api/Manage/DeleteWorkArea',
}
// 获取地图作业区域列表
export function GetWorkAreaList(params) {
return defHttp.get({
url: Api.GetWorkAreaList,
params
});
}
// 添加地图作业区域
export function AddWorkArea(params) {
return defHttp.post({
url: Api.AddWorkArea,
data:params
});
}
// 更新地图作业区域
export function UpdateWorkArea(params) {
return defHttp.post({
url: Api.UpdateWorkArea,
data:params
});
}
// 删除地图作业区域
export function DeleteWorkArea(params) {
return defHttp.post({
url: Api.DeleteWorkArea + '?id=' + params.id,
data:params
});
}

8
src/components/MapboxMaps/src/WktGeojsonTransform.ts
View File

@ -3,20 +3,20 @@ import { wktToGeoJSON,geojsonToWKT } from "@terraformer/wkt"
const wktCollectionToGeoJson = (wktStr) => {
console.log("wktStr",wktStr);
// console.log("wktStr",wktStr);
let geojson = WKT.parse(wktStr);
console.log("geojson",geojson);
// console.log("geojson",geojson);
}
const WktToGeojson = (wktData)=> {
// return WKT.parse(wktData)
console.log("wktData",wktData);
// console.log("wktData",wktData);
return wktToGeoJSON(wktData);
}
const GeojsonToWkt = (geojsonData)=> {
// return WKT.convert(geojsonData)
console.log("geojsonData",geojsonData)
// console.log("geojsonData",geojsonData)
return geojsonToWKT(geojsonData)
}

84
src/views/demo/system/mediaLibrary/path/index.vue
View File

@ -24,6 +24,7 @@
@setNowShowMarkData="setNowShowMarkData"
@setNowShowImageData="setNowShowImageData"
@setNowShowAreaData="setNowShowAreaData"
@setAllAreaData="setAllAreaData"
@deleteMark="deleteMark"
@deleteArea="deleteArea"
/>
@ -41,6 +42,9 @@
@setNowShowMarkData="setNowShowMarkData"
@setNowShowImageData="setNowShowImageData"
@setNowShowAreaData="setNowShowAreaData"
@setAllMarkData="setAllMarkData"
@setAllImageData="setAllImageData"
@setAllAreaData="setAllAreaData"
@closePathImageInfo="closePathImageInfo"
/>
</div>
@ -85,6 +89,13 @@
import markJson from './json/mark.json';
import areaJson from './json/area.json';
import imageJson from './json/image.json';
import {
GetWorkAreaList,
AddWorkArea,
UpdateWorkArea,
DeleteWorkArea,
} from '@/api/demo/mediaLibrary';
import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage, createConfirm } = useMessage();
@ -166,28 +177,41 @@
function closePathAreaInfo() {
areaInfoShow.value = false;
nowShowAreaData.value = {};
pathMapRef.value.areaRestoreDefault();
}
// 当前展示的区域信息
const nowShowAreaData = ref();
const allAreaDataList = ref(areaJson);
const allAreaDataList: any = ref(areaJson);
// 设置当前展示的区域信息
function setNowShowAreaData(value) {
function setNowShowAreaData(value, restore = true) {
if (value.id) {
areaInfoShow.value = true;
} else {
areaInfoShow.value = false;
}
if (restore) {
pathMapRef.value.areaRestoreDefault();
}
nowShowAreaData.value = value;
}
// 刷新区域信息
function setAllAreaData() {
// 查询地图工作区域
getWorkAreaList();
}
// 删除区域
function deleteArea(value) {
allAreaDataList.value = cloneDeep(allAreaDataList.value).filter((item) => item.id != value.id);
areaInfoShow.value = false;
nowShowAreaData.value = {};
setTimeout(() => {
pathLeftMenuRef.value.updateShowMenuInfoList('地图作业区域');
}, 50);
async function deleteArea(value) {
DeleteWorkArea({
id: value.id,
}).then((result) => {
if (result) {
// 刷新
getWorkAreaList();
areaInfoShow.value = false;
nowShowAreaData.value = {};
}
});
}
// 右侧图片是否显示----------------------------------------------------
@ -222,7 +246,49 @@
pathMapRef.value.handlerLocation([position.lng, position.lat]);
}
// 查询地图工作区域
async function getWorkAreaList() {
allAreaDataList.value = await GetWorkAreaList({ workspaceid: 1 });
allAreaDataList.value.forEach((area, index) => {
let geomjson = WktToGeojson(area.geom);
area = {
...area,
properties: JSON.parse(area.properties),
geomtype: getGeomType(area),
coordinates: geomjson.coordinates,
};
allAreaDataList.value[index] = area;
});
setTimeout(() => {
pathLeftMenuRef.value.updateShowMenuInfoList('地图作业区域');
}, 50);
}
// 获取WKT类型
function getGeomType(area) {
let geom = area.geom;
let radiusFlag = area.properties.indexOf('radius') > -1 ? true : false;
// 点
if (geom.indexOf('POINT Z') > -1 && !radiusFlag) {
return 'Point';
}
// 线
if (geom.indexOf('LINESTRING Z') > -1 && !radiusFlag) {
return 'Polyline';
}
// 多边形
if (geom.indexOf('MULTIPOLYGON Z') > -1 && !radiusFlag) {
return 'Polygon';
}
// 圈
if (geom.indexOf('MULTIPOLYGON Z') > -1 && radiusFlag) {
return 'Circle';
}
}
onMounted(() => {
// 查询地图工作区域
getWorkAreaList();
nowShowMarkData.value = markJson[1];
});
</script>

150
src/views/demo/system/mediaLibrary/path/pathAreaInfo.vue
View File

@ -6,13 +6,13 @@
</a-col>
<a-col :span="24">
<div class="markTitle">
<!-- 自定义限飞区 -->
<!-- 自定义禁降区 -->
<div
v-if="props.nowShowAreaData.type == 'noland'"
:style="{
width: '15px',
height: '15px',
background: `linear-gradient(to bottom right, transparent 45%, ${props.nowShowAreaData.content.properties.color} 45%, ${props.nowShowAreaData.content.properties.color} 60%, transparent 60%), #ffffff00`,
background: `linear-gradient(to bottom right, transparent 45%, #FF9900 45%, #FF9900 60%, transparent 60%), #ffffff00`,
'margin-left': '2px',
'margin-right': '12px',
}"
@ -23,25 +23,23 @@
:style="{
width: '13px',
height: '13px',
outline: `2px solid ${props.nowShowAreaData.content.properties.color}`,
outline: `2px solid #00FF00`,
'margin-left': '2px',
'margin-right': '12px',
'border-radius':
props.nowShowAreaData.content.geometry.type == 'Circle' ? '6.5px' : '0px',
'border-radius': props.nowShowAreaData.geomtype == 'Circle' ? '6.5px' : '0px',
}"
/>
<!-- 自定义禁降区 -->
<!-- 自定义限飞区 -->
<div
v-if="props.nowShowAreaData.type == 'nfz'"
:style="{
width: '13px',
height: '13px',
outline: `2px solid ${props.nowShowAreaData.content.properties.color}`,
background: `${props.nowShowAreaData.content.properties.color}55`,
outline: `2px solid #FF0000`,
background: `#FF000055`,
'margin-left': '2px',
'margin-right': '12px',
'border-radius':
props.nowShowAreaData.content.geometry.type == 'Circle' ? '6.5px' : '0px',
'border-radius': props.nowShowAreaData.geomtype == 'Circle' ? '6.5px' : '0px',
}"
/>
<a-input v-model:value="nowAreaData.name" style="width: 65%" size="small"></a-input>
@ -73,7 +71,7 @@
</a-col>
<a-col :span="18">
<div class="markContent">
{{ props.nowShowAreaData.status == 'enable' ? '已启用' : '已禁用' }}
{{ props.nowShowAreaData.state == 0 ? '已启用' : '已禁用' }}
</div>
</a-col>
<!-- 水平距离 -->
@ -81,33 +79,29 @@
<div class="markTitle">水平距离</div>
</a-col>
<a-col :span="18" v-if="props.nowShowAreaData.type == 'noland'">
<div class="markContent"> {{ distance.toFixed(1) }}m</div>
<div class="markContent"> {{ nowAreaData.length.toFixed(1) }}m</div>
</a-col>
<!-- 水平面积 -->
<a-col :span="6">
<div class="markTitle">水平面积</div>
</a-col>
<a-col :span="18">
<div class="markContent"> {{ area.toFixed(2) }}㎡</div>
<div class="markContent"> {{ nowAreaData.area.toFixed(2) }}㎡</div>
</a-col>
<!-- 水平周长 -->
<a-col :span="6" v-if="props.nowShowAreaData.content.geometry.type == 'Polygon'">
<a-col :span="6" v-if="props.nowShowAreaData.geomtype == 'Polygon'">
<div class="markTitle">水平周长</div>
</a-col>
<a-col :span="18" v-if="props.nowShowAreaData.content.geometry.type == 'Polygon'">
<div class="markContent"> {{ distance2 }}m</div>
<a-col :span="18" v-if="props.nowShowAreaData.geomtype == 'Polygon'">
<div class="markContent"> {{ nowAreaData.length.toFixed(1) }}m</div>
</a-col>
<!-- 半径 -->
<a-col :span="6" v-if="props.nowShowAreaData.content.geometry.type == 'Circle'">
<a-col :span="6" v-if="props.nowShowAreaData.geomtype == 'Circle'">
<div class="markTitle">半径</div>
</a-col>
<a-col :span="18" v-if="props.nowShowAreaData.content.geometry.type == 'Circle'">
<a-col :span="18" v-if="props.nowShowAreaData.geomtype == 'Circle'">
<div class="markContent">
<a-input
v-model:value="nowAreaData.content.geometry.radius"
style="width: 100%"
size="small"
>
<a-input v-model:value="nowAreaData.properties.radius" style="width: 100%" size="small">
<template #addonAfter> <span style="color: white">m</span> </template>
</a-input>
</div>
@ -120,19 +114,19 @@
<div class="markContent">
<div
class="button"
:class="{ disabled: nowAreaData.content.properties.width == 10 }"
:class="{ disabled: nowAreaData.properties.width == 10 }"
@click="removeRecordNum"
>
<MinusOutlined style="font-size: 20px; color: #ffffff" />
</div>
<div class="numDiv">
<span v-if="!numInputFlag" class="numSpan" @click="focusInput">
{{ nowAreaData.content.properties.width }}
{{ nowAreaData.properties.width }}
</span>
<a-input
v-if="numInputFlag"
ref="focusInputRef"
v-model:value="nowAreaData.content.properties.width"
v-model:value="nowAreaData.properties.width"
style="width: 50%"
@blur="blurInput"
@keypress.enter="blurInput"
@ -141,7 +135,7 @@
</div>
<div
class="button"
:class="{ disabled: nowAreaData.content.properties.width == 100 }"
:class="{ disabled: nowAreaData.properties.width == 100 }"
@click="addRecordNum"
>
<PlusOutlined style="font-size: 20px; color: #ffffff" />
@ -153,7 +147,7 @@
<div class="markTitle">绘制者</div>
</a-col>
<a-col :span="18">
<div class="markContent"> {{ props.nowShowAreaData.created_nickname }}</div>
<div class="markContent"> {{ props.nowShowAreaData.createdUser }}</div>
</a-col>
<a-col :span="24">
<div class="area_buttons">
@ -182,7 +176,15 @@
MinusOutlined,
PlusOutlined,
} from '@ant-design/icons-vue';
import {
GetWorkAreaList,
AddWorkArea,
UpdateWorkArea,
DeleteWorkArea,
} from '@/api/demo/mediaLibrary';
import { cloneDeep } from 'lodash-es';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage, createConfirm } = useMessage();
const props = defineProps(['allAreaDataList', 'nowShowAreaData']);
const emits = defineEmits([
@ -193,6 +195,16 @@
]);
const nowAreaData: any = ref(props.nowShowAreaData);
watch(
() => nowAreaData.value,
() => {
emits('setNowShowAreaData', nowAreaData.value, false);
},
{
deep: true,
},
);
// 宽度----------------------------------------------------------------------
const numInputFlag = ref(false);
const focusInputRef = ref();
@ -209,40 +221,40 @@
function blurInput() {
numInputFlag.value = false;
// 检测是否是数字
if (/^-?\d+(\.\d+)?$/.test(nowAreaData.value.content.properties.width.toString())) {
if (nowAreaData.value.content.properties.width > 100) {
if (/^-?\d+(\.\d+)?$/.test(nowAreaData.value.properties.width.toString())) {
if (nowAreaData.value.properties.width > 100) {
// 不能大于100
nowAreaData.value.content.properties.width = 100;
} else if (nowAreaData.value.content.properties.width < 10) {
nowAreaData.value.properties.width = 100;
} else if (nowAreaData.value.properties.width < 10) {
// 不能小于10
nowAreaData.value.content.properties.width = 10;
nowAreaData.value.properties.width = 10;
} else {
// 保存小数点后两位
let newnum = cloneDeep(nowAreaData.value.content.properties.width);
nowAreaData.value.content.properties.width = parseFloat(parseFloat(newnum).toFixed(2));
let newnum = cloneDeep(nowAreaData.value.properties.width);
nowAreaData.value.properties.width = parseFloat(parseFloat(newnum).toFixed(2));
}
} else {
// 不是数字
nowAreaData.value.content.properties.width = 10;
nowAreaData.value.properties.width = 10;
}
}
// 宽度-减少
function removeRecordNum() {
let newnum = cloneDeep(nowAreaData.value.content.properties.width);
let newnum = cloneDeep(nowAreaData.value.properties.width);
if (newnum == 10) {
return;
}
newnum -= 5;
nowAreaData.value.content.properties.width = parseFloat(newnum.toFixed(2));
nowAreaData.value.properties.width = parseFloat(newnum.toFixed(2));
}
// 宽度-增加
function addRecordNum() {
let newnum = cloneDeep(nowAreaData.value.content.properties.width);
let newnum = cloneDeep(nowAreaData.value.properties.width);
if (newnum == 100) {
return;
}
newnum += 5;
nowAreaData.value.content.properties.width = parseFloat(newnum.toFixed(2));
nowAreaData.value.properties.width = parseFloat(newnum.toFixed(2));
}
// 关闭
@ -251,52 +263,28 @@
}
// 移动到中心位置
function handlerLocation() {
let coordinates = props.nowShowAreaData.content.geometry.coordinates;
if (props.nowShowAreaData.content.geometry.type == 'Circle') {
if (props.nowShowAreaData.geomtype == 'Circle') {
emits('handlerLocation', {
lng: coordinates[0],
lat: coordinates[1],
lng: props.nowShowAreaData.properties.centerPoint[0],
lat: props.nowShowAreaData.properties.centerPoint[1],
});
} else {
emits('handlerLocation', {
lng: coordinates[0][0][0],
lat: coordinates[0][0][1],
lng: props.nowShowAreaData.properties.centerPoint[0],
lat: props.nowShowAreaData.properties.centerPoint[1],
});
}
}
// 删除此区域
function deleteArea() {
emits('deleteArea', props.nowShowAreaData);
}
// 水平距离
const distance = ref(0);
async function getDistance() {
distance.value = mars3d.MeasureUtil.getSurfaceDistance(
props.nowShowAreaData.content.geometry.coordinates[0],
);
}
// 水平面积
const area = ref(0);
async function getArea() {
if (props.nowShowAreaData.content.geometry.type == 'Circle') {
let radius = props.nowShowAreaData.content.geometry.radius;
area.value = Math.PI * radius * radius;
} else {
area.value = mars3d.MeasureUtil.getSurfaceArea(
props.nowShowAreaData.content.geometry.coordinates[0],
);
}
}
// 水平周长
const distance2 = ref(0);
async function getDistance2() {
distance.value = mars3d.MeasureUtil.getDistance(
props.nowShowAreaData.content.geometry.coordinates[0],
true,
);
createConfirm({
iconType: 'info',
title: '提示',
content: '将会影响到项目内设备的作业范围，是否删除该区域？',
onOk: async () => {
emits('deleteArea', props.nowShowAreaData);
},
});
}
watch(
@ -304,14 +292,14 @@
() => {
nowAreaData.value = props.nowShowAreaData;
// 水平面积
getArea();
// getArea();
if (props.nowShowAreaData.type == 'noland') {
// 水平距离
getDistance();
// getDistance();
}
if (props.nowShowAreaData.content.geometry.type == 'Polygon') {
if (props.nowShowAreaData.geomtype == 'Polygon') {
// 水平距离
getDistance2();
// getDistance();
}
},
{

227
src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
View File

@ -89,28 +89,17 @@
<a-select-option value="noland">全部禁降区</a-select-option>
</a-select>
<a-select
v-model:value="areastatus"
v-model:value="areastate"
style="width: 120px"
@change="handleChangeAreaSelect"
>
<a-select-option value="all">全部状态</a-select-option>
<a-select-option value="enable">已启用</a-select-option>
<a-select-option value="disable">已禁用</a-select-option>
<a-select-option value="0">已启用</a-select-option>
<a-select-option value="1">已禁用</a-select-option>
</a-select>
</div>
<!-- 列表 -->
<div
v-for="show in showMenuInfoList"
:key="show.id"
@mouseenter="
show.mouse = true;
show.deleteClickNum = 0;
"
@mouseleave="
show.mouse = false;
show.deleteClickNum = 0;
"
>
<div v-for="show in showMenuInfoList" :key="show.id">
<!-- 地图标注 -->
<div
v-if="showMenuInfoName == '地图标注'"
@ -123,20 +112,31 @@
? '#393939'
: '',
}"
@mouseenter="
show.mouse = true;
show.deleteClickNum = 0;
"
@mouseleave="
show.mouse = false;
show.deleteClickNum = 0;
"
>
<div @click="setNowShowMarkData(show)">
<AntDesignOutlined v-if="show.resource.type == '0'" />
<ExpandAltOutlined v-if="show.resource.type == '1'" />
<BorderOutlined v-if="show.resource.type == '2'" />
<LogoutOutlined v-if="show.resource.type == '3'" />
<AntDesignOutlined v-if="show.type == '0'" />
<ExpandAltOutlined v-if="show.type == '1'" />
<BorderOutlined v-if="show.type == '2'" />
<LogoutOutlined v-if="show.type == '3'" />
</div>
<div
class="eye"
@click="show.status = !show.status"
:style="{ background: show.status ? '#2d8cf0' : '#000000' }"
@click="show.status == 0 ? (show.status = 1) : (show.status = 0)"
:style="{ background: show.status == 1 ? '#2d8cf0' : '#000000' }"
>
<EyeOutlined v-if="show.status" style="color: #ffffff; font-size: 16px" />
<EyeInvisibleOutlined v-if="!show.status" style="color: #ffffff; font-size: 16px" />
<EyeOutlined v-if="show.status == 1" style="color: #ffffff; font-size: 16px" />
<EyeInvisibleOutlined
v-if="show.status == 0"
style="color: #ffffff; font-size: 16px"
/>
</div>
<div @click="setNowShowMarkData(show)">{{ show.name }}</div>
<div class="buttonRight2" v-if="show.mouse">
@ -260,33 +260,35 @@
props.nowShowAreaData && props.nowShowAreaData.id == show.id
? '2px solid #2D8CF0'
: '',
background:
props.nowShowAreaData && show.status == 'enable' ? '#3c3c3c' : '#3c3c3c55',
background: props.nowShowAreaData && show.state == 0 ? '#3c3c3c' : '#3c3c3c55',
}"
>
<div
class="name"
@click="setNowShowAreaData(show)"
:style="{
color: show.status == 'enable' ? '#ffffff' : '#ffffff55',
}"
>
{{ show.name }}
</div>
<a-tooltip placement="right">
<template #title> {{ show.name }} </template>
<div
class="name"
@click="setNowShowAreaData(show)"
:style="{
color: show.state == 0 ? '#ffffff' : '#ffffff55',
}"
>
{{ show.name }}
</div>
</a-tooltip>
<div
class="type"
@click="setNowShowAreaData(show)"
:style="{
color: show.status == 'enable' ? '#ffffff' : '#ffffff55',
color: show.state == 0 ? '#ffffff' : '#ffffff55',
}"
>
<!-- 自定义限飞区 -->
<!-- 自定义禁降区 -->
<div
v-if="show.type == 'noland'"
:style="{
width: '15px',
height: '15px',
background: `linear-gradient(to bottom right, transparent 45%, ${show.content.properties.color} 45%, ${show.content.properties.color} 60%, transparent 60%), #ffffff00`,
background: `linear-gradient(to bottom right, transparent 45%, #FF9900 45%, #FF9900 60%, transparent 60%), #ffffff00`,
'margin-right': '6px',
}"
/>
@ -296,27 +298,27 @@
:style="{
width: '13px',
height: '13px',
outline: `2px solid ${show.content.properties.color}`,
outline: `2px solid #00FF00`,
'margin-right': '6px',
'border-radius': show.content.geometry.type == 'Circle' ? '6.5px' : '0px',
'border-radius': show.geomtype == 'Circle' ? '6.5px' : '0px',
}"
/>
<!-- 自定义禁降区 -->
<!-- 自定义限飞区 -->
<div
v-if="show.type == 'nfz'"
:style="{
width: '13px',
height: '13px',
outline: `2px solid ${show.content.properties.color}`,
background: `${show.content.properties.color}55`,
outline: `2px solid #FF0000`,
background: `#FF000055`,
'margin-right': '6px',
'border-radius': show.content.geometry.type == 'Circle' ? '6.5px' : '0px',
'border-radius': show.geomtype == 'Circle' ? '6.5px' : '0px',
}"
/>
<span>{{ getType(show.type) }}</span>
</div>
<div class="buttonlist">
<div class="button" v-if="show.status == 'disable'">
<div class="button" v-if="show.state == 1">
<a-popconfirm
title="将会影响到项目内设备的作业范围，是否启用该区域？"
ok-text="启用"
@ -332,7 +334,7 @@
</a-tooltip>
</a-popconfirm>
</div>
<div class="button" v-if="show.status == 'enable'">
<div class="button" v-if="show.state == 0">
<a-popconfirm
title="将会影响到项目内设备的作业范围，是否禁用该区域？"
ok-text="禁用"
@ -386,7 +388,7 @@
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ref, watch } from 'vue';
import {
CloseOutlined,
AntDesignOutlined,
@ -405,6 +407,12 @@
CheckCircleOutlined,
StopOutlined,
} from '@ant-design/icons-vue';
import {
GetWorkAreaList,
AddWorkArea,
UpdateWorkArea,
DeleteWorkArea,
} from '@/api/demo/mediaLibrary';
import { cloneDeep } from 'lodash-es';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage, createConfirm } = useMessage();
@ -427,14 +435,13 @@
'setNowShowMarkData',
'setNowShowImageData',
'setNowShowAreaData',
'setAllAreaData',
'deleteMark',
'deleteArea',
]);
const showMenuInfoList = ref(props.allMarkDataList);
const showMenuInfoName = ref('地图标注');
function updateShowMenuInfoList(type) {
console.log(type);
if (type == '地图标注') {
showMenuInfoList.value = props.allMarkDataList;
}
@ -473,7 +480,7 @@
// 地图作业区域-------------------------------------------------
// 地图作业区域-单选
const areatype = ref('all');
const areastatus = ref('all');
const areastate = ref('all');
// 地图作业区域-获取类别区分
function getType(type) {
let name = '';
@ -497,24 +504,49 @@
if (areatype.value !== 'all') {
filterAreaData = filterAreaData.filter((item) => item.type == areatype.value);
}
if (areastatus.value !== 'all') {
filterAreaData = filterAreaData.filter((item) => item.status == areastatus.value);
if (areastate.value !== 'all') {
filterAreaData = filterAreaData.filter((item) => item.state == areastate.value);
}
filterAfterAreaDataList.value = filterAreaData;
showMenuInfoList.value = filterAfterAreaDataList.value;
}
// 地图作业区域-启用该区域
function enableThisArea(value) {
setNowShowAreaData({
...value,
status: 'enable',
state: 0,
});
UpdateWorkArea({
...value,
// id: value.id,
// name: value.name,
// type: value.type,
properties: JSON.stringify(value.properties),
// geom: value.geom,
// workSpaceId: '1',
state: 0,
}).then((res) => {
emits('setAllAreaData');
});
}
// 地图作业区域-禁用该区域
function disableThisArea(value) {
setNowShowAreaData({
...value,
status: 'disable',
state: 1,
});
UpdateWorkArea({
// id: value.id,
// name: value.name,
// type: value.type,
...value,
properties: JSON.stringify(value.properties),
// geom: value.geom,
// workSpaceId: '1',
state: 1,
}).then((res) => {
emits('setAllAreaData');
});
}
// 地图作业区域-删除此区域
@ -538,52 +570,51 @@
// ------------------------------------------------------------------
// 移动到中心位置
function handlerLocation(position) {
if (showMenuInfoName.value == '地图标注') {
let coordinates = position.resource.content.geometry.coordinates;
switch (position.resource.type) {
case 0:
emits('handlerLocation', {
lng: coordinates[0],
lat: coordinates[1],
});
break;
case 1:
emits('handlerLocation', {
lng: coordinates[0][0],
lat: coordinates[0][1],
});
break;
case 2:
emits('handlerLocation', {
lng: coordinates[0][0][0],
lat: coordinates[0][0][1],
});
break;
case 3:
emits('handlerLocation', {
lng: coordinates[0],
lat: coordinates[1],
});
break;
}
}
if (showMenuInfoName.value == '地图照片') {
emits('handlerLocation', {
lng: position.photo_position.lng,
lat: position.photo_position.lat,
});
}
// if (showMenuInfoName.value == '地图标注') {
// let coordinates = position.coordinates;
// switch (position.type) {
// case 0:
// emits('handlerLocation', {
// lng: coordinates[0],
// lat: coordinates[1],
// });
// break;
// case 1:
// emits('handlerLocation', {
// lng: coordinates[0][0],
// lat: coordinates[0][1],
// });
// break;
// case 2:
// emits('handlerLocation', {
// lng: coordinates[0][0][0],
// lat: coordinates[0][0][1],
// });
// break;
// case 3:
// emits('handlerLocation', {
// lng: coordinates[0],
// lat: coordinates[1],
// });
// break;
// }
// }
// if (showMenuInfoName.value == '地图照片') {
// emits('handlerLocation', {
// lng: position.photo_position.lng,
// lat: position.photo_position.lat,
// });
// }
if (showMenuInfoName.value == '地图作业区域') {
let coordinates = position.content.geometry.coordinates;
if (position.content.geometry.type == 'Circle') {
if (position.geomtype == 'Circle') {
emits('handlerLocation', {
lng: coordinates[0],
lat: coordinates[1],
lng: position.properties.centerPoint[0],
lat: position.properties.centerPoint[1],
});
} else {
emits('handlerLocation', {
lng: coordinates[0][0][0],
lat: coordinates[0][0][1],
lng: position.properties.centerPoint[0],
lat: position.properties.centerPoint[1],
});
}
}
@ -785,8 +816,12 @@
left: 6px;
color: #ffffff;
font-size: 15px;
width: 240px;
height: 29px;
width: 90%;
height: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.type {
position: absolute;

943
src/views/demo/system/mediaLibrary/path/pathMap.vue
View File

File diff suppressed because it is too large Load Diff