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

update

Browse Source 
1.应急事件显示信息过长，精简一下。
2.救护车图标配色调整
3.医院图标增大一点，显示图标及应急求助时的推荐图标
4.急救弹窗添加呼吸效果
5.急救路线搜索框，控制只搜索新疆境内
6.咨询大屏也要监听事件并弹出弹窗
This commit is contained in:
weixin
2025-10-31 17:51:22 +08:00
parent f44e372210
commit f617922cd3
18 changed files with 480 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/indexSun/centerMap.vue
+113 -80
View File
@@ -141,6 +141,8 @@
const routeList = ref<any[]>([]);
const emits = defineEmits(['clearHospitalList', 'showRestB', 'handleDetail']);
let placeSearch: any = null;
let sListen: any = null;
let eListen: any = null;
watch(
() => props.showHospitalList,
(v) => {
@@ -156,21 +158,15 @@
innerLineOption: innerLineLight,
outerLineOption: outerLineOption,
};
Map.initMap(op).then(() => {
getMapData(tabList[0].type);
Map.initMap(op).then(async () => {
await getMapData(tabList[0].type);
Map.map && Map.map.on('zoomend', setLevel);
Map.map && Map.map.on('zoomend', setLevel);
placeSearch = new Map.aMap.PlaceSearch({
extensions: 'all',
pageIndex: 1,
pageSize: 10,
showMarker: false,
await initPlaceSearch();
Map.map.on('moveend', async () => {
// 获取当前地图的中心点[citation:2][citation:6]
await initPlaceSearch();
});
// 确保 AutoComplete 加载完成后再使用
const startAuto = new Map.aMap.AutoComplete({ input: 'startInput' });
const endAuto = new Map.aMap.AutoComplete({ input: 'endInput' });
startAuto.on('select', startSelect);
endAuto.on('select', endSelect);
});
$bus.on(earlyWarning, (params) => {
drawMarker(params);
@@ -185,8 +181,35 @@
});
});
async function initPlaceSearch() {
placeSearch = null;
let city = {};
if (Map.map) {
const { lng, lat } = Map.map.getCenter();
city = await Map.getInfoByPoint([lng, lat]);
} else {
city = {};
}
// 确保 AutoComplete 加载完成后再使用
const startAuto = new Map.aMap.AutoComplete({ input: 'startInput', city, citylimit: true, closeResultOnScroll: false });
const endAuto = new Map.aMap.AutoComplete({ input: 'endInput', city, citylimit: true, closeResultOnScroll: false });
placeSearch = new Map.aMap.PlaceSearch({
city,
extensions: 'all',
pageIndex: 1,
pageSize: 30,
showMarker: false,
});
// const lnglat = Map.aMap.LngLat(87, 43);
// placeSearch.searchNearBy(lnglat, 1000);
sListen && startAuto.off(sListen);
eListen && endAuto.off(eListen);
sListen = startAuto.on('select', startSelect);
eListen = endAuto.on('select', endSelect);
}
function startSelect(e: any) {
placeSearch.search(e.poi.name, function (status, result) {
placeSearch.search(e.poi.name, function (status: any, result: any) {
if (status === 'complete' && result.poiList.pois.length > 0) {
const poi = result.poiList.pois[0]; // 取第一个结果
const { lat, lng } = poi.location;
@@ -199,7 +222,7 @@
}
function endSelect(e: any) {
placeSearch.search(e.poi.name, function (status, result) {
placeSearch.search(e.poi.name, function (status: any, result: any) {
if (status === 'complete' && result.poiList.pois.length > 0) {
const poi = result.poiList.pois[0]; // 取第一个结果
const { lat, lng } = poi.location;
@@ -211,7 +234,7 @@
});
}
function showDrivingLine(item) {
function showDrivingLine(item: any) {
nextTick(() => {
panelTitle.value = '全程' + item.driveTime + item.distance;
routeList.value = item.routeList?.map((item: any) => item?.instruction);
@@ -296,75 +319,87 @@
}
function getSearch({ startPosition, endPosition, start, end }) {
if (Map.mapDriverOrWalkLoading) return message.warn('路线规划中，请稍等');
Map.mapDriverOrWalkLoading = true;
Map.driving && Map.driving.clear();
Map.walking && Map.walking.clear();
const distance = Map.getDistance(startPosition, endPosition);
console.log(startPosition.join(','), endPosition.join(','));
searchFlag.value = true;
const startArr = new Map.aMap.LngLat(startPosition[0], startPosition[1]);
const endtArr = new Map.aMap.LngLat(endPosition[0], endPosition[1]);
// let map = new Map.aMap.Map('container', {
// resizeEnable: true,
// center: [116.397428, 39.90923], //地图中心点
// zoom: 13, //地图显示的缩放级别
// });
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('绘制驾车路线完成');
try {
if (distance > 2000) {
Map.driving = new Map.aMap.Driving({
map: Map.map,
panel: 'panel',
});
Map.driving.search(startArr, endtArr, 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;
Map.mapDriverOrWalkLoading = false;
}
});
} else {
Map.walking = new Map.aMap.Walking({
map: Map.map,
panel: 'panel',
});
Map.walking.search(startArr, endtArr, 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(Map.driving, 'complete', (res: any) => {
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;
}
});
} 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;
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;
Map.mapDriverOrWalkLoading = false;
}
});
}
} catch (e) {
console.log(e);
Map.mapDriverOrWalkLoading = false;
}
}
@@ -404,11 +439,6 @@
} else {
Map.createInfoModal({ option: val, content: infoContent1(val) });
}
// const viewBtn = document.getElementById(val.id);
// viewBtn.onclick = () => {
// handleClickDetail(val);
// };
},
true
);
@@ -622,7 +652,7 @@
.legend-img {
width: 20px;
margin-right: 5px;
margin: -4px 5px 0 0;
}
}
}
@@ -689,7 +719,6 @@
:deep(.modal-box) {
width: 330px;
height: 220px;
padding: 10px 20px;
display: flex;
flex-direction: column;
@@ -731,6 +760,10 @@
}
}
:deep(.modal-box-normal) {
width: 330px;
height: 150px;
}
:deep(.modal-box-normal-1) {
width: 330px;
height: 110px;
}
src/views/indexSun/indexSun.ts
+18 -4
View File
@@ -132,7 +132,7 @@ export const tabList = [
export const legendList = [
{ img: legend2, text: '健康小屋', color: '#1BEFF6' },
{ img: legend1, text: '油田医院', color: '#D86AF7' },
{ img: legend3, text: '救护车', color: '#EE7E31' },
{ img: legend3, text: '救护车', color: '#45FFA1' },
{ img: legend4, text: 'AED', color: '#F23F3D' },
];
@@ -143,11 +143,15 @@ export function infoContent(res: any) {
<span class="item-one">单位：</span>
<span class="item-two">${res.orgName ? res.orgName : '--'}</span>
</div>
<div class="modal-item" >
<div class="modal-item" style="margin: 5px 0">
<span class="item-one">关爱人数：</span>
<span class="item-two">${res.loveNum ? res.loveNum : '--'}</span>
</div>
<div class="modal-item">
<div class="modal-item" style="margin: 0 0 5px 0;">
<span class="item-one">电话：</span>
<span class="item-two">${res.mobile ? res.mobile : '--'}</span>
</div>
<div class="modal-item" style="margin: 0 0 5px 0;">
<span class="item-one">地点：</span>
<span class="item-two">${res.name ? res.name : '--'}</span>
</div>
@@ -158,11 +162,21 @@ export function infoContent(res: any) {
}
export function infoContent1(res: any) {
return `
<div class="modal-box modal-box-normal">
<div class="modal-box ${res.type === '1' ? 'modal-box-normal' : 'modal-box-normal-1'}">
<div class="modal-item">
<span class="item-one">${res.type === '1' ? '医院名称' : '救护车名称'}：</span>
<span class="item-two">${res.name ? res.name : '--'}</span>
</div>
${
res.type === '1'
? `
<div class="modal-item" style="margin: 5px 0">
<span class="item-one">电话：</span>
<span class="item-two">${res.mobile ? res.mobile : '--'}</span>
</div>
`
: ``
}
<div class="modal-item">
<span class="item-one">地点：</span>
<span class="item-two">${res.orgName ? res.orgName : '--'}</span>
src/views/indexSun/oneRightNew.vue
+17 -3
View File
@@ -57,7 +57,7 @@
<div style="color: #ffffff">{{ props.userData?.careLiaisonPhone }}</div>
</template>
<template v-else>
<div class="no-data"> 该员工暂未设置关爱联络员 <img :src="pointPng" alt="" /></div>
<div class="no-data"> 暂未配置关爱联络员 <img :src="pointPng" alt="" /></div>
</template>
</div>
<div>
@@ -67,7 +67,7 @@
<div style="color: #ffffff">{{ props.userData?.lifeguardPhone }}</div>
</template>
<template v-else>
<div class="no-data"> 该员工暂未设置急救人员 <img :src="pointPng" alt="" /></div>
<div class="no-data"> 暂未配置急救人员 <img :src="pointPng" alt="" /></div>
</template>
</div>
</div>
@@ -155,7 +155,21 @@
const emit = defineEmits(['handleView', 'handleEmer']);
const openInfo = ref<boolean>(false);
const archives = ref<object>({});
interface archivesInfo {
bmi?: any;
ua?: any;
hcy?: any;
glu?: any;
sbp?: any;
dbp?: any;
tc?: any;
tg?: any;
ldl?: any;
pastHistory?: any;
surgicalHistory?: any;
medicationHistory?: any;
}
const archives = ref<archivesInfo>({});
watch(
() => props.userData,
src/views/indexSun/threeLeftNew.vue
+52 -52
View File
@@ -5,10 +5,10 @@
</div>
<div style="flex: 1" class="content">
<div class="content-search content-search-select">
<a-select v-model:value="selectValue" class="type-select" :options="selectOptions" @change="getData">
<a-select v-model:value="selectValue" class="type-select" :options="selectOptions">
<a-select-option value="全部数据">全部数据</a-select-option>
</a-select>
<a-select v-model:value="selectValue1" class="type-select" :options="selectOption1" @change="getData" />
<a-select v-model:value="selectValue1" class="type-select" :options="selectOption1" />
</div>
<div class="content-search content-search-new">
<div class="type-time">
@@ -113,7 +113,7 @@
{ label: '近一月', value: 'month' },
{ label: '近一年', value: 'year' },
]);
const newChart = ref<HTMLElement>();
// const newChart = ref<HTMLElement>();
function clickChooseType(type: any) {
if (timer.value) {
clearInterval(timer.value);
@@ -124,14 +124,14 @@
} else {
chooseType.value = 0;
}
getData();
// getData();
}, 10000);
}
if (chooseType.value === type) return;
chooseType.value = type;
nextTick(() => {
getData();
});
// nextTick(() => {
// getData();
// });
}
onMounted(() => {
@@ -140,24 +140,24 @@
}
setTimer();
});
watch(props, () => {
selectValue.value = '';
getData();
});
// watch(props, () => {
// selectValue.value = '';
// getData();
// });
function setTimer() {
if (timer.value) {
clearInterval(timer.value);
}
chooseType.value = 0;
getData();
// getData();
timer.value = setInterval(() => {
if (chooseType.value !== 5) {
chooseType.value += 1;
} else {
chooseType.value = 0;
}
getData();
// getData();
}, 10000);
}
@@ -186,45 +186,45 @@
});
}
const myChart = ref();
function getData() {
twoLApi({
sex: chooseType.value,
depart: selectValue.value,
centerId: getCenterInfo?.id,
})
.then((res: any) => {
if (res.code == 200) {
initChart(res.result);
}
})
.catch((err) => {
console.log(err);
});
}
function initChart(value: any) {
nextTick(() => {
myChart.value = echarts.init(newChart.value!);
const dx =
value.map((item: any) => {
return item.name;
}) || [];
const dy =
value.map((item: any) => {
return item.count;
}) || [];
const max =
value.sort((a: any, b: any) => b.count - a.count).length > 0 ? value.sort((a: any, b: any) => b.count - a.count)[0].count : [];
const m = max % 25 === 0 ? max : (parseInt(max / 25) + 1) * 25;
let option = getClassCharts(dx, dy, m);
myChart.value.setOption(option);
window.addEventListener('resize', () => {
myChart.value.resize();
});
});
}
// const myChart = ref();
// function getData() {
// twoLApi({
// sex: chooseType.value,
// depart: selectValue.value,
// centerId: getCenterInfo?.id,
// })
// .then((res: any) => {
// if (res.code == 200) {
// initChart(res.result);
// }
// })
// .catch((err) => {
// console.log(err);
// });
// }
//
// function initChart(value: any) {
// nextTick(() => {
// myChart.value = echarts.init(newChart.value);
// const dx =
// value.map((item: any) => {
// return item.name;
// }) || [];
// const dy =
// value.map((item: any) => {
// return item.count;
// }) || [];
//
// const max =
// value.sort((a: any, b: any) => b.count - a.count).length > 0 ? value.sort((a: any, b: any) => b.count - a.count)[0].count : [];
// const m = max % 25 === 0 ? max : (parseInt(max / 25) + 1) * 25;
// let option = getClassCharts(dx, dy, m);
// myChart.value.setOption(option);
// window.addEventListener('resize', () => {
// myChart.value.resize();
// });
// });
// }
const emit = defineEmits(['handleView']);
function handleView() {
emit('handleView');