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
2024-11-14 13:04:05 +08:00
parent 1cfc2e5d89
commit f81fb4a868
8 changed files with 1360 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.development
+2 -2
View File
@@ -1,7 +1,7 @@
# 王昊地址
VITE_GLOB_API_URL=http://192.168.1.27
#VITE_GLOB_API_URL=http://192.168.1.27
#开发环境
#VITE_GLOB_API_URL=http://cqyt.dev.yg.dt.io
VITE_GLOB_API_URL=http://cqyt.dev.yg.dt.io
#VITE_GLOB_API_URL=https://api.cqygjk.com
#健康监测工具报警-websocket
#VITE_GLOB_API_YIN_JI=ws://cqyt.dev.yg.dt.io/health-watch/websocket/watchMonitor
src/App.vue
+21
View File
@@ -7,9 +7,30 @@
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { onMounted } from 'vue';
import { getEmergencyCenterApi } from '/@/api/user.ts';
import { useUserStore } from '/@/store/modules/user.ts';
import { useRouter } from 'vue-router';
dayjs.locale('zh-cn');
const locle = zhCN;
const userStore = useUserStore();
const router = useRouter();
onMounted(async () => {
try {
if (userStore.getToken) {
const { result } = await getEmergencyCenterApi();
if (result?.screenPath) {
router.replace(result?.screenPath);
} else {
router.replace('centralScreen');
}
userStore.setCenterInfo(result);
}
} catch (e) {}
});
</script>
<style lang="less" src="./assets/less/index.less"></style>
<style src="./assets/theme/theme.css"></style>
src/router/index.ts
+16
View File
@@ -83,6 +83,22 @@ const routes: Array<RouteRecordRaw> = [
},
component: () => import('/@/views/centralScreen/centralScreen.vue'),
},
{
path: '/centralScreenYinChuan',
name: 'centralScreenYinChuan',
meta: {
title: '应急中心',
},
component: () => import('/@/views/centralScreen/centralScreenYinChuan.vue'),
},
{
path: '/centralScreenD',
name: 'centralScreenD',
meta: {
title: '应急中心',
},
component: () => import('/@/views/centralScreen/centralScreenD.vue'),
},
];
const router: Router = createRouter({
src/views/centralScreen/centralScreen.vue
+19 -31
View File
@@ -1,7 +1,7 @@
<template>
<div class="outer" style="position: relative">
<login-out-button out-url="centralScreenLogin" />
<div class="container-div" :class="[screenPath === sPath ? 'container-div-s' : '']">
<div class="container-div">
<div class="title-d">
<div class="title-d-left">
{{ dayTimeO }}
@@ -13,7 +13,7 @@
<div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
</div>
<div class="body-d">
<div class="central-screen-body-left" :class="[screenPath === sPath ? 'central-screen-body-left-s' : '']">
<div class="central-screen-body-left">
<!--服务详情数据-->
<ServiceDetails
theme="dark"
@@ -25,7 +25,7 @@
<!--一线医疗点每日工作动态-->
<DailyWorkTrends theme="dark" :refreshState="refreshState" class="daily-work-trends" />
</div>
<div class="body-d-middle" :class="[screenPath === sPath ? 'body-d-middle-s' : '']">
<div class="body-d-middle">
<CenterMap
:showFooter="false"
:computedCenter="false"
@@ -35,7 +35,7 @@
@clearHospitalList="clearHospitalList"
/>
</div>
<div class="body-d-right" :class="[screenPath === sPath ? 'body-d-right-s' : '']">
<div class="body-d-right">
<!--健康终端报警-->
<TerminalAlarm :refreshState="refreshState" :setting="setting" @emit-view-detail="handleEmployeeDialog" />
<!--员工队伍健康状况-->
@@ -78,20 +78,25 @@
import EmergencyDialog from '/@/views/components/emergencyDialog.vue';
import { basicPath, emergencyPath, useSocket, yinChuanPath } from '/@/utils/socket.ts';
import { handleSocketUrl } from '/@/views/centralScreen/components/centerMapHooks.ts';
import { getEmergencyCenterApi } from '/@/api/user.ts';
import LoginOutButton from '/@/views/components/loginOutButton.vue';
const userStore = useUserStore();
let { simpleName, centerTel } = userStore.getCenterInfo || { simpleName: '', centerTel: '' };
const { refreshState } = useRefresh(DEFAULT_TIME);
const props = defineProps({
result: {
type: Object,
default: () => {},
},
});
const dayTimeO = ref();
const dayTimeT = ref();
const interval = ref(1);
const title = ref((simpleName || '') + '应急就医服务中心');
const title = ref('应急就医服务中心' + (simpleName || ''));
const phone = ref(centerTel || '0951-6805199');
const screenPath = ref('');
const sPath = ref('/specialScreen');
const options = ref({
center: [106.32, 38.45], //地图中心点
zoom: 8, //地图显示的缩放级别
@@ -105,26 +110,24 @@
}, 1000);
}
const { getCenterInfo } = useUserStore();
function getTime() {
const { timeLeft, timeRight } = useTopTime();
const { timeLeft, timeRight } = useTopTime(getCenterInfo?.commissioningTime);
dayTimeO.value = timeLeft;
dayTimeT.value = timeRight;
}
const { getCenterInfo } = useUserStore();
const setting = getSettings(DataType.yinChuan);
onMounted(async () => {
try {
const { result } = await getEmergencyCenterApi();
screenPath.value = result?.screenPath;
options.value = {
center: [result?.longitude || 106.32, result?.latitude || 38.45], //地图中心点
center: [getCenterInfo?.longitude || 106.32, getCenterInfo?.latitude || 38.45], //地图中心点
zoom: 8, //地图显示的缩放级别
mapStyle: 'darkblue', //地图样式
};
userStore.setCenterInfo(result);
} catch (e) {}
} catch (e) {
console.log(e);
}
console.log([getCenterInfo?.longitude || 106.32, getCenterInfo?.latitude || 38.45]);
init();
@@ -332,12 +335,6 @@
.container-div {
height: 100%;
}
.container-div-s {
width: 200%;
height: 100%;
transform: scaleX(0.5);
transform-origin: left top;
}
.title-d {
height: 80px;
@@ -424,13 +421,4 @@
background: url('/@/assets/images/bottom-b.png') no-repeat;
background-size: 100% 100%;
}
.central-screen-body-left-s {
width: calc(100% / 6) !important;
}
.body-d-middle-s {
width: calc(100% * 2 / 3) !important;
}
.body-d-right-s {
width: calc(100% / 6) !important;
}
</style>
src/views/centralScreen/centralScreenD.vue
+441
View File
@@ -0,0 +1,441 @@
<template>
<div class="outer" style="position: relative">
<login-out-button out-url="centralScreenLogin" />
<div class="container-div container-div-s">
<div class="title-d">
<div class="title-d-left">
{{ dayTimeO }}
</div>
<div class="title-d-middle">
<span>{{ title }}</span>
<span class="phone">({{ phone }})</span>
</div>
<div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
</div>
<div class="body-d">
<div class="central-screen-body-left central-screen-body-left-s">
<!--服务详情数据-->
<ServiceDetails
theme="dark"
:refreshState="refreshState"
:setting="setting"
class="service-details"
@handleClick="handlePhoneDialog"
/>
<!--一线医疗点每日工作动态-->
<DailyWorkTrends theme="dark" :refreshState="refreshState" class="daily-work-trends" />
</div>
<div class="body-d-middle body-d-middle-s">
<CenterMap
:showFooter="false"
:computedCenter="false"
:mapOptions="options"
:showHospitalList="showHospitalList"
:hospitalList="hospitalList"
@clearHospitalList="clearHospitalList"
/>
</div>
<div class="body-d-right body-d-right-s">
<!--健康终端报警-->
<TerminalAlarm :refreshState="refreshState" :setting="setting" @emit-view-detail="handleEmployeeDialog" />
<!--员工队伍健康状况-->
<EmployeeHealth theme="dark" :refreshState="refreshState" :setting="setting" />
<!--体检数据-->
<PhysicalExaminationData :key="tabState" :refreshState="refreshState" :setting="setting" />
</div>
</div>
<div class="bottom-d"></div>
</div>
<EmployeeDialog ref="employeeDialogRef" :record="socketData" />
<EmergencyDialog ref="emergencyDialogRef" :record="emergencyData" @confirmHelp="confirmHelp" />
<YunZuoXiDialog ref="yunZuoXiDialogRef" :record="socketData" @confirmHelp="confirmHelp" />
<!--呼入电话、受理电话-->
<PhoneDialog ref="phoneDialogRef" :phoneType="phoneType" :setting="setting" :title="phoneDialogTitle" :useForm="true" />
<!--健康终端查看详情-->
<TerminalAlarmDialog ref="terminalAlarmDialogRef" :setting="setting" />
</div>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, ref, nextTick, watch } from 'vue';
import ServiceDetails from '/@/views/centralScreen/components/serviceDetails.vue';
import CenterMap from '/@/views/centralScreen/components/centerMap.vue';
import TerminalAlarm from '/@/views/centralScreen/components/terminalAlarm.vue';
import DailyWorkTrends from '/@/views/centralScreen/components/dailyWorkTrends.vue';
import EmployeeHealth from '/@/views/centralScreen/components/employeeHealth.vue';
import PhysicalExaminationData from '/@/views/centralScreen/components/physicalExaminationData.vue';
import { useRefresh } from '/@/hooks/autoRefresh';
import { DEFAULT_TIME } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
import { useTopTime } from '/@/utils/utils.ts';
import { DataType, getSettings, ThemeType } from '/@/utils/settings.ts';
import { useUserStore } from '/@/store/modules/user.ts';
import PhoneDialog from '/@/views/centralScreen/components/phoneDialog.vue';
import { ServerDetailType } from '/@/components/body-d-left/bodyLeftHooks.ts';
import TerminalAlarmDialog from '/@/views/centralScreen/components/terminalAlarmDialog.vue';
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 { basicPath, emergencyPath, useSocket, yinChuanPath } from '/@/utils/socket.ts';
import { handleSocketUrl } from '/@/views/centralScreen/components/centerMapHooks.ts';
import LoginOutButton from '/@/views/components/loginOutButton.vue';
const userStore = useUserStore();
let { simpleName, centerTel } = userStore.getCenterInfo || { simpleName: '', centerTel: '' };
const { refreshState } = useRefresh(DEFAULT_TIME);
const props = defineProps({
result: {
type: Object,
default: () => {},
},
});
const dayTimeO = ref();
const dayTimeT = ref();
const interval = ref(1);
const title = ref('应急就医服务中心' + (simpleName || ''));
const phone = ref(centerTel || '0951-6805199');
const screenPath = ref('');
const options = ref({
center: [106.32, 38.45], //地图中心点
zoom: 8, //地图显示的缩放级别
mapStyle: 'darkblue', //地图样式
});
function init() {
getTime();
interval.value = setInterval(() => {
getTime();
}, 1000);
}
const { getCenterInfo } = useUserStore();
function getTime() {
const { timeLeft, timeRight } = useTopTime(getCenterInfo?.commissioningTime);
dayTimeO.value = timeLeft;
dayTimeT.value = timeRight;
}
const setting = getSettings(DataType.yinChuan);
onMounted(async () => {
try {
screenPath.value = getCenterInfo?.screenPath;
options.value = {
center: [getCenterInfo?.longitude || 106.32, getCenterInfo?.latitude || 38.45], //地图中心点
zoom: 8, //地图显示的缩放级别
mapStyle: 'darkblue', //地图样式
};
} catch (e) {
console.log(e);
}
console.log([getCenterInfo?.longitude || 106.32, getCenterInfo?.latitude || 38.45]);
init();
document.title = title.value;
document.addEventListener('visibilitychange', checkTabState);
//设置主题
store.setThemeType(ThemeType.dark);
});
const store = useUserStore();
onUnmounted(() => {
clearInterval(interval.value);
document.removeEventListener('visibilitychange', checkTabState);
// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
closeSocket();
closeSocket2();
// closeSocket3(); //银川云坐席
};
clearInterval(interval.value);
});
const tabState = ref('');
//判断窗口是否处于激活状态，切换浏览器tab会导致部分echarts显示不正常
function checkTabState() {
tabState.value = document.hidden ? 'inactive' : 'active';
}
const phoneDialogTitle = ref('呼入电话');
const phoneDialogRef = ref();
//0:处置 1:处理 2:呼入 3:全部
const phoneType = ref('');
//呼入电话、受理电话弹窗
function handlePhoneDialog(item) {
const { name, key } = item;
//呼入电话
//受理电话
if (key == 'alerdyreceive' || key == 'gross') {
phoneType.value = ServerDetailType[key];
phoneDialogTitle.value = name;
nextTick(() => {
phoneDialogRef.value.openDialog();
});
}
}
const terminalAlarmDialogRef = ref();
//终端预警列表弹窗
function handleEmployeeDialog() {
terminalAlarmDialogRef.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;
}
// //websocket消息
// // 健康监测工具报警
//
// let basicUrl = handleSocketUrl(basicPath + `${DataType.yinChuan}`, userStore.getCenterInfo.id);
// const { socketData, setSocketData, closeSocket } = useSocket(basicUrl, false);
// const employeeDialogRef = ref();
// watch(socketData, (nVal) => {
// if (nVal) {
// nextTick(() => {
// setSocketData(nVal);
// employeeDialogRef.value.openDialog();
// });
// }
// });
//应急求助
let emergencyUrl = handleSocketUrl(emergencyPath, userStore.getCenterInfo.id);
const { socketData: emergencyData, setSocketData: setEmergencyData, closeSocket: closeSocket2 } = useSocket(emergencyUrl, false);
const emergencyDialogRef = ref();
watch(emergencyData, (nVal) => {
if (nVal) {
nextTick(() => {
setEmergencyData(nVal);
emergencyDialogRef.value.openDialog();
});
}
});
//银川云坐席
let socketUrl = handleSocketUrl(basicPath, userStore.getCenterInfo?.id);
const { socketData, setSocketData, closeSocket } = useSocket(socketUrl, false);
const yunZuoXiDialogRef = ref(); //云坐席
// const emergencyDialogRef = ref(); //紧急求助
const employeeDialogRef = ref(); //终端报警||健康监测
//title = "1:紧急求助 2:云坐席 3:终端报警")
watch(socketData, (nVal) => {
if (nVal) {
let { popType } = nVal;
if (popType == 1) {
nextTick(() => {
setSocketData(nVal);
emergencyDialogRef.value.openDialog();
});
}
if (popType == 2) {
nextTick(() => {
setSocketData(nVal);
yunZuoXiDialogRef.value.openDialog();
});
}
if (popType == 3) {
nextTick(() => {
setSocketData(nVal);
employeeDialogRef.value.openDialog();
});
}
}
});
</script>
<style lang="less" scoped>
.outer {
height: 100%;
box-sizing: border-box;
background: url('/@/assets/images/bg.png') no-repeat;
background-size: 100% 100%;
}
.container-div {
height: 100%;
}
.container-div-s {
width: 200%;
height: 100%;
transform: scaleX(0.5);
transform-origin: left top;
}
.title-d {
height: 80px;
line-height: 80px;
display: flex;
padding-bottom: 9px;
background: url('/@/assets/images/top-title.png') no-repeat;
background-size: 100% 100%;
.title-d-left,
.title-d-middle,
.title-d-right {
font-size: 27px;
color: #ffffff;
line-height: 60px;
text-align: center;
}
.title-d-middle {
.phone {
font-size: 27px;
margin-left: 4px;
}
}
> :nth-child(1) {
width: 29%;
}
> :nth-child(2) {
width: 42%;
font-size: 40px;
font-weight: bold;
}
> :nth-child(3) {
width: 29%;
}
}
.body-d {
display: flex;
height: calc(100% - 120px);
padding-top: 10px;
> :nth-child(1) {
width: 24%;
}
> :nth-child(2) {
width: 52%;
}
> :nth-child(3) {
width: 24%;
}
.central-screen-body-left {
.service-details {
height: 33%;
}
.daily-work-trends {
height: 67%;
}
}
.body-d-right {
> :nth-child(n) {
width: 100%;
height: calc(100% / 3);
padding: 10px;
}
}
.body-d-middle {
display: flex;
flex-direction: column;
}
}
.bottom-d {
height: 40px;
background: url('/@/assets/images/bottom-b.png') no-repeat;
background-size: 100% 100%;
}
.central-screen-body-left-s {
width: calc(100% / 6) !important;
}
.body-d-middle-s {
width: calc(100% * 2 / 3) !important;
}
.body-d-right-s {
width: calc(100% / 6) !important;
}
</style>
src/views/centralScreen/centralScreenYinChuan.vue
+435
View File
@@ -0,0 +1,435 @@
<template>
<div class="outer" style="position: relative">
<login-out-button out-url="centralScreenLogin" />
<div class="container-div">
<div class="title-d">
<div class="title-d-left">
{{ dayTimeO }}
</div>
<div class="title-d-middle">
<span>{{ title }}</span>
<span class="phone">({{ phone }})</span>
</div>
<div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
</div>
<div class="body-d">
<div class="central-screen-body-left">
<!--服务详情数据-->
<ServiceDetails
theme="dark"
:refreshState="refreshState"
:setting="setting"
class="service-details"
@handleClick="handlePhoneDialog"
/>
<!--一线医疗点每日工作动态-->
<DailyWorkTrends theme="dark" :refreshState="refreshState" class="daily-work-trends" />
<EmergencyData @emergencyDataList="emergencyDataList" class="emergency-data" />
</div>
<div class="body-d-middle">
<CenterMap
:showFooter="false"
:computedCenter="false"
:mapOptions="options"
:showHospitalList="showHospitalList"
:hospitalList="hospitalList"
@clearHospitalList="clearHospitalList"
/>
</div>
<div class="body-d-right">
<!--健康终端报警-->
<TerminalAlarm :refreshState="refreshState" :setting="setting" @emit-view-detail="handleEmployeeDialog" />
<!--员工队伍健康状况-->
<EmployeeHealth theme="dark" :refreshState="refreshState" :setting="setting" />
<!--体检数据-->
<PhysicalExaminationData :key="tabState" :refreshState="refreshState" :setting="setting" />
</div>
</div>
<div class="bottom-d"></div>
</div>
<EmployeeDialog ref="employeeDialogRef" :record="socketData" />
<EmergencyDialog ref="emergencyDialogRef" :record="emergencyData" @confirmHelp="confirmHelp" />
<YunZuoXiDialog ref="yunZuoXiDialogRef" :record="socketData" @confirmHelp="confirmHelp" />
<!--呼入电话、受理电话-->
<PhoneDialog ref="phoneDialogRef" :phoneType="phoneType" :setting="setting" :title="phoneDialogTitle" :useForm="true" />
<!--健康终端查看详情-->
<TerminalAlarmDialog ref="terminalAlarmDialogRef" :setting="setting" />
</div>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, ref, nextTick, watch } from 'vue';
import ServiceDetails from '/@/views/centralScreen/components/serviceDetails.vue';
import CenterMap from '/@/views/centralScreen/components/centerMap.vue';
import TerminalAlarm from '/@/views/centralScreen/components/terminalAlarm.vue';
import DailyWorkTrends from '/@/views/centralScreen/components/dailyWorkTrends.vue';
import EmployeeHealth from '/@/views/centralScreen/components/employeeHealth.vue';
import PhysicalExaminationData from '/@/views/centralScreen/components/physicalExaminationData.vue';
import { useRefresh } from '/@/hooks/autoRefresh';
import { DEFAULT_TIME } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
import { useTopTime } from '/@/utils/utils.ts';
import { DataType, getSettings, ThemeType } from '/@/utils/settings.ts';
import { useUserStore } from '/@/store/modules/user.ts';
import PhoneDialog from '/@/views/centralScreen/components/phoneDialog.vue';
import { ServerDetailType } from '/@/components/body-d-left/bodyLeftHooks.ts';
import TerminalAlarmDialog from '/@/views/centralScreen/components/terminalAlarmDialog.vue';
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 { basicPath, emergencyPath, useSocket, yinChuanPath } from '/@/utils/socket.ts';
import { handleSocketUrl } from '/@/views/centralScreen/components/centerMapHooks.ts';
import LoginOutButton from '/@/views/components/loginOutButton.vue';
import EmergencyData from '/@/views/centralScreen/components/emergencyData/emergencyData.vue';
const userStore = useUserStore();
let { simpleName, centerTel } = userStore.getCenterInfo || { simpleName: '', centerTel: '' };
const { refreshState } = useRefresh(DEFAULT_TIME);
const props = defineProps({
result: {
type: Object,
default: () => {},
},
});
const dayTimeO = ref();
const dayTimeT = ref();
const interval = ref(1);
const title = ref('应急就医服务中心' + (simpleName || ''));
const phone = ref(centerTel || '0951-6805199');
const options = ref({
center: [106.32, 38.45], //地图中心点
zoom: 8, //地图显示的缩放级别
mapStyle: 'darkblue', //地图样式
});
function init() {
getTime();
interval.value = setInterval(() => {
getTime();
}, 1000);
}
const { getCenterInfo } = useUserStore();
function getTime() {
const { timeLeft, timeRight } = useTopTime(getCenterInfo?.commissioningTime);
dayTimeO.value = timeLeft;
dayTimeT.value = timeRight;
}
const setting = getSettings(DataType.yinChuan);
onMounted(async () => {
try {
options.value = {
center: [getCenterInfo?.longitude || 106.32, getCenterInfo?.latitude || 38.45], //地图中心点
zoom: 8, //地图显示的缩放级别
mapStyle: 'darkblue', //地图样式
};
} catch (e) {
console.log(e);
}
console.log([getCenterInfo?.longitude || 106.32, getCenterInfo?.latitude || 38.45]);
init();
document.title = title.value;
document.addEventListener('visibilitychange', checkTabState);
//设置主题
store.setThemeType(ThemeType.dark);
});
const store = useUserStore();
onUnmounted(() => {
clearInterval(interval.value);
document.removeEventListener('visibilitychange', checkTabState);
// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
closeSocket();
closeSocket2();
// closeSocket3(); //银川云坐席
};
clearInterval(interval.value);
});
const tabState = ref('');
//判断窗口是否处于激活状态，切换浏览器tab会导致部分echarts显示不正常
function checkTabState() {
tabState.value = document.hidden ? 'inactive' : 'active';
}
const phoneDialogTitle = ref('呼入电话');
const phoneDialogRef = ref();
//0:处置 1:处理 2:呼入 3:全部
const phoneType = ref('');
//呼入电话、受理电话弹窗
function handlePhoneDialog(item) {
const { name, key } = item;
//呼入电话
//受理电话
if (key == 'alerdyreceive' || key == 'gross') {
phoneType.value = ServerDetailType[key];
phoneDialogTitle.value = name;
nextTick(() => {
phoneDialogRef.value.openDialog();
});
}
}
const terminalAlarmDialogRef = ref();
//终端预警列表弹窗
function handleEmployeeDialog() {
terminalAlarmDialogRef.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;
}
// //websocket消息
// // 健康监测工具报警
//
// let basicUrl = handleSocketUrl(basicPath + `${DataType.yinChuan}`, userStore.getCenterInfo.id);
// const { socketData, setSocketData, closeSocket } = useSocket(basicUrl, false);
// const employeeDialogRef = ref();
// watch(socketData, (nVal) => {
// if (nVal) {
// nextTick(() => {
// setSocketData(nVal);
// employeeDialogRef.value.openDialog();
// });
// }
// });
//应急求助
let emergencyUrl = handleSocketUrl(emergencyPath, userStore.getCenterInfo.id);
const { socketData: emergencyData, setSocketData: setEmergencyData, closeSocket: closeSocket2 } = useSocket(emergencyUrl, false);
const emergencyDialogRef = ref();
watch(emergencyData, (nVal) => {
if (nVal) {
nextTick(() => {
setEmergencyData(nVal);
emergencyDialogRef.value.openDialog();
});
}
});
//银川云坐席
let socketUrl = handleSocketUrl(basicPath, userStore.getCenterInfo?.id);
const { socketData, setSocketData, closeSocket } = useSocket(socketUrl, false);
const yunZuoXiDialogRef = ref(); //云坐席
// const emergencyDialogRef = ref(); //紧急求助
const employeeDialogRef = ref(); //终端报警||健康监测
//title = "1:紧急求助 2:云坐席 3:终端报警")
watch(socketData, (nVal) => {
if (nVal) {
let { popType } = nVal;
if (popType == 1) {
nextTick(() => {
setSocketData(nVal);
emergencyDialogRef.value.openDialog();
});
}
if (popType == 2) {
nextTick(() => {
setSocketData(nVal);
yunZuoXiDialogRef.value.openDialog();
});
}
if (popType == 3) {
nextTick(() => {
setSocketData(nVal);
employeeDialogRef.value.openDialog();
});
}
}
});
const emergencyDataDialog = ref();
function emergencyDataList() {
emergencyDataDialog.value.openDialog();
}
</script>
<style lang="less" scoped>
.outer {
height: 100%;
box-sizing: border-box;
background: url('/@/assets/images/bg.png') no-repeat;
background-size: 100% 100%;
}
.container-div {
height: 100%;
}
.title-d {
height: 80px;
line-height: 80px;
display: flex;
padding-bottom: 9px;
background: url('/@/assets/images/top-title.png') no-repeat;
background-size: 100% 100%;
.title-d-left,
.title-d-middle,
.title-d-right {
font-size: 27px;
color: #ffffff;
line-height: 60px;
text-align: center;
}
.title-d-middle {
.phone {
font-size: 27px;
margin-left: 4px;
}
}
> :nth-child(1) {
width: 29%;
}
> :nth-child(2) {
width: 42%;
font-size: 40px;
font-weight: bold;
}
> :nth-child(3) {
width: 29%;
}
}
.body-d {
display: flex;
height: calc(100% - 120px);
padding-top: 10px;
> :nth-child(1) {
width: 24%;
}
> :nth-child(2) {
width: 52%;
}
> :nth-child(3) {
width: 24%;
}
.central-screen-body-left {
.service-details {
height: calc(100% / 3);
}
.daily-work-trends {
height: calc(100% / 3);
}
.emergency-data {
height: calc(100% / 3);
}
}
.body-d-right {
> :nth-child(n) {
width: 100%;
height: calc(100% / 3);
padding: 10px;
}
}
.body-d-middle {
display: flex;
flex-direction: column;
}
}
.bottom-d {
height: 40px;
background: url('/@/assets/images/bottom-b.png') no-repeat;
background-size: 100% 100%;
}
</style>
src/views/centralScreen/components/emergencyData/components/emergencyDataDialog.vue
+198
View File
@@ -0,0 +1,198 @@
<template>
<Dialog :openVis="visible" width="60%" title="急救列表" @close="closeDialog" :maskClosable="false">
<template #container>
<BasicTable ref="registerTable" class="table-container" :columns="columns" :api="ambulancePageApi">
<template #bodyCell="{ column, record }">
<template v-if="column?.dataIndex === 'tz'">
<Dropdown :trigger="['click']">
<span
style="color: #45a2ff; cursor: pointer"
@click="
() => {
console.log('aaa');
}
"
>查看</span
>
<template #overlay>
<div class="drop-down-div">
<div>
<span>舒张压(mmHg)</span><span>{{ record?.diastolicPressure || '--' }}</span>
</div>
<div>
<span>收缩压(mmHg)</span><span>{{ record?.systolicPressure || '--' }}</span>
</div>
<div>
<span>血糖(mmoV/L)</span><span>{{ record?.bloodSugar || '--' }}</span>
</div>
<div>
<span>血氧饱和度(%)</span><span>{{ record?.bloodOxygenSaturation || '--' }}</span>
</div>
<div>
<span>体温(℃)</span><span>{{ record?.temperature || '--' }}</span>
</div>
<div>
<span>脉搏(次/分钟)</span><span>{{ record?.pulse || '--' }}</span>
</div>
<div>
<span>心率(次/分钟)</span><span>{{ record?.heartRate || '--' }}</span>
</div>
<div>
<span>呼吸率(次/分钟)</span><span>{{ record?.breathingRate || '--' }}</span>
</div>
</div>
</template>
</Dropdown>
</template>
<template v-if="column?.dataIndex === 'arriveSceneTime'">
<Dropdown :trigger="['click']">
<span
style="color: #45a2ff; cursor: pointer; margin-left: 10px"
@click="
() => {
console.log('aaa');
}
"
>全部</span
>
<template #overlay>
<div class="drop-down-div" style="width: 300px">
<div>
<span>救护车出发时间</span><span>{{ record?.startTime || '--' }}</span>
</div>
<div>
<span>到达现场时间</span><span>{{ record?.arriveSceneTime || '--' }}</span>
</div>
<div>
<span>离开现场时间</span><span>{{ record?.leaveSceneTime || '--' }}</span>
</div>
<div>
<span>到达医院时间</span><span>{{ record?.arriveHospitalTime || '--' }}</span>
</div>
<div>
<span>院前预警时间</span><span>{{ record?.earlyWarningTime || '--' }}</span>
</div>
</div>
</template>
</Dropdown>
</template>
</template>
</BasicTable>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { nextTick, ref } from 'vue';
import Dialog from '/@/components/dialog/Dialog.vue';
import { useDialog } from '/@/views/components/dialogHooks.ts';
import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
import { ambulancePageApi } from '/@/views/yinChuan/yinChuan.api.ts';
import { Dropdown } from 'ant-design-vue';
const columns = [
{
title: '二级单位',
dataIndex: 'secondDepart',
key: 'secondDepart',
width: 120,
},
{
title: '三级单位',
dataIndex: 'thirdDepart',
key: 'secondDepart',
width: 120,
},
{
title: '姓名',
dataIndex: 'patientName',
key: 'patientName',
width: 120,
},
{
title: '性别',
dataIndex: 'gender_dictText',
key: 'gender_dictText',
width: 45,
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
width: 45,
},
{
title: '联系电话',
dataIndex: 'phone',
key: 'phone',
width: 110,
},
{
title: '病人MPDS类型',
dataIndex: 'mpdsCategoryId_dictText',
key: 'mpdsCategoryId_dictText',
width: 110,
},
{
title: '生命体征',
dataIndex: 'tz',
key: 'tz',
slot: 'tz',
width: 75,
},
{
title: '病情判断',
dataIndex: 'injuryLevel_dictText',
key: 'injuryLevel_dictText',
width: 80,
},
{
title: '到达现场时间',
dataIndex: 'arriveSceneTime',
key: 'arriveSceneTime',
width: 180,
},
{
title: '发病地点',
dataIndex: 'attackAddress',
key: 'attackAddress',
width: 220,
// customRender: ({ record }) => {
// if (record?.address) {
// return record?.address;
// } else {
// return h('span', { style: { color: '#eb3636' } }, record?.gpsErrorMsg);
// }
// },
},
];
const { visible, closeDialog, openDialog } = useDialog({ title: '急救列表' });
function openDia() {
openDialog();
// nextTick(() => {
// registerTable.value?.getRecords();
// });
}
const registerTable = ref();
defineExpose({
openDialog: openDia,
});
</script>
<style scoped lang="less">
.table-container {
margin: 0 10px;
}
.drop-down-div {
background-color: #0f2841;
color: #ffffff;
border: 1px solid #1960a3;
padding: 10px 10px 0;
width: 200px;
div {
width: 100%;
padding: 0 0 10px 0;
display: flex;
justify-content: space-between;
}
}
</style>
src/views/centralScreen/components/emergencyData/emergencyData.vue
+228
View File
@@ -0,0 +1,228 @@
<template>
<div>
<public-title title="急救数据" themeType="dark">
<template #right>
<span class="right-text" :class="[themeType]" @click="viewDetail">查看详情</span>
</template>
</public-title>
<div class="inner">
<div class="type-time">
<span
v-for="(item, index) in typeTime"
:key="index"
:class="[selectIndex === index ? 'select' : 'unSelect', themeType]"
@click="handleSelect(index, item.value)"
>{{ item.name }}</span
>
</div>
<div class="server-container">
<a-spin :spinning="spinning" class="spin"></a-spin>
<div class="RadarCharts" ref="chartsRef"></div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import PublicTitle from '/@/components/publicTitle.vue';
import { useTheme } from '/@/hooks/theme/useTheme.ts';
import { useSession } from '/@/hooks/autoRefresh/caching.ts';
import { onMounted, ref, watch } from 'vue';
import { getOptions, useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
import { ambulanceStatApi } from '/@/views/yinChuan/yinChuan.api.ts';
import * as echarts from 'echarts';
const { themeType } = useTheme();
const props = defineProps({
refreshState: {
type: Boolean,
},
setting: {
type: Object,
},
theme: {
type: String,
},
});
const typeTime = ref([
{
name: '本年',
value: '2',
},
{
name: '本月',
value: '1',
},
{
name: '本周',
value: '0',
},
]);
const emergencyTypeList = ref([
{
type: '1',
name: '濒危',
color: '#5087ec',
value: 0,
},
{
type: '2',
name: '危重',
color: '#68bbc4',
value: 0,
},
{
type: '3',
name: '急症',
color: '#58a55c',
value: 0,
},
{
type: '4',
name: '非急症',
color: '#f2bd42',
value: 0,
},
{
type: '5',
name: '死亡',
color: '#ee752f',
value: 0,
},
]);
const selectIndex = ref(0);
const selectVal = ref('2'); //本年
const { setSpin, spinning } = useSpin();
onMounted(() => {
getList();
});
const { setSession, getSession } = useSession();
const chartsRef = ref();
async function getList() {
try {
emergencyTypeList.value = [
{
type: '1',
name: '濒危',
color: '#5087ec',
value: 0,
},
{
type: '2',
name: '危重',
color: '#68bbc4',
value: 0,
},
{
type: '3',
name: '急症',
color: '#58a55c',
value: 0,
},
{
type: '4',
name: '非急症',
color: '#f2bd42',
value: 0,
},
{
type: '5',
name: '死亡',
color: '#ee752f',
value: 0,
},
];
const { result, success } = await ambulanceStatApi({ type: selectVal.value });
if (success) {
result &&
result.map((item: any) => {
emergencyTypeList.value.forEach((it: any) => {
if (item.type == it.type) {
it['value'] = item.count || 0;
}
});
});
let data: any[] = [];
let colors: any[] = [];
let totalTimes = 0;
emergencyTypeList.value.map((item: any) => {
data.push({
name: item.name,
value: item.value,
});
colors.push(item.colors);
totalTimes += item.value || 0;
});
const option = getOptions(data, colors, totalTimes);
const myChart = echarts.init(chartsRef.value);
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize();
});
}
} catch (e) {
console.log(e);
} finally {
setSpin(false);
}
}
function handleSelect(index: number, value: string) {
setSpin(true);
selectIndex.value = index;
selectVal.value = value;
getList();
}
const emit = defineEmits(['emergencyDataList']);
function viewDetail() {
emit('emergencyDataList');
}
watch(
() => props.refreshState,
() => {
getList();
}
);
</script>
<style scoped lang="less">
.inner {
height: calc(100% - 40px);
}
.right-text {
font-weight: 100;
cursor: pointer;
margin-right: 3px;
font-size: 18px;
}
.server-container {
margin-top: 15px;
width: 96%;
height: calc(100% - 40px);
display: flex;
flex-wrap: wrap;
align-content: space-around;
position: relative;
.spin {
position: absolute;
left: 50%;
top: 50%;
}
.RadarCharts {
width: 100%;
height: 100%;
}
}
</style>