zhaoyang/sunProduct
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

6/23 更改高德地图组件，统一入口

Browse Source
This commit is contained in:
Zy
2026-06-23 17:07:48 +08:00
parent 826bf3c782
commit 33d35c8d70
30 changed files with 643 additions and 757 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/views/system/inspection/Plan/addInspectionPlan.vue
View File

@@ -61,10 +61,10 @@
</el-select>
</el-form-item>
<el-form-item label="计划路线">
<el-select @change="handlChangeMap" v-model="form.routeIds" placeholder="请选择" style="width: 100%">
<el-select @change="handleChangeMap" v-model="form.routeIds" placeholder="请选择" style="width: 100%">
<el-option v-for="item in playlist" :key="item.value" :label="item.routeName" :value="item.id" />
</el-select>
<div class="mapbox" id="PlanMapBox"></div>
<GD ref="GDef" :disabled="true"></GD>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit">提交</el-button>
@@ -81,9 +81,10 @@ import { listRoute } from '@/api/system/InspectionRoute';
import PageHeader from '@/components/Pageheader/index.vue';
import { numToWeek } from '@/utils/time';
import { ref } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
import { addPlan, getPlan, updatePlan } from '@/api/system/InspectionPlan';
import { Check } from '@element-plus/icons-vue';
import GD from '@/components/Map/GD.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_inspection_remind_tiime } = toRefs<any>(proxy?.useDict('com_inspection_remind_tiime'));
@@ -165,88 +166,37 @@ async function init() {
taskTime.value = [['', '']];
}
handlChangeMap(res.data.routeIds);
handleChangeMap(res.data.routeIds);
});
}
}
init();
// 返回
function outback() {
router.back();
}
const AMapLib = ref(null);
const map = ref(null);
const mapReady = ref(false);
const GDef = ref(null);
const markerlist = [];
function handlChangeMap(val: string) {
map.value.remove(markerlist);
function handleChangeMap(val: string) {
if (val) {
GDef.value.clearMapMarker();
const find = playlist.value.find((item) => item.id === val);
if (find) {
if (find.points && find.points.length > 0) {
find.points.forEach((item: { location: string; pointName: any }, index: number) => {
const angular = item.location.split(',').map(Number);
const marker = new AMapLib.value.Marker({
position: new AMapLib.value.LngLat(angular[0], angular[1]), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: item.pointName,
content: `
<div style="display:flex;align-items:center;justify-content:center;width:30px;height:30px;line-height:18px;border-radius:50%;background-color:rgba(26,117,255,0.3);">
<div
style=" width: 20px;
border-radius: 50%;
height: 20px;
line-height: 20px;
background-color: rgba(26,117,255,1);
color: #ffffff;
font-size: 20px;
text-align: center;"
>${index + 1}</div>
</div>`
});
//将创建的点标记添加到已有的地图实例：
map.value.add(marker);
markerlist.push(marker);
});
}
if (find.pathPoints && typeof find.pathPoints === 'string') {
const path = JSON.parse(find.pathPoints);
//创建 Polyline 实例
const polyline = new AMapLib.value.Polyline({
path: path,
strokeWeight: 2, //线条宽度
strokeColor: 'red', //线条颜色
lineJoin: 'round' //折线拐点连接处样式
});
map.value.add(polyline);
markerlist.push(polyline);
}
map.value.setFitView();
if (find.points && find.points.length > 0) {
find.points.forEach((item) => {
const angular = item.location.split(',').map(Number).filter(Boolean);
GDef.value.addMarker_more(angular, item.pointNames, item.id);
});
}
// 巡检路线
if (find.pathPoints) {
GDef.value.renderSavedPath(find.pathPoints);
}
}
}
const autoloader = import.meta.env.VITE_GCJ02_KEY_GD;
const VITE_GCJ02_JS_CODE_GD = import.meta.env.VITE_GCJ02_JS_CODE_GD;
onMounted(async () => {
await nextTick();
window._AMapSecurityConfig = { securityJsCode: VITE_GCJ02_JS_CODE_GD };
AMapLoader.load({
key: autoloader,
version: '2.0',
plugins: ['AMap.Scale', 'AMap.Marker']
}).then(async (AMap) => {
AMapLib.value = AMap;
map.value = new AMap.Map('PlanMapBox', {
viewMode: '3D',
zoom: 11,
center: [116.397428, 39.90923]
});
mapReady.value = true;
});
onMounted(() => {
init();
});
const formRef = ref();
function submit() {

147
src/views/system/inspection/Point/addInspectionPoint.vue
View File

@@ -38,10 +38,19 @@
</el-radio-group>
</el-form-item>
<el-form-item label="巡检点位置" prop="location">
<div class="map" id="containerMap"></div>
<GD :click-or-draw="true" ref="GDef" @click-point="handleClickPoint"></GD>
<div class="tips">
<span>点击地图选择位置</span>
<span class="deleteMarker" v-show="Boolean(marker)" @click="clearLocation">清空选择地点</span>
<span
class="deleteMarker"
v-show="Boolean(marker)"
@click="
() => {
GDef.clearLocation();
}
"
>清空选择地点</span
>
</div>
</el-form-item>
<el-form-item style="margin-top: 30px">
@@ -62,13 +71,12 @@ import { ElMessage } from 'element-plus';
import PageHeader from '@/components/Pageheader/index.vue';
import { addPoint, getPoint, updatePoint } from '@/api/system/InspectionPoint';
import { listItem } from '@/api/system/InspectionItem';
import { onMounted, onUnmounted } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
import { getVillageByIdAPI } from '@/api/system/community';
import { onMounted } from 'vue';
import { Check } from '@element-plus/icons-vue';
import GD from '@/components/Map/GD.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// const { com_inspection_point_checkmode } = toRefs<any>(proxy?.useDict('com_inspection_point_checkmode'));
const { com_inspection_point_status } = toRefs<any>(proxy?.useDict('com_inspection_point_status'));
const router = useRouter();
@@ -97,6 +105,7 @@ const rules = ref({
const pointId = ref(null);
const pointItemlist = ref([]);
const checkoutPointItemlist = ref([]);
const marker = ref(null);
function checkoutItem(id: string) {
form.value.itemId = ''; // 每次点击都先清空 itemId
if (checkoutPointItemlist.value.includes(id)) {
@@ -128,10 +137,19 @@ function init() {
if (res.data.itemId) {
checkoutPointItemlist.value = res.data.itemId.split(',');
}
const location = form.value.location
.split(',')
.map((item) => Number(item))
.filter((item) => !Number.isNaN(item));
if (location.length >= 2) {
setTimeout(() => {
marker.value = GDef.value.addMarker_only(location);
}, 500);
}
});
}
}
init();
// !== 提交 =============================================================================
const submitForm = () => {
@@ -140,12 +158,12 @@ const submitForm = () => {
// 设置 itemId
form.value.itemId = checkoutPointItemlist.value.join(',');
if (pointId.value) {
updatePoint(form.value).then((res) => {
updatePoint(form.value).then(() => {
ElMessage.success('编辑成功');
cancelForm();
});
} else {
addPoint(form.value).then((res) => {
addPoint(form.value).then(() => {
ElMessage.success('添加成功');
cancelForm();
});
@@ -158,110 +176,15 @@ const cancelForm = () => {
router.back();
};
// ! map
const mapReady = ref(false);
const map = ref(null);
const marker = ref(null);
const villageid = localStorage.getItem('villageid');
const aloaderkey = import.meta.env.VITE_GCJ02_KEY_GD;
const VITE_GCJ02_JS_CODE_GD = import.meta.env.VITE_GCJ02_JS_CODE_GD;
const GDef = ref();
function handleClickPoint(laglat: number[]) {
marker.value = null;
form.value.location = `${laglat[0]},${laglat[1]}`;
marker.value = GDef.value.addMarker_only(laglat);
}
onMounted(async () => {
await nextTick();
window._AMapSecurityConfig = { securityJsCode: VITE_GCJ02_JS_CODE_GD };
AMapLoader.load({
key: aloaderkey,
version: '2.0',
plugins: ['AMap.Scale', 'AMap.Marker']
}).then(async (AMap) => {
const villageinfo = await getVillageByIdAPI(villageid);
const city = villageinfo.data.city.replaceAll('/', '');
map.value = new AMap.Map('containerMap', {
viewMode: '3D',
zoom: 11,
center: [116.397428, 39.90923]
});
AMap.plugin('AMap.Geocoder', function () {
const geocoder = new AMap.Geocoder({
city: city // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
});
geocoder.getLocation(city, function (status, result) {
if (status === 'complete' && result.info === 'OK') {
// result中对应详细地理坐标信息
map.value.setCenter(result.geocodes[0].location.toArray());
}
});
});
mapReady.value = true;
handleMap(AMap, city);
initLocation(AMap);
});
});
/** 清空选择地点 */
function clearLocation() {
form.value.location = '';
if (marker.value) {
map.value.remove(marker.value);
marker.value = null;
}
}
function handleMap(AMap, city = '010') {
// 添加点击事件
map.value.on('click', (e) => {
const lnglat = e.lnglat;
form.value.location = `${lnglat.lng},${lnglat.lat}`;
const lnglatarr = [lnglat.lng, lnglat.lat];
const geocoder = new AMap.Geocoder({
city: city // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
});
geocoder.getAddress(lnglatarr, function (status, result) {
if (status === 'complete' && result.info === 'OK') {
// result为对应的地理位置详细信息
form.value.locationName = result.regeocode.formattedAddress;
}
});
// 如果有 marker.value，先移除
if (marker.value) {
map.value.remove(marker.value);
}
// 添加新 marker
marker.value = new AMap.Marker({
position: lnglat,
map: map.value,
title: form.value.pointName || '巡检点'
});
});
}
const initLocation = (AMap) => {
if (!map.value || !form.value.location) return;
const [lng, lat] = form.value.location.split(',').map((v) => Number(v.trim()));
if (!Number.isFinite(lng) || !Number.isFinite(lat)) return;
if (!lng || !lat) return;
const lnglat = new AMap.LngLat(lng, lat);
map.value.setCenter(lnglat);
map.value.setZoom(16);
if (marker.value) {
map.value.remove(marker.value);
}
marker.value = new AMap.Marker({
position: lnglat,
map: map.value,
title: form.value.pointName || '巡检点'
});
};
onUnmounted(() => {
map.value?.destroy();
init();
});
</script>

332
src/views/system/inspection/Route/addInspectionRoute.vue
View File

@@ -8,19 +8,6 @@
<el-form-item label="巡检路线名称" prop="routeName">
<el-input v-model.trim="form.routeName" placeholder="请输入巡检路线名称" />
</el-form-item>
<!-- <el-form-item label="巡检路线描述" prop="description">
<el-input type="textarea" :rows="3" v-model.trim="form.description" placeholder="请输入巡检路线描述" />
</el-form-item> -->
<!-- <el-form-item label="预计巡检时长" prop="estimatedTime">
<el-input v-model.trim.number="form.estimatedTime" placeholder="预计巡检时长">
<template #append>分钟</template>
</el-input>
</el-form-item> -->
<!-- <el-form-item label="巡检路线状态" prop="routeStatus">
<el-radio-group v-model="form.routeStatus">
<el-radio v-for="(item, index) in com_inspection_route_status" :key="index" :value="item.value" :label="item.label"></el-radio>
</el-radio-group>
</el-form-item> -->
<el-form-item label="巡检点">
<div class="itembox">
<div
@@ -28,8 +15,8 @@
:class="{
active: checkoutPointlist.includes(item.id)
}"
@click="checkoutItem(item.id)"
v-for="(item, index) in pointslist"
@click="checkoutItemPoint(item)"
:key="index"
>
<el-icon v-show="checkoutPointlist.includes(item.id)"><Check /></el-icon>
@@ -38,11 +25,19 @@
</div>
</el-form-item>
<el-form-item label="绘制巡检路线">
<div class="map" id="containerMap"></div>
<GD :small-scroll="true" ref="GDef" :click-or-draw="false"></GD>
<div class="tips flex flex-items-center justify-between">
<div>点击地图，绘制巡检路线；再次点击可继续绘制下一条（但只能保留一条）</div>
<div>
<span class="deleteMarker" @click="clearAll">清空所有路线</span>
<span
class="deleteMarker"
@click="
() => {
GDef.clearAll();
}
"
>清空所有路线</span
>
</div>
</div>
</el-form-item>
@@ -62,11 +57,11 @@ import { useRouter, useRoute } from 'vue-router';
import PageHeader from '@/components/Pageheader/index.vue';
import { listPoint } from '@/api/system/InspectionPoint';
import { onMounted, onUnmounted } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
import { addRoute, getRoute, updateRoute } from '@/api/system/InspectionRoute';
import { getVillageByIdAPI } from '@/api/system/community';
import { Check } from '@element-plus/icons-vue';
import GD from '@/components/Map/GD.vue';
const router = useRouter();
const route = useRoute();
@@ -90,65 +85,12 @@ const rules = ref({
estimatedTime: [{ required: true, message: '请输入预计巡检时长', trigger: 'blur' }]
});
// !== 初始化 =============================================================================
const GDef = ref();
const routeid = ref(null);
// 巡检点 列表
const pointslist = ref([]);
// 选择巡检点列表
const checkoutPointlist = ref([]);
function checkoutItem(id: string) {
if (checkoutPointlist.value.includes(id)) {
checkoutPointlist.value = checkoutPointlist.value.filter((item) => item !== id);
removePointMarker(id);
} else {
checkoutPointlist.value.push(id);
const find = pointslist.value.find((item) => item.id === id);
if (find && find.location) {
if (find && find.location) {
addPointMarker(id, find.location, find.pointName);
}
}
}
// 调整地图视野以适应所有 marker
map.value.setFitView();
}
// 添加 marker
function addPointMarker(id: string, location: string, title?: string) {
if (!map.value || !AMapLib.value) return;
const [lng, lat] = location.split(',').map((v) => Number(v.trim()));
if (!Number.isFinite(lng) || !Number.isFinite(lat)) return;
// 获取到经纬度后，添加 marker 数组
const lnglat = new AMapLib.value.LngLat(lng, lat);
const index = Object.keys(markers.value).length + 1; // 获取当前 marker 数量，作为新的 marker 的编号
markers.value[id] = new AMapLib.value.Marker({
position: lnglat,
map: map.value,
title: title || '巡检点',
label: title || '巡检点',
content: `
<div style="display:flex;align-items:center;justify-content:center;width:30px;height:30px;line-height:18px;border-radius:50%;background-color:rgba(26,117,255,0.3);">
<div
style=" width: 20px;
border-radius: 50%;
height: 20px;
line-height: 20px;
background-color: rgba(26,117,255,1);
color: #ffffff;
font-size: 20px;
text-align: center;"
>${index}</div>
</div>`
});
}
// 移除 marker
function removePointMarker(id: string) {
const markerItem = markers.value[id];
if (markerItem) {
map.value.remove(markerItem);
delete markers.value[id];
}
}
// ! 初始化 =========================================================================
function init() {
@@ -177,30 +119,31 @@ function init() {
checkoutPointlist.value.forEach((id) => {
const find = res.data.points.find((item) => item.id === id);
if (find && find.location) {
addPointMarker(id, find.location, find.pointName);
// addPointMarker(id, find.location, find.pointName);
const location = find.location
.split(',')
.map((item) => Number(item))
.filter((item) => !Number.isNaN(item));
if (location.length >= 2) {
GDef.value.addMarker_more(location, find.pointName, find.id);
}
}
});
}
// 回显路线
if (res.data.pathPoints) {
renderSavedPath(res.data.pathPoints);
// renderSavedPath(res.data.pathPoints);
setTimeout(() => {
GDef.value.renderSavedPath(res.data.pathPoints);
}, 800);
}
}
});
});
}
}
// ! map
const mapReady = ref(false);
const AMapLib = ref(null);
const map = ref<any>(null);
const markers = ref<Record<string, any>>({});
const mouseTool = ref(null);
const drawnPolylines = ref([]); // 存所有线条
const villageid = localStorage.getItem('villageid');
const aloaderkey = import.meta.env.VITE_GCJ02_KEY_GD;
const VITE_GCJ02_JS_CODE_GD = import.meta.env.VITE_GCJ02_JS_CODE_GD;
onMounted(async () => {
// 获取巡检点列表
if (!routeid.value) {
@@ -208,183 +151,47 @@ onMounted(async () => {
pointslist.value = res.rows;
});
}
await nextTick();
window._AMapSecurityConfig = { securityJsCode: VITE_GCJ02_JS_CODE_GD };
AMapLoader.load({
key: aloaderkey,
version: '2.0',
plugins: ['AMap.Scale', 'AMap.Marker']
}).then(async (AMap) => {
AMapLib.value = AMap;
map.value = new AMap.Map('containerMap', {
viewMode: '3D',
zoom: 11
});
const villageinfo = await getVillageByIdAPI(villageid);
AMap.plugin('AMap.Geocoder', function () {
const city = villageinfo.data.city.replaceAll('/', '');
const geocoder = new AMap.Geocoder({
city: city // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
});
geocoder.getLocation(city, function (status, result) {
if (status === 'complete' && result.info === 'OK') {
// result中对应详细地理坐标信息
map.value.setCenter(result.geocodes[0].location.toArray());
}
});
});
mapReady.value = true;
// 初始化绘图插件 MouseTool
AMap.plugin(['AMap.MouseTool'], () => {
mouseTool.value = new AMap.MouseTool(map.value);
// ✅ 只在这里调用一次，不要重复调用
// 监听绘制（全局只绑定一次！）
mouseTool.value.on('draw', (e) => {
if (!e.obj) return;
// ==========================================
// 核心：永远只保留一条线，画新的自动删旧的
// ==========================================
if (drawnPolylines.value.length > 0) {
map.value.remove(drawnPolylines.value[0]);
}
drawnPolylines.value = [e.obj];
// 画完继续允许画下一条（但永远只保留一条）
initDrawTool();
});
initDrawTool();
});
init();
});
await nextTick(() => init());
});
// 回显
function renderSavedPath(pathStr: string) {
if (!pathStr || !map.value || !AMapLib.value) return;
try {
const path = JSON.parse(pathStr);
if (!Array.isArray(path) || path.length === 0) return;
// 先清空旧路线
drawnPolylines.value.forEach((line) => {
map.value.remove(line);
});
drawnPolylines.value = []; // 🔴 清空数组
// 只回显一条
const polyline = new AMapLib.value.Polyline({
path: path,
strokeColor: '#3366FF',
strokeOpacity: 1,
strokeWeight: 3,
strokeStyle: 'solid',
map: map.value
});
drawnPolylines.value.push(polyline); // ✅ 只一条
map.value.setFitView(polyline);
} catch (e) {
console.error('路线解析失败', e);
}
}
// 初始化绘图（只执行一次，防止事件重复绑定）
function initDrawTool() {
if (!mouseTool.value) return;
// 先关闭可能存在的绘图
mouseTool.value.close(false);
// 开启折线绘制
mouseTool.value.polyline({
strokeColor: '#3366FF',
strokeOpacity: 1,
strokeWeight: 3,
strokeStyle: 'solid'
});
}
// 清空所有画线
function clearAll() {
if (mouseTool.value) {
mouseTool.value.close(true); // 关闭绘图并清空
drawnPolylines.value.forEach((line) => {
map.value.removeOverlay(line);
});
drawnPolylines.value = [];
initDrawTool();
}
}
// !!! 核心：获取绘制的路线经纬度数组
function getPolylinePath() {
if (drawnPolylines.value.length === 0) return [];
// 获取最后一条线
const lastPolyline = drawnPolylines.value[drawnPolylines.value.length - 1];
// const lastLine = drawnPolylines.value.pop();
const path = lastPolyline.getPath().map((p) => [p.lng, p.lat]);
return path;
}
/**
* 修复高德地图 Polyline 闭合路线最后一段不显示
* 解决：最后两点坐标相同 → 长度0 → 不渲染
*/
function fixClosePath(path: number[][]): number[][] {
if (!path || path.length < 2) return path;
const newPath = [...path];
// 如果是闭合路线（最后一点 ≈ 第一点）
const first = newPath[0];
const last = newPath[newPath.length - 1];
// 判断是否几乎重合
const isSame = Math.abs(last[0] - first[0]) < 1e-8 && Math.abs(last[1] - first[1]) < 1e-8;
if (isSame) {
// 【关键】最后一点极微小偏移，强制生成线段
newPath[newPath.length - 1] = [last[0] + 0.0000001, last[1] + 0.0000001];
}
return newPath;
}
// !== 提交 =============================================================================
const submitForm = () => {
if (form.value.routeName.trim() === '') {
ElMessage.warning('请输入巡检路线名称');
return;
}
formRef.value?.validate(async (valid: boolean) => {
// if (valid) {
// 获取路线经纬度
const path = getPolylinePath() as [number, number][];
if (path.length === 0) {
ElMessage.warning('请绘制巡检路线');
return;
}
// 转成字符串传给后端
const [start_lng, start_lat] = path.at(0) as [number, number];
const [end_lng, end_lat] = path.at(-1) as [number, number];
if (valid) {
// 获取路线经纬度
const path = GDef.value.getAllDrawLines() as [number, number][];
console.log(path);
if (path.length === 0) {
ElMessage.warning('请绘制巡检路线');
return;
}
// 转成字符串传给后端
const [start_lng, start_lat] = path.at(0) as [number, number];
const [end_lng, end_lat] = path.at(-1) as [number, number];
form.value.startLng = `${start_lng}`;
form.value.startLat = `${start_lat}`;
form.value.endLng = `${end_lng}`;
form.value.endLat = `${end_lat}`;
form.value.startLng = `${start_lng}`;
form.value.startLat = `${start_lat}`;
form.value.endLng = `${end_lng}`;
form.value.endLat = `${end_lat}`;
form.value.pathPoints = JSON.stringify(path);
form.value.totalPoints = checkoutPointlist.value.join(',');
if (routeid.value) {
updateRoute(form.value).then(() => {
ElMessage.success('编辑成功');
cancelForm();
});
} else {
addRoute(form.value).then(() => {
ElMessage.success('添加成功');
cancelForm();
});
form.value.pathPoints = JSON.stringify(path);
form.value.totalPoints = checkoutPointlist.value.join(',');
if (routeid.value) {
updateRoute(form.value).then(() => {
ElMessage.success('编辑成功');
cancelForm();
});
} else {
addRoute(form.value).then(() => {
ElMessage.success('添加成功');
cancelForm();
});
}
}
// }
});
};
// 返回
@@ -392,6 +199,27 @@ const cancelForm = () => {
router.back();
};
// 点击展现 巡检点
function checkoutItemPoint(pop) {
const find = pointslist.value.find((item) => item.id === pop.id);
if (find && find.location) {
const locations =
find.location
.split(',')
.map((item: string) => Number(item))
.filter(Boolean) ?? [];
if (locations.length >= 2) {
GDef.value.addMarker_more(locations, find.pointName, find.id);
if (checkoutPointlist.value.includes(pop.id)) {
checkoutPointlist.value = checkoutPointlist.value.filter((item) => item !== pop.id);
} else {
checkoutPointlist.value.push(pop.id);
}
} else {
ElMessage.error(find.pointName + ' - 巡检点经纬度定位有误');
}
}
}
onUnmounted(() => {
map.value?.destroy();
});

134
src/views/system/inspection/Task/addTask.vue
View File

@@ -57,14 +57,12 @@
</el-checkbox-group>
</el-form-item> -->
<el-form-item label="关联计划" props="planId">
<el-select @change="handlChangeMap" v-model="form.planId" placeholder="请选择" style="width: 100%">
<el-select @change="handleChangeMap" v-model="form.planId" placeholder="请选择" style="width: 100%">
<el-option v-for="item in planlist" :key="item.id" :label="item.planName" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="计划路线" props="planId">
<div class="mapbox" v-loading="maploading">
<div class="w-full h-full" id="TaskMapBox"></div>
</div>
<GD v-loading="maploading" ref="GDef" :disabled="true"></GD>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit">提交</el-button>
@@ -81,11 +79,11 @@ import RepairUser from '@/components/Holder/repairUser.vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { Delete, Plus } from '@element-plus/icons-vue';
import { ref } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
import { listPlan } from '@/api/system/InspectionPlan';
import { addTask, getTask, updateTask } from '@/api/system/InspectionTask';
import { getRoute } from '@/api/system/InspectionRoute';
import { RouteVO } from '@/api/system/InspectionRoute/type';
import GD from '@/components/Map/GD.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_inspection_remind_tiime } = toRefs<any>(proxy?.useDict('com_inspection_remind_tiime'));
@@ -148,13 +146,11 @@ async function init() {
};
taskTime.value = res.data.taskTime ? res.data.taskTime.split(' - ') : [];
checkoutUserlist.value = Array.isArray(res.data.inspectorInfo) ? res.data.inspectorInfo : [res.data.inspectorInfo];
handlChangeMap(res.data.planId);
handleChangeMap(res.data.planId);
});
}
}
init();
// 选择 巡检人员
const RepairUserRef = ref<InstanceType<typeof RepairUser>>();
function handleAddUser() {
@@ -172,101 +168,47 @@ function handleDelete(id) {
function routeback() {
router.back();
}
const AMapLib = ref(null);
const map = ref(null);
const mapReady = ref(false);
const maploading = ref(false);
// 地图覆盖物
const markerlist = [];
// 选择计划f
function handlChangeMap(val: string) {
// 清楚 覆盖物
if (markerlist.length > 0) {
map.value.remove(markerlist);
}
if (val) {
// 查找计划id
const find = planlist.value.find((item) => item.id === val);
if (find) {
const route = find.routeList.pop();
// 查找路线
getRoute(route.id).then((res) => {
handleRoute(res.data);
});
}
}
}
const GDef = ref(null);
// 处理 巡检路线 巡检点数据
function handleRoute(route: RouteVO) {
function handleChangeMap(val: string) {
maploading.value = true;
// ! 添加点
if (route.points && route.points.length > 0) {
route.points.forEach((item, index) => {
const lnglat = item.location.split(',').map(Number);
const marker = new AMapLib.value.Marker({
position: new AMapLib.value.LngLat(lnglat[0], lnglat[1]), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: item.pointName,
content: `
<div style="display:flex;align-items:center;justify-content:center;width:30px;height:30px;line-height:18px;border-radius:50%;background-color:rgba(26,117,255,0.3);">
<div
style=" width: 20px;
border-radius: 50%;
height: 20px;
line-height: 20px;
background-color: rgba(26,117,255,1);
color: #ffffff;
font-size: 20px;
text-align: center;"
>${index + 1}</div>
</div>`
});
//将创建的点标记添加到已有的地图实例：
map.value.add(marker);
markerlist.push(marker);
});
const find = planlist.value.find((item) => item.id === val);
if (find) {
const route = find.routeList[find.routeList.length - 1];
if (route) {
getRoute(route.id)
.then((res) => {
if (res) {
GDef.value.clearMapMarker();
if (res.data.points && res.data.points.length > 0) {
res.data.points.forEach((item) => {
const angular = item.location.split(',').map(Number).filter(Boolean);
GDef.value.addMarker_more(angular, item.pointName, item.id);
});
}
// 巡检路线
if (res.data.pathPoints) {
GDef.value.renderSavedPath(res.data.pathPoints);
}
}
})
.finally(() => {
maploading.value = false;
});
} else {
maploading.value = false;
}
} else {
maploading.value = false;
}
// ! 添加路线
if (route.pathPoints && typeof route.pathPoints === 'string') {
const path = JSON.parse(route.pathPoints);
//创建 Polyline 实例
const polyline = new AMapLib.value.Polyline({
path: path,
strokeWeight: 2, //线条宽度
strokeColor: 'red', //线条颜色
lineJoin: 'round' //折线拐点连接处样式
});
map.value.add(polyline);
markerlist.push(polyline);
}
// 自动 适应 范围
map.value.setFitView();
maploading.value = false;
}
const aloaderkey = import.meta.env.VITE_GCJ02_KEY_GD;
const VITE_GCJ02_JS_CODE_GD = import.meta.env.VITE_GCJ02_JS_CODE_GD;
onMounted(async () => {
await nextTick();
window._AMapSecurityConfig = { securityJsCode: VITE_GCJ02_JS_CODE_GD };
AMapLoader.load({
key: aloaderkey,
version: '2.0',
plugins: ['AMap.Scale', 'AMap.Marker']
}).then(async (AMap) => {
AMapLib.value = AMap;
map.value = new AMap.Map('TaskMapBox', {
viewMode: '3D',
zoom: 11,
center: [116.397428, 39.90923]
});
mapReady.value = true;
});
onMounted(() => {
init();
});
const formRef = ref();
function submit() {
if (taskTime.value.length > 0) {