Merge branch 'main' of http://123.132.248.154:10000/gitY/DiKongGanZhiPingTai
commit
0ec3d35163
@ -0,0 +1,375 @@
|
||||
<template>
|
||||
<div class="pathModal">
|
||||
<!-- 左侧目录 -->
|
||||
<div
|
||||
class="leftMenuDiv"
|
||||
:style="{
|
||||
width: leftMenuShow ? '275px' : '0px',
|
||||
}"
|
||||
>
|
||||
<PathLeftMenu
|
||||
ref="pathLeftMenuRef"
|
||||
:pathRecord="props.pathRecord"
|
||||
:leftMenuShow="leftMenuShow"
|
||||
:allAnnotationDataList="allAnnotationDataList"
|
||||
:nowShowAnnotationData="nowShowAnnotationData"
|
||||
:allAreaDataList="allAreaDataList"
|
||||
:nowShowAreaData="nowShowAreaData"
|
||||
:allImageDataList="allImageDataList"
|
||||
:nowShowImageData="nowShowImageData"
|
||||
@changeLeftMenuShow="changeLeftMenuShow"
|
||||
@handlerLocation="handlerLocation"
|
||||
@closePathModal="closePathModal"
|
||||
@changeAnnotationInfoShow="changeAnnotationInfoShow"
|
||||
@setNowShowAnnotationData="setNowShowAnnotationData"
|
||||
@setNowShowImageData="setNowShowImageData"
|
||||
@setNowShowAreaData="setNowShowAreaData"
|
||||
@setAllAnnotationData="setAllAnnotationData"
|
||||
@setAllAreaData="setAllAreaData"
|
||||
@deleteAnnotation="deleteAnnotation"
|
||||
@deleteArea="deleteArea"
|
||||
/>
|
||||
</div>
|
||||
<!-- 地图 -->
|
||||
<div class="mapDiv" :style="{ width: dynamicWidth }">
|
||||
<PathMap
|
||||
ref="pathMapRef"
|
||||
:allAnnotationDataList="allAnnotationDataList"
|
||||
:nowShowAnnotationData="nowShowAnnotationData"
|
||||
:allAreaDataList="allAreaDataList"
|
||||
:nowShowAreaData="nowShowAreaData"
|
||||
:allImageDataList="allImageDataList"
|
||||
:nowShowImageData="nowShowImageData"
|
||||
@setNowShowAnnotationData="setNowShowAnnotationData"
|
||||
@setNowShowImageData="setNowShowImageData"
|
||||
@setNowShowAreaData="setNowShowAreaData"
|
||||
@setAllAnnotationData="setAllAnnotationData"
|
||||
@setAllImageData="setAllImageData"
|
||||
@setAllAreaData="setAllAreaData"
|
||||
@closePathImageInfo="closePathImageInfo"
|
||||
/>
|
||||
</div>
|
||||
<!-- 地图标注 -->
|
||||
<div class="annotationInfoDiv" v-if="annotationInfoShow">
|
||||
<PathAnnotationInfo
|
||||
:allAnnotationDataList="allAnnotationDataList"
|
||||
:nowShowAnnotationData="nowShowAnnotationData"
|
||||
@setNowShowAnnotationData="setNowShowAnnotationData"
|
||||
@closePathAnnotationInfo="closePathAnnotationInfo"
|
||||
@handlerLocation="handlerLocation"
|
||||
@deleteAnnotation="deleteAnnotation"
|
||||
/>
|
||||
</div>
|
||||
<!-- 地图作业区域 -->
|
||||
<!-- <div class="areaInfoDiv" v-if="areaInfoShow">
|
||||
<PathAreaInfo
|
||||
:allAreaDataList="allAreaDataList"
|
||||
:nowShowAreaData="nowShowAreaData"
|
||||
@setNowShowAreaData="setNowShowAreaData"
|
||||
@closePathAreaInfo="closePathAreaInfo"
|
||||
@handlerLocation="handlerLocation"
|
||||
@deleteArea="deleteArea"
|
||||
/>
|
||||
</div> -->
|
||||
<!-- 地图照片 -->
|
||||
<!-- <div class="imageInfoDiv" v-if="imageInfoShow">
|
||||
<PathImageInfo
|
||||
:allImageDataList="allImageDataList"
|
||||
:nowShowImageData="nowShowImageData"
|
||||
@setNowShowImageData="setNowShowImageData"
|
||||
@closePathImageInfo="closePathImageInfo"
|
||||
@handlerLocation="handlerLocation"
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { PathLeftMenu, PathMap, PathAnnotationInfo, PathAreaInfo, PathImageInfo } from './path';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import imageJson from './json/image.json';
|
||||
import {
|
||||
GetAnnotationList,
|
||||
DeleteAnnotation,
|
||||
GetWorkAreaList,
|
||||
DeleteWorkArea,
|
||||
} from '@/api/demo/mediaLibrary';
|
||||
import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
const { createMessage, createConfirm } = useMessage();
|
||||
|
||||
const props = defineProps(['pathRecord']);
|
||||
const emits = defineEmits(['closePathModal']);
|
||||
// 地图宽度
|
||||
const dynamicWidth = computed(() => {
|
||||
let width = 0;
|
||||
// 左侧目录
|
||||
if (leftMenuShow.value) {
|
||||
width += 275;
|
||||
} else {
|
||||
width += 0;
|
||||
}
|
||||
// 地图标注
|
||||
if (annotationInfoShow.value) {
|
||||
width += 320;
|
||||
}
|
||||
// // 地图作业区域
|
||||
// if (areaInfoShow.value) {
|
||||
// width += 320;
|
||||
// }
|
||||
// // 地图照片
|
||||
// if (imageInfoShow.value) {
|
||||
// width += 720;
|
||||
// }
|
||||
return 'calc(100% - ' + width + 'px)';
|
||||
});
|
||||
|
||||
// 地图ref
|
||||
const pathMapRef = ref();
|
||||
|
||||
// 左侧目录是否显示----------------------------------------------------
|
||||
const pathLeftMenuRef = ref();
|
||||
const leftMenuShow = ref(true);
|
||||
function changeLeftMenuShow() {
|
||||
leftMenuShow.value = !leftMenuShow.value;
|
||||
}
|
||||
|
||||
// 右侧标注信息是否显示----------------------------------------------------
|
||||
const annotationInfoShow = ref(false);
|
||||
function changeAnnotationInfoShow() {
|
||||
annotationInfoShow.value = !annotationInfoShow.value;
|
||||
}
|
||||
// 关闭右侧标注
|
||||
function closePathAnnotationInfo() {
|
||||
annotationInfoShow.value = false;
|
||||
nowShowAnnotationData.value = {};
|
||||
pathMapRef.value.annotationRestoreDefault();
|
||||
}
|
||||
// 当前展示的标注信息
|
||||
const nowShowAnnotationData = ref();
|
||||
const allAnnotationDataList: any = ref([]);
|
||||
// 设置当前展示的标注信息
|
||||
function setNowShowAnnotationData(value, restore = true) {
|
||||
if (value.id) {
|
||||
annotationInfoShow.value = true;
|
||||
} else {
|
||||
annotationInfoShow.value = false;
|
||||
}
|
||||
if (restore) {
|
||||
pathMapRef.value.annotationRestoreDefault();
|
||||
}
|
||||
nowShowAnnotationData.value = value;
|
||||
}
|
||||
// 刷新区域信息
|
||||
function setAllAnnotationData() {
|
||||
// 查询地图工作区域
|
||||
getAnnotationList();
|
||||
}
|
||||
// 查询地图标注
|
||||
async function getAnnotationList(showThis = true) {
|
||||
allAnnotationDataList.value = await GetAnnotationList({ workspaceid: 1 });
|
||||
if (allAnnotationDataList.value.length > 0) {
|
||||
allAnnotationDataList.value.forEach((annotation, index) => {
|
||||
let geomjson = WktToGeojson(annotation.geom);
|
||||
annotation = {
|
||||
...annotation,
|
||||
properties: JSON.parse(annotation.properties),
|
||||
geomtype: getGeomType(annotation),
|
||||
coordinates: geomjson.coordinates,
|
||||
};
|
||||
allAnnotationDataList.value[index] = annotation;
|
||||
});
|
||||
}
|
||||
if (showThis) {
|
||||
setTimeout(() => {
|
||||
pathLeftMenuRef.value.updateShowMenuInfoList('地图标注');
|
||||
}, 50);
|
||||
}
|
||||
}
|
||||
|
||||
// 删除标注
|
||||
function deleteAnnotation(value) {
|
||||
if (nowShowAnnotationData.value && nowShowAnnotationData.value.id == value.id) {
|
||||
annotationInfoShow.value = false;
|
||||
nowShowAnnotationData.value = {};
|
||||
}
|
||||
DeleteAnnotation({
|
||||
id: value.id,
|
||||
}).then((result) => {
|
||||
if (result) {
|
||||
// 刷新
|
||||
getAnnotationList();
|
||||
createMessage.success('删除成功');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 右侧区域信息是否显示----------------------------------------------------
|
||||
const areaInfoShow = ref(false);
|
||||
function changeAreaInfoShow() {
|
||||
areaInfoShow.value = !areaInfoShow.value;
|
||||
}
|
||||
// 关闭右侧标注
|
||||
function closePathAreaInfo() {
|
||||
areaInfoShow.value = false;
|
||||
nowShowAreaData.value = {};
|
||||
pathMapRef.value.areaRestoreDefault();
|
||||
}
|
||||
// 当前展示的区域信息
|
||||
const nowShowAreaData = ref();
|
||||
const allAreaDataList: any = ref([]);
|
||||
// 设置当前展示的区域信息
|
||||
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();
|
||||
}
|
||||
// 查询地图工作区域
|
||||
async function getWorkAreaList(showThis = true) {
|
||||
allAreaDataList.value = await GetWorkAreaList({ workspaceid: 1 });
|
||||
if (allAreaDataList.value.length > 0) {
|
||||
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;
|
||||
});
|
||||
}
|
||||
if (showThis) {
|
||||
setTimeout(() => {
|
||||
pathLeftMenuRef.value.updateShowMenuInfoList('地图作业区域');
|
||||
}, 50);
|
||||
}
|
||||
}
|
||||
|
||||
// 删除区域
|
||||
async function deleteArea(value) {
|
||||
if (nowShowAreaData.value && nowShowAreaData.value.id == value.id) {
|
||||
areaInfoShow.value = false;
|
||||
nowShowAreaData.value = {};
|
||||
}
|
||||
DeleteWorkArea({
|
||||
id: value.id,
|
||||
}).then((result) => {
|
||||
if (result) {
|
||||
// 刷新
|
||||
getWorkAreaList();
|
||||
createMessage.success('删除成功');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 右侧图片是否显示----------------------------------------------------
|
||||
const imageInfoShow = ref(false);
|
||||
// 关闭右侧图片
|
||||
function closePathImageInfo() {
|
||||
imageInfoShow.value = false;
|
||||
}
|
||||
// 当前展示的图片
|
||||
const nowShowImageData = ref();
|
||||
const allImageDataList = ref(imageJson);
|
||||
|
||||
// 设置当前展示的图片
|
||||
function setNowShowImageData(value) {
|
||||
if (value.id) {
|
||||
imageInfoShow.value = true;
|
||||
} else {
|
||||
imageInfoShow.value = false;
|
||||
}
|
||||
nowShowImageData.value = value;
|
||||
pathMapRef.value.setNowShowImageByRight();
|
||||
}
|
||||
|
||||
// 其他方法-----------------------------------------------------------------
|
||||
// 关闭弹窗
|
||||
function closePathModal() {
|
||||
emits('closePathModal');
|
||||
}
|
||||
|
||||
// 移动位置
|
||||
function handlerLocation(position) {
|
||||
pathMapRef.value.handlerLocation([position.lng, position.lat]);
|
||||
}
|
||||
|
||||
// 获取WKT类型
|
||||
function getGeomType(area) {
|
||||
let geom = area.geom;
|
||||
let radiusFlag = area.properties.indexOf('radius') > -1 ? true : false;
|
||||
// 点
|
||||
if (geom.indexOf('POINT') > -1 && !radiusFlag) {
|
||||
return 'Point';
|
||||
}
|
||||
// 线
|
||||
if (geom.indexOf('LINESTRING') > -1 && !radiusFlag) {
|
||||
return 'Polyline';
|
||||
}
|
||||
// 多边形
|
||||
if (geom.indexOf('POLYGON') > -1 && !radiusFlag) {
|
||||
return 'Polygon';
|
||||
}
|
||||
// 圈
|
||||
if (geom.indexOf('POLYGON') > -1 && radiusFlag) {
|
||||
return 'Circle';
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 查询地图工作区域
|
||||
getWorkAreaList(false);
|
||||
getAnnotationList();
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.pathModal {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.leftMenuDiv {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mapDiv {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
// width: auto;
|
||||
}
|
||||
|
||||
.annotationInfoDiv {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.areaInfoDiv {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.imageInfoDiv {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
// width: 37%;
|
||||
width: 720px;
|
||||
// min-width: 720px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,5 @@
|
||||
export { default as PathLeftMenu } from './pathLeftMenu.vue';
|
||||
export { default as PathMap } from './pathMap.vue';
|
||||
export { default as PathImageInfo } from './pathImageInfo.vue';
|
||||
export { default as PathAnnotationInfo } from './pathAnnotationInfo.vue';
|
||||
export { default as PathAreaInfo } from './pathAreaInfo.vue';
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,891 @@
|
||||
<template>
|
||||
<div class="leftMenu">
|
||||
<div class="leftMenuContent">
|
||||
<!-- <div class="leftMenuContent_1">
|
||||
<div class="leftMenu_closeButton">
|
||||
<a-tooltip placement="right">
|
||||
<template #title> 关闭弹窗 </template>
|
||||
<CloseOutlined
|
||||
style="font-size: 24px; margin: 8px; color: white"
|
||||
@click="closePathModal"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div class="leftMenu_buttonList">
|
||||
<div
|
||||
class="leftMenu_buttonList_annotation"
|
||||
:style="{
|
||||
background: showMenuInfoName == '地图标注' ? '#2D8CF0' : '#1a375a',
|
||||
}"
|
||||
@click="
|
||||
showMenuInfoName = '地图标注';
|
||||
updateShowMenuInfoList(showMenuInfoName);
|
||||
showMenuInfoList = filterAfterAnnotationDataList;
|
||||
"
|
||||
>
|
||||
<a-tooltip placement="right">
|
||||
<template #title> 地图标注 </template>
|
||||
<AntDesignOutlined style="font-size: 24px; margin: 8px; color: white" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div
|
||||
class="leftMenu_buttonList_image"
|
||||
:style="{
|
||||
background: showMenuInfoName == '地图照片' ? '#2D8CF0' : '#1a375a',
|
||||
}"
|
||||
@click="
|
||||
showMenuInfoName = '地图照片';
|
||||
updateShowMenuInfoList(showMenuInfoName);
|
||||
"
|
||||
>
|
||||
<a-tooltip placement="right">
|
||||
<template #title> 地图照片 </template>
|
||||
<EnvironmentOutlined style="font-size: 24px; margin: 8px; color: white" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div
|
||||
class="leftMenu_buttonList_area"
|
||||
:style="{
|
||||
background: showMenuInfoName == '地图作业区域' ? '#2D8CF0' : '#1a375a',
|
||||
}"
|
||||
@click="
|
||||
showMenuInfoName = '地图作业区域';
|
||||
updateShowMenuInfoList(showMenuInfoName);
|
||||
showMenuInfoList = filterAfterAreaDataList;
|
||||
"
|
||||
>
|
||||
<a-tooltip placement="right">
|
||||
<template #title> 地图作业区域 </template>
|
||||
<CodeSandboxOutlined style="font-size: 24px; margin: 8px; color: white" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="leftMenuContent_2" v-if="leftMenuShow">
|
||||
<div class="leftMenuContent_title">
|
||||
{{ showMenuInfoName }}
|
||||
</div>
|
||||
<div class="leftMenuContent_list">
|
||||
<!-- 地图作业区域 -->
|
||||
<!-- <div v-if="showMenuInfoName == '地图作业区域'" style="margin: 10px">
|
||||
<a-select
|
||||
v-model:value="areatype"
|
||||
style="width: 120px; margin-right: 15px"
|
||||
@change="handleChangeAreaSelect"
|
||||
>
|
||||
<a-select-option value="all">全部类型</a-select-option>
|
||||
<a-select-option value="dfence">全部作业区</a-select-option>
|
||||
<a-select-option value="nfz">全部限飞区</a-select-option>
|
||||
<a-select-option value="noland">全部禁降区</a-select-option>
|
||||
</a-select>
|
||||
<a-select
|
||||
v-model:value="areastate"
|
||||
style="width: 120px"
|
||||
@change="handleChangeAreaSelect"
|
||||
>
|
||||
<a-select-option value="all">全部状态</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">
|
||||
<!-- 地图标注 -->
|
||||
<div
|
||||
v-if="showMenuInfoName == '地图标注'"
|
||||
class="showMenuInfo_annotation"
|
||||
:style="{
|
||||
background:
|
||||
props.nowShowAnnotationData && props.nowShowAnnotationData.id == show.id
|
||||
? '#274D75'
|
||||
: show.mouse
|
||||
? '#393939'
|
||||
: '',
|
||||
}"
|
||||
@mouseenter="
|
||||
show.mouse = true;
|
||||
show.deleteClickNum = 0;
|
||||
"
|
||||
@mouseleave="
|
||||
show.mouse = false;
|
||||
show.deleteClickNum = 0;
|
||||
"
|
||||
>
|
||||
<div @click="setNowShowAnnotationData(show)">
|
||||
<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.state == 0 ? hideThisAnnotation(show) : showThisAnnotation(show)"
|
||||
:style="{ background: show.state == 0 ? '#2d8cf0' : '#000000' }"
|
||||
>
|
||||
<EyeOutlined v-if="show.state == 0" style="color: #ffffff; font-size: 16px" />
|
||||
<EyeInvisibleOutlined
|
||||
v-if="show.state == 1"
|
||||
style="color: #ffffff; font-size: 16px"
|
||||
/>
|
||||
</div>
|
||||
<div @click="setNowShowAnnotationData(show)">{{ show.name }}</div>
|
||||
<div class="buttonRight2" v-if="show.mouse">
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>回中</span>
|
||||
</template>
|
||||
<AimOutlined @click="handlerLocation(show)" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div
|
||||
class="buttonRight1"
|
||||
v-if="show.mouse"
|
||||
:style="{ background: show.deleteClickNum == 1 ? '#FF0000' : '' }"
|
||||
>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>删除</span>
|
||||
</template>
|
||||
<DeleteOutlined
|
||||
@click="
|
||||
show.deleteClickNum == 1 ? deleteAnnotation(show) : show.deleteClickNum++
|
||||
"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 地图照片 -->
|
||||
<!-- <div
|
||||
class="showMenuInfo_image"
|
||||
v-if="showMenuInfoName == '地图照片'"
|
||||
:style="{
|
||||
background:
|
||||
props.nowShowImageData && props.nowShowImageData.id == show.id
|
||||
? '#274D75'
|
||||
: show.mouse
|
||||
? '#393939'
|
||||
: '',
|
||||
}"
|
||||
>
|
||||
<FileImageOutlined />
|
||||
<div
|
||||
class="eye"
|
||||
@click="show.is_displayed = !show.is_displayed"
|
||||
:style="{ background: show.is_displayed ? '#2d8cf0' : '#000000' }"
|
||||
>
|
||||
<EyeOutlined v-if="show.is_displayed" style="color: #ffffff; font-size: 16px" />
|
||||
<EyeInvisibleOutlined
|
||||
v-if="!show.is_displayed"
|
||||
style="color: #ffffff; font-size: 16px"
|
||||
/>
|
||||
</div>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span> {{ show.name }}</span>
|
||||
</template>
|
||||
<div
|
||||
:style="{
|
||||
width: show.mouse ? '160px' : '210px',
|
||||
'white-space': 'nowrap',
|
||||
overflow: 'hidden',
|
||||
'text-overflow': 'ellipsis',
|
||||
}"
|
||||
@click="setNowShowImageData(show)"
|
||||
>
|
||||
{{ show.name }}
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<div class="buttonRight2" v-if="show.mouse">
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>回中</span>
|
||||
</template>
|
||||
<AimOutlined @click="handlerLocation(show)" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div class="buttonRight1" v-if="show.mouse">
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>
|
||||
{{ show.show_on_map ? '在地图上取消加载' : '在地图上加载' }}
|
||||
</span>
|
||||
</template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<svg
|
||||
v-if="show.show_on_map"
|
||||
@click="funAddOrRemoveToMap(show)"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 24 24"
|
||||
width="18"
|
||||
height="18"
|
||||
>
|
||||
<path
|
||||
d="M19 5v11.17l2 2V5c0-1.1-.9-2-2-2H5.83l2 2H19zM2.81 2.81L1.39 4.22L3 5.83V19c0 1.1.9 2 2 2h13.17l1.61 1.61l1.41-1.41L2.81 2.81zM5 19V7.83l7.07 7.07l-.82 1.1L9 13l-3 4h8.17l2 2H5z"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
</svg>
|
||||
<svg
|
||||
v-if="!show.show_on_map"
|
||||
@click="funAddOrRemoveToMap(show)"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 24 24"
|
||||
width="18"
|
||||
height="18"
|
||||
>
|
||||
<path
|
||||
d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 地图作业区域 -->
|
||||
<!-- <div
|
||||
v-if="showMenuInfoName == '地图作业区域'"
|
||||
class="showMenuInfo_area"
|
||||
:style="{
|
||||
outline:
|
||||
props.nowShowAreaData && props.nowShowAreaData.id == show.id
|
||||
? '2px solid #2D8CF0'
|
||||
: '',
|
||||
background: props.nowShowAreaData && show.state == 0 ? '#3c3c3c' : '#3c3c3c55',
|
||||
}"
|
||||
>
|
||||
<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.state == 0 ? '#ffffff' : '#ffffff55',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-if="show.type == 'noland'"
|
||||
:style="{
|
||||
width: '13px',
|
||||
height: '13px',
|
||||
outline: `2px solid #FF9900`,
|
||||
'margin-right': '6px',
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="show.type == 'dfence'"
|
||||
:style="{
|
||||
width: '13px',
|
||||
height: '13px',
|
||||
outline: `2px solid #00FF00`,
|
||||
'margin-right': '6px',
|
||||
'border-radius': show.geomtype == 'Circle' ? '6.5px' : '0px',
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="show.type == 'nfz'"
|
||||
:style="{
|
||||
width: '13px',
|
||||
height: '13px',
|
||||
outline: `2px solid #FF0000`,
|
||||
background: `#FF000055`,
|
||||
'margin-right': '6px',
|
||||
'border-radius': show.geomtype == 'Circle' ? '6.5px' : '0px',
|
||||
}"
|
||||
/>
|
||||
<span>{{ getType(show.type) }}</span>
|
||||
</div>
|
||||
<div class="buttonlist">
|
||||
<div class="button" v-if="show.state == 1">
|
||||
<a-popconfirm
|
||||
title="将会影响到项目内设备的作业范围，是否启用该区域？"
|
||||
ok-text="启用"
|
||||
cancel-text="取消"
|
||||
placement="right"
|
||||
@confirm="enableThisArea(show)"
|
||||
>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>可点击启用该区域</span>
|
||||
</template>
|
||||
<CheckCircleOutlined />
|
||||
</a-tooltip>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
<div class="button" v-if="show.state == 0">
|
||||
<a-popconfirm
|
||||
title="将会影响到项目内设备的作业范围，是否禁用该区域？"
|
||||
ok-text="禁用"
|
||||
cancel-text="取消"
|
||||
placement="right"
|
||||
@confirm="disableThisArea(show)"
|
||||
>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>可点击禁用该区域</span>
|
||||
</template>
|
||||
<StopOutlined />
|
||||
</a-tooltip>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
<div class="button">
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>回中</span>
|
||||
</template>
|
||||
<AimOutlined @click="handlerLocation(show)" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div class="button">
|
||||
<a-popconfirm
|
||||
title="将会影响到项目内设备的作业范围，是否删除该区域？"
|
||||
ok-text="删除"
|
||||
cancel-text="取消"
|
||||
placement="right"
|
||||
@confirm="deleteArea(show)"
|
||||
>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>删除</span>
|
||||
</template>
|
||||
<DeleteOutlined />
|
||||
</a-tooltip>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="suojinButton" @click="changeLeftMenuShow">
|
||||
<DoubleLeftOutlined v-if="leftMenuShow" style="font-size: 16px" />
|
||||
<DoubleRightOutlined v-if="!leftMenuShow" style="font-size: 16px" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import {
|
||||
CloseOutlined,
|
||||
AntDesignOutlined,
|
||||
DoubleLeftOutlined,
|
||||
DoubleRightOutlined,
|
||||
EnvironmentOutlined,
|
||||
CodeSandboxOutlined,
|
||||
ExpandAltOutlined,
|
||||
BorderOutlined,
|
||||
LogoutOutlined,
|
||||
EyeOutlined,
|
||||
EyeInvisibleOutlined,
|
||||
AimOutlined,
|
||||
DeleteOutlined,
|
||||
FileImageOutlined,
|
||||
CheckCircleOutlined,
|
||||
StopOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { UpdateWorkArea, UpdateAnnotation } from '@/api/demo/mediaLibrary';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
const { createMessage, createConfirm } = useMessage();
|
||||
|
||||
const props = defineProps([
|
||||
'pathRecord',
|
||||
'leftMenuShow',
|
||||
'allAnnotationDataList',
|
||||
'nowShowAnnotationData',
|
||||
'allImageDataList',
|
||||
'nowShowImageData',
|
||||
'allAreaDataList',
|
||||
'nowShowAreaData',
|
||||
]);
|
||||
const emits = defineEmits([
|
||||
'changeLeftMenuShow',
|
||||
'handlerLocation',
|
||||
'closePathModal',
|
||||
'changeAnnotationInfoShow',
|
||||
'setNowShowAnnotationData',
|
||||
'setNowShowImageData',
|
||||
'setNowShowAreaData',
|
||||
'setAllAreaData',
|
||||
'setAllAnnotationData',
|
||||
'deleteAnnotation',
|
||||
'deleteArea',
|
||||
]);
|
||||
const showMenuInfoList = ref(props.allAnnotationDataList);
|
||||
const showMenuInfoName = ref('地图标注');
|
||||
function updateShowMenuInfoList(type) {
|
||||
if (type == '地图标注') {
|
||||
handleChangeAnnotationSearch();
|
||||
}
|
||||
if (type == '地图照片') {
|
||||
showMenuInfoList.value = props.allImageDataList;
|
||||
}
|
||||
if (type == '地图作业区域') {
|
||||
handleChangeAreaSelect();
|
||||
}
|
||||
}
|
||||
|
||||
// 目录-隐藏或者显示
|
||||
function changeLeftMenuShow() {
|
||||
emits('changeLeftMenuShow');
|
||||
}
|
||||
// 弹窗-关闭弹窗
|
||||
function closePathModal() {
|
||||
emits('closePathModal');
|
||||
}
|
||||
// 地图图片-加载到地图上
|
||||
function funAddOrRemoveToMap(show) {
|
||||
show.show_on_map = !show.show_on_map;
|
||||
if (show.show_on_map) {
|
||||
createMessage.success('在地图上加载成功');
|
||||
} else {
|
||||
createMessage.success('在地图上取消加载成功');
|
||||
}
|
||||
}
|
||||
|
||||
// 地图标注-搜索
|
||||
const filterAfterAnnotationDataList = ref(props.allAnnotationDataList);
|
||||
function handleChangeAnnotationSearch() {
|
||||
let filterAnnotationData = props.allAnnotationDataList;
|
||||
// if (areatype.value !== 'all') {
|
||||
// filterAnnotationData = filterAnnotationData.filter((item) => item.type == areatype.value);
|
||||
// }
|
||||
// if (areastate.value !== 'all') {
|
||||
// filterAnnotationData = filterAnnotationData.filter((item) => item.state == areastate.value);
|
||||
// }
|
||||
filterAfterAnnotationDataList.value = filterAnnotationData;
|
||||
showMenuInfoList.value = filterAfterAnnotationDataList.value;
|
||||
}
|
||||
// 地图标注-删除标注
|
||||
function deleteAnnotation(show) {
|
||||
show.deleteClickNum = 0;
|
||||
emits('deleteAnnotation', show);
|
||||
}
|
||||
// 地图标注-显示该标注
|
||||
function showThisAnnotation(value) {
|
||||
setNowShowAnnotationData({
|
||||
...value,
|
||||
state: 0,
|
||||
});
|
||||
UpdateAnnotation({
|
||||
...value,
|
||||
properties: JSON.stringify(value.properties),
|
||||
state: 0,
|
||||
}).then((res) => {
|
||||
emits('setAllAnnotationData');
|
||||
});
|
||||
}
|
||||
// 地图标注-隐藏该标注
|
||||
function hideThisAnnotation(value) {
|
||||
setNowShowAnnotationData({
|
||||
...value,
|
||||
state: 1,
|
||||
});
|
||||
UpdateAnnotation({
|
||||
...value,
|
||||
properties: JSON.stringify(value.properties),
|
||||
state: 1,
|
||||
}).then((res) => {
|
||||
emits('setAllAnnotationData');
|
||||
});
|
||||
}
|
||||
|
||||
// 地图作业区域-------------------------------------------------
|
||||
// 地图作业区域-单选
|
||||
const areatype = ref('all');
|
||||
const areastate = ref('all');
|
||||
// 地图作业区域-获取类别区分
|
||||
function getType(type) {
|
||||
let name = '';
|
||||
switch (type) {
|
||||
case 'nfz':
|
||||
name = '自定义限飞区';
|
||||
break;
|
||||
case 'dfence':
|
||||
name = '自定义作业区';
|
||||
break;
|
||||
case 'noland':
|
||||
name = '自定义禁降区';
|
||||
break;
|
||||
}
|
||||
return name;
|
||||
}
|
||||
// 地图作业区域-下拉框
|
||||
const filterAfterAreaDataList = ref(props.allAreaDataList);
|
||||
function handleChangeAreaSelect() {
|
||||
let filterAreaData = props.allAreaDataList;
|
||||
if (areatype.value !== 'all') {
|
||||
filterAreaData = filterAreaData.filter((item) => item.type == areatype.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,
|
||||
state: 0,
|
||||
});
|
||||
UpdateWorkArea({
|
||||
...value,
|
||||
properties: JSON.stringify(value.properties),
|
||||
state: 0,
|
||||
}).then((res) => {
|
||||
emits('setAllAreaData');
|
||||
});
|
||||
}
|
||||
// 地图作业区域-禁用该区域
|
||||
function disableThisArea(value) {
|
||||
setNowShowAreaData({
|
||||
...value,
|
||||
state: 1,
|
||||
});
|
||||
UpdateWorkArea({
|
||||
...value,
|
||||
properties: JSON.stringify(value.properties),
|
||||
state: 1,
|
||||
}).then((res) => {
|
||||
emits('setAllAreaData');
|
||||
});
|
||||
}
|
||||
// 地图作业区域-删除此区域
|
||||
function deleteArea(show) {
|
||||
emits('deleteArea', show);
|
||||
}
|
||||
|
||||
// 设定当前标记
|
||||
function setNowShowAnnotationData(value) {
|
||||
emits('setNowShowAnnotationData', value);
|
||||
}
|
||||
// 设定当前图片
|
||||
function setNowShowImageData(value) {
|
||||
emits('setNowShowImageData', value);
|
||||
}
|
||||
// 设定当前区域
|
||||
function setNowShowAreaData(value) {
|
||||
emits('setNowShowAreaData', value);
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
// 移动到中心位置
|
||||
function handlerLocation(position) {
|
||||
// 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 == '地图作业区域') {
|
||||
if (position.geomtype == 'Circle') {
|
||||
emits('handlerLocation', {
|
||||
lng: position.properties.centerPoint[0],
|
||||
lat: position.properties.centerPoint[1],
|
||||
});
|
||||
} else {
|
||||
emits('handlerLocation', {
|
||||
lng: position.properties.centerPoint[0],
|
||||
lat: position.properties.centerPoint[1],
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
updateShowMenuInfoList,
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.leftMenu {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #232323;
|
||||
|
||||
.leftMenuTitle {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ffffff55;
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
width: 100%;
|
||||
|
||||
/* 关键属性 */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.leftMenuContent {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: calc(100%-50px);
|
||||
// height: 800px;
|
||||
|
||||
.leftMenuContent_1 {
|
||||
position: relative;
|
||||
width: 64px;
|
||||
height: 100%;
|
||||
border-right: 1px solid #ffffff55;
|
||||
// padding-top: 10px;
|
||||
// padding-bottom: 10px;
|
||||
|
||||
.leftMenu_closeButton {
|
||||
position: relative;
|
||||
padding-top: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.leftMenu_buttonList {
|
||||
position: relative;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
background: #1a375a;
|
||||
margin-top: 15px;
|
||||
margin-left: 7px;
|
||||
margin-right: 7px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
gap: 10px;
|
||||
|
||||
.leftMenu_buttonList_annotation {
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.leftMenu_buttonList_image {
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.leftMenu_buttonList_area {
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leftMenuContent_2 {
|
||||
position: relative;
|
||||
width: 275px;
|
||||
height: 100%;
|
||||
|
||||
.leftMenuContent_title {
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.leftMenuContent_list {
|
||||
overflow-y: auto;
|
||||
max-height: 800px;
|
||||
|
||||
// 地图标注
|
||||
.showMenuInfo_annotation {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
color: #ffffff;
|
||||
height: 30px;
|
||||
padding-left: 15px;
|
||||
gap: 10px;
|
||||
|
||||
.eye {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.buttonRight2 {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.buttonRight1 {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
// 地图照片
|
||||
.showMenuInfo_image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
color: #ffffff;
|
||||
height: 30px;
|
||||
padding-left: 15px;
|
||||
gap: 10px;
|
||||
|
||||
.eye {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.buttonRight2 {
|
||||
position: absolute;
|
||||
right: 35px;
|
||||
}
|
||||
.buttonRight1 {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
// 地图作业区域
|
||||
.showMenuInfo_area {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
height: 70px;
|
||||
margin: 10px 15px;
|
||||
|
||||
.name {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
width: 90%;
|
||||
height: 30px;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.type {
|
||||
position: absolute;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
bottom: 6px;
|
||||
left: 8px;
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
width: 165px;
|
||||
}
|
||||
.buttonlist {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
right: 6px;
|
||||
width: 75px;
|
||||
height: 25px;
|
||||
display: flex;
|
||||
gap: 1px;
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.suojinButton {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
right: -18px;
|
||||
height: 90px;
|
||||
width: 18px;
|
||||
background: #ffffff;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,271 @@
|
||||
export const line_start_cap_0 = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
width="36"
|
||||
height="12"
|
||||
viewBox="0 0 48 16"
|
||||
>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M44,9L4,9L4,7L44,7L44,9Z"
|
||||
fill-rule="evenodd"
|
||||
fill="#000000"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`;
|
||||
|
||||
export const line_start_cap_1 = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
width="36"
|
||||
height="12"
|
||||
viewBox="0 0 48 16"
|
||||
>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M14.0459,2.2L4,8L14.0459,13.8L14.0459,9L44,9L44,7L14.0459,7L14.0459,2.2Z"
|
||||
fill-rule="evenodd"
|
||||
fill="#000000"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`;
|
||||
|
||||
export const line_start_cap_2 = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
width="36"
|
||||
height="12"
|
||||
viewBox="0 0 48 16"
|
||||
>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M44,9L4,9L4,7L44,7L44,9Z"
|
||||
fill-rule="evenodd"
|
||||
fill="#000000"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<rect
|
||||
x="4"
|
||||
y="4"
|
||||
width="2"
|
||||
height="8"
|
||||
rx="0"
|
||||
fill="#000000"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`;
|
||||
|
||||
export const line_start_cap_3 = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
width="36"
|
||||
height="12"
|
||||
viewBox="0 0 48 16"
|
||||
>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M44,9L5.5,9L5.5,7L44,7L44,9Z"
|
||||
fill-rule="evenodd"
|
||||
fill="#000000"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<ellipse cx="7" cy="8" rx="3" ry="3" fill="#000000" fill-opacity="1" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`;
|
||||
|
||||
export const line_end_cap_0 = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
width="36"
|
||||
height="12"
|
||||
viewBox="0 0 48 16"
|
||||
>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M44,9L4,9L4,7L44,7L44,9Z"
|
||||
fill-rule="evenodd"
|
||||
fill="#000000"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`;
|
||||
|
||||
export const line_end_cap_1 = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
width="36"
|
||||
height="12"
|
||||
viewBox="0 0 48 16"
|
||||
>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M33.9541,13.8L44,8L33.9541,2.2L33.9541,7L4,7L4,9L33.9541,9L33.9541,13.8Z"
|
||||
fill-rule="evenodd"
|
||||
fill="#000000"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`;
|
||||
|
||||
export const line_end_cap_2 = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
width="36"
|
||||
height="12"
|
||||
viewBox="0 0 48 16"
|
||||
>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M44,9L4,9L4,7L44,7L44,9Z"
|
||||
fill-rule="evenodd"
|
||||
fill="#000000"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<rect
|
||||
x="42"
|
||||
y="4"
|
||||
width="2"
|
||||
height="8"
|
||||
rx="0"
|
||||
fill="#000000"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`;
|
||||
|
||||
export const line_end_cap_3 = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
width="36"
|
||||
height="12"
|
||||
viewBox="0 0 48 16"
|
||||
>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M43.5,9L4,9L4,7L43.5,7L43.5,9Z"
|
||||
fill-rule="evenodd"
|
||||
fill="#000000"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<ellipse cx="41" cy="8" rx="3" ry="3" fill="#000000" fill-opacity="1" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`;
|
||||
|
||||
export const circle = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path d="M256 8C119 8 8 119 8 256s111 248 248 248s248-111 248-248S393 8 256 8z" fill="#000000">
|
||||
</path>
|
||||
</svg>`;
|
||||
|
||||
export const rect = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 512 512">
|
||||
<path d="M2 4h20v16H2z" fill="#000000">
|
||||
</path>
|
||||
</svg>`;
|
||||
|
||||
export const triangle = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 512 512">
|
||||
<path d="M464 464H48a16 16 0 0 1-14.07-23.62l208-384a16 16 0 0 1 28.14 0l208 384A16 16 0 0 1 464 464z" fill="#000000">
|
||||
</path>
|
||||
</svg>`;
|
||||
|
||||
|
||||
export const defaultIcon = `<svg width="15px" height="21.25px" viewBox="0 0 20 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智览-物资点图层-2.0" transform="translate(-880, -469)" fill="currentColor">
|
||||
<g id="菱形" transform="translate(880, 469)">
|
||||
<path d="M9.90588766,0 L20,13.1685517 L12.4843534,23.5505302 L12.4843534,28.0455285 L7.51106516,28.0455285 L7.51106516,23.5505302 L0,13.1685517 L9.90588766,0 Z M9.90588766,6 L5,13.1685517 L9.90588766,20.3166169 L15,13.1685517 L9.90588766,6 Z" id="形状结合"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`;
|
||||
export const locateBack = `<svg width="24px" height="28px" viewBox="0 0 24 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
|
||||
<g id="林业防火-智览-物资点图层-2.0" transform="translate(-914, -469)" fill-rule="nonzero" stroke-width="2.75">
|
||||
<g id="定位" transform="translate(916, 471)">
|
||||
<path d="M10,23.8461538 C10,23.8461538 20,17.3107692 20,9.75523077 C20,4.36756923 15.5228462,0 10,0 C4.47715385,0 0,4.36756923 0,9.75523077 C0,17.3107692 10,23.8461538 10,23.8461538 Z" id="路径" stroke="currentColor" fill="currentColor"></path>
|
||||
<path d="M10,16 C13.31368,16 16,13.31368 16,10 C16,6.68632 13.31368,4 10,4 C6.68632,4 4,6.68632 4,10 C4,13.31368 6.68632,16 10,16 Z" id="路径" stroke="#ffffff" fill="#ffffff"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`;
|
||||
|
||||
export const fireIcon = `<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M19.48 12.35c-1.57-4.08-7.16-4.3-5.81-10.23c.1-.44-.37-.78-.75-.55C9.29 3.71 6.68 8 8.87 13.62c.18.46-.36.89-.75.59c-1.81-1.37-2-3.34-1.84-4.75c.06-.52-.62-.77-.91-.34C4.69 10.16 4 11.84 4 14.37c.38 5.6 5.11 7.32 6.81 7.54c2.43.31 5.06-.14 6.95-1.87c2.08-1.93 2.84-5.01 1.72-7.69zm-9.28 5.03c1.44-.35 2.18-1.39 2.38-2.31c.33-1.43-.96-2.83-.09-5.09c.33 1.87 3.27 3.04 3.27 5.08c.08 2.53-2.66 4.7-5.56 2.32z" fill="currentColor">
|
||||
</path></svg>`;
|
||||
export const peopleIcon = `<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="4" r="2" fill="currentColor"></circle><path d="M15.89 8.11C15.5 7.72 14.83 7 13.53 7h-2.54C8.24 6.99 6 4.75 6 2H4c0 3.16 2.11 5.84 5 6.71V22h2v-6h2v6h2V10.05L18.95 14l1.41-1.41l-4.47-4.48z" fill="currentColor">
|
||||
</path></svg>`;
|
||||
export const warnIcon = `<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 12"><g fill="none"><path d="M5.214 1.459a.903.903 0 0 1 1.572 0l4.092 7.169c.348.61-.089 1.372-.787 1.372H1.91c-.698 0-1.135-.762-.787-1.372l4.092-7.17zM5.5 4.5v1a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-1 0zM6 6.75a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5z" fill="currentColor">
|
||||
</path></g></svg>`;
|
||||
export const carIcon = `<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||||
<path d="M447.68 220.78a16 16 0 0 0-1-3.08l-37.78-88.16C400.19 109.17 379 96 354.89 96H157.11c-24.09 0-45.3 13.17-54 33.54L65.29 217.7A15.72 15.72 0 0 0 64 224v176a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-16h256v16a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V224a16.15 16.15 0 0 0-.32-3.22zM144 320a32 32 0 1 1 32-32a32 32 0 0 1-32 32zm224 0a32 32 0 1 1 32-32a32 32 0 0 1-32 32zM104.26 208l28.23-65.85C136.11 133.69 146 128 157.11 128h197.78c11.1 0 21 5.69 24.62 14.15L407.74 208z" fill="currentColor">
|
||||
</path></svg>`;
|
||||
export const checkIcon = `<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||||
<path d="M5 12l5 5L20 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
</path></svg>`;
|
||||
export const closeIcon = `<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4l6.6 6.6L8 22.6L9.4 24l6.6-6.6l6.6 6.6l1.4-1.4l-6.6-6.6L24 9.4z" fill="currentColor">
|
||||
</path></svg>`;
|
||||
Loading…
Reference in New Issue