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

6/24 统一地图组件入口，规范地图方法，属性。 完成天地图和高德切换

Browse Source
This commit is contained in:
Zy
2026-06-24 16:19:19 +08:00
parent 33d35c8d70
commit 4e2ae414c4
14 changed files with 515 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.env.development
View File

@@ -37,8 +37,6 @@ VITE_APP_SHOW_WORK_PLATFORM = true
# 地图类型 天地图 WGS84 高德地图 GCJ02, 高德地图 需要在高德地图官网申请key
# 高德地图 GCJ02
# 天地图 WGS84
VITE_APP_MAP_TYPE = 'GCJ02'
# 高德地图key 建议放入环境变量中，避免泄露
@@ -47,7 +45,6 @@ VITE_GCJ02_JS_CODE_GD = '09534b3534d8da53968529a9ce164118'
# 天地图key 建议放入环境变量中，避免泄露
VITE_TIANDITU_KEY = 'f71689f9e22158947ebf64ad95e0a595'
VITE_TIANDITU_JS_CODE = ''
# 接口加密功能开关(如需关闭 后端也必须对应关闭)

7
.env.production
View File

@@ -27,15 +27,16 @@ VITE_LOGIN_BACK_URL_WORKBENCH_TRUE= true
VITE_APP_SHOW_WORK_PLATFORM = true
# 地图类型 天地图 or 高德地图 天地图 WGS84 高德地图 GCJ02, 高德地图 需要在高德地图官网申请key
# 高德地图 GCJ02
# 天地图 WGS84
# 地图类型 天地图 WGS84 高德地图 GCJ02, 高德地图 需要在高德地图官网申请key
VITE_APP_MAP_TYPE = 'GCJ02'
# 高德地图key 建议放入环境变量中，避免泄露
VITE_GCJ02_KEY_GD = '8e302fe1be5f4db62bc734db23dca149'
VITE_GCJ02_JS_CODE_GD = '09534b3534d8da53968529a9ce164118'
# 天地图key 建议放入环境变量中，避免泄露
VITE_TIANDITU_KEY = 'f71689f9e22158947ebf64ad95e0a595'
# 是否在打包时开启压缩，支持 gzip 和 brotli

4
src/api/system/InspectionPoint/type.ts
View File

