475 lines
16 KiB
Vue
475 lines
16 KiB
Vue
<template>
|
||
<div class="sun-screen-box">
|
||
<login-out-button out-url="login" />
|
||
<div class="sun-screen-title">
|
||
<div class="sun-title-left">2025年06月14日 12:21:21</div>
|
||
<div class="sun-title-center">应急就医服务中心</div>
|
||
<div class="sun-title-right">累计运行时间：3642天</div>
|
||
</div>
|
||
<div class="sun-body-content">
|
||
<div class="sun-body-left">
|
||
<div class="sun-body-left-one">
|
||
<OneL @handle-click="handleOneLeftClick" :center-id="centerId" />
|
||
</div>
|
||
<div class="sun-body-left-two">
|
||
<twoL @handle-view="handleTwoLClick" />
|
||
</div>
|
||
<div class="sun-body-left-three" style="margin-bottom: 0">
|
||
<!-- <threeL />-->
|
||
<threeNewL />
|
||
</div>
|
||
</div>
|
||
<div class="sun-body-center">
|
||
<CenterMap :showHospitalList="showHospitalList" :hospitalList="hospitalList" @clear-hospital-list="clearHospitalList" />
|
||
</div>
|
||
<div class="sun-body-right">
|
||
<div class="sun-body-right-one">
|
||
<oneR @handle-view="handleOneRClick" />
|
||
</div>
|
||
<div class="sun-body-right-two">
|
||
<twoR @handle-click="handleTwoRClick" />
|
||
</div>
|
||
<div class="sun-body-right-three">
|
||
<threeR @handle-click="handleThreeRClick" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<PhoneDialog ref="phoneDialogRef" :title="phoneDialogTitle" :useForm="true" :setting="setting" :phoneType="phoneType" />
|
||
<!-- <YunZuoXiDialog ref="yunZuoXiDialogRef" :record="xianYunData" @confirmHelp="confirmHelp" />-->
|
||
<!-- 健康监测弹窗 -->
|
||
<EmployeeDialog ref="employeeDialogRef" :record="socketData" />
|
||
<!-- 应急、120弹窗 -->
|
||
<EmergencyDialog ref="emergencyDialogRef" :record="socketData1" @confirm-help="confirmHelp" />
|
||
<IndexModal
|
||
ref="indexModalRef"
|
||
:api="modalApi"
|
||
:api-params="apiParams"
|
||
:title="indexModalTitle"
|
||
:useForm="true"
|
||
:column="indexColumn"
|
||
:firstForm="firstFormOne"
|
||
:need-dept="needDept"
|
||
:twoROnly="twoROnly"
|
||
/>
|
||
</template>
|
||
<script setup lang="ts">
|
||
// import threeL from '/@/views/indexSun/threeL.vue';
|
||
import OneL from '/@/views/indexSun/oneL.vue';
|
||
import twoL from '/@/views/indexSun/twoL.vue';
|
||
import threeNewL from '/@/views/indexSun/threeNewL.vue';
|
||
import oneR from '/@/views/indexSun/oneR.vue';
|
||
import twoR from '/@/views/indexSun/twoR.vue';
|
||
import threeR from '/@/views/indexSun/threeR.vue';
|
||
import CenterMap from '/@/views/indexSun/centerMap.vue';
|
||
import { ServerDetailType } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||
import { columns, fromLists, threeRModalColumns, threeRModalFromList, towRcolumns, twoRform } from '/@/views/indexSun/indexSun.ts';
|
||
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
|
||
import PhoneDialog from '/@/views/components/phoneDialog/phoneDialog.vue';
|
||
import { DataType, getSettings } from '/@/utils/settings.ts';
|
||
import IndexModal from '/@/views/indexSun/indexModal.vue';
|
||
import LoginOutButton from '/@/views/components/loginOutButton.vue';
|
||
import router from '/@/router';
|
||
import { getAuthCache } from '/@/utils/auth.ts';
|
||
import { basicPath, useSocket, emergencyPath } from '/@/utils/socket.ts';
|
||
import { Map } from '/@/assets/mapUtils/map.ts';
|
||
import YunZuoXiDialog from '/@/views/components/yunZuoXiDialog.vue';
|
||
import EmployeeDialog from '/@/views/components/employeeDialog.vue';
|
||
import EmergencyDialog from '/@/views/components/emergencyDialog.vue';
|
||
import { handleSocketUrl } from '/@/utils/utils.ts';
|
||
import { useUserStore } from '/@/store/modules/user.ts';
|
||
|
||
const { getCenterInfo } = useUserStore();
|
||
import {
|
||
oneLApi,
|
||
statisticsNewApi,
|
||
threeRModalApi,
|
||
twoLModalApi,
|
||
twoRModal1Api,
|
||
twoRModal2Api,
|
||
twoRModal3Api,
|
||
} from '/@/views/indexSun/indexSun.api.ts';
|
||
import dayjs from 'dayjs';
|
||
//0:处置 1:处理 2:呼入 3:全部
|
||
const phoneType = ref('');
|
||
const phoneDialogTitle = ref('呼入电话');
|
||
const phoneDialogRef = ref();
|
||
const indexModalRef = ref();
|
||
const indexModalTitle = ref();
|
||
const indexColumn: any = ref([]);
|
||
const setting = getSettings(DataType.xian);
|
||
const firstFormOne = ref();
|
||
const centerId = ref();
|
||
const apiParams = ref();
|
||
const modalApi = ref();
|
||
const needDept = ref(false);
|
||
const twoROnly = ref();
|
||
onMounted(() => {
|
||
const centerInfo = getAuthCache('centerInfo');
|
||
centerId.value = centerInfo.id;
|
||
});
|
||
|
||
function handleOneLeftClick(item) {
|
||
const { name, key } = item;
|
||
//呼入电话
|
||
//受理电话
|
||
if (key == 'alerdyreceive' || key == 'gross') {
|
||
phoneType.value = ServerDetailType[key];
|
||
indexModalTitle.value = name;
|
||
firstFormOne.value = fromLists[0];
|
||
indexColumn.value = columns[0];
|
||
modalApi.value = oneLApi;
|
||
needDept.value = false;
|
||
apiParams.value = {
|
||
phoneType: key == 'gross' ? 0 : 1,
|
||
centerId: centerId.value,
|
||
};
|
||
twoROnly.value = '';
|
||
nextTick(() => {
|
||
indexModalRef.value.openDialog();
|
||
});
|
||
}
|
||
}
|
||
|
||
function handleTwoLClick() {
|
||
indexModalTitle.value = '主诉分类详情';
|
||
indexColumn.value = columns[1];
|
||
firstFormOne.value = fromLists[1];
|
||
twoROnly.value = '';
|
||
modalApi.value = twoLModalApi;
|
||
needDept.value = true;
|
||
nextTick(() => {
|
||
indexModalRef.value.openDialog();
|
||
});
|
||
}
|
||
|
||
function handleOneRClick() {
|
||
router.push({
|
||
path: '/indexSon',
|
||
});
|
||
}
|
||
|
||
// 健康监测工具报警
|
||
let socketUrl = handleSocketUrl(basicPath, getCenterInfo?.id);
|
||
const { socketData, setSocketData, closeSocket } = useSocket(socketUrl);
|
||
const employeeDialogRef = ref();
|
||
|
||
function employeeDialogOpen() {
|
||
setSocketData({
|
||
userId: '001a9878fdaf401c844a03e2fc7c370b',
|
||
realName: '曹燕',
|
||
lon: 87.587482,
|
||
lat: 43.856052,
|
||
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();
|
||
}
|
||
|
||
setTimeout(() => {
|
||
// employeeDialogOpen();
|
||
// openEmergencyOpen();
|
||
// yunZOpen();
|
||
}, 5000);
|
||
|
||
watch(socketData, (nVal) => {
|
||
if (nVal) {
|
||
nextTick(() => {
|
||
setSocketData(nVal);
|
||
employeeDialogRef.value.openDialog();
|
||
});
|
||
}
|
||
});
|
||
|
||
//应急求助、120弹窗
|
||
let socketUrl1 = handleSocketUrl(emergencyPath, getCenterInfo?.id);
|
||
const { socketData: socketData1, setSocketData: setSocketData1, closeSocket: closeSocket1 } = useSocket(socketUrl1, false);
|
||
const emergencyDialogRef = ref(); //紧急求助
|
||
watch(socketData1, (nVal) => {
|
||
if (nVal) {
|
||
setSocketData1(nVal);
|
||
emergencyDialogRef.value.openDialog();
|
||
}
|
||
});
|
||
|
||
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 && data.hospitalList.length > 0) {
|
||
try {
|
||
hospitalList.value = await getHospitalList(data.hospitalList, point);
|
||
showHospitalList.value = true;
|
||
} catch (error) {
|
||
console.log('获取医院列表时出错:', error);
|
||
}
|
||
} else {
|
||
console.log('没有医院list');
|
||
}
|
||
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 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;
|
||
}
|
||
|
||
onUnmounted(() => {
|
||
// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
|
||
window.onbeforeunload = function () {
|
||
closeSocket();
|
||
closeSocket1(); //西安云坐席
|
||
};
|
||
});
|
||
function handleThreeRClick(type) {
|
||
const textArr = ['心血管异常人员列表', '脑血管异常人员列表', '冠状CT异常人员列表'];
|
||
console.log(type);
|
||
indexModalTitle.value = textArr[type - 1];
|
||
indexColumn.value = threeRModalColumns;
|
||
modalApi.value = threeRModalApi;
|
||
twoROnly.value = '';
|
||
apiParams.value = { queryType: type };
|
||
needDept.value = false;
|
||
firstFormOne.value = threeRModalFromList;
|
||
nextTick(() => {
|
||
indexModalRef.value.openDialog();
|
||
});
|
||
}
|
||
function handleTwoRClick(data) {
|
||
const textArr = ['健康打卡减重数据', '健康打卡减血糖数据', '健康打卡血压数据'];
|
||
indexModalTitle.value = textArr[data.type - 1];
|
||
indexColumn.value = towRcolumns[data.type - 1];
|
||
needDept.value = false;
|
||
twoROnly.value = data;
|
||
const apiArr = [twoRModal1Api, twoRModal2Api, twoRModal3Api];
|
||
const params = {
|
||
inputDateBegin: '',
|
||
inputDateEnd: '',
|
||
abFlag: data.normal == 2 ? '1' : '2',
|
||
};
|
||
if (data.date == 1) {
|
||
params.inputDateBegin = dayjs().format('YYYY-MM-DD');
|
||
params.inputDateEnd = dayjs().format('YYYY-MM-DD');
|
||
} else {
|
||
params.inputDateBegin = dayjs().startOf('month').format('YYYY-MM-DD');
|
||
params.inputDateEnd = dayjs().format('YYYY-MM-DD');
|
||
}
|
||
apiParams.value = params;
|
||
modalApi.value = apiArr[data.type - 1];
|
||
firstFormOne.value = twoRform(data.normal == 2 ? '1' : '2');
|
||
nextTick(() => {
|
||
indexModalRef.value.openDialog();
|
||
});
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.sun-screen-box {
|
||
height: 100vh;
|
||
letter-spacing: 2px;
|
||
background: url('/@/assets/indexSun/bigBg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
|
||
.sun-screen-title {
|
||
height: 80px;
|
||
background: url('/@/assets/indexSun/bg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
font-size: 22px;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 60px;
|
||
|
||
.sun-title-left,
|
||
.sun-title-right {
|
||
width: 23%;
|
||
}
|
||
|
||
.sun-title-center {
|
||
flex: 1;
|
||
font-size: 50px;
|
||
line-height: 80px;
|
||
letter-spacing: 10px;
|
||
text-shadow: 2px 2px 5px rgba(118, 141, 219, 0.53);
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.sun-body-content {
|
||
height: calc(100% - 80px);
|
||
padding: 10px 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.sun-body-left,
|
||
.sun-body-right {
|
||
height: 100%;
|
||
width: 22%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.sun-body-center {
|
||
flex: 1;
|
||
margin: 0 10px;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.sun-body-left {
|
||
.sun-body-left-one,
|
||
.sun-body-left-two,
|
||
.sun-body-left-three {
|
||
margin-bottom: 10px;
|
||
border: 1px solid #00ccff;
|
||
border-radius: 14px;
|
||
|
||
.one-l-box,
|
||
.two-l-box,
|
||
.three-l-box,
|
||
.three-new-l {
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.sun-body-left-one {
|
||
height: 27%;
|
||
}
|
||
|
||
.sun-body-left-two,
|
||
.sun-body-left-three {
|
||
height: 36%;
|
||
}
|
||
}
|
||
|
||
.sun-body-right {
|
||
.sun-body-right-one,
|
||
.sun-body-right-two,
|
||
.sun-body-right-three {
|
||
border: 1px solid #00ccff;
|
||
border-radius: 14px;
|
||
margin-bottom: 10px;
|
||
|
||
.one-r-box,
|
||
.two-r-box,
|
||
.three-r-box {
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.sun-body-right-one {
|
||
height: 30%;
|
||
}
|
||
|
||
.sun-body-right-two {
|
||
height: 42%;
|
||
}
|
||
|
||
.sun-body-right-three {
|
||
height: 26%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|