renkang/xj-screen
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source 
1.修改大屏问题及添加新需求
This commit is contained in:
weixin
2025-09-26 18:57:17 +08:00
parent f024615260
commit 7154314e93
21 changed files with 766 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/indexSun/centerMap.vue
+157 -43
View File
@@ -23,7 +23,8 @@
<div class="reset-map" :class="[themeType]" @click="resetMap">
<RedoOutlined title="重置地图" />
</div>
<div v-show="showRoutePanel" v-click-outside="outClick" class="line-container">
<!-- <div v-show="showRoutePanel" v-click-outside="outClick" class="line-container" :class="['no-top']">-->
<div v-show="showRoutePanel" class="line-container" :class="[currentIndex !== list.length - 1 ? 'no-top' : '']">
<div v-show="routeList.length > 0" class="has-data">
<div class="line-title"> {{ panelTitle }}</div>
<div class="line-content">
@@ -68,7 +69,7 @@
<div>
<img :src="noLocationPng" alt="" />
</div>
<div> 未获取到当前救助人员的位置信息 </div>
<div> 未获取到当前求助信息的位置信息 </div>
</div>
</div>
</div>
@@ -97,6 +98,8 @@
const formState = ref({
start: '',
end: '',
startPosition: [],
endPosition: [],
});
// 1 aed 2 健康小屋 3 油田医院 4 救护车
const numList = reactive([useStore.getTypeThree, useStore.getTypeOne, useStore.getTypeFive, useStore.getTypeFour]);
@@ -127,14 +130,17 @@
type: Boolean,
default: () => false,
},
userData: {
type: Object,
default: () => {},
},
});
const showRoutePanel = ref(false);
const panelTitle = ref();
const level = ref(0);
const routeList = ref([]);
const routeList = ref<any[]>([]);
const emits = defineEmits(['clearHospitalList', 'showRestB', 'handleDetail']);
let placeSearch = null;
let driving = null;
let placeSearch: any = null;
watch(
() => props.showHospitalList,
(v) => {
@@ -169,11 +175,11 @@
$bus.on(earlyWarning, (params) => {
drawMarker(params);
});
document.addEventListener('click', (e) => {
document.addEventListener('click', (e: any) => {
let t = e.target.closest('.viewBtn');
if (t) {
if (t.id) {
handleClcikDetail(JSON.parse(t.id));
handleClickDetail(JSON.parse(t.id));
}
}
});
@@ -185,17 +191,20 @@
const poi = result.poiList.pois[0]; // 取第一个结果
const { lat, lng } = poi.location;
formState.value.start = poi.name;
formState.value.startPosition = [lng, lat];
Map.createSMarker([lng, lat]);
Map.map.setZoom(15);
}
});
}
function endSelect(e: any) {
placeSearch.search(e.poi.name, function (status, result) {
if (status === 'complete' && result.poiList.pois.length > 0) {
const poi = result.poiList.pois[0]; // 取第一个结果
const { lat, lng } = poi.location;
formState.value.end = poi.name;
formState.value.endPosition = [lng, lat];
Map.createEMarker([lng, lat]);
Map.map.setZoom(15);
}
@@ -205,7 +214,7 @@
function showDrivingLine(item) {
nextTick(() => {
panelTitle.value = '全程' + item.driveTime + item.distance;
routeList.value = item.routeList?.map((item) => item?.instruction);
routeList.value = item.routeList?.map((item: any) => item?.instruction);
if (item.lon) {
Map.clearNaviLine();
Map.createNaviLine(item.userLocation, [item.lon, item.lat]);
@@ -221,14 +230,46 @@
function removeInput() {
formState.value.start = '';
formState.value.startPosition = [];
formState.value.end = '';
formState.value.endPosition = [];
searchFlag.value = false;
Map.startMarker && Map.startMarker?.setMap(null);
Map.endMarker && Map.endMarker?.setMap(null);
Map.driving && Map.driving.clear();
Map.walking && Map.walking.clear();
}
function changeTab(item: any, i: number) {
closeDrivingElement();
currentIndex.value = i;
closeDrivingElement();
tab(item);
if (item.hasOwnProperty('type')) {
formState.value.startPosition = [];
formState.value.endPosition = [];
emits('showRestB');
} else {
setInfoByUserData(props.userData);
}
}
function setInfoByUserData(data: any) {
if (data?.address) {
formState.value.start = data.address;
formState.value.startPosition = [data?.lon, data?.lat];
} else {
if (data?.lon && data?.lat) {
formState.value.startPosition = [data?.lon, data?.lat];
Map.getAddressByPoint([data?.lon, data?.lat])
.then((res: any) => {
formState.value.start = res;
})
.catch((err) => {
console.log(err);
formState.value.start = '';
});
}
}
}
function tab(item: any) {
@@ -242,7 +283,7 @@
tab(item);
}
function searchRoute(callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) {
async function searchRoute(callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) {
showRoutePanel.value = false;
panelTitle.value = '';
if (!formState.value.start) {
@@ -251,44 +292,83 @@
if (!formState.value.end) {
return message.warn('请输入终点');
}
getSearch(formState.value);
}
function getSearch({ startPosition, endPosition, start, end }) {
Map.driving && Map.driving.clear();
Map.walking && Map.walking.clear();
const distance = Map.getDistance(startPosition, endPosition);
searchFlag.value = true;
// let map = new Map.aMap.Map('container', {
// resizeEnable: true,
// center: [116.397428, 39.90923], //地图中心点
// zoom: 13, //地图显示的缩放级别
// });
driving = new Map.aMap.Driving({
map: Map.map,
panel: 'panel',
});
driving.search([{ keyword: formState.value.start }, { keyword: formState.value.end }], function (status, result) {
// result 即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === 'complete') {
// console.log('绘制驾车路线完成');
if (distance > 2000) {
Map.driving = new Map.aMap.Driving({
map: Map.map,
panel: 'panel',
});
Map.driving.search([{ keyword: start }, { keyword: end }], function (status: any) {
// result 即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === 'complete') {
// console.log('绘制驾车路线完成');
searchFlag.value = false;
} else {
searchFlag.value = false;
}
});
Map.aMap.Event.addListener(Map.driving, 'complete', (res: any) => {
const data = JSON.parse(JSON.stringify(res));
searchFlag.value = false;
} else {
if (data.info == 'OK') {
const { routes } = data;
setTitle(routes[0]);
let arr = [];
arr.push(data.originName);
routes[0].steps.map((item: any) => {
arr.push(item.instruction);
});
arr.push(data.destinationName);
showRoutePanel.value = true;
routeList.value = arr;
}
});
} else {
Map.walking = new Map.aMap.Walking({
map: Map.map,
panel: 'panel',
});
Map.walking.search([{ keyword: start }, { keyword: end }], function (status: any) {
// result 即是对应的步行导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === 'complete') {
// console.log('绘制步行路线完成');
searchFlag.value = false;
} else {
searchFlag.value = false;
}
});
Map.aMap.Event.addListener(Map.walking, 'complete', (res: any) => {
const data = JSON.parse(JSON.stringify(res));
searchFlag.value = false;
}
});
Map.aMap.Event.addListener(driving, 'complete', (res) => {
const data = JSON.parse(JSON.stringify(res));
searchFlag.value = false;
if (data.info == 'OK') {
const { routes } = data;
setTitle(routes[0]);
let arr = [];
arr.push(data.originName);
routes[0].steps.map((item: any) => {
arr.push(item.instruction);
});
arr.push(data.destinationName);
showRoutePanel.value = true;
routeList.value = arr;
}
});
if (data.info == 'ok') {
const { routes } = data;
setTitle(routes[0]);
let arr = [];
arr.push(data.originName);
routes[0].steps.map((item: any) => {
arr.push(item.instruction);
});
arr.push(data.destinationName);
showRoutePanel.value = true;
routeList.value = arr;
}
});
}
}
async function getMapData(type, params = { type: '' }) {
async function getMapData(type: any, params = { type: '' }) {
try {
const { code, result } = await mapApiSwitch(type, params);
if (!params.type) {
@@ -327,7 +407,7 @@
// const viewBtn = document.getElementById(val.id);
// viewBtn.onclick = () => {
// handleClcikDetail(val);
// handleClickDetail(val);
// };
},
true
@@ -342,15 +422,20 @@
}
function closeDrivingElement() {
if (driving) driving.clear();
Map.clearNavigationElements();
Map.driving && Map.driving.clear();
Map.walking && Map.walking.clear();
if (currentIndex.value !== list.value.length - 1) {
Map.clearNavigationElements();
} else {
Map.clearNaviLine();
}
formState.value.start = '';
formState.value.end = '';
showRoutePanel.value = false;
emits('clearHospitalList');
}
function handleClcikDetail(res) {
function handleClickDetail(res: any) {
emits('handleDetail', res);
}
@@ -389,12 +474,27 @@
function resetMap() {
Map.clearSOrE();
closeDrivingElement();
removeInput();
changeTab(list.value[currentIndex.value === 4 ? 0 : currentIndex.value], currentIndex.value);
emits('showRestB');
}
function newResetMap() {
Map.clearSOrE();
closeDrivingElement();
removeInput();
tab(currentIndex.value);
}
function setStartPosition(data: any) {
setInfoByUserData(data);
}
defineExpose({
resetMap,
newResetMap,
setStartPosition,
getSearch,
});
</script>
@@ -668,11 +768,19 @@
padding: 9px 18px;
min-height: 200px;
max-height: 473px;
overflow: auto;
overflow: hidden;
background: #0a1d36;
border-radius: 2px;
display: flex;
flex-direction: column;
//border: 1px solid #1b7ef2;
.has-data {
height: 100%;
display: flex;
flex-direction: column;
overflow: auto;
}
.line-title {
margin-bottom: 9px;
font-size: 14px;
@@ -682,6 +790,8 @@
}
.line-content {
flex: 1;
overflow: auto;
font-size: 12px;
color: var(--cardFontColor);
@@ -785,4 +895,8 @@
}
}
}
.no-top {
top: 50px !important;
}
</style>