@@ -2,7 +2,7 @@ export interface PointVO {
/**
* 主键ID
*/
id: string | number;
id: string;
/**
* 巡检点名称
@@ -17,7 +17,7 @@ export interface PointVO {
/**
* 所属路线ID
*/
routeId: string | number;
routeId: string;
/**
* 巡检点位置（经纬度），格式：经度,纬度

2
src/api/system/InspectionRoute/index.ts
View File

@@ -20,7 +20,7 @@ export const listRoute = (query: RouteQuery | {} = {}): AxiosPromise<RouteVO[]>
* 查询巡检路线详细
* @param id
*/
export const getRoute = (id: string | number): AxiosPromise<RouteVO> => {
export const getRoute = (id: string): AxiosPromise<RouteVO> => {
return request({
url: '/inspection/route/' + id,
method: 'get'

4
src/api/system/InspectionRoute/type.ts
View File

@@ -4,7 +4,7 @@ export interface RouteVO {
/**
* 主键ID
*/
id: string | number;
id: string;
/**
* 巡检路线名称
@@ -70,7 +70,7 @@ export interface RouteForm extends BaseEntity {
/**
* 主键ID
*/
id?: string | number;
id?: string;
/**
* 巡检路线名称

42
src/components/Map/GD.vue
View File

@@ -2,6 +2,7 @@
import AMapLoader from '@amap/amap-jsapi-loader';
import { getVillageByIdAPI } from '@/api/system/community';
import { onUnmounted, ref, watch, onMounted, nextTick } from 'vue';
import { LngLat } from '@/components/Map/type';
// 密钥配置
const autoloader = import.meta.env.VITE_GCJ02_KEY_GD;
@@ -12,7 +13,7 @@ window._AMapSecurityConfig = { securityJsCode: VITE_GCJ02_JS_CODE_GD };
const AMAP = ref<any>(null);
const map = ref<any>(null);
const mapReady = ref(false);
const maploading = ref(false);
const mapLoading = ref(false);
const markers = ref<any[]>([]);
const mouseTool = ref<any>(null);
const AddMarkered = new Map<string, any>();
@@ -26,7 +27,7 @@ const props = defineProps({
},
clickOrDraw: {
type: Boolean,
default: false
default: true
},
smallScroll: {
type: Boolean,
@@ -34,7 +35,7 @@ const props = defineProps({
}
});
const emits = defineEmits<{
clickPoint: [value: number[]];
clickPoint: [value: LngLat];
}>();
// 对外暴露方法
@@ -191,7 +192,7 @@ function initDrawTool() {
}
/** 获取路线坐标数组 */
function getAllDrawLines(): number[][] {
function getAllDrawLines(): LngLat[] | [] {
if (!isMapAvailable() || drawnPolylines.length === 0) return [];
const path = drawnPolylines[0].getPath();
return path.map((p: any) => [p.lng, p.lat]);
@@ -257,7 +258,7 @@ function handleMap() {
// ===================== 地图初始化 =====================
onMounted(async () => {
maploading.value = true;
mapLoading.value = true;
try {
const AMap = await AMapLoader.load({
key: autoloader,
@@ -266,10 +267,6 @@ onMounted(async () => {
});
AMAP.value = AMap;
// 获取村庄城市定位
const villageInfo = await getVillageByIdAPI(village);
const city = villageInfo.data.city.replaceAll('/', '');
// 创建地图，全局关闭动画，解决移动缓慢
map.value = new AMap.Map('GD-Map', {
viewMode: '3D',
@@ -277,24 +274,33 @@ onMounted(async () => {
center: [116.397428, 39.90923]
});
// 城市地理编码定位
const geocoder = new AMap.Geocoder({ city });
geocoder.getLocation(city, (status: string, result: any) => {
if (status === 'complete' && result.info === 'OK') {
map.value.setCenter(result.geocodes[0].location.toArray());
}
});
try {
// 获取村庄城市定位
const villageInfo = await getVillageByIdAPI(village);
const city = villageInfo.data.city.replaceAll('/', '');
// 城市地理编码定位
const geocoder = new AMap.Geocoder({ city });
geocoder.getLocation(city, (status: string, result: any) => {
if (status === 'complete' && result.info === 'OK') {
map.value.setCenter(result.geocodes[0].location.toArray());
}
});
} catch (e) {
console.error(e);
map.value.setCenter([116.397428, 39.90923]);
}
mapReady.value = true;
// 禁用状态不开启绘制/点击
if (!props.disabled) {
console.log(props.clickOrDraw);
props.clickOrDraw ? handleMap() : MapDrawLine();
}
} catch (err) {
console.error('高德地图加载失败', err);
} finally {
maploading.value = false;
mapLoading.value = false;
}
});
@@ -319,7 +325,7 @@ onUnmounted(() => {
</script>
<template>
<div v-loading="maploading" class="map" id="GD-Map"></div>
<div v-loading="mapLoading" class="map" id="GD-Map"></div>
</template>
<style scoped lang="scss">

299
src/components/Map/TDT.vue
View File

@@ -1,9 +1,298 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
import { LngLat } from '@/components/Map/type';
// ========== 配置项，替换成你自己的天地图密钥 ==========
const TDT_TOKEN = import.meta.env.VITE_TIANDITU_KEY;
const TDT_CDN_URL = 'https://api.tianditu.gov.cn/api?v=4.0';
const mapLoading = ref(false);
let T: any = null;
let map = null;
const mapReady = ref(false);
// Props
const props = defineProps({
disabled: {
type: Boolean,
default: false
},
clickOrDraw: {
type: Boolean,
default: true
}
});
const emits = defineEmits<{
clickPoint: [lnglat: LngLat];
}>();
defineExpose({
addMarker_only,
clearLocation,
getAllDrawLines,
clearAll,
renderSavedPath,
clearMapMarker,
addMarker_more
});
const PointMap = new Map();
let handler = null; // 绘制工具
let lines = []; // 存储线
type WaitMarkerItem = { angular: LngLat; pointName: string };
type WaitMoreMarkerItem = { angular: LngLat; pointName: string; pointId: string };
const waitQueue = ref<{
onlyPoints: WaitMarkerItem[];
point: WaitMoreMarkerItem[];
routes: string[];
clear: boolean;
}>({
onlyPoints: [],
point: [],
routes: [],
clear: false
});
// 地图就绪后批量执行队列任务
watch(mapReady, async (ready) => {
if (!ready || !isMapAvailable()) return;
await nextTick();
// 先执行清空
if (waitQueue.value.clear) {
map.clearMap();
PointMap.clear();
markers = [];
lines = [];
waitQueue.value.clear = false;
}
// 批量多点标记
waitQueue.value.point.forEach((item) => addMarker_more(item.angular, item.pointName, item.pointId));
waitQueue.value.point = [];
// 单点标记
waitQueue.value.onlyPoints.forEach((item) => addMarker_only(item.angular, item.pointName));
waitQueue.value.onlyPoints = [];
// 路线回显
waitQueue.value.routes.forEach((pathStr) => renderSavedPath(pathStr));
waitQueue.value.routes = [];
});
let markers = [];
// ==================== 动态加载天地图JS + 初始化地图 ====================
function loadTDT(): Promise<any> {
return new Promise((resolve) => {
if ((window as any).T) return resolve((window as any).T);
const script = document.createElement('script');
script.src = `${TDT_CDN_URL}&tk=${TDT_TOKEN}`;
script.onload = () => resolve((window as any).T);
document.body.appendChild(script);
});
}
/** 根据提供的 坐标点数组 设置地图视野，调整后的视野会保证包含提供的坐标点。 */
function fitMapView(overlays: any[] = []) {
if (!isMapAvailable()) return;
map.setViewport(overlays);
}
// 判断 地图是否加载完成
function isMapAvailable() {
return mapReady.value && map && T;
}
/** 点击事件 */
function bindMapClick() {
if (!isMapAvailable()) return;
map.addEventListener('click', (e) => {
const { lng, lat } = e.lnglat;
emits('clickPoint', [lng, lat]);
});
}
/** 添加标注点 */
function addMarker_only(LngLat: LngLat, pointName: string = '巡检点') {
if (!isMapAvailable()) {
waitQueue.value.onlyPoints.push({ angular: LngLat, pointName });
return;
}
// 清空地图覆盖物
clearLocation();
const marker = new T.Marker(new T.LngLat(LngLat[0], LngLat[1]), {
title: pointName
});
//向地图上添加标注
markers = [marker];
map.addOverLay(marker);
fitMapView(markers.map((item) => item.getLngLat()));
return marker;
}
/** 清空单点标记 */
function clearLocation() {
if (!isMapAvailable() || markers.length === 0) return;
map.clearOverLays();
markers = [];
}
/** 添加 路线中的巡检点 */
function addMarker_more(LngLat: LngLat, pointName: string, pointId: string) {
if (!isMapAvailable()) {
waitQueue.value.point.push({ angular: LngLat, pointName, pointId });
return;
}
if (PointMap.has(pointId)) {
map.removeOverLay(PointMap.get(pointId));
PointMap.delete(pointId);
return;
}
const marker = new T.Marker(new T.LngLat(LngLat[0], LngLat[1]), {
title: pointName
});
PointMap.set(pointId, marker);
map.addOverLay(marker);
}
// !===================================================================
/** 初始化 划线 */
function initDrawTool() {
if (handler) handler.close();
handler = new T.PolylineTool(map);
handler.open();
handler.off('draw');
handler.on('draw', lineDraw);
}
// 监听 绘画完成事件
function lineDraw(data) {
if (lines.length > 0) {
lines.forEach((item) => {
map.removeOverLay(item);
});
}
lines = [data.currentPolyline];
initDrawTool();
}
/** 清空绘制工具 + 所有路线 */
function clearAll() {
if (!isMapAvailable()) return;
// 关闭绘图工具
handler.close();
// 删除所有折线
lines.forEach((line) => map.removeOverLay(line));
lines = [];
// 重新初始化绘图，可再次绘制
initDrawTool();
}
/** 获取当前路线坐标数组，对外统一格式 [[lng,lat],...] */
function getAllDrawLines(): LngLat[] | [] {
if (lines.length === 0) return [];
const path = lines.at(0).getLngLats();
return path.map((p: { lng: number; lat: number }) => [p.lng, p.lat]);
}
/** 回显历史路线 */
function renderSavedPath(pathStr: string) {
if (!isMapAvailable()) {
waitQueue.value.routes.push(pathStr);
return;
}
try {
const path = JSON.parse(pathStr);
if (!Array.isArray(path) || path.length === 0) return;
// 清空旧线
lines.forEach((line) => map.removeOverLay(line));
lines = [];
const paths = path.map((item) => {
return new T.LngLat(item[0], item[1]);
});
const polyline = new T.Polyline(paths);
lines.push(polyline);
map.addOverLay(polyline);
fitMapView(paths);
} catch (err) {
console.error('路线解析失败', err);
}
}
/** 清空地图所有覆盖物（标记+路线） */
function clearMapMarker() {
if (isMapAvailable()) {
map.clearOverLays();
markers = [];
lines = [];
} else {
waitQueue.value.clear = true;
}
}
onMounted(async () => {
mapLoading.value = true;
try {
T = await loadTDT();
map = new T.Map('TDT-Map', {
zoom: 11,
center: new T.LngLat(119.54, 35.42),
animateEnable: true
});
mapReady.value = true;
if (!props.disabled) {
props.clickOrDraw ? bindMapClick() : initDrawTool();
}
} finally {
mapLoading.value = false;
}
});
// ===================== 销毁清理 =====================
onUnmounted(() => {
map.clearOverLays();
map.clearLayers();
// 清空所有缓存队列
waitQueue.value.onlyPoints = [];
waitQueue.value.point = [];
waitQueue.value.routes = [];
waitQueue.value.clear = false;
// 清空覆盖物缓存
markers = [];
lines = [];
PointMap.clear();
if (handler) {
handler.close();
handler.off('draw');
handler = null;
}
mapReady.value = false;
// 销毁地图实例
map = null;
});
</script>
<template>
<div>
<!-- 天地图-->
</div>
<div v-loading="mapLoading" class="map" id="TDT-Map"></div>
</template>
<style scoped lang="scss"></style>
<style scoped lang="scss">
.map {
width: 450px;
height: 450px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 4px;
margin-top: 10px;
overflow: hidden;
position: relative;
}
/* 穿透天地图内部图层，强制限制在容器内 */
:deep(.tdt-map-container) {
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
</style>

44
src/components/Map/index.vue
View File

@@ -1,14 +1,36 @@
<script setup name="MapIndex" lang="ts">
import TDT from './TDT.vue';
import GD from './GD.vue';
const isGD = import.meta.env.VITE_APP_MAP_TYPE === 'GCJ02';
<script setup lang="ts">
import { ref, computed } from 'vue';
import type { IMapInstance, MapBaseProps, MapEmits } from './type';
import GDMap from './GD.vue';
import TdtMap from './TDT.vue';
const emits = defineEmits<MapEmits>();
const props = defineProps<MapBaseProps>();
const GDorTDT = import.meta.env.VITE_APP_MAP_TYPE !== 'GCJ02';
// 实例绑定
const GDRef = ref<InstanceType<typeof GDMap>>();
const tdtRef = ref<InstanceType<typeof TdtMap>>();
// 获取当前激活地图实例
const currentMap = computed(() => {
return GDorTDT ? GDRef.value : tdtRef.value;
});
// 统一代理所有地图方法，对外抹平差异
defineExpose<IMapInstance>({
addMarker_only: (...args: Parameters<IMapInstance['addMarker_only']>) => currentMap.value?.addMarker_only(...args),
clearLocation: () => currentMap.value?.clearLocation(),
addMarker_more: (...args: Parameters<IMapInstance['addMarker_more']>) => currentMap.value?.addMarker_more(...args),
getAllDrawLines: () => currentMap.value?.getAllDrawLines() ?? [],
renderSavedPath: (str: string) => currentMap.value?.renderSavedPath(str),
clearAll: () => currentMap.value?.clearAll(),
clearMapMarker: () => currentMap.value?.clearMapMarker()
});
</script>
<template>
<div>
<!-- 天地图 -->
<TDT v-if="!isGD"></TDT>
<!-- 高德地图-->
<GD v-else></GD>
</div>
<GDMap v-if="GDorTDT" v-bind="props" ref="GDRef" @click-point="(...args) => emits('clickPoint', ...args)" />
<TdtMap v-else ref="tdtRef" v-bind="props" @click-point="(...args) => emits('clickPoint', ...args)" />
</template>
<style scoped lang="scss"></style>

30
src/components/Map/type.ts Normal file
View File

@@ -0,0 +1,30 @@
// src/types/map.ts
export type LngLat = [number, number];
// 统一对外暴露的地图方法类型
export interface IMapInstance {
// 单点标记
addMarker_only(lnglat: LngLat, pointName: string): void;
clearLocation(): void;
// 多点可删除标记
addMarker_more(lnglat: LngLat, pointName: string, pointId: string): void;
// 绘制路线
getAllDrawLines(): LngLat[] | [];
renderSavedPath(pathStr: string): void;
clearAll(): void;
// 全局清空覆盖物
clearMapMarker(): void;
}
// 统一Props
export interface MapBaseProps {
/** 禁用功能，只做展示 */
disabled?: boolean;
/** true 标注点 false 路线*/
clickOrDraw?: boolean;
}
// 统一事件
export type MapEmits = {
clickPoint: [lnglat: LngLat];
};

10
src/types/env.d.ts vendored
View File

@@ -10,6 +10,7 @@ interface ImportMetaEnv {
VITE_APP_TITLE: string;
VITE_APP_PORT: number;
VITE_APP_BASE_API: string;
VITE_APP_PROXY_API: string;
VITE_APP_BASE_URL: string;
VITE_APP_CONTEXT_PATH: string;
VITE_APP_MONITOR_ADMIN: string;
@@ -21,6 +22,15 @@ interface ImportMetaEnv {
VITE_APP_CLIENT_ID: string;
VITE_APP_WEBSOCKET: string;
VITE_APP_SSE: string;
VITE_APP_MAP_TYPE: string;
VITE_GCJ02_KEY_GD: string;
VITE_GCJ02_JS_CODE_GD: string;
VITE_TIANDITU_KEY: string;
VITE_LOGIN_BACK_URL: string;
VITE_LOGIN_BACK_URL_WORKBENCH_TRU: boolean;
VITE_APP_SHOW_WORK_PLATFORM: boolean;
}
interface ImportMeta {
readonly env: ImportMetaEnv;

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

@@ -5,7 +5,7 @@
<div class="title">
<div>基本信息</div>
</div>
<div class="bodybox">
<div class="bodyBox">
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px" label-position="right">
<el-form-item label="巡检计划名称" prop="planName">
<el-input v-model="form.planName" placeholder="请输入"></el-input>
@@ -22,7 +22,7 @@
v-for="(item, index) in 7"
:key="index"
>
<div class="iconbox">
<div class="iconBox">
<el-icon v-show="checkoutWeek.includes(item)"><Check /></el-icon>
</div>
<span class="ml-5px">{{ numToWeek(item) }}</span>
@@ -64,7 +64,7 @@
<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>
<GD ref="GDef" :disabled="true"></GD>
<MapWrapper :disabled="true" ref="MapWrapperRef"></MapWrapper>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit">提交</el-button>
@@ -83,7 +83,9 @@ import { numToWeek } from '@/utils/time';
import { ref } from 'vue';
import { addPlan, getPlan, updatePlan } from '@/api/system/InspectionPlan';
import { Check } from '@element-plus/icons-vue';
import GD from '@/components/Map/GD.vue';
import MapWrapper from '@/components/Map/index.vue';
import { PointVO } from '@/api/system/InspectionPoint/type';
import { LngLat } from '@/components/Map/type';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_inspection_remind_tiime } = toRefs<any>(proxy?.useDict('com_inspection_remind_tiime'));
@@ -123,7 +125,7 @@ function checkoutWeekFun(val: number) {
// 提醒时间
// 巡检计划id
const editid = ref(null);
const editId = ref(null);
// 初始化
// 路线列表
@@ -132,8 +134,8 @@ async function init() {
const res = await listRoute();
playlist.value = res.rows;
if (route.query.id) {
editid.value = route.query.id;
getPlan(editid.value).then((res) => {
editId.value = route.query.id;
getPlan(editId.value).then((res) => {
form.value = {
id: res.data.id,
planName: res.data.planName, // 巡检计划名称
@@ -176,21 +178,21 @@ function outback() {
router.back();
}
const GDef = ref(null);
const MapWrapperRef = ref<InstanceType<typeof MapWrapper>>();
function handleChangeMap(val: string) {
if (val) {
GDef.value.clearMapMarker();
MapWrapperRef.value.clearMapMarker();
const find = playlist.value.find((item) => item.id === val);
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);
find.points.forEach((item: PointVO) => {
const angular = item.location.split(',').map(Number).filter(Boolean) as LngLat;
MapWrapperRef.value.addMarker_more(angular, item.pointName, item.id);
});
}
// 巡检路线
if (find.pathPoints) {
GDef.value.renderSavedPath(find.pathPoints);
MapWrapperRef.value.renderSavedPath(find.pathPoints);
}
}
}
@@ -208,7 +210,7 @@ function submit() {
formRef.value?.validate(async (valid: boolean) => {
if (valid) {
if (editid.value) {
if (editId.value) {
updatePlan(form.value).then(() => {
ElMessage.success('编辑成功');
outback();
@@ -229,7 +231,7 @@ function submit() {
margin-top: 20px;
padding: 30px;
background-color: white;
.bodybox {
.bodyBox {
width: 600px;
margin: 20px auto 0;
}
@@ -264,7 +266,7 @@ function submit() {
color: #44a0ff;
}
}
.deleteaction {
.deleteAction {
margin-left: 10px;
cursor: pointer;
&:hover {
@@ -284,7 +286,7 @@ function submit() {
color: #000;
display: flex;
align-items: center;
.iconbox {
.iconBox {
width: 30px;
height: 30px;
margin-left: 5px;

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

@@ -9,15 +9,15 @@
<el-input v-model.trim="form.pointName" placeholder="请输入巡检点名称" />
</el-form-item>
<el-form-item label="巡检项目" prop="itemId">
<div class="itembox">
<div class="itemBox">
<div
class="item"
:class="{
disabled: item.status === '1',
active: checkoutPointItemlist.includes(item.id)
active: checkoutPointItemList.includes(item.id)
}"
@click="checkoutItem(item.id)"
v-for="(item, index) in pointItemlist"
v-for="(item, index) in pointItemList"
:key="index"
>
<el-icon><Check /></el-icon>
@@ -25,11 +25,6 @@
</div>
</div>
</el-form-item>
<!-- <el-form-item label="打卡方式" prop="checkMode">
<el-select v-model="form.checkMode" placeholder="请选择打卡方式" clearable>
<el-option v-for="dict in com_inspection_point_checkmode" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item> -->
<el-form-item label="巡检点状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio v-for="item in com_inspection_point_status" :value="item.value" :key="item.value" :label="item.value">{{
@@ -38,7 +33,7 @@
</el-radio-group>
</el-form-item>
<el-form-item label="巡检点位置" prop="location">
<GD :click-or-draw="true" ref="GDef" @click-point="handleClickPoint"></GD>
<MapWrapper :click-or-draw="true" ref="MapWrapperRef" @click-point="handleClickMapPoint"></MapWrapper>
<div class="tips">
<span>点击地图选择位置</span>
<span
@@ -46,7 +41,7 @@
v-show="Boolean(marker)"
@click="
() => {
GDef.clearLocation();
MapWrapperRef.clearLocation();
}
"
>清空选择地点</span
@@ -74,7 +69,8 @@ import { listItem } from '@/api/system/InspectionItem';
import { onMounted } from 'vue';
import { Check } from '@element-plus/icons-vue';
import GD from '@/components/Map/GD.vue';
import MapWrapper from '@/components/Map/index.vue';
import { LngLat } from '@/components/Map/type';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_inspection_point_status } = toRefs<any>(proxy?.useDict('com_inspection_point_status'));
@@ -103,17 +99,17 @@ const rules = ref({
// !== 初始化 =============================================================================
const pointId = ref(null);
const pointItemlist = ref([]);
const checkoutPointItemlist = ref([]);
const pointItemList = ref([]);
const checkoutPointItemList = ref([]);
const marker = ref(null);
function checkoutItem(id: string) {
form.value.itemId = ''; // 每次点击都先清空 itemId
if (checkoutPointItemlist.value.includes(id)) {
checkoutPointItemlist.value = checkoutPointItemlist.value.filter((item) => item !== id);
if (checkoutPointItemList.value.includes(id)) {
checkoutPointItemList.value = checkoutPointItemList.value.filter((item) => item !== id);
} else {
checkoutPointItemlist.value.push(id);
checkoutPointItemList.value.push(id);
}
form.value.itemId = checkoutPointItemlist.value.join(','); // 将选中的 id 数组转换为逗号分隔的字符串
form.value.itemId = checkoutPointItemList.value.join(','); // 将选中的 id 数组转换为逗号分隔的字符串
}
function init() {
// 获取巡检项目列表
@@ -122,7 +118,7 @@ function init() {
pageNum: 1,
pageSize: 9999
}).then((res) => {
pointItemlist.value = res.rows;
pointItemList.value = res.rows;
});
if (route.query.id) {
@@ -133,18 +129,15 @@ function init() {
...form.value,
...res.data
};
// 如果有 itemId，拆分到 checkoutPointItemlist
// 如果有 itemId，拆分到 checkoutPointItemList
if (res.data.itemId) {
checkoutPointItemlist.value = res.data.itemId.split(',');
checkoutPointItemList.value = res.data.itemId.split(',');
}
const location = form.value.location
.split(',')
.map((item) => Number(item))
.filter((item) => !Number.isNaN(item));
const location = form.value.location.split(',').map(Number).filter(Boolean) as LngLat;
if (location.length >= 2) {
setTimeout(() => {
marker.value = GDef.value.addMarker_only(location);
marker.value = MapWrapperRef.value.addMarker_only(location, form.value.pointName);
}, 500);
}
});
@@ -156,7 +149,7 @@ const submitForm = () => {
formRef.value?.validate(async (valid: boolean) => {
if (valid) {
// 设置 itemId
form.value.itemId = checkoutPointItemlist.value.join(',');
form.value.itemId = checkoutPointItemList.value.join(',');
if (pointId.value) {
updatePoint(form.value).then(() => {
ElMessage.success('编辑成功');
@@ -176,11 +169,11 @@ const cancelForm = () => {
router.back();
};
const GDef = ref();
function handleClickPoint(laglat: number[]) {
const MapWrapperRef = ref<InstanceType<typeof MapWrapper>>();
function handleClickMapPoint(LngLat: LngLat) {
marker.value = null;
form.value.location = `${laglat[0]},${laglat[1]}`;
marker.value = GDef.value.addMarker_only(laglat);
form.value.location = `${LngLat[0]},${LngLat[1]}`;
marker.value = MapWrapperRef.value.addMarker_only(LngLat, form.value.pointName);
}
onMounted(async () => {
@@ -215,7 +208,7 @@ onMounted(async () => {
width: 800px;
margin: 0 auto;
.itembox {
.itemBox {
display: flex;
flex-wrap: wrap;
.item {

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

@@ -9,23 +9,23 @@
<el-input v-model.trim="form.routeName" placeholder="请输入巡检路线名称" />
</el-form-item>
<el-form-item label="巡检点">
<div class="itembox">
<div class="itemBox">
<div
class="item"
:class="{
active: checkoutPointlist.includes(item.id)
active: checkoutPointList.includes(item.id)
}"
v-for="(item, index) in pointslist"
v-for="(item, index) in pointsList"
@click="checkoutItemPoint(item)"
:key="index"
>
<el-icon v-show="checkoutPointlist.includes(item.id)"><Check /></el-icon>
<el-icon v-show="checkoutPointList.includes(item.id)"><Check /></el-icon>
<div>{{ item.pointName }}</div>
</div>
</div>
</el-form-item>
<el-form-item label="绘制巡检路线">
<GD :small-scroll="true" ref="GDef" :click-or-draw="false"></GD>
<MapWrapper :click-or-draw="false" ref="MapWrapperRef"></MapWrapper>
<div class="tips flex flex-items-center justify-between">
<div>点击地图，绘制巡检路线；再次点击可继续绘制下一条（但只能保留一条）</div>
<div>
@@ -33,7 +33,7 @@
class="deleteMarker"
@click="
() => {
GDef.clearAll();
MapWrapperRef.clearAll();
}
"
>清空所有路线</span
@@ -60,7 +60,9 @@ import { onMounted, onUnmounted } from 'vue';
import { addRoute, getRoute, updateRoute } from '@/api/system/InspectionRoute';
import { Check } from '@element-plus/icons-vue';
import GD from '@/components/Map/GD.vue';
import MapWrapper from '@/components/Map/index.vue';
import { LngLat } from '@/components/Map/type';
import { PointVO } from '@/api/system/InspectionPoint/type';
const router = useRouter();
const route = useRoute();
@@ -85,19 +87,19 @@ const rules = ref({
estimatedTime: [{ required: true, message: '请输入预计巡检时长', trigger: 'blur' }]
});
const GDef = ref();
const routeid = ref(null);
const MapWrapperRef = ref<InstanceType<typeof MapWrapper>>();
const routeId = ref(null);
// 巡检点 列表
const pointslist = ref([]);
const pointsList = ref<PointVO[]>([]);
// 选择巡检点列表
const checkoutPointlist = ref([]);
const checkoutPointList = ref([]);
// ! 初始化 =========================================================================
function init() {
if (route.query.id) {
routeid.value = route.query.id;
routeId.value = route.query.id;
// 获取巡检点详情
getRoute(routeid.value).then((res) => {
getRoute(routeId.value).then((res) => {
form.value = {
id: res.data.id,
startLat: res.data.startLat,
@@ -112,29 +114,27 @@ function init() {
totalPoints: res.data.totalPoints // 巡检点
};
nextTick(() => {
if (routeid.value) {
checkoutPointlist.value = res.data.totalPoints ? res.data.totalPoints.split(',') : [];
if (checkoutPointlist.value.length > 0) {
if (routeId.value) {
checkoutPointList.value = res.data.totalPoints ? res.data.totalPoints.split(',') : [];
if (checkoutPointList.value.length > 0) {
// 回显 marker
checkoutPointlist.value.forEach((id) => {
checkoutPointList.value.forEach((id) => {
const find = res.data.points.find((item) => item.id === id);
if (find && find.location) {
// addPointMarker(id, find.location, find.pointName);
const location = find.location
.split(',')
.map((item) => Number(item))
.filter((item) => !Number.isNaN(item));
.filter(Boolean) as LngLat;
if (location.length >= 2) {
GDef.value.addMarker_more(location, find.pointName, find.id);
MapWrapperRef.value.addMarker_more(location, find.pointName, find.id);
}
}
});
}
// 回显路线
if (res.data.pathPoints) {
// renderSavedPath(res.data.pathPoints);
setTimeout(() => {
GDef.value.renderSavedPath(res.data.pathPoints);
MapWrapperRef.value.renderSavedPath(res.data.pathPoints);
}, 800);
}
}
@@ -146,9 +146,9 @@ const map = ref<any>(null);
onMounted(async () => {
// 获取巡检点列表
if (!routeid.value) {
if (!routeId.value) {
listPoint({}).then((res) => {
pointslist.value = res.rows;
pointsList.value = res.rows;
});
}
await nextTick(() => init());
@@ -163,15 +163,15 @@ const submitForm = () => {
formRef.value?.validate(async (valid: boolean) => {
if (valid) {
// 获取路线经纬度
const path = GDef.value.getAllDrawLines() as [number, number][];
const path = MapWrapperRef.value.getAllDrawLines() as LngLat[];
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];
const [start_lng, start_lat] = path.at(0) as LngLat;
const [end_lng, end_lat] = path.at(-1) as LngLat;
form.value.startLng = `${start_lng}`;
form.value.startLat = `${start_lat}`;
@@ -179,8 +179,8 @@ const submitForm = () => {
form.value.endLat = `${end_lat}`;
form.value.pathPoints = JSON.stringify(path);
form.value.totalPoints = checkoutPointlist.value.join(',');
if (routeid.value) {
form.value.totalPoints = checkoutPointList.value.join(',');
if (routeId.value) {
updateRoute(form.value).then(() => {
ElMessage.success('编辑成功');
cancelForm();
@@ -200,20 +200,19 @@ const cancelForm = () => {
};
// 点击展现 巡检点
function checkoutItemPoint(pop) {
const find = pointslist.value.find((item) => item.id === pop.id);
function checkoutItemPoint(pop: PointVO) {
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) ?? [];
const locations = find.location
.split(',')
.map((item: string) => Number(item))
.filter(Boolean) as LngLat;
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);
MapWrapperRef.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);
checkoutPointList.value.push(pop.id);
}
} else {
ElMessage.error(find.pointName + ' - 巡检点经纬度定位有误');
@@ -252,7 +251,7 @@ onUnmounted(() => {
width: 800px;
margin: 0 auto;
.itembox {
.itemBox {
display: flex;
flex-wrap: wrap;
.item {

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

@@ -5,7 +5,7 @@
<div class="title">
<div>基本信息</div>
</div>
<div class="bodybox">
<div class="bodyBox">
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px" label-position="right">
<el-form-item label="任务名称" prop="taskName">
<el-input v-model="form.taskName" placeholder="请输入"></el-input>
@@ -14,7 +14,7 @@
<div class="inspectorIdsBox">
<div v-for="(item, index) in checkoutUserlist" :key="index" class="inspector_items">
<div class="name">{{ item.nickName }}</div>
<i @click="handleDelete(item.userId)" class="deleteaction">
<i @click="handleDelete(item.userId)" class="deleteAction">
<el-icon><Delete /></el-icon>
</i>
</div>
@@ -51,22 +51,17 @@
<el-option v-for="item in com_inspection_remind_tiime" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<!-- <el-form-item label="巡检设置">
<el-checkbox-group @change="handleChagneSetting" v-model="Settinglist">
<el-checkbox v-for="(item, index) in com_inspection_plan_setting" :key="index" :label="item.label" :value="item.value" />
</el-checkbox-group>
</el-form-item> -->
<el-form-item label="关联计划" props="planId">
<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-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">
<GD v-loading="maploading" ref="GDef" :disabled="true"></GD>
<MapWrapper v-loading="mapLoading" :disabled="true" ref="MapWrapperRef"></MapWrapper>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit">提交</el-button>
<el-button @click="routeback">返回</el-button>
<el-button @click="outback">返回</el-button>
</el-form-item>
</el-form>
</div>
@@ -82,8 +77,8 @@ import { ref } from 'vue';
import { listPlan } from '@/api/system/InspectionPlan';
import { addTask, getTask, updateTask } from '@/api/system/InspectionTask';
import { getRoute } from '@/api/system/InspectionRoute';
import GD from '@/components/Map/GD.vue';
import MapWrapper from '@/components/Map/index.vue';
import { LngLat } from '@/components/Map/type';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_inspection_remind_tiime } = toRefs<any>(proxy?.useDict('com_inspection_remind_tiime'));
@@ -106,36 +101,19 @@ const rules = ref({
inspectorId: [{ required: true, message: '请选择巡检人员', trigger: 'blur' }],
planId: [{ required: true, message: '请选择巡检计划', trigger: 'blur' }]
});
// 提醒时间
const remindTimeoptions = ref([
{
value: 10,
label: '任务开始前10分钟'
},
{
value: 15,
label: '任务开始前15分钟'
},
{
value: 20,
label: '任务开始前30分钟'
}
]);
// 巡检计划id
const editid = ref(null);
const editId = ref(null);
// 初始化
// 路线列表
const planlist = ref([]);
const planList = ref([]);
async function init() {
// 获取 路线 列表
const res = await listPlan();
planlist.value = res.rows;
planList.value = res.rows;
if (route.query.id) {
editid.value = route.query.id;
getTask(editid.value).then((res) => {
editId.value = route.query.id;
getTask(editId.value).then((res) => {
form.value = {
id: res.data.id,
taskName: res.data.taskName, // 巡检计划名称
@@ -157,51 +135,51 @@ function handleAddUser() {
RepairUserRef.value.open();
}
const checkoutUserlist = ref([]);
function handleUserChange(val) {
function handleUserChange(val: any[]) {
checkoutUserlist.value = val;
}
function handleDelete(id) {
function handleDelete(id: string) {
checkoutUserlist.value = checkoutUserlist.value.filter((item) => item.userId !== id);
}
// 返回
function routeback() {
function outback() {
router.back();
}
const maploading = ref(false);
const mapLoading = ref(false);
const GDef = ref(null);
const MapWrapperRef = ref<InstanceType<typeof MapWrapper>>();
function handleChangeMap(val: string) {
maploading.value = true;
const find = planlist.value.find((item) => item.id === val);
mapLoading.value = true;
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();
MapWrapperRef.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);
const angular = item.location.split(',').map(Number).filter(Boolean) as LngLat;
MapWrapperRef.value.addMarker_more(angular, item.pointName, item.id);
});
}
// 巡检路线
if (res.data.pathPoints) {
GDef.value.renderSavedPath(res.data.pathPoints);
MapWrapperRef.value.renderSavedPath(res.data.pathPoints);
}
}
})
.finally(() => {
maploading.value = false;
mapLoading.value = false;
});
} else {
maploading.value = false;
mapLoading.value = false;
}
} else {
maploading.value = false;
mapLoading.value = false;
}
}
@@ -219,15 +197,15 @@ function submit() {
form.value.inspectorId = checkoutUserlist.value.map((item) => item.userId).join(',');
formRef.value?.validate(async (valid: boolean) => {
if (valid) {
if (editid.value) {
if (editId.value) {
updateTask(form.value).then(() => {
ElMessage.success('编辑成功');
routeback();
outback();
});
} else {
addTask(form.value).then(() => {
ElMessage.success('添加成功');
routeback();
outback();
});
}
}
@@ -240,7 +218,7 @@ function submit() {
margin-top: 20px;
padding: 30px;
background-color: white;
.bodybox {
.bodyBox {
width: 600px;
margin: 20px auto 0;
}
@@ -275,7 +253,7 @@ function submit() {
color: #44a0ff;
}
}
.deleteaction {
.deleteAction {
margin-left: 10px;
cursor: pointer;
&:hover {
@@ -295,7 +273,7 @@ function submit() {
color: #000;
display: flex;
align-items: center;
.iconbox {
.iconBox {
width: 30px;
height: 30px;
margin-left: 5px;