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

增加地图元素清空功能，完成附近医院路线规划功能

Browse Source
This commit is contained in:
zk
2024-05-23 15:05:34 +08:00
parent 1599ffd6d8
commit 0eb5fad72f
11 changed files with 611 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/components/emergencyDialog.vue
+33 -5
View File
@@ -3,7 +3,7 @@
<Dialog :openVis="visible" width="30%" :title="title" @close="closeDialog" :maskClosable="false">
<template #container>
<div class="police-con">
<div class="sub-text">有一个员工刚刚发起应急求助,请马上处理!！</div>
<div class="sub-text"> 有一个员工刚刚发起应急求助,请马上处理！</div>
<div class="con-item">
<span>姓名：</span>
<span>{{ userInfo?.realName }}</span>
@@ -13,25 +13,41 @@
<span>{{ userInfo?.age }}</span>
</div>
<div class="con-item">
<span>二级单位：</span>
<span>单位：</span>
<span>{{ userInfo?.departName }}</span>
</div>
<div class="con-item">
<span>部门：</span>
<span>{{ userInfo?.orgName }}</span>
</div>
</div>
<div class="btn-box">
<a-button type="primary" @click="confirmHelp">确认</a-button>
</div>
</template>
</Dialog>
</template>
<script setup lang="ts">
import Dialog from '/@/components/dialog/Dialog.vue';
import { useDialog } from '/@/views/components/dialogHooks.ts';
import { watch, ref } from 'vue';
import { watch, ref, Ref } from 'vue';
const props = defineProps({
record: Object,
});
const userInfo = ref({});
const emit = defineEmits(['confirmHelp']);
interface UserInfo {
realName?: string;
age?: string;
departName?: string;
orgName?: string;
}
const userInfo: Ref<UserInfo> = ref({});
watch(
() => props.record,
(nVal) => {
(nVal: UserInfo) => {
userInfo.value = nVal;
}
);
@@ -40,6 +56,12 @@
defineExpose({
openDialog,
});
//确认帮助
function confirmHelp() {
closeDialog();
emit('confirmHelp', userInfo.value);
}
</script>
<style scoped lang="less">
.police-con {
@@ -51,6 +73,7 @@
.sub-text {
font-weight: bold;
margin-left: 8px;
font-size: 16px;
}
.con-item {
@@ -72,4 +95,9 @@
}
}
}
.btn-box {
text-align: center;
margin-top: 2%;
}
</style>
src/views/index.vue
+152 -4
View File
@@ -14,7 +14,7 @@
<three-l :key="tabState" :setting="setting" :refreshState="refreshState" />
</div>
<div class="body-d-middle">
<china-map />
<china-map :showHospitalList="showHospitalList" :hospitalList="hospitalList" @clearHospitalList="clearHospitalList"></china-map>
</div>
<div class="body-d-right">
<one-r :setting="setting" :refreshState="refreshState" />
@@ -24,12 +24,12 @@
</div>
<div class="bottom-d"></div>
<EmployeeDialog ref="employeeDialogRef" :record="socketData" />
<EmergencyDialog ref="emergencyDialogRef" :record="emergencyData" />
<EmergencyDialog ref="emergencyDialogRef" :record="emergencyData" @confirmHelp="confirmHelp" />
<PhoneDialog ref="phoneDialogRef" :title="phoneDialogTitle" :useForm="true" :setting="setting" :phoneType="phoneType" />
</div>
</template>
<script setup lang="ts">
import { onUnmounted, ref, watch, nextTick, onMounted } from 'vue';
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
import OneL from '/@/components/body-d-left/oneL.vue';
import TwoL from '/@/components/body-d-left/twoL.vue';
import ThreeL from '/@/components/body-d-left/threeL.vue';
@@ -46,6 +46,7 @@
import { DataType, getSettings } from '/@/utils/settings.ts';
import { ServerDetailType } from '/@/components/body-d-left/bodyLeftHooks.ts';
import PhoneDialog from '/@/views/components/phoneDialog/phoneDialog.vue';
import { Map } from '/@/assets/mapUtils/map.ts';
const { refreshState } = useRefresh(DEFAULT_TIME);
const dayTimeO = ref();
@@ -85,6 +86,60 @@
// 健康监测工具报警
const { socketData, setSocketData, closeSocket } = useSocket(basicPath + `${DataType.xian}`);
const employeeDialogRef = ref();
//模拟开启
function employeeDialogOpen() {
setEmergencyData({
userId: '001a9878fdaf401c844a03e2fc7c370b',
realName: '曹燕',
lon: 108.872442,
lat: 34.189956,
sex: 2,
age: 40,
orgCode: 'A01A33A05',
orgName: '地质研究所',
hospitalList: [
{
id: null,
name: '交大一附院',
lat: 34.22,
lon: 108.94,
type: null,
ambulance: null,
docNum: null,
nurseNum: null,
expertNum: null,
distance: null,
},
{
id: null,
name: '高新医院',
lat: 34.23,
lon: 108.88,
type: null,
ambulance: null,
docNum: null,
nurseNum: null,
expertNum: null,
distance: null,
},
{
id: null,
name: '人民医院',
lat: 34.24,
lon: 108.93,
type: null,
ambulance: null,
docNum: null,
nurseNum: null,
expertNum: null,
distance: null,
},
],
});
emergencyDialogRef.value.openDialog();
}
watch(socketData, (nVal) => {
if (nVal) {
nextTick(() => {
@@ -94,7 +149,7 @@
}
});
//应急求助 + `/${DataType.xian}`
//应急求助
const { socketData: emergencyData, setSocketData: setEmergencyData, closeSocket: closeSocket2 } = useSocket(emergencyPath + `${DataType.xian}`);
const emergencyDialogRef = ref();
@@ -137,6 +192,99 @@
});
}
const hospitalList = ref([]); //医院列表
const showHospitalList = ref(false);
//确认应急求助
async function confirmHelp(data) {
if (!data.lon) return;
hospitalList.value = [];
//用户的坐标信息
let point = [data.lon, data.lat];
if (data.hospitalList.length > 0) {
try {
hospitalList.value = await getHospitalList(data.hospitalList, point);
showHospitalList.value = true;
} catch (error) {
console.log('获取医院列表时出错:', error);
}
}
Map.getAddressByPoint(point).then((res) => {
const option = {
lon: data.lon,
lat: data.lat,
position: point,
name: data.realName,
address: res,
sex: data.sex,
};
Map.createEmergencyMarker(option);
});
}
async function getHospitalList(hospitalList, userLocation) {
const hospitalPromises = hospitalList.map(async (item) => {
item.distance = getDistance(userLocation, [item.lon, item.lat]);
const { time, routeList } = await getDriveTime(userLocation, [item.lon, item.lat]);
item.driveTime = time;
item.routeList = routeList;
item.userLocation = userLocation;
return item; // 返回更新后的医院条目
});
return Promise.all(hospitalPromises);
}
// function getHospitalList(hospitalList, userLocation) {
// hospitalList.forEach(async (item) => {
// item.distance = getDistance(userLocation, [item.lon, item.lat]);
// let { time, routeList } = await getDriveTime(userLocation, [item.lon, item.lat]);
// item.driveTime = time;
// item.routeList = routeList;
// item.userLocation = userLocation;
// console.log('time', item.driveTime);
// });
// return hospitalList;
// }
function getDistance(userLocation, destination) {
const value = Map.getDistance(userLocation, destination);
return value > 1000 ? (value / 1000).toFixed(2) + 'km' : value + 'm';
}
async function getDriveTime(userLocation, destination) {
let { time, steps } = await Map.getDriveTime(userLocation, destination);
let h,
m,
s = 0;
if (time <= 60) {
return {
time: `${s}秒`,
routeList: steps,
};
}
if (time > 60 && time < 3600) {
m = Math.floor(time / 60);
return {
time: `${m}分`,
routeList: steps,
};
}
if (time >= 3600) {
h = Math.floor(time / 3600);
m = Math.floor((time - h * 3600) / 60);
return {
time: `${h}小时${m}分`,
routeList: steps,
};
}
}
function clearHospitalList() {
hospitalList.value = [];
showHospitalList.value = false;
}
//地图上绘制
// function test() {
// let nVal = {
// watchNo: 'CRFTQ22C03000080',
src/views/types.ts
+11
View File
@@ -0,0 +1,11 @@
export interface HospitalList {
id: string;
name: string;
lat: number;
lon: number;
distance: string;
time: string;
routeList: any[];
[key: string]: any;
}