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

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

Browse Source
main
滕嵩 2 months ago
parent 9b74b459ff
commit 63fe7f7424
6 changed files with 967 additions and 379 deletions
Show Stats Download Patch File Download Diff File

40
src/api/demo/mediaLibrary.ts
Unescape Escape 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
Unescape Escape View File

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

80
src/views/demo/system/mediaLibrary/path/index.vue
Unescape Escape View File

@ -24,6 +24,7 @@
@setNowShowMarkData="setNowShowMarkData" @setNowShowMarkData="setNowShowMarkData"
@setNowShowImageData="setNowShowImageData" @setNowShowImageData="setNowShowImageData"
@setNowShowAreaData="setNowShowAreaData" @setNowShowAreaData="setNowShowAreaData"
@setAllAreaData="setAllAreaData"
@deleteMark="deleteMark" @deleteMark="deleteMark"
@deleteArea="deleteArea" @deleteArea="deleteArea"
/> />
@ -41,6 +42,9 @@
@setNowShowMarkData="setNowShowMarkData" @setNowShowMarkData="setNowShowMarkData"
@setNowShowImageData="setNowShowImageData" @setNowShowImageData="setNowShowImageData"
@setNowShowAreaData="setNowShowAreaData" @setNowShowAreaData="setNowShowAreaData"
@setAllMarkData="setAllMarkData"
@setAllImageData="setAllImageData"
@setAllAreaData="setAllAreaData"
@closePathImageInfo="closePathImageInfo" @closePathImageInfo="closePathImageInfo"
/> />
</div> </div>
@ -85,6 +89,13 @@
import markJson from './json/mark.json'; import markJson from './json/mark.json';
import areaJson from './json/area.json'; import areaJson from './json/area.json';
import imageJson from './json/image.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'; import { useMessage } from '@/hooks/web/useMessage';
const { createMessage, createConfirm } = useMessage(); const { createMessage, createConfirm } = useMessage();
@ -166,28 +177,41 @@
function closePathAreaInfo() { function closePathAreaInfo() {
areaInfoShow.value = false; areaInfoShow.value = false;
nowShowAreaData.value = {}; nowShowAreaData.value = {};
pathMapRef.value.areaRestoreDefault();
} }
// 当前展示的区域信息 // 当前展示的区域信息
const nowShowAreaData = ref(); const nowShowAreaData = ref();
const allAreaDataList = ref(areaJson); const allAreaDataList: any = ref(areaJson);
// 设置当前展示的区域信息 // 设置当前展示的区域信息
function setNowShowAreaData(value) { function setNowShowAreaData(value, restore = true) {
if (value.id) { if (value.id) {
areaInfoShow.value = true; areaInfoShow.value = true;
} else { } else {
areaInfoShow.value = false; areaInfoShow.value = false;
} }
if (restore) {
pathMapRef.value.areaRestoreDefault();
}
nowShowAreaData.value = value; nowShowAreaData.value = value;
} }
// 刷新区域信息
function setAllAreaData() {
// 查询地图工作区域
getWorkAreaList();
}
// 删除区域 // 删除区域
function deleteArea(value) { async function deleteArea(value) {
allAreaDataList.value = cloneDeep(allAreaDataList.value).filter((item) => item.id != value.id); DeleteWorkArea({
id: value.id,
}).then((result) => {
if (result) {
// 刷新
getWorkAreaList();
areaInfoShow.value = false; areaInfoShow.value = false;
nowShowAreaData.value = {}; nowShowAreaData.value = {};
setTimeout(() => { }
pathLeftMenuRef.value.updateShowMenuInfoList('地图作业区域'); });
}, 50);
} }
// 右侧图片是否显示---------------------------------------------------- // 右侧图片是否显示----------------------------------------------------
@ -222,7 +246,49 @@
pathMapRef.value.handlerLocation([position.lng, position.lat]); 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(() => { onMounted(() => {
// 查询地图工作区域
getWorkAreaList();
nowShowMarkData.value = markJson[1]; nowShowMarkData.value = markJson[1];
}); });
</script> </script>

148
src/views/demo/system/mediaLibrary/path/pathAreaInfo.vue
Unescape Escape View File

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

211
src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
Unescape Escape View File

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

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

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save