494 lines
15 KiB
Vue
494 lines
15 KiB
Vue
<template>
|
||
<div class="AddBuildingBox">
|
||
<PageHeader></PageHeader>
|
||
<div class="AddBuildingBody">
|
||
<div class="title">基本信息</div>
|
||
<div class="addBuildingFormBody">
|
||
<el-form class="formBody" label-position="right" ref="formRef" :model="form" :rules="rules" label-width="130px">
|
||
<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
|
||
class="item"
|
||
:class="{
|
||
active: checkoutPointlist.includes(item.id)
|
||
}"
|
||
@click="checkoutItem(item.id)"
|
||
v-for="(item, index) in pointslist"
|
||
:key="index"
|
||
>
|
||
<el-icon v-show="checkoutPointlist.includes(item.id)"><Check /></el-icon>
|
||
<div>{{ item.pointName }}</div>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="绘制巡检路线">
|
||
<div class="map" id="containerMap"></div>
|
||
<div class="tips flex flex-items-center justify-between">
|
||
<div>点击地图，绘制巡检路线；再次点击可继续绘制下一条（但只能保留一条）</div>
|
||
<div>
|
||
<span class="deleteMarker" @click="clearAll">清空所有路线</span>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item style="margin-top: 30px">
|
||
<el-button type="primary" @click="submitForm">提交</el-button>
|
||
<el-button @click="cancelForm">返回</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, nextTick } from 'vue';
|
||
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';
|
||
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
|
||
const formRef = ref();
|
||
const form = ref({
|
||
id: null,
|
||
startLat: '',
|
||
startLng: '',
|
||
endLat: '',
|
||
endLng: '',
|
||
routeName: '', // 巡检路线名称
|
||
description: '', // 巡检路线描述
|
||
routeStatus: '0', // 巡检路线状态
|
||
estimatedTime: null, // 预计巡检时长
|
||
pathPoints: '', // 巡检路线经纬度
|
||
totalPoints: '' // 巡检点
|
||
});
|
||
|
||
const rules = ref({
|
||
routeName: [{ required: true, message: '请输入巡检路线名称', trigger: 'blur' }],
|
||
estimatedTime: [{ required: true, message: '请输入预计巡检时长', trigger: 'blur' }]
|
||
});
|
||
|
||
// !== 初始化 =============================================================================
|
||
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() {
|
||
if (route.query.id) {
|
||
routeid.value = route.query.id;
|
||
// 获取巡检点详情
|
||
getRoute(routeid.value).then((res) => {
|
||
form.value = {
|
||
id: res.data.id,
|
||
startLat: res.data.startLat,
|
||
startLng: res.data.startLng,
|
||
endLat: res.data.endLat,
|
||
endLng: res.data.endLng,
|
||
routeName: res.data.routeName, // 巡检路线名称
|
||
description: res.data.description, // 巡检路线描述
|
||
routeStatus: res.data.routeStatus, // 巡检路线状态
|
||
estimatedTime: res.data.estimatedTime, // 预计巡检时长
|
||
pathPoints: res.data.pathPoints, // 巡检路线经纬度
|
||
totalPoints: res.data.totalPoints // 巡检点
|
||
};
|
||
nextTick(() => {
|
||
if (routeid.value) {
|
||
checkoutPointlist.value = res.data.totalPoints ? res.data.totalPoints.split(',') : [];
|
||
if (checkoutPointlist.value.length > 0) {
|
||
// 回显 marker
|
||
checkoutPointlist.value.forEach((id) => {
|
||
const find = res.data.points.find((item) => item.id === id);
|
||
if (find && find.location) {
|
||
addPointMarker(id, find.location, find.pointName);
|
||
}
|
||
});
|
||
}
|
||
// 回显路线
|
||
if (res.data.pathPoints) {
|
||
renderSavedPath(res.data.pathPoints);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
}
|
||
}
|
||
// ! 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) {
|
||
listPoint({}).then((res) => {
|
||
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();
|
||
});
|
||
});
|
||
|
||
// 回显
|
||
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 = () => {
|
||
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];
|
||
|
||
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();
|
||
});
|
||
}
|
||
// }
|
||
});
|
||
};
|
||
// 返回
|
||
const cancelForm = () => {
|
||
router.back();
|
||
};
|
||
|
||
onUnmounted(() => {
|
||
map.value?.destroy();
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.AddBuildingBox {
|
||
padding: 15px;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
.AddBuildingBody {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
background-color: white;
|
||
padding: 15px;
|
||
.title {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
padding-left: 20px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
color: rgba(16, 16, 16, 1);
|
||
border-bottom: 1px solid #bbbbbb;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
.formBody {
|
||
width: 800px;
|
||
margin: 0 auto;
|
||
|
||
.itembox {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 15px;
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
color: #606266;
|
||
border: 1px solid #ccc;
|
||
padding: 5px 10px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
&:hover {
|
||
border-color: #409eff;
|
||
color: #409eff;
|
||
}
|
||
div {
|
||
margin-left: 10px;
|
||
}
|
||
&.active {
|
||
border-color: #409eff;
|
||
color: #409eff;
|
||
background-color: #f0f9ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.map {
|
||
width: 100%;
|
||
min-height: 500px;
|
||
background-color: #f0f0f0;
|
||
border: 1px solid #ccc;
|
||
border-radius: 4px;
|
||
margin-top: 10px;
|
||
}
|
||
.tips {
|
||
width: 100%;
|
||
margin-top: 10px;
|
||
font-size: 12px;
|
||
color: #ccc;
|
||
.deleteMarker {
|
||
margin-left: 20px;
|
||
cursor: pointer;
|
||
color: #f00;
|
||
}
|
||
}
|
||
&:deep(.el-form-item__content, .el-select, .el-input) {
|
||
width: 350px !important;
|
||
margin-right: 10px;
|
||
.el-cascader {
|
||
width: 100%;
|
||
}
|
||
}
|
||
.el-form-item {
|
||
margin-bottom: 20px;
|
||
align-items: center;
|
||
}
|
||
.el-button {
|
||
width: 80px;
|
||
height: 35px;
|
||
margin-right: 20px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|