update: 初始化
This commit is contained in:
xf
+1
-93
@@ -17,106 +17,14 @@ const routes: Array<RouteRecordRaw> = [
|
||||
},
|
||||
component: () => import('/@/views/sys/login.vue'),
|
||||
},
|
||||
{
|
||||
path: '/screenLogin',
|
||||
name: 'screenLogin',
|
||||
meta: {
|
||||
//银川大屏登录
|
||||
title: '登录',
|
||||
},
|
||||
component: () => import('/@/views/sys/login.vue'),
|
||||
},
|
||||
{
|
||||
path: '/centralScreenLogin',
|
||||
name: 'centralScreenLogin',
|
||||
meta: {
|
||||
//分中心大屏登录
|
||||
title: '登录',
|
||||
},
|
||||
component: () => import('/@/views/sys/login.vue'),
|
||||
},
|
||||
{
|
||||
path: '/home',
|
||||
name: 'index',
|
||||
meta: {
|
||||
title: '首页',
|
||||
},
|
||||
component: () => import('/@/views/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/yinChuanHome',
|
||||
name: 'yinChuanHome',
|
||||
meta: {
|
||||
title: '银川片应急就医',
|
||||
},
|
||||
component: () => import('/@/views/yinChuan/yinChuan.vue'),
|
||||
},
|
||||
{
|
||||
path: '/yinChuanTest',
|
||||
name: 'yinChuanTest',
|
||||
meta: {
|
||||
title: '银川片应急就医',
|
||||
},
|
||||
component: () => import('/@/views/yinChuanTest/yinChuanTest.vue'),
|
||||
},
|
||||
{
|
||||
path: '/secondScreen',
|
||||
name: 'secondScreen',
|
||||
meta: {
|
||||
title: '副屏',
|
||||
},
|
||||
component: () => import('/@/views/indexSon.vue'),
|
||||
},
|
||||
{
|
||||
path: '/transfer',
|
||||
name: 'transfer',
|
||||
meta: {
|
||||
title: '应急大屏',
|
||||
},
|
||||
component: () => import('/@/views/transfer.vue'),
|
||||
},
|
||||
{
|
||||
path: '/centralScreen',
|
||||
name: 'centralScreen',
|
||||
meta: {
|
||||
title: '应急中心',
|
||||
},
|
||||
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'),
|
||||
},
|
||||
{
|
||||
path: '/qLogin',
|
||||
name: 'qLogin',
|
||||
meta: {
|
||||
//青海大屏登录
|
||||
title: '登录',
|
||||
},
|
||||
component: () => import('/@/views/sys/login.vue'),
|
||||
},
|
||||
{
|
||||
path: '/qScreen',
|
||||
name: 'qScreen',
|
||||
meta: {
|
||||
//青海大屏登录
|
||||
title: '数据看板',
|
||||
},
|
||||
component: () => import('/src/views/qh/qScreen.vue'),
|
||||
},
|
||||
];
|
||||
|
||||
const router: Router = createRouter({
|
||||
@@ -127,7 +35,7 @@ const xian = ['/home', '/secondScreen', '/transfer'];
|
||||
const yinchuan = ['/yinChuanHome', '/yinChuanTest', '/transfer'];
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.path !== '/login' && to.path !== '/screenLogin') {
|
||||
if (to.path !== '/login' && to.path !== '/home') {
|
||||
setCurrentPath(to.path);
|
||||
}
|
||||
let flag1 = getAuthCache('flag1')?.includes('yinchuan');
|
||||
|
||||
@@ -1,72 +0,0 @@
|
||||
import { get, post } from '/@/api/request.ts';
|
||||
|
||||
enum Api {
|
||||
server = '/health-emergency/emergency/tblUserHelp/statistics',
|
||||
getDetail = '/health-medical/medical/hospital/getMedicalHospitalNew',
|
||||
getMonitorList = '/health-watch/watch/watchMonitorData/getMonitorList',
|
||||
statisticsNew = '/health-emergency/emergency/LargeScreenNew/statisticsNew',
|
||||
phoneListNew = '/health-emergency/emergency/LargeScreenNew/phoneListNew',
|
||||
medicalCenterNew = '/health-emergency/emergency/LargeScreenNew/medicalCenterNew',
|
||||
userHealthCenterNew = '/health-emergency/emergency/LargeScreenNew/userHealthCenterNew',
|
||||
getAllList = '/health-emergency/emergency/LargeScreenNew/getAllListNew',
|
||||
monitorTotal = '/health-watch/api/watch/screen/monitor/stats/total',
|
||||
monitorMonth = '/health-watch/api/watch/screen/monitor/stats/month',
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 服务详情数据
|
||||
* @param params
|
||||
*/
|
||||
export const statisticsNewApi = (params: any) => post(Api.statisticsNew, params);
|
||||
|
||||
/**
|
||||
* @description 一线医疗点每日工作动态
|
||||
* @param params
|
||||
*/
|
||||
export const medicalCenterNew = (params: any) => post(Api.medicalCenterNew, params);
|
||||
/**
|
||||
* @description 员工队伍健康状况
|
||||
* @param params
|
||||
*/
|
||||
|
||||
export const userHealthCenterNew = (params: any) => {
|
||||
return post(Api.userHealthCenterNew, params);
|
||||
};
|
||||
/**
|
||||
* @description 获取体检数据
|
||||
* @param params
|
||||
*/
|
||||
export const getPhysicalData = (params: any) => {
|
||||
// let { centerId, ...other } = params;
|
||||
return post(Api.getDetail, params);
|
||||
};
|
||||
/**
|
||||
* @description 呼入电话、受理电话
|
||||
* @param params
|
||||
*/
|
||||
export const getPhoneList = (params: any) => post(Api.phoneListNew, params);
|
||||
|
||||
/**
|
||||
* @description 健康终端报警
|
||||
* @param params
|
||||
*/
|
||||
export const getMonitorList = (params: any) => {
|
||||
let { orgCodeList, ...otherParams } = params;
|
||||
return get(Api.getMonitorList + '?orgCodeList=' + orgCodeList, otherParams);
|
||||
};
|
||||
|
||||
/**
|
||||
* @description 获取地图所有资源
|
||||
* @param params
|
||||
*/
|
||||
export const getMapListApi = (params: any) => post(Api.getAllList, params);
|
||||
/**
|
||||
* @description 获取健康终端日周月统计数据
|
||||
* @param params
|
||||
*/
|
||||
export const monitorTotalApi = (params: any) => get(Api.monitorTotal, params);
|
||||
/**
|
||||
* @description 获取健康终端echart数据
|
||||
* @param params
|
||||
*/
|
||||
export const monitorMonthApi = (params: any) => get(Api.monitorMonth, params);
|
||||
@@ -1,429 +0,0 @@
|
||||
<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" />
|
||||
</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 { openTestModal, 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, screenTitle } = userStore.getCenterInfo || { simpleName: '', centerTel: '', screenTitle: '' };
|
||||
const { refreshState } = useRefresh(DEFAULT_TIME);
|
||||
|
||||
const props = defineProps({
|
||||
result: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const dayTimeO = ref();
|
||||
const dayTimeT = ref();
|
||||
const interval = ref<any>(null);
|
||||
const title = ref(screenTitle ? screenTitle : '应急就医服务中心' + (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.xian);
|
||||
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;
|
||||
openTestModal();
|
||||
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(() => {
|
||||
userStore.setCount();
|
||||
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(() => {
|
||||
userStore.setCount();
|
||||
setSocketData(nVal);
|
||||
emergencyDialogRef.value.openDialog();
|
||||
});
|
||||
}
|
||||
if (popType == 2) {
|
||||
nextTick(() => {
|
||||
userStore.setCount();
|
||||
setSocketData(nVal);
|
||||
yunZuoXiDialogRef.value.openDialog();
|
||||
});
|
||||
}
|
||||
if (popType == 3) {
|
||||
nextTick(() => {
|
||||
userStore.setCount();
|
||||
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%;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,469 +0,0 @@
|
||||
<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"
|
||||
:socketData="socketData"
|
||||
:set-inter="true"
|
||||
:show-statistics="true"
|
||||
:time-interval="getTimeInterval()"
|
||||
@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"
|
||||
title=""
|
||||
:time-interval="{ startDate: dayjs().format('YYYY-MM-DD'), endDate: dayjs().format('YYYY-MM-DD') }"
|
||||
/>
|
||||
</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 { openTestModal, 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 dayjs from 'dayjs';
|
||||
|
||||
const userStore = useUserStore();
|
||||
let { simpleName, centerTel, screenTitle } = userStore.getCenterInfo || { simpleName: '', centerTel: '', screenTitle: '' };
|
||||
const { refreshState } = useRefresh(DEFAULT_TIME);
|
||||
|
||||
const props = defineProps({
|
||||
result: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const dayTimeO = ref();
|
||||
const dayTimeT = ref();
|
||||
const interval = ref<any>(null);
|
||||
const title = ref(screenTitle ? screenTitle : '应急就医服务中心' + (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);
|
||||
}
|
||||
|
||||
function getTimeInterval() {
|
||||
return { startDate: dayjs().format('YYYY-MM-DD'), endDate: dayjs().format('YYYY-MM-DD') };
|
||||
}
|
||||
|
||||
const { getCenterInfo } = useUserStore();
|
||||
function getTime() {
|
||||
const { timeLeft, timeRight } = useTopTime(getCenterInfo?.commissioningTime);
|
||||
dayTimeO.value = timeLeft;
|
||||
dayTimeT.value = timeRight;
|
||||
}
|
||||
|
||||
const setting = getSettings(DataType.xian);
|
||||
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;
|
||||
openTestModal();
|
||||
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(() => {
|
||||
userStore.setCount();
|
||||
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(() => {
|
||||
userStore.setCount();
|
||||
setSocketData(nVal);
|
||||
emergencyDialogRef.value.openDialog();
|
||||
});
|
||||
}
|
||||
if (popType == 2) {
|
||||
nextTick(() => {
|
||||
userStore.setCount();
|
||||
setSocketData(nVal);
|
||||
yunZuoXiDialogRef.value.openDialog();
|
||||
});
|
||||
}
|
||||
if (popType == 3) {
|
||||
nextTick(() => {
|
||||
userStore.setCount();
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.central-screen-body-left,
|
||||
.body-d-right {
|
||||
padding: 0 1.6rem;
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -1,457 +0,0 @@
|
||||
<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"
|
||||
:is-show="false"
|
||||
class="service-details"
|
||||
@handleClick="handlePhoneDialog"
|
||||
/>
|
||||
<!--一线医疗点每日工作动态-->
|
||||
<DailyWorkTrends theme="dark" :refreshState="refreshState" class="daily-work-trends" />
|
||||
</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" />-->
|
||||
<EmergencyData @emergencyDataList="emergencyDataList" class="emergency-data" />
|
||||
</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" />
|
||||
<emergency-data-dialog ref="emergencyDataDialog" />
|
||||
</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 { openTestModal, 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';
|
||||
import dayjs from 'dayjs';
|
||||
import EmergencyDataDialog from '/@/views/yinChuan/componetns/emergencyData/components/emergencyDataDialog.vue';
|
||||
|
||||
const userStore = useUserStore();
|
||||
let { simpleName, centerTel, screenTitle } = userStore.getCenterInfo || { simpleName: '', centerTel: '', screenTitle: '' };
|
||||
const { refreshState } = useRefresh(DEFAULT_TIME);
|
||||
|
||||
const props = defineProps({
|
||||
result: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const dayTimeO = ref();
|
||||
const dayTimeT = ref();
|
||||
const interval = ref<any>(null);
|
||||
const title = ref(screenTitle ? screenTitle : '应急就医服务中心' + (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.xian);
|
||||
onMounted(async () => {
|
||||
try {
|
||||
options.value = {
|
||||
center: [getCenterInfo?.longitude || 106.32, getCenterInfo?.latitude || 38.45], //地图中心点
|
||||
zoom: 8, //地图显示的缩放级别
|
||||
mapStyle: 'darkblue', //地图样式
|
||||
};
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
init();
|
||||
document.title = title.value;
|
||||
openTestModal();
|
||||
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) {
|
||||
userStore.setCount();
|
||||
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) {
|
||||
userStore.setCount();
|
||||
nextTick(() => {
|
||||
setSocketData(nVal);
|
||||
emergencyDialogRef.value.openDialog();
|
||||
});
|
||||
}
|
||||
if (popType == 2) {
|
||||
userStore.setCount();
|
||||
nextTick(() => {
|
||||
setSocketData(nVal);
|
||||
yunZuoXiDialogRef.value.openDialog();
|
||||
});
|
||||
}
|
||||
if (popType == 3) {
|
||||
userStore.setCount();
|
||||
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);
|
||||
//}
|
||||
> :nth-child(1) {
|
||||
width: 100%;
|
||||
height: calc(100% / 3);
|
||||
padding: 10px;
|
||||
}
|
||||
> :nth-child(2) {
|
||||
width: 100%;
|
||||
height: calc(100% / 3 * 2);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.body-d-right {
|
||||
> :nth-child(n) {
|
||||
width: 100%;
|
||||
height: calc(100% / 2);
|
||||
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%;
|
||||
}
|
||||
|
||||
:deep(.inner .scroll) {
|
||||
height: 100% !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,619 +0,0 @@
|
||||
<template>
|
||||
<div class="center-map">
|
||||
<div class="china-map-box">
|
||||
<div class="tab-list">
|
||||
<div v-for="(item, i) in list" :class="[currentIndex == i ? 'active' : '']" class="tab" @click="changeTab(item, i)">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="currentIndex == list.length - 1" class="route-navigation">
|
||||
<a-form :model="formState" layout="inline">
|
||||
<a-form-item class="form-item-self" label="起点">
|
||||
<a-input v-model:value="formState.start" placeholder="请输入起点"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item class="form-item-self" label="终点">
|
||||
<a-input v-model:value="formState.end" placeholder="请输入终点"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button class="reset-btn" @click="removeInput">清空</a-button>
|
||||
<a-button class="search-btn" @click="searchRoute" :loading="searchFlag" :disabled="searchFlag"> 路线规划 </a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div v-show="showRoutePanel" v-click-outside="outClick" class="line-container">
|
||||
<div v-show="routeList.length" class="has-data">
|
||||
<div class="line-title"> {{ panelTitle }}</div>
|
||||
<div class="line-content">
|
||||
<div class="start">起点</div>
|
||||
<div class="line-body">
|
||||
<div class="line"></div>
|
||||
<div class="line-desc">
|
||||
<p v-for="(item, i) in routeList" :key="i">{{ item }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="end">终点</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="!routeList.length" class="empty-data"> 暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="showHospitalList" class="reset-map" @click="resetMap">
|
||||
<RedoOutlined title="重置地图" />
|
||||
</div>
|
||||
<RoutePanel
|
||||
class="driving-route-panel"
|
||||
v-show="showDrivingPanel"
|
||||
:drivingRoute="drivingRoute"
|
||||
:drivingTitle="drivingTitle"
|
||||
@out-click="showDrivingPanel = false"
|
||||
/>
|
||||
<div style="flex: 1; overflow: hidden; margin: 0 0 10px">
|
||||
<div id="centerMap" class="mapContainer"></div>
|
||||
</div>
|
||||
<div v-show="false" id="container"></div>
|
||||
<div v-show="false" id="panel"></div>
|
||||
<div class="map-legend">
|
||||
<div v-for="(item, i) in legendList" :key="i" class="legend-item">
|
||||
<div><img :src="item.img" alt="" class="legend-img" /> {{ item.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--<div class="level">地图层级：{{ level }}</div>-->
|
||||
</div>
|
||||
<div class="center-footer" v-if="showFooter">
|
||||
<div class="count-item">
|
||||
<div class="num">{{ useDetail?.alerdyreceive || '0' }}</div>
|
||||
<div class="text">累计受理</div>
|
||||
</div>
|
||||
<div class="count-item">
|
||||
<div class="num">{{ useDetail?.totalacceptance || '0' }}</div>
|
||||
<div class="text">累计处置</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 附近医院、医疗点 -->
|
||||
<div class="hospital-list" v-if="showHospitalList">
|
||||
<div class="hospital-item" v-for="(item, index) in hospitalList" :key="index" @click="showDrivingLine(item)">
|
||||
<div>{{ item?.name }}</div>
|
||||
<div>相距{{ item?.distance }}</div>
|
||||
<div>驾车大约{{ item?.driveTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { nextTick, onMounted, ref, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { RedoOutlined } from '@ant-design/icons-vue';
|
||||
import { Map } from '/@/assets/mapUtils/map';
|
||||
import { getKmStr, getTimeStr, tabList, TabType } from '/@/components/chinaMap/chinaHooks';
|
||||
import { useDetailStore } from '/@/store/modules/detailData.ts';
|
||||
import RoutePanel from '/@/components/chinaMap/components/routePanel.vue';
|
||||
import { legendList, mapApiSwitch } from '/@/views/centralScreen/components/centerMapHooks.ts';
|
||||
import { useUserStore } from '/@/store/modules/user.ts';
|
||||
|
||||
const props = defineProps({
|
||||
//是否展示底部统计
|
||||
showFooter: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return true;
|
||||
},
|
||||
},
|
||||
//地图是否按照接口数据的中心点定位
|
||||
computedCenter: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return true;
|
||||
},
|
||||
},
|
||||
// 地图配置
|
||||
mapOptions: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
//是否展示最近的三个医院
|
||||
showHospitalList: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false;
|
||||
},
|
||||
},
|
||||
hospitalList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['clearHospitalList']);
|
||||
const useDetail = useDetailStore();
|
||||
const formState = ref({
|
||||
start: '',
|
||||
end: '',
|
||||
});
|
||||
const list = ref(tabList);
|
||||
const currentIndex = ref(0);
|
||||
const userStore = useUserStore();
|
||||
|
||||
function changeTab(item, i: number) {
|
||||
currentIndex.value = i; // 地方医院
|
||||
Map.clearActiveHospital();
|
||||
closeDrivingElement();
|
||||
Map.map.off('moveend', logMapinfo);
|
||||
if (TabType.diFangYiYuan == item.type) {
|
||||
Map.removeOverlayGroup();
|
||||
Map.map.on('moveend', logMapinfo);
|
||||
return;
|
||||
} else {
|
||||
getMapData(item.type, { type: item.type, centerId: userStore.getCenterInfo?.id });
|
||||
}
|
||||
}
|
||||
|
||||
const currentCityCode = ref('');
|
||||
|
||||
function logMapinfo() {
|
||||
Map.map.getCity(function (info) {
|
||||
const { citycode } = info;
|
||||
if (currentCityCode.value != citycode) {
|
||||
Map.createActiveHospital(citycode);
|
||||
currentCityCode.value = citycode;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const level = ref(0);
|
||||
|
||||
function setLevel() {
|
||||
//获取当前地图级别
|
||||
level.value = Map.map.getZoom();
|
||||
}
|
||||
|
||||
async function getMapData(type, params = {}) {
|
||||
try {
|
||||
const { code, result } = await mapApiSwitch(type, params);
|
||||
if (code == 200) {
|
||||
if (Array.isArray(result) && result.length > 0) {
|
||||
Map.createOverlay(
|
||||
result,
|
||||
{
|
||||
content: (val) => {
|
||||
return `<div style="
|
||||
width: 21px;
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: -20px;" title="${val?.name}">
|
||||
</div>`;
|
||||
},
|
||||
},
|
||||
() => {},
|
||||
props.computedCenter
|
||||
);
|
||||
} else {
|
||||
Map.removeOverlayGroup();
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn(e);
|
||||
}
|
||||
}
|
||||
|
||||
function initMap() {
|
||||
Map.initMap({ el: 'centerMap', option: props.mapOptions }).then(() => {
|
||||
getMapData(tabList[0].type, { centerId: userStore.getCenterInfo?.id });
|
||||
Map.map && Map.map.on('zoomend', setLevel);
|
||||
Map.map && Map.map.on('zoomend', setLevel);
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.mapOptions,
|
||||
() => {
|
||||
initMap();
|
||||
}
|
||||
);
|
||||
|
||||
// onMounted(() => {
|
||||
// });
|
||||
const routeList = ref([]);
|
||||
const showRoutePanel = ref(false);
|
||||
const panelTitle = ref();
|
||||
|
||||
function outClick() {
|
||||
showRoutePanel.value = false;
|
||||
}
|
||||
|
||||
function setTitle({ time, distance }) {
|
||||
let str = '全程';
|
||||
str += getTimeStr(time);
|
||||
str += getKmStr(distance);
|
||||
panelTitle.value = str;
|
||||
}
|
||||
|
||||
let searchFlag = ref(false);
|
||||
|
||||
/**
|
||||
* @desc 路线规划
|
||||
* @param callback
|
||||
*/
|
||||
function searchRoute(callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) {
|
||||
showRoutePanel.value = false;
|
||||
panelTitle.value = '';
|
||||
if (!formState.value.start) {
|
||||
return message.warn('请输入起点');
|
||||
}
|
||||
if (!formState.value.end) {
|
||||
return message.warn('请输入终点');
|
||||
}
|
||||
searchFlag.value = true;
|
||||
//基本地图加载
|
||||
let map = new AMap.Map('container', {
|
||||
resizeEnable: true,
|
||||
center: [116.397428, 39.90923], //地图中心点
|
||||
zoom: 13, //地图显示的缩放级别
|
||||
});
|
||||
//构造路线导航类
|
||||
let driving = new AMap.Driving({
|
||||
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') {
|
||||
searchFlag.value = false;
|
||||
// console.log('绘制驾车路线完成');
|
||||
} else {
|
||||
searchFlag.value = false;
|
||||
// console.log('获取驾车数据失败：' + result);
|
||||
}
|
||||
});
|
||||
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;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function removeInput() {
|
||||
formState.value.start = '';
|
||||
formState.value.end = '';
|
||||
searchFlag.value = false;
|
||||
}
|
||||
|
||||
// 驾车路线
|
||||
const drivingRoute = ref([]);
|
||||
const drivingTitle = ref('');
|
||||
const showDrivingPanel = ref(false);
|
||||
|
||||
function showDrivingLine(item) {
|
||||
nextTick(() => {
|
||||
drivingTitle.value = '全程' + item.driveTime + item.distance;
|
||||
drivingRoute.value = item.routeList?.map((item) => item?.instruction);
|
||||
showDrivingPanel.value = true;
|
||||
if (item.lon) {
|
||||
Map.clearNaviLine();
|
||||
Map.createNaviLine(item.userLocation, [item.lon, item.lat]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function closeDrivingElement() {
|
||||
Map.clearNavigationElements();
|
||||
formState.value.start = '';
|
||||
formState.value.end = '';
|
||||
showDrivingPanel.value = false;
|
||||
emits('clearHospitalList');
|
||||
}
|
||||
|
||||
function resetMap() {
|
||||
closeDrivingElement();
|
||||
changeTab(list.value[currentIndex.value], currentIndex.value);
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.center-map {
|
||||
flex: 1;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: space-between;
|
||||
|
||||
.china-map-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
|
||||
.tab {
|
||||
width: calc(100% / 8);
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #29f1fa;
|
||||
background: url('/@/assets/img/tab-default.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
background: url('/@/assets/img/tab-active.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-navigation {
|
||||
margin: 12px 0;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #002e64;
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
z-index: 999;
|
||||
transition: all 0.3s;
|
||||
|
||||
:deep(.form-item-self) {
|
||||
label {
|
||||
color: #29f1fa;
|
||||
}
|
||||
|
||||
.ant-input {
|
||||
width: 280px;
|
||||
color: #d6d9e0;
|
||||
background: #2a4164;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
border: 1px solid #1b7ef2;
|
||||
}
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
width: 64px;
|
||||
height: 32px;
|
||||
border-radius: 5px;
|
||||
color: #45a2ff;
|
||||
background: #002e64;
|
||||
border: 1px solid #45a2ff;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
margin-left: 10px;
|
||||
width: 120px;
|
||||
height: 32px;
|
||||
color: #efefef;
|
||||
background: #45a2ff;
|
||||
border-radius: 5px;
|
||||
border-color: #45a2ff;
|
||||
}
|
||||
|
||||
.line-container {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 54px;
|
||||
width: 288px;
|
||||
padding: 9px 18px;
|
||||
min-height: 200px;
|
||||
max-height: 473px;
|
||||
overflow: auto;
|
||||
background: #2a4164;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #1b7ef2;
|
||||
|
||||
.line-title {
|
||||
margin-bottom: 9px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.line-content {
|
||||
font-size: 12px;
|
||||
|
||||
.start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '起';
|
||||
color: #fff;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: #1478f5;
|
||||
}
|
||||
}
|
||||
|
||||
.end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '终';
|
||||
color: #fff;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: #1478f5;
|
||||
}
|
||||
}
|
||||
|
||||
.line-body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 1px;
|
||||
background-color: #1478f5;
|
||||
margin: 5px 19px 5px 8px;
|
||||
}
|
||||
|
||||
.line-desc {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
margin-top: 30%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reset-map {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50px;
|
||||
z-index: 99;
|
||||
font-size: 20px;
|
||||
color: #05d5ff;
|
||||
cursor: pointer;
|
||||
background: #243b5d;
|
||||
padding: 0px 6px;
|
||||
}
|
||||
|
||||
//驾驶路线导航面板
|
||||
.driving-route-panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 86px;
|
||||
width: 288px;
|
||||
padding: 9px 18px;
|
||||
min-height: 200px;
|
||||
max-height: 473px;
|
||||
overflow: auto;
|
||||
background: #2a4164;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #1b7ef2;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.mapContainer {
|
||||
flex: 1;
|
||||
height: calc(100% + 22px);
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.map-legend {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 10px;
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.legend-item {
|
||||
width: 50%;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
|
||||
.legend-img {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.level {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 400px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.center-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
gap: 20px;
|
||||
|
||||
.count-item {
|
||||
width: 340px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
color: #ffffff;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #00071b;
|
||||
box-shadow: inset 0 0 40px 0 #1b7ef2;
|
||||
border-radius: 4px;
|
||||
|
||||
.num {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hospital-list {
|
||||
position: absolute;
|
||||
bottom: 200px;
|
||||
width: 800px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
|
||||
.hospital-item {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
gap: 20px;
|
||||
min-width: 230px;
|
||||
max-width: 230px;
|
||||
height: 110px;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
margin: 0 10px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
background-color: #00152b;
|
||||
border: 1px solid #1b7ef2;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 11px 0 rgba(194, 189, 189, 0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hospital-item:hover {
|
||||
background-color: #192a46;
|
||||
box-shadow: inset 0 0 16px 3px #2562a9;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,37 +0,0 @@
|
||||
import { TabType } from '/@/components/chinaMap/chinaHooks.ts';
|
||||
import { getMapListApi } from '/@/views/centralScreen/centralScreen.api.ts';
|
||||
|
||||
export const legend1 = new URL('/@/assets/img/legend1.png', import.meta.url).href;
|
||||
export const legend2 = new URL('/@/assets/img/legend2.png', import.meta.url).href;
|
||||
export const legend3 = new URL('/@/assets/img/legend3.png', import.meta.url).href;
|
||||
export const legend4 = new URL('/@/assets/img/legend4.png', import.meta.url).href;
|
||||
export const legend5 = new URL('/@/assets/img/legend5.png', import.meta.url).href;
|
||||
export const legend7 = new URL('/@/assets/img/legend7.png', import.meta.url).href;
|
||||
export const legendList = [
|
||||
{ img: legend1, text: '油田医院' },
|
||||
{ img: legend2, text: '医疗点' },
|
||||
{ img: legend7, text: '关联医疗点' },
|
||||
{ img: legend3, text: '救护车' },
|
||||
{ img: legend4, text: '合作医院' },
|
||||
{ img: legend5, text: '地方医院' },
|
||||
];
|
||||
|
||||
export function mapApiSwitch(type: string, params: any) {
|
||||
const basicParams = {
|
||||
lat: 34, //纬度34
|
||||
lon: 108, //经度
|
||||
};
|
||||
// 全部 医疗点
|
||||
if ([TabType.all, TabType.yiLiaoDian].includes(type)) {
|
||||
return getMapListApi({ ...basicParams, ...params });
|
||||
}
|
||||
// 其他
|
||||
if ([TabType.youTianYiYuan, TabType.heZuoYiYuan, TabType.jiuHuChe, TabType.jiuHuChe].includes(type)) {
|
||||
let { centerId, ...other } = params;
|
||||
return getMapListApi({ ...basicParams, ...other });
|
||||
}
|
||||
}
|
||||
|
||||
export function handleSocketUrl(url: string, centerId: string) {
|
||||
return url.substring(0, url.indexOf('/websocket/') + 11) + centerId;
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
let dataX: any[] = [];
|
||||
let dataY: any[] = [];
|
||||
|
||||
function setData(dX, dY) {
|
||||
dataX = dX;
|
||||
dataY = dY;
|
||||
}
|
||||
|
||||
function getOption() {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: (params: any) => {
|
||||
console.log(params);
|
||||
let p = params[0];
|
||||
return `${p?.name}日: ${p?.value}次`;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: dataX,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#0d2137',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
lineStyle: {
|
||||
color: 'transparent', // X轴刻度线的颜色
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#ffffff', // X轴标签文字的颜色
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#0d2137', // 设置Y轴分割线的颜色为红色
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: dataY,
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
color: '#0a50a0',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#0d2137', // 设置Y轴分割线的颜色为红色
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
export function useE() {
|
||||
return { setData, getOption };
|
||||
}
|
||||
@@ -1,115 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<public-title title="一线医疗点每日工作动态" themeType="dark" />
|
||||
<div class="inner" v-if="trendsData.length">
|
||||
<div class="trends-item" v-for="(item, k) in trendsData" :key="k">
|
||||
<div class="trends-title-con">
|
||||
<span class="icon-medical"></span>
|
||||
<span class="trends-item-title">{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="trends-item-span-box">
|
||||
<!-- <span class="trends-item-span">高风险干预{{ item?.high }}人</span>-->
|
||||
<span class="trends-item-span">慢病管理{{ item?.slow }}人</span>
|
||||
<span class="trends-item-span">巡诊{{ item?.tour }}人</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="empty-box">
|
||||
<img class="img" :src="EmptyImg" alt="" />
|
||||
<div class="no-data">暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
|
||||
import { medicalCenterNew } from '/@/views/centralScreen/centralScreen.api.ts';
|
||||
import { useUserStore } from '/@/store/modules/user.ts';
|
||||
import EmptyImg from '/@/assets/img/empty-img.png';
|
||||
|
||||
const { setSession, getSession } = useSession();
|
||||
const { WORK_DAILY_NEW } = caching;
|
||||
const trendsData = ref([]);
|
||||
const userStore = useUserStore();
|
||||
|
||||
async function getTrendsData() {
|
||||
try {
|
||||
let centerId = userStore.getCenterInfo?.id;
|
||||
const { code, result } = await medicalCenterNew({ centerId });
|
||||
if (code != 200) {
|
||||
return;
|
||||
}
|
||||
setSession(WORK_DAILY_NEW, result);
|
||||
trendsData.value = result;
|
||||
} catch {
|
||||
trendsData.value = JSON.parse(getSession(WORK_DAILY_NEW));
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getTrendsData();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
overflow: auto;
|
||||
|
||||
.trends-item {
|
||||
font-size: 16px;
|
||||
padding: 10px 20px 5px;
|
||||
|
||||
.trends-title-con {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon-medical {
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background: url('/@/assets/images/medical-center.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.trends-item-title {
|
||||
margin-left: 8px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.trends-item-span-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.trends-item-span {
|
||||
//flex: 1;
|
||||
//color: #ededed;
|
||||
flex: 1;
|
||||
color: #d0c4c4;
|
||||
font-size: 13px;
|
||||
justify-content: space-around;
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.trends-item-span:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.img {
|
||||
width: 100px;
|
||||
margin-top: 80px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,198 +0,0 @@
|
||||
<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>
|
||||
@@ -1,228 +0,0 @@
|
||||
<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>
|
||||
@@ -1,113 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<public-title title="员工队伍健康状况" themeType="dark">
|
||||
<template #right>
|
||||
<!-- <span class="right-text" @click="viewDetail">更多</span>-->
|
||||
</template>
|
||||
</public-title>
|
||||
<div class="inner">
|
||||
<div v-for="(item, index) in list" :key="index" class="health-item">
|
||||
<span>{{ item.label }}</span>
|
||||
<span>{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
|
||||
import { userHealthCenterNew } from '/@/views/centralScreen/centralScreen.api.ts';
|
||||
import { useUserStore } from '/@/store/modules/user.ts';
|
||||
|
||||
const props = defineProps({
|
||||
setting: Object,
|
||||
});
|
||||
const { setSession, getSession } = useSession();
|
||||
const { TEAM_HEALTH_NEW } = caching;
|
||||
const list = ref([
|
||||
{
|
||||
label: '在册总人数',
|
||||
value: '',
|
||||
key: 'total',
|
||||
},
|
||||
{
|
||||
label: '患重大疾病人数',
|
||||
value: '',
|
||||
key: 'bigIll',
|
||||
},
|
||||
{
|
||||
label: '健康高风险人数',
|
||||
value: '',
|
||||
key: 'highRisk',
|
||||
},
|
||||
{
|
||||
label: '患慢性病人数',
|
||||
value: '',
|
||||
key: 'slowIll',
|
||||
},
|
||||
{
|
||||
label: '健康指标异常人数',
|
||||
value: '',
|
||||
key: 'focusErr',
|
||||
},
|
||||
{
|
||||
label: '健康人数',
|
||||
value: '',
|
||||
key: 'health',
|
||||
},
|
||||
]);
|
||||
|
||||
function setList(data = {}) {
|
||||
list.value.forEach((item) => {
|
||||
const { key } = item;
|
||||
if (data && data.hasOwnProperty(key)) {
|
||||
item.value = data[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
async function viewDetail() {
|
||||
try {
|
||||
let centerId = userStore.getCenterInfo?.id;
|
||||
const { code, result } = await userHealthCenterNew({ dataType: props.setting?.dataType, centerId });
|
||||
if (code != 200) {
|
||||
return;
|
||||
}
|
||||
setList(result);
|
||||
setSession(TEAM_HEALTH_NEW, result);
|
||||
} catch {
|
||||
let data = JSON.parse(getSession(TEAM_HEALTH_NEW));
|
||||
setList(data);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
viewDetail();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 10px;
|
||||
|
||||
.right-text {
|
||||
font-weight: 100;
|
||||
cursor: pointer;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.health-item {
|
||||
flex: 1;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,128 +0,0 @@
|
||||
<template>
|
||||
<Dialog class="phone-dialog" :openVis="visible" width="60%" :title="dialogTitle" @close="closeDialog" :maskClosable="false">
|
||||
<template #container>
|
||||
<div v-if="useForm" class="form-container">
|
||||
<Form :model="formRecord" :label-width="100" v-bind="formItemLayout">
|
||||
<a-form-item label="性别">
|
||||
<a-select v-model:value="formRecord.sex" placeholder="请选择" :options="sexTypeList"></a-select>
|
||||
</a-form-item>
|
||||
</Form>
|
||||
</div>
|
||||
<BasicTable
|
||||
ref="registerTable"
|
||||
class="table-container"
|
||||
:class="[themeType]"
|
||||
:key="visible"
|
||||
:columns="columns"
|
||||
:api="getPhoneList"
|
||||
:apiParams="formState"
|
||||
></BasicTable>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } 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 { Form } from 'ant-design-vue';
|
||||
import { SexType, sexTypeList } from '/@/utils/settings.ts';
|
||||
import { getPhoneList } from '/@/views/centralScreen/centralScreen.api.ts';
|
||||
import { useTheme } from '/@/hooks/theme/useTheme.ts';
|
||||
import { useUserStore } from '/@/store/modules/user.ts';
|
||||
|
||||
const props = defineProps({
|
||||
record: Object,
|
||||
title: String,
|
||||
useForm: Boolean,
|
||||
labelCol: Object,
|
||||
wrapperCol: Object,
|
||||
setting: Object,
|
||||
phoneType: String,
|
||||
});
|
||||
const { themeType } = useTheme();
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
style: { width: '100px' },
|
||||
...props.labelCol,
|
||||
},
|
||||
wrapperCol: {
|
||||
span: 6,
|
||||
...props.wrapperCol,
|
||||
},
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'realName',
|
||||
key: 'realName',
|
||||
},
|
||||
{
|
||||
title: '单位',
|
||||
dataIndex: 'departName',
|
||||
key: 'departName',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '部门',
|
||||
dataIndex: 'orgName',
|
||||
key: 'orgName',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
dataIndex: 'sex_dictText',
|
||||
key: 'sex_dictText',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'time',
|
||||
key: 'time',
|
||||
},
|
||||
{
|
||||
title: '电话',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
},
|
||||
];
|
||||
const formRecord = ref({
|
||||
sex: SexType.all,
|
||||
});
|
||||
const userStore = useUserStore();
|
||||
const formState = computed(() => ({
|
||||
...formRecord.value,
|
||||
dataType: props.setting.dataType,
|
||||
phoneType: props.phoneType,
|
||||
showType: '0',
|
||||
centerId: userStore.getCenterInfo?.id,
|
||||
}));
|
||||
const dialogTitle = ref();
|
||||
const { visible, closeDialog, openDialog } = useDialog({ title: dialogTitle.value });
|
||||
const registerTable = ref();
|
||||
watch(props, () => {
|
||||
registerTable.value?.getRecords();
|
||||
dialogTitle.value = props.title;
|
||||
});
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.phone-dialog {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
margin: 10px 0;
|
||||
|
||||
:deep(.ant-form-item-label > label) {
|
||||
color: var(--formLabel);
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
margin: 0 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,138 +0,0 @@
|
||||
<template>
|
||||
<div class="common-card" :class="[themeType]">
|
||||
<public-title title="体检数据" :themeType="themeType" />
|
||||
<div class="inner">
|
||||
<div class="type-time">
|
||||
<span
|
||||
v-for="(item, index) in timeTab"
|
||||
:key="index"
|
||||
:class="[selectIndex === index ? 'select' : 'unSelect', themeType]"
|
||||
@click="handleSelect(index, item.value)"
|
||||
>{{ item.name }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="physical-container">
|
||||
<a-spin :spinning="spinning" class="spin"></a-spin>
|
||||
<div class="RadarCharts" ref="radarChartsRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, unref, watch } from 'vue';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import { useSpin, timeTab, useHospitalList, radarCharts, allValueEmpty } from '/@/components/body-d-left/bodyLeftHooks';
|
||||
import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
|
||||
import * as echarts from 'echarts';
|
||||
import { useTheme } from '/@/hooks/theme/useTheme.ts';
|
||||
import { getPhysicalData } from '/@/views/centralScreen/centralScreen.api.ts';
|
||||
import { useUserStore } from '/@/store/modules/user.ts';
|
||||
|
||||
const props = defineProps({
|
||||
refreshState: {
|
||||
type: Boolean,
|
||||
},
|
||||
setting: Object,
|
||||
});
|
||||
const { themeType } = useTheme();
|
||||
const { setSession, getSession } = useSession();
|
||||
const { PHYSICAL_DATA } = caching;
|
||||
const { setSpin, spinning } = useSpin();
|
||||
const selectIndex = ref(0);
|
||||
const selectVal = ref('2'); //本年
|
||||
function handleSelect(index: number, value: string) {
|
||||
selectIndex.value = index;
|
||||
selectVal.value = value;
|
||||
setSpin(true);
|
||||
setTimeout(() => {
|
||||
setSpin(false);
|
||||
}, 1000);
|
||||
getList();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
const { radarList, setRadarList, getRadarList } = useHospitalList();
|
||||
const userStore = useUserStore();
|
||||
|
||||
async function getList() {
|
||||
setSpin(true);
|
||||
try {
|
||||
let orgCodeList = userStore.getCenterInfo?.serviceScope || '';
|
||||
let centerId = userStore.getCenterInfo?.id || '';
|
||||
const { code, result } =
|
||||
(await getPhysicalData({
|
||||
dataType: props.setting.dataType,
|
||||
condition: selectVal.value,
|
||||
orgCodeList,
|
||||
centerId,
|
||||
})) || {};
|
||||
setSpin(!spinning.value);
|
||||
if (code != 200) {
|
||||
return;
|
||||
}
|
||||
setSession(PHYSICAL_DATA, JSON.stringify(result));
|
||||
setValue(result);
|
||||
} catch {
|
||||
const result = JSON.parse(getSession(PHYSICAL_DATA));
|
||||
setValue(result);
|
||||
setSpin(!spinning.value);
|
||||
}
|
||||
}
|
||||
|
||||
function setValue(result) {
|
||||
setRadarList(result);
|
||||
const everyEmpty = allValueEmpty('value', getRadarList());
|
||||
// everyEmpty && initChart();
|
||||
initChart();
|
||||
}
|
||||
|
||||
const radarChartsRef = ref<HTMLElement>();
|
||||
|
||||
function initChart() {
|
||||
const myChart = echarts.init(radarChartsRef.value);
|
||||
let countList = radarList?.value?.map((item) => item?.userCount) || [];
|
||||
// if (countList?.length < 1) return;
|
||||
let max = Math.max(...countList);
|
||||
const indicator = radarList?.value?.map((item) => ({ name: item?.hospitalName, max: max }));
|
||||
const option = radarCharts({ indicator, countList, theme: unref(themeType) });
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.refreshState,
|
||||
() => {
|
||||
getList();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
|
||||
.physical-container {
|
||||
width: 96%;
|
||||
height: calc(100% - 35px);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-around;
|
||||
position: relative;
|
||||
|
||||
.spin {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.RadarCharts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,150 +0,0 @@
|
||||
<template>
|
||||
<div class="common-card" :class="[themeType]">
|
||||
<public-title title="服务详情数据" :themeType="themeType" />
|
||||
<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">
|
||||
<div
|
||||
v-for="(item, index) in statistics"
|
||||
:key="index"
|
||||
class="server-item"
|
||||
:class="[['gross', 'alerdyreceive'].includes(item.key) ? 'hasCursor' : '', themeType]"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
<span>{{ item?.name }}</span>
|
||||
<span>{{ item?.value }}</span>
|
||||
</div>
|
||||
<a-spin :spinning="spinning" class="spin"></a-spin>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import { timeTab, useSpin, useStatistics } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||||
import { useDetailStore } from '/@/store/modules/detailData.ts';
|
||||
import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
|
||||
import { useTheme } from '/@/hooks/theme/useTheme.ts';
|
||||
import { statisticsNewApi } from '/@/views/centralScreen/centralScreen.api.ts';
|
||||
import { useUserStore } from '/@/store/modules/user.ts';
|
||||
|
||||
const { themeType } = useTheme();
|
||||
const { SERVER_DETAIL } = caching;
|
||||
const props = defineProps({
|
||||
refreshState: {
|
||||
type: Boolean,
|
||||
},
|
||||
setting: {
|
||||
type: Object,
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
},
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: () => true,
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['handleClick']);
|
||||
const typeTime = ref(timeTab);
|
||||
const { statistics, setStatistics } = useStatistics();
|
||||
const selectIndex = ref(0);
|
||||
const selectVal = ref('2'); //本年
|
||||
const { setSpin, spinning } = useSpin();
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
const useDetail = useDetailStore();
|
||||
const { setSession, getSession } = useSession();
|
||||
const userStore = useUserStore();
|
||||
|
||||
async function getList() {
|
||||
setSpin(true);
|
||||
try {
|
||||
let centerId = userStore.getCenterInfo?.id;
|
||||
const { code, result } = (await statisticsNewApi({ condition: selectVal.value, centerId })) || {};
|
||||
setSpin(false);
|
||||
if (code != 200 || !result) {
|
||||
return;
|
||||
}
|
||||
setSession(SERVER_DETAIL, JSON.stringify(result));
|
||||
setValue(result);
|
||||
} catch {
|
||||
setSpin(false);
|
||||
const result = JSON.parse(getSession(SERVER_DETAIL));
|
||||
setValue(result);
|
||||
}
|
||||
}
|
||||
|
||||
function setValue(result = {}) {
|
||||
let { alerdyreceive = '', totalacceptance = '' } = result;
|
||||
setStatistics(result);
|
||||
if (alerdyreceive || totalacceptance) {
|
||||
useDetail.setAlerdyreceive(alerdyreceive);
|
||||
useDetail.setTotalacceptance(totalacceptance);
|
||||
}
|
||||
}
|
||||
|
||||
function handleSelect(index: number, value: string) {
|
||||
selectIndex.value = index;
|
||||
selectVal.value = value;
|
||||
getList();
|
||||
}
|
||||
|
||||
function handleClick(item) {
|
||||
// 下面这行是为了检查的时候，不让点击查看最新受理电话功能，只针对银川大屏
|
||||
// if (!props.isShow && item.key === 'alerdyreceive') return;
|
||||
emit('handleClick', item);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.refreshState,
|
||||
() => {
|
||||
getList();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
|
||||
.server-container {
|
||||
color: #fff;
|
||||
padding-top: 10px;
|
||||
height: 88%;
|
||||
display: grid;
|
||||
align-items: start;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
||||
.spin {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.server-item {
|
||||
font-size: 16px;
|
||||
padding: 6px 6% 6px 5%;
|
||||
|
||||
&.hasCursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,416 +0,0 @@
|
||||
<template>
|
||||
<div class="terminal-container common-card" :class="[themeType]">
|
||||
<public-title title="健康终端报警" :themeType="themeType">
|
||||
<template #right>
|
||||
<span class="right-text" :class="[themeType]" @click="viewDetail">查看详情</span>
|
||||
</template>
|
||||
</public-title>
|
||||
<div class="inner">
|
||||
<vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="4" v-bind="classOption">
|
||||
<div
|
||||
class="item right-top-item"
|
||||
:class="themeType"
|
||||
v-for="(item, i) in scrollList"
|
||||
:key="i"
|
||||
:style="{ padding: props.setInter ? '10px 0' : '3% 0' }"
|
||||
>
|
||||
<span class="fixed-width" :title="item?.realName">{{ item?.realName }}</span>
|
||||
<span class="fixed-width" :title="item?.eventType_dictText">{{ item?.eventType_dictText }}</span>
|
||||
<div class="time-icon">
|
||||
<span>{{ item?.warnTime }}</span>
|
||||
<span class="terminal-icon" @click="handlePolice(item)" title="健康报警员工信息"></span>
|
||||
<span class="position" @click="sendPosition(item)" title="员工定位"></span>
|
||||
</div>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</div>
|
||||
<div class="bottom-d" v-if="showStatistics">
|
||||
<div>
|
||||
<div>
|
||||
日累计
|
||||
<span>{{ dayInfo?.dayCount || 0 }}</span>
|
||||
次
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
周累计
|
||||
<span>{{ dayInfo?.weekCount || 0 }}</span>
|
||||
次
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
月累计
|
||||
<span>{{ dayInfo?.monthCount || 0 }}</span>
|
||||
次
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Dialog :openVis="openInfor" width="30%" title="健康报警员工信息" @close="handlePoliceClose">
|
||||
<template #container>
|
||||
<div class="police-con" :class="[themeType]">
|
||||
<Row style="font-size: 14px; font-weight: bold"> 个人信息 </Row>
|
||||
<Row>
|
||||
<Col :span="8">姓名：{{ userInfo?.realName || '--' }}</Col>
|
||||
<Col :span="8">性别：{{ userInfo?.sex_dictText || '--' }}</Col>
|
||||
<Col :span="8">年龄：{{ userInfo?.age || '--' }}</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col :span="8">二级单位：{{ userInfo?.orgName2 || '--' }}</Col>
|
||||
<Col :span="8">部门：{{ userInfo?.orgName || '--' }}</Col>
|
||||
<Col :span="8">手机号码：{{ userInfo?.phone || '--' }}</Col>
|
||||
</Row>
|
||||
<Row style="font-size: 14px; font-weight: bold"> 健康信息 </Row>
|
||||
<Row> 异常事件：{{ userInfo?.eventType_dictText || '--' }} </Row>
|
||||
<Row>
|
||||
<Col :span="8">异常值：{{ userInfo?.dataValue || '--' }}</Col>
|
||||
<Col :span="16">发生时间：{{ userInfo?.warnTime || '--' }}</Col>
|
||||
</Row>
|
||||
<div style="display: flex">
|
||||
<div style="width: 67px">发生地点：</div>
|
||||
<div style="width: calc(100% - 67px); display: flex; overflow-wrap: anywhere">
|
||||
{{ userInfo?.address || userInfo?.gpsErrorMsg || '--' }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="con-item">-->
|
||||
<!-- <div>姓名：</div>-->
|
||||
<!-- <div>{{ userInfo?.realName }}</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="con-item">-->
|
||||
<!-- <div>二级单位：</div>-->
|
||||
<!-- <div>{{ userInfo?.orgName1 }}</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="con-item">-->
|
||||
<!-- <div>手机号码：</div>-->
|
||||
<!-- <div>{{ userInfo?.phone }}</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="con-item">-->
|
||||
<!-- <div>异常事件：</div>-->
|
||||
<!-- <div>{{ userInfo?.eventType_dictText }}</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="con-item">-->
|
||||
<!-- <div>异常值：</div>-->
|
||||
<!-- <div>{{ userInfo?.dataValue }}</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="con-item">-->
|
||||
<!-- <div>发生时间：</div>-->
|
||||
<!-- <div>{{ userInfo?.warnTime }}</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="con-item">-->
|
||||
<!-- <div>发生地点：</div>-->
|
||||
<!-- <div v-if="userInfo?.address">{{ userInfo?.address }}</div>-->
|
||||
<!-- <div style="color: #eb3636" v-else>{{ userInfo?.gpsErrorMsg }}</div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import Dialog from '/@/components/dialog/Dialog.vue';
|
||||
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
|
||||
import { getMonitorList, monitorTotalApi } from '/@/views/centralScreen/centralScreen.api.ts';
|
||||
import { Map } from '/@/assets/mapUtils/map.ts';
|
||||
import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
|
||||
import { DataType } from '/@/utils/settings.ts';
|
||||
import { useTheme } from '/@/hooks/theme/useTheme.ts';
|
||||
import { Col, message, Row } from 'ant-design-vue';
|
||||
import { useUserStore } from '/@/store/modules/user.ts';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const props = defineProps({
|
||||
setting: Object,
|
||||
setInter: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
timeInterval: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
showStatistics: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
socketData: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
const { themeType } = useTheme();
|
||||
const emit = defineEmits(['emit-view-detail']);
|
||||
const router = useRouter();
|
||||
const { setSession, getSession } = useSession();
|
||||
const { RIGHT_KEY1_NEW } = caching;
|
||||
|
||||
const classOption = ref({
|
||||
step: 0.3, // 速度
|
||||
});
|
||||
const openInfor = ref<boolean>(false); //弹窗显示
|
||||
const userInfo = ref({
|
||||
realName: '',
|
||||
orgName1: '',
|
||||
phone: '',
|
||||
eventType_dictText: '',
|
||||
warnTime: '',
|
||||
address: '',
|
||||
dataValue: '',
|
||||
});
|
||||
const dayInfo = ref<any>({});
|
||||
onMounted(() => {
|
||||
getScrollList();
|
||||
// 如果为庆阳应急中心，需调用统计接口
|
||||
if (props.setInter) {
|
||||
interval.value = setInterval(() => {
|
||||
getScrollList();
|
||||
}, 30000);
|
||||
getStatic();
|
||||
}
|
||||
});
|
||||
|
||||
function getStatic() {
|
||||
monitorTotalApi({ orgCodeList: userStore.getCenterInfo?.serviceScope })
|
||||
.then((res: any) => {
|
||||
if (res.code === 200) {
|
||||
dayInfo.value = res?.result;
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @desc open员工信息
|
||||
*/
|
||||
function handlePolice(item) {
|
||||
userInfo.value = item;
|
||||
openInfor.value = true;
|
||||
classOption.value.step = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @desc close员工信息
|
||||
*/
|
||||
function handlePoliceClose() {
|
||||
openInfor.value = false;
|
||||
classOption.value.step = 0.3;
|
||||
}
|
||||
/**
|
||||
* @desc 终端报警
|
||||
* */
|
||||
const scrollList = ref([]);
|
||||
const userStore = useUserStore();
|
||||
|
||||
const interval = ref<any>(null);
|
||||
const nowDate = ref(dayjs());
|
||||
|
||||
onUnmounted(() => {
|
||||
interval.value && clearInterval(interval.value);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.socketData,
|
||||
(v) => {
|
||||
console.log(v);
|
||||
if (props.setInter) {
|
||||
getStatic();
|
||||
}
|
||||
getScrollList();
|
||||
}
|
||||
);
|
||||
async function getScrollList() {
|
||||
try {
|
||||
let orgCodeList = userStore.getCenterInfo?.serviceScope;
|
||||
let codeList = '';
|
||||
if (orgCodeList) {
|
||||
codeList = orgCodeList + ',' + props.setting?.orgCode;
|
||||
} else {
|
||||
codeList = props.setting?.orgCode;
|
||||
}
|
||||
// 如果为庆阳应急中心，需要拼上当天的日期
|
||||
const { code, result } = await getMonitorList({
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
orgCodeList: codeList,
|
||||
...(props.setInter ? props.timeInterval : {}),
|
||||
});
|
||||
if (code == 200) {
|
||||
setSession(RIGHT_KEY1_NEW, JSON.stringify(result.records));
|
||||
scrollList.value = result.records;
|
||||
}
|
||||
} catch {
|
||||
scrollList.value = JSON.parse(getSession(RIGHT_KEY1_NEW));
|
||||
}
|
||||
}
|
||||
|
||||
function sendPosition(item) {
|
||||
let { lon, lat } = item;
|
||||
if (lon && lat) {
|
||||
Map.createMarker(item, () => {
|
||||
handlePolice(item);
|
||||
});
|
||||
} else {
|
||||
message.warn('暂无经纬度信息！');
|
||||
}
|
||||
}
|
||||
|
||||
function viewDetail() {
|
||||
emit('emit-view-detail');
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.terminal-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.right-text {
|
||||
font-weight: 100;
|
||||
cursor: pointer;
|
||||
margin-right: 3px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.right-text.light {
|
||||
color: #667ecc;
|
||||
}
|
||||
|
||||
.right-text:hover {
|
||||
color: #129bff;
|
||||
}
|
||||
|
||||
.inner {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
//height: calc(100% - 40px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
|
||||
.scroll {
|
||||
width: 98%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 3% 0;
|
||||
|
||||
.time-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.terminal-icon {
|
||||
margin-left: 15px;
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.position {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-size: 100% 100%;
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.police-con {
|
||||
padding: 2% 0 2% 5%;
|
||||
|
||||
.con-item {
|
||||
padding: 1.3% 0;
|
||||
display: flex;
|
||||
|
||||
div:nth-child(1) {
|
||||
font-weight: bold;
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
width: calc(100% - 100px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.bottom-d {
|
||||
display: flex;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
justify-content: space-around;
|
||||
color: #ffffff;
|
||||
padding: 5px 0;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
|
||||
span {
|
||||
font-size: 28px !important;
|
||||
padding: 0 3px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!--<style lang="less">-->
|
||||
<!-- .dialog-con {-->
|
||||
<!-- background-color: #00152b;-->
|
||||
<!-- // antd表格样式-->
|
||||
<!-- .ant-table-thead > tr > th {-->
|
||||
<!-- //border-bottom: 1px solid #1e73c2 !important;-->
|
||||
<!-- }-->
|
||||
|
||||
<!-- .ant-table-body {-->
|
||||
<!-- background-color: #00152b !important;-->
|
||||
<!-- }-->
|
||||
|
||||
<!-- .ant-modal-header {-->
|
||||
<!-- border-bottom: none !important;-->
|
||||
<!-- }-->
|
||||
|
||||
<!-- .ant-table-tbody > tr > td {-->
|
||||
<!-- border-bottom: 1px solid #1e73c2 !important;-->
|
||||
<!-- background-color: #00152b !important;-->
|
||||
<!-- color: #ffffff !important;-->
|
||||
<!-- }-->
|
||||
|
||||
<!-- .ant-table-tbody > tr.ant-table-row:hover > td,-->
|
||||
<!-- .ant-table-tbody > tr > td.ant-table-cell-row-hover,-->
|
||||
<!-- .ant-table-thead > tr > th {-->
|
||||
<!-- background-color: #00152b !important;-->
|
||||
<!-- color: #ffffff !important;-->
|
||||
<!-- }-->
|
||||
|
||||
<!-- .ant-table-cell-scrollbar {-->
|
||||
<!-- box-shadow: none !important;-->
|
||||
<!-- }-->
|
||||
|
||||
<!-- /*-->
|
||||
<!--表格滚动条-->
|
||||
<!--*/-->
|
||||
|
||||
<!-- .ant-table-body::-webkit-scrollbar-thumb {-->
|
||||
<!-- border: 4px solid rgba(0, 0, 0, 0);-->
|
||||
<!-- height: 6px;-->
|
||||
<!-- border-radius: 25px;-->
|
||||
<!-- background-clip: padding-box;-->
|
||||
<!-- background-color: rgba(30, 115, 194, 0.3);-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!--</style>-->
|
||||
@@ -1,315 +0,0 @@
|
||||
<template>
|
||||
<Dialog :openVis="visible" width="50%" :title="props.title" @close="closeDialog" :maskClosable="false">
|
||||
<template #modalTitle>
|
||||
<div class="modal-title-d">
|
||||
健康终端报警列表
|
||||
<div>
|
||||
<div @click="changeChoose(0)" :class="[chooseType === 0 ? 'select-d' : 'no-select-d']">
|
||||
<img :src="chooseType === 0 ? listSPng : listPng" alt="" /> 列表
|
||||
</div>
|
||||
<div @click="changeChoose(1)" :class="[chooseType === 1 ? 'select-d' : 'no-select-d']">
|
||||
<img :src="chooseType === 1 ? chartSPng : chartPng" alt="" /> 图表
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #container>
|
||||
<template v-if="chooseType === 0">
|
||||
<BasicTable ref="registerTable" class="table-container" :columns="columns" :api="getMonitorList" :apiParams="formState">
|
||||
<template #address="{ record, column, index }">
|
||||
<span v-if="record['address']">{{ record?.address }}</span>
|
||||
<span v-else style="color: #eb3636">{{ record?.gpsErrorMsg }}</span>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div style="padding: 0 10px">
|
||||
<div class="chart-top">
|
||||
<div>
|
||||
<div>{{ dayInfo?.dayCount || 0 }}次</div>
|
||||
<div>日累计</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>{{ dayInfo?.weekCount || 0 }}次</div>
|
||||
<div>周累计</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>{{ dayInfo?.monthCount || 0 }}次</div>
|
||||
<div>月累计</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time-d">
|
||||
<left-outlined @click="changeMonth(0)" class="left-or-right" />
|
||||
<span style="user-select: none; margin: 0 10px">{{ dayjs(nowTime).format('YYYY年M月') }}</span>
|
||||
<right-outlined @click="changeMonth(1)" class="left-or-right" />
|
||||
</div>
|
||||
<div ref="chartRef" style="height: 50vh"></div>
|
||||
</template>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch, h, nextTick } from 'vue';
|
||||
import { LeftOutlined, RightOutlined } from '@ant-design/icons-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 { getMonitorList, monitorMonthApi, monitorTotalApi } from '/@/views/centralScreen/centralScreen.api.ts';
|
||||
import { useUserStore } from '/@/store/modules/user.ts';
|
||||
import listSPng from '/@/assets/images/list-icon-active.png';
|
||||
import listPng from '/@/assets/images/list-icon.png';
|
||||
import chartSPng from '/@/assets/images/chart-icon-active.png';
|
||||
import chartPng from '/@/assets/images/chart-icon.png';
|
||||
import * as echarts from 'echarts';
|
||||
import { useE } from '/@/views/centralScreen/components/centralScreenDHook.ts';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const { setData, getOption } = useE();
|
||||
|
||||
const props = defineProps({
|
||||
record: Object,
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '健康终端报警列表',
|
||||
},
|
||||
useForm: Boolean,
|
||||
labelCol: Object,
|
||||
wrapperCol: Object,
|
||||
setting: Object,
|
||||
phoneType: String,
|
||||
timeInterval: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const dayInfo = ref<any>({});
|
||||
const dataX = ref<any[]>([]);
|
||||
const dataY = ref<any[]>([]);
|
||||
|
||||
const chooseType = ref(0);
|
||||
const nowTime = ref<any>(dayjs().format('YYYY-M'));
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'realName',
|
||||
key: 'realName',
|
||||
},
|
||||
{
|
||||
title: '二级单位',
|
||||
dataIndex: 'orgName2',
|
||||
key: 'orgName2',
|
||||
},
|
||||
{
|
||||
title: '联系电话',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
},
|
||||
{
|
||||
title: '异常事件',
|
||||
dataIndex: 'eventType_dictText',
|
||||
key: 'eventType_dictText',
|
||||
},
|
||||
{
|
||||
title: '异常值',
|
||||
dataIndex: 'dataValue',
|
||||
key: 'dataValue',
|
||||
},
|
||||
{
|
||||
title: '发生时间',
|
||||
dataIndex: 'warnTime',
|
||||
key: 'warnTime',
|
||||
},
|
||||
{
|
||||
title: '上报时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
},
|
||||
{
|
||||
title: '发生地点',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
slot: 'address',
|
||||
// customRender: ({ record }) => {
|
||||
// if (record?.address) {
|
||||
// return record?.address;
|
||||
// } else {
|
||||
// return h('span', { style: { color: '#eb3636' } }, record?.gpsErrorMsg);
|
||||
// }
|
||||
// },
|
||||
},
|
||||
];
|
||||
const userStore = useUserStore();
|
||||
const chartRef = ref();
|
||||
|
||||
const formState = computed(() => ({
|
||||
dataType: props.setting.dataType,
|
||||
// orgCode: props.setting?.orgCode,
|
||||
orgCodeList: userStore.getCenterInfo?.serviceScope,
|
||||
}));
|
||||
|
||||
// const formState = ref({
|
||||
// dataType: props.setting?.dataType,
|
||||
// // orgCode: props.setting?.orgCode,
|
||||
// orgCodeList: userStore.getCenterInfo?.serviceScope,
|
||||
// ...props.timeInterval,
|
||||
// });
|
||||
const { visible, closeDialog, openDialog } = useDialog({ title: props.title });
|
||||
const registerTable = ref();
|
||||
// watch(props, (v, o) => {
|
||||
// registerTable.value?.getRecords();
|
||||
// });
|
||||
|
||||
function changeChoose(type: any) {
|
||||
if (type === chooseType.value) return;
|
||||
chooseType.value = type;
|
||||
if (chooseType.value === 1) {
|
||||
nowTime.value = dayjs().format('YYYY-M');
|
||||
// nextTick(() => {
|
||||
// getEcharts();
|
||||
// });
|
||||
getDayAndMonthAndYear();
|
||||
getEchart();
|
||||
}
|
||||
}
|
||||
|
||||
function getDayAndMonthAndYear() {
|
||||
monitorTotalApi({ orgCodeList: userStore.getCenterInfo?.serviceScope })
|
||||
.then((res: any) => {
|
||||
if (res.code === 200) {
|
||||
dayInfo.value = res?.result;
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
function getEchart() {
|
||||
const y = dayjs(nowTime.value).format('YYYY');
|
||||
const m = dayjs(nowTime.value).format('M');
|
||||
monitorMonthApi({ orgCodeList: userStore.getCenterInfo?.serviceScope, year: y, month: m })
|
||||
.then((res: any) => {
|
||||
if (res.code === 200) {
|
||||
let d1: any[] = [];
|
||||
let d2: any[] = [];
|
||||
res?.result &&
|
||||
res?.result.map((item: any) => {
|
||||
d1.push(item?.day);
|
||||
d2.push(parseInt(item?.count || 0));
|
||||
});
|
||||
dataX.value = d1;
|
||||
dataY.value = d2;
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
})
|
||||
.finally(() => {
|
||||
getEcharts();
|
||||
});
|
||||
}
|
||||
|
||||
function changeMonth(type: any) {
|
||||
if (type === 0) {
|
||||
nowTime.value = dayjs(nowTime.value).subtract(1, 'month');
|
||||
} else {
|
||||
if (dayjs().diff(nowTime.value, 'month') !== 0) {
|
||||
nowTime.value = dayjs(nowTime.value).add(1, 'month');
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
getEchart();
|
||||
}
|
||||
|
||||
function getEcharts() {
|
||||
const c = echarts.init(chartRef.value);
|
||||
setData(dataX.value, dataY.value);
|
||||
c.setOption(getOption());
|
||||
window.addEventListener('resize', () => {
|
||||
c.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function openDialogBefore() {
|
||||
chooseType.value = 0;
|
||||
nowTime.value = dayjs().format('YYYY-M');
|
||||
openDialog();
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
openDialog: openDialogBefore,
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.table-container {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.modal-title-d {
|
||||
width: calc(100% - 52px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
|
||||
&:nth-child(1) {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: 80%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.no-select-d {
|
||||
color: #576371;
|
||||
}
|
||||
|
||||
.select-d {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-top {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 30px 0;
|
||||
border-bottom: 1px solid #0d2238;
|
||||
text-align: center;
|
||||
|
||||
> div {
|
||||
> div {
|
||||
&:nth-child(1) {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time-d {
|
||||
padding: 30px 0 0;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.left-or-right {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -9,7 +9,7 @@
|
||||
返回
|
||||
</span>
|
||||
</div>
|
||||
<div class="title-d-middle"> 心血管监测</div>
|
||||
<div class="title-d-middle">心血管监测</div>
|
||||
<div class="title-d-right"> 累计监测时间：{{ dayTimeT }}</div>
|
||||
</div>
|
||||
<div class="body-d">
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<div style="width: 100%; height: 100%" ref="middleRef"> </div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { getOption } from '/@/views/qh/hooks/middle.ts';
|
||||
|
||||
const middleRef = ref();
|
||||
|
||||
onMounted(() => {
|
||||
initE();
|
||||
});
|
||||
|
||||
function initE() {
|
||||
try {
|
||||
let myChart = echarts.init(middleRef.value);
|
||||
myChart.setOption(getOption());
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less"></style>
|
||||
@@ -1,19 +0,0 @@
|
||||
<template>
|
||||
<div class="qh-item-d">
|
||||
<div class="qh-son-title">
|
||||
{{ props.title }}
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
@import '/@/views/qh/style/index.less';
|
||||
</style>
|
||||
@@ -1,19 +0,0 @@
|
||||
<template>
|
||||
<div class="qh-item-d">
|
||||
<div class="qh-son-title">
|
||||
{{ props.title }}
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
@import '/@/views/qh/style/index.less';
|
||||
</style>
|
||||
@@ -1,19 +0,0 @@
|
||||
<template>
|
||||
<div class="qh-item-d">
|
||||
<div class="qh-son-title">
|
||||
{{ props.title }}
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
@import '/@/views/qh/style/index.less';
|
||||
</style>
|
||||
@@ -1,19 +0,0 @@
|
||||
<template>
|
||||
<div class="qh-item-d">
|
||||
<div class="qh-son-title">
|
||||
{{ props.title }}
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
@import '/@/views/qh/style/index.less';
|
||||
</style>
|
||||
@@ -1,101 +0,0 @@
|
||||
<template>
|
||||
<div class="qh-item-d">
|
||||
<div class="qh-son-title">
|
||||
{{ props.title }}
|
||||
</div>
|
||||
<div ref="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts';
|
||||
import { nextTick, onMounted, ref } from 'vue';
|
||||
import { bindListen, getPie3D } from '/@/views/qh/hooks/twoLeft';
|
||||
|
||||
const chartRef = ref();
|
||||
const optionData = ref([
|
||||
{
|
||||
name: '骨科',
|
||||
value: 30,
|
||||
itemStyle: {
|
||||
color: '#e27c3d',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '外科',
|
||||
value: 40,
|
||||
itemStyle: {
|
||||
color: '#eca298',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '内科',
|
||||
value: 70,
|
||||
itemStyle: {
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
]);
|
||||
const option = ref({});
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
initE();
|
||||
});
|
||||
});
|
||||
|
||||
function initE() {
|
||||
//构建3d饼状图
|
||||
let myChart = echarts.init(chartRef.value);
|
||||
// 传入数据生成 option
|
||||
option.value = getPie3D(optionData.value, 0.5);
|
||||
myChart.setOption(option.value);
|
||||
//是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
|
||||
option.value.series.push({
|
||||
name: 'pie2d',
|
||||
type: 'pie',
|
||||
labelLine: {
|
||||
length: 10,
|
||||
length2: 10,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inner',
|
||||
rich: {
|
||||
a: {
|
||||
color: 'red',
|
||||
fontSize: 12,
|
||||
lineHeight: 20,
|
||||
},
|
||||
c: {
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
formatter: '{b|{b} \n}{c|{c}}{b| 亩}',
|
||||
},
|
||||
startAngle: -20, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ['20%', '50%'],
|
||||
center: ['50%', '50%'],
|
||||
data: optionData.value,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
myChart.setOption(option.value);
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
bindListen(myChart, option.value);
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
@import '/@/views/qh/style/index.less';
|
||||
</style>
|
||||
@@ -1,36 +0,0 @@
|
||||
<template>
|
||||
<div class="qh-item-d">
|
||||
<div class="qh-son-title">
|
||||
{{ props.title }}
|
||||
</div>
|
||||
<div ref="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { getOption } from '/@/views/qh/hooks/twoRight.ts';
|
||||
|
||||
const chartRef = ref();
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
initE();
|
||||
});
|
||||
|
||||
function initE() {
|
||||
let myChart = echarts.init(chartRef.value);
|
||||
myChart.setOption(getOption(['消化道', '消化道', '消化道', '消化道'], [23, 51, 23, 63]));
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
@import '/@/views/qh/style/index.less';
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,447 +0,0 @@
|
||||
import * as echarts from 'echarts';
|
||||
import chinaJson from './china.json';
|
||||
echarts.registerMap('china', chinaJson);
|
||||
let outname = [
|
||||
'南海诸岛',
|
||||
'天津',
|
||||
'上海',
|
||||
'重庆',
|
||||
'河北',
|
||||
'河南',
|
||||
'云南',
|
||||
'辽宁',
|
||||
'黑龙江',
|
||||
'湖南',
|
||||
'安徽',
|
||||
'山东',
|
||||
'新疆',
|
||||
'江苏',
|
||||
'浙江',
|
||||
'江西',
|
||||
'湖北',
|
||||
'广西',
|
||||
'甘肃',
|
||||
'山西',
|
||||
'内蒙古',
|
||||
'陕西',
|
||||
'吉林',
|
||||
'福建',
|
||||
'贵州',
|
||||
'广东',
|
||||
'青海',
|
||||
'西藏',
|
||||
'四川',
|
||||
'宁夏',
|
||||
'海南',
|
||||
'台湾',
|
||||
'香港',
|
||||
'澳门',
|
||||
];
|
||||
let outvalue = [
|
||||
0, 13, 140, 75, 13, 83, 11, 19, 15, 69, 260, 39, 4, 31, 104, 36, 1052, 33, 347, 9, 157, 22, 4, 18, 5, 2398, 41, 0, 484, 404, 22, 3, 5, 225,
|
||||
];
|
||||
let outdata: any[] = [];
|
||||
let bjname: any[] = ['北京'];
|
||||
let bjvalue: any[] = [300];
|
||||
let beijing: any[] = [];
|
||||
|
||||
for (let i = 0; i < outname.length; i++) {
|
||||
outdata.push({
|
||||
name: outname[i],
|
||||
value: outvalue[i],
|
||||
});
|
||||
}
|
||||
|
||||
for (let i = 0; i < bjname.length; i++) {
|
||||
beijing.push({
|
||||
name: bjname[i],
|
||||
value: bjvalue[i],
|
||||
});
|
||||
}
|
||||
|
||||
let geoCoordMap = {};
|
||||
/*获取地图数据*/
|
||||
let mapFeatures = chinaJson.features;
|
||||
mapFeatures.forEach(function (v) {
|
||||
// 地区名称
|
||||
let name = v.properties.name;
|
||||
// 地区经纬度
|
||||
geoCoordMap[name] = v.properties.cp;
|
||||
});
|
||||
let convertData = function (data) {
|
||||
let res = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let geoCoord = geoCoordMap[data[i].name];
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value),
|
||||
});
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
let points = [
|
||||
{
|
||||
name: 'aa',
|
||||
value: [117.4219, 39.4189],
|
||||
itemStyle: {
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: [103.5901, 36.3043],
|
||||
itemStyle: {
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: [112.3352, 37.9413],
|
||||
itemStyle: {
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: [113.62, 34.75],
|
||||
itemStyle: {
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: [109.48, 36.6],
|
||||
itemStyle: {
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: [107.13, 34.37],
|
||||
itemStyle: {
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: [113.23, 23.16],
|
||||
itemStyle: {
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: [117.4219, 39.4189],
|
||||
itemStyle: {
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: [108.37, 22.82],
|
||||
itemStyle: {
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: [109.1162, 34.2004],
|
||||
itemStyle: {
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: [103.5901, 36.3043],
|
||||
itemStyle: {
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: [106.3586, 38.1775],
|
||||
itemStyle: {
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: [103.9526, 30.7617],
|
||||
itemStyle: {
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
];
|
||||
let option = {
|
||||
backgroundColor: 'transparent',
|
||||
geo: {
|
||||
map: 'china',
|
||||
aspectScale: 0.75, //长宽比
|
||||
zoom: 1.1,
|
||||
// scaleLimit: {
|
||||
// min: 1,
|
||||
// max: 4,
|
||||
// },
|
||||
roam: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: {
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#09132c', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#274d68', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: true, // 缺省为 false
|
||||
},
|
||||
shadowColor: 'rgb(58,115,192)',
|
||||
shadowOffsetX: 3,
|
||||
shadowOffsetY: 4,
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#2AB8FF',
|
||||
borderWidth: 0,
|
||||
color: 'green',
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
regions: [
|
||||
{
|
||||
name: '南海诸岛',
|
||||
itemStyle: {
|
||||
areaColor: 'rgba(0, 10, 52, 1)',
|
||||
borderColor: 'rgba(0, 10, 52, 1)',
|
||||
normal: {
|
||||
opacity: 0,
|
||||
label: {
|
||||
show: false,
|
||||
color: '#009cc9',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'map',
|
||||
roam: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#1DE9B6',
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: 'rgb(183,185,14)',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: 'rgb(147, 235, 248)',
|
||||
borderWidth: 1,
|
||||
areaColor: {
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#09132c', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#274d68', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: true, // 缺省为 false
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: 'rgb(46,229,206)',
|
||||
// shadowColor: 'rgb(12,25,50)',
|
||||
borderWidth: 0.1,
|
||||
},
|
||||
},
|
||||
zoom: 1.1,
|
||||
// roam: false,
|
||||
map: 'china', //使用
|
||||
|
||||
// data: this.difficultData //热力图数据 不同区域 不同的底色
|
||||
},
|
||||
{
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
showEffectOn: 'render',
|
||||
zlevel: 1,
|
||||
rippleEffect: {
|
||||
period: 15,
|
||||
scale: 4,
|
||||
brushType: 'fill',
|
||||
},
|
||||
hoverAnimation: true,
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{b}',
|
||||
position: 'bottom',
|
||||
offset: [0, 15],
|
||||
color: 'red',
|
||||
show: true,
|
||||
fontSize: 15,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#1DE9B6',
|
||||
// function(value) {
|
||||
// //随机颜色
|
||||
// return '#' + ('00000' + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);
|
||||
// },
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#333',
|
||||
},
|
||||
},
|
||||
symbolSize: 12,
|
||||
data: points,
|
||||
}, //地图线的动画效果 后面的注释掉，防止后期要线
|
||||
// {
|
||||
// type: 'lines',
|
||||
// zlevel: 2,
|
||||
// effect: {
|
||||
// show: true,
|
||||
// period: 4, //箭头指向速度，值越小速度越快
|
||||
// trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
|
||||
// symbol: 'arrow', //箭头图标
|
||||
// symbolSize: 5, //图标大小
|
||||
// },
|
||||
// lineStyle: {
|
||||
// normal: {
|
||||
// color: '#1DE9B6',
|
||||
// /* function (value){ //随机颜色
|
||||
//
|
||||
// ['#f21347','#f3243e','#f33736','#f34131','#f34e2b',
|
||||
// '#f56321','#f56f1c','#f58414','#f58f0e','#f5a305',
|
||||
// '#e7ab0b','#dfae10','#d5b314','#c1bb1f','#b9be23',
|
||||
// '#a6c62c','#96cc34','#89d23b','#7ed741','#77d64c',
|
||||
// '#71d162','#6bcc75','#65c78b','#5fc2a0','#5abead',
|
||||
// '#52b9c7','#4fb6d2','#4ab2e5']
|
||||
// return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
|
||||
// }*/
|
||||
// width: 1, //线条宽度
|
||||
// opacity: 0.1, //尾迹线条透明度
|
||||
// curveness: 0.3, //尾迹线条曲直度
|
||||
// },
|
||||
// },
|
||||
// data: [
|
||||
// {
|
||||
// coords: [
|
||||
// [117.4219, 39.4189],
|
||||
// [109.1162, 34.2004],
|
||||
// ],
|
||||
// lineStyle: {
|
||||
// color: '#f58414',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// coords: [
|
||||
// [112.3352, 37.9413],
|
||||
// [109.1162, 34.2004],
|
||||
// ],
|
||||
// lineStyle: {
|
||||
// color: '#f58f0e',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// coords: [
|
||||
// [103.5901, 36.3043],
|
||||
// [109.1162, 34.2004],
|
||||
// ],
|
||||
// lineStyle: {
|
||||
// color: '#e7ab0b',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// coords: [
|
||||
// [106.3586, 38.1775],
|
||||
// [109.1162, 34.2004],
|
||||
// ],
|
||||
// lineStyle: {
|
||||
// color: '#dfae10',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// coords: [
|
||||
// [103.9526, 30.7617],
|
||||
// [109.1162, 34.2004],
|
||||
// ],
|
||||
// lineStyle: {
|
||||
// color: '#c1bb1f',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// coords: [
|
||||
// [108.37, 22.82],
|
||||
// [109.1162, 34.2004],
|
||||
// ],
|
||||
// lineStyle: {
|
||||
// color: '#c1bb1f',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// coords: [
|
||||
// [113.23, 23.16],
|
||||
// [109.1162, 34.2004],
|
||||
// ],
|
||||
// lineStyle: {
|
||||
// color: '#c1bb1f',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// coords: [
|
||||
// [107.13, 34.37],
|
||||
// [109.1162, 34.2004],
|
||||
// ],
|
||||
// lineStyle: {
|
||||
// color: '#c1bb1f',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// coords: [
|
||||
// [109.48, 36.6],
|
||||
// [109.1162, 34.2004],
|
||||
// ],
|
||||
// lineStyle: {
|
||||
// color: '#c1bb1f',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// coords: [
|
||||
// [113.62, 34.75],
|
||||
// [109.1162, 34.2004],
|
||||
// ],
|
||||
// lineStyle: {
|
||||
// color: '#c1bb1f',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// coords: [
|
||||
// [105.7314, 34.5874],
|
||||
// [109.1162, 34.2004],
|
||||
// ],
|
||||
// lineStyle: {
|
||||
// color: '#c1bb1f',
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
],
|
||||
};
|
||||
|
||||
export const getOption = () => {
|
||||
return option;
|
||||
};
|
||||
@@ -1,371 +0,0 @@
|
||||
import 'echarts-gl';
|
||||
|
||||
export function getPie3D(pieData, internalDiameterRatio) {
|
||||
//internalDiameterRatio:透明的空心占比
|
||||
let series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = -5;
|
||||
let endValue = 0;
|
||||
let legendData = [];
|
||||
let legendBfb = [];
|
||||
let k = 1 - internalDiameterRatio;
|
||||
pieData.sort((a, b) => {
|
||||
return a.value - b.value;
|
||||
});
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i++) {
|
||||
sumValue += pieData[i].value;
|
||||
let seriesItem = {
|
||||
name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
|
||||
type: 'surface',
|
||||
parametric: true,
|
||||
wireframe: {
|
||||
show: false,
|
||||
},
|
||||
pieData: pieData[i],
|
||||
pieStatus: {
|
||||
selected: false,
|
||||
hovered: false,
|
||||
k: k,
|
||||
},
|
||||
center: ['10%', '50%'],
|
||||
};
|
||||
|
||||
if (typeof pieData[i].itemStyle != 'undefined') {
|
||||
let itemStyle = {};
|
||||
typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
|
||||
typeof pieData[i].itemStyle.opacity != 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null;
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
legendData = [];
|
||||
legendBfb = [];
|
||||
for (let i = 0; i < series.length; i++) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
series[i].parametricEquation = getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
let bfb = formatFloat(series[i].pieData.value / sumValue, 4);
|
||||
legendData.push({
|
||||
name: series[i].name,
|
||||
value: bfb,
|
||||
});
|
||||
legendBfb.push({
|
||||
name: series[i].name,
|
||||
value: bfb,
|
||||
});
|
||||
}
|
||||
let boxHeight = getHeight3D(series, 30); //通过传参设定3d饼/环的高度，26代表26px
|
||||
// 准备待返回的配置项，把准备好的 legendData、series 传入。
|
||||
let option = {
|
||||
legend: {
|
||||
data: legendData,
|
||||
orient: 'vertical',
|
||||
right: '12%',
|
||||
top: '42%',
|
||||
itemGap: 10,
|
||||
textStyle: {
|
||||
color: '#A1E2FF',
|
||||
},
|
||||
show: true,
|
||||
formatter: function (param) {
|
||||
let item = legendBfb.filter((item) => item.name == param)[0];
|
||||
let bfs = formatFloat(item.value * 100, 2) + '%';
|
||||
return `${item.name} ${bfs}`;
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#7BC0CB',
|
||||
},
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'inner',
|
||||
// rich: {
|
||||
// a: {
|
||||
// color: 'red',
|
||||
// fontSize: 12,
|
||||
// lineHeight: 20,
|
||||
// },
|
||||
// c: {
|
||||
// fontSize: 16,
|
||||
// },
|
||||
// },
|
||||
// formatter: '{b|{b} \n}{c|{c}}{b| 亩}',
|
||||
// },
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
|
||||
let bfb = (
|
||||
(option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
|
||||
100
|
||||
).toFixed(2);
|
||||
return (
|
||||
`${params.seriesName}<br/>` +
|
||||
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
|
||||
`${bfb}%`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 3.5,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: boxHeight, //圆环的高度
|
||||
viewControl: {
|
||||
//3d效果可以放大、旋转等，请自己去查看官方配置
|
||||
alpha: 40, //角度
|
||||
distance: 270, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, //设置为0无法旋转
|
||||
zoomSensitivity: 0, //设置为0无法缩放
|
||||
panSensitivity: 0, //设置为0无法平移
|
||||
autoRotate: false, //自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
return option;
|
||||
}
|
||||
|
||||
//获取3d丙图的最高扇区的高度
|
||||
function getHeight3D(series, height) {
|
||||
series.sort((a, b) => {
|
||||
return b.pieData.value - a.pieData.value;
|
||||
});
|
||||
return (height * 25) / series[0].pieData.value;
|
||||
}
|
||||
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
|
||||
// 计算
|
||||
let midRatio = (startRatio + endRatio) / 2;
|
||||
let startRadian = startRatio * Math.PI * 2;
|
||||
let endRadian = endRatio * Math.PI * 2;
|
||||
let midRadian = midRatio * Math.PI * 2;
|
||||
// 如果只有一个扇形，则不实现选中效果。
|
||||
if (startRatio === 0 && endRatio === 1) {
|
||||
isSelected = false;
|
||||
}
|
||||
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
||||
k = typeof k !== 'undefined' ? k : 1 / 3;
|
||||
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
||||
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
||||
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
||||
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
||||
let hoverRate = isHovered ? 1.03 : 1;
|
||||
// 返回曲面参数方程
|
||||
return {
|
||||
u: {
|
||||
min: -Math.PI,
|
||||
max: Math.PI * 3,
|
||||
step: Math.PI / 32,
|
||||
},
|
||||
v: {
|
||||
min: 0,
|
||||
max: Math.PI * 2,
|
||||
step: Math.PI / 20,
|
||||
},
|
||||
x: function (u, v) {
|
||||
if (u < startRadian) {
|
||||
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
}
|
||||
if (u > endRadian) {
|
||||
return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
}
|
||||
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
},
|
||||
y: function (u, v) {
|
||||
if (u < startRadian) {
|
||||
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
}
|
||||
if (u > endRadian) {
|
||||
return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
}
|
||||
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
},
|
||||
z: function (u, v) {
|
||||
if (u < -Math.PI * 0.5) {
|
||||
return Math.sin(u);
|
||||
}
|
||||
if (u > Math.PI * 2.5) {
|
||||
return Math.sin(u) * h * 0.1;
|
||||
}
|
||||
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function formatFloat(num, n) {
|
||||
let f = parseFloat(num);
|
||||
if (isNaN(f)) {
|
||||
return false;
|
||||
}
|
||||
f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
|
||||
let s = f.toString();
|
||||
let rs = s.indexOf('.');
|
||||
//判定如果是整数，增加小数点再补0
|
||||
if (rs < 0) {
|
||||
rs = s.length;
|
||||
s += '.';
|
||||
}
|
||||
while (s.length <= rs + n) {
|
||||
s += '0';
|
||||
}
|
||||
return s;
|
||||
}
|
||||
|
||||
export function bindListen(myChart, option) {
|
||||
// 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
|
||||
let selectedIndex = '';
|
||||
let hoveredIndex = '';
|
||||
// 监听点击事件，实现选中效果（单选）
|
||||
// myChart.on('click', function (params) {
|
||||
// // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
|
||||
// let isSelected = !option.series[params.seriesIndex].pieStatus.selected;
|
||||
// let isHovered = option.series[params.seriesIndex].pieStatus.hovered;
|
||||
// let k = option.series[params.seriesIndex].pieStatus.k;
|
||||
// let startRatio = option.series[params.seriesIndex].pieData.startRatio;
|
||||
// let endRatio = option.series[params.seriesIndex].pieData.endRatio;
|
||||
// // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
|
||||
// if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
|
||||
// option.series[selectedIndex].parametricEquation = getParametricEquation(
|
||||
// option.series[selectedIndex].pieData.startRatio,
|
||||
// option.series[selectedIndex].pieData.endRatio,
|
||||
// false,
|
||||
// false,
|
||||
// k,
|
||||
// option.series[selectedIndex].pieData.value
|
||||
// );
|
||||
// option.series[selectedIndex].pieStatus.selected = false;
|
||||
// }
|
||||
// // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
|
||||
// option.series[params.seriesIndex].parametricEquation = getParametricEquation(
|
||||
// startRatio,
|
||||
// endRatio,
|
||||
// isSelected,
|
||||
// isHovered,
|
||||
// k,
|
||||
// option.series[params.seriesIndex].pieData.value
|
||||
// );
|
||||
// option.series[params.seriesIndex].pieStatus.selected = isSelected;
|
||||
// // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
|
||||
// isSelected ? (selectedIndex = params.seriesIndex) : null;
|
||||
// // 使用更新后的 option，渲染图表
|
||||
// myChart.setOption(option);
|
||||
// });
|
||||
// 监听 mouseover，近似实现高亮（放大）效果
|
||||
myChart.on('mouseover', function (params) {
|
||||
// 准备重新渲染扇形所需的参数
|
||||
let isSelected;
|
||||
let isHovered;
|
||||
let startRatio;
|
||||
let endRatio;
|
||||
let k;
|
||||
// 如果触发 mouseover 的扇形当前已高亮，则不做操作
|
||||
if (hoveredIndex === params.seriesIndex) {
|
||||
return;
|
||||
// 否则进行高亮及必要的取消高亮操作
|
||||
} else {
|
||||
// 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
|
||||
if (hoveredIndex !== '') {
|
||||
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
|
||||
isSelected = option.series[hoveredIndex].pieStatus.selected;
|
||||
isHovered = false;
|
||||
startRatio = option.series[hoveredIndex].pieData.startRatio;
|
||||
endRatio = option.series[hoveredIndex].pieData.endRatio;
|
||||
k = option.series[hoveredIndex].pieStatus.k;
|
||||
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
|
||||
option.series[hoveredIndex].parametricEquation = getParametricEquation(
|
||||
startRatio,
|
||||
endRatio,
|
||||
isSelected,
|
||||
isHovered,
|
||||
k,
|
||||
option.series[hoveredIndex].pieData.value
|
||||
);
|
||||
option.series[hoveredIndex].pieStatus.hovered = isHovered;
|
||||
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
|
||||
hoveredIndex = '';
|
||||
}
|
||||
// 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
|
||||
if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
|
||||
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
|
||||
isSelected = option.series[params.seriesIndex].pieStatus.selected;
|
||||
isHovered = true;
|
||||
startRatio = option.series[params.seriesIndex].pieData.startRatio;
|
||||
endRatio = option.series[params.seriesIndex].pieData.endRatio;
|
||||
k = option.series[params.seriesIndex].pieStatus.k;
|
||||
// 对当前点击的扇形，执行高亮操作（对 option 更新）
|
||||
option.series[params.seriesIndex].parametricEquation = getParametricEquation(
|
||||
startRatio,
|
||||
endRatio,
|
||||
isSelected,
|
||||
isHovered,
|
||||
k,
|
||||
option.series[params.seriesIndex].pieData.value + 5
|
||||
);
|
||||
option.series[params.seriesIndex].pieStatus.hovered = isHovered;
|
||||
// 记录上次高亮的扇形对应的系列号 seriesIndex
|
||||
hoveredIndex = params.seriesIndex;
|
||||
}
|
||||
// 使用更新后的 option，渲染图表
|
||||
myChart.setOption(option);
|
||||
}
|
||||
});
|
||||
// 修正取消高亮失败的 bug
|
||||
myChart.on('globalout', function () {
|
||||
// 准备重新渲染扇形所需的参数
|
||||
let isSelected;
|
||||
let isHovered;
|
||||
let startRatio;
|
||||
let endRatio;
|
||||
let k;
|
||||
if (hoveredIndex !== '') {
|
||||
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
|
||||
isSelected = option.series[hoveredIndex].pieStatus.selected;
|
||||
isHovered = false;
|
||||
k = option.series[hoveredIndex].pieStatus.k;
|
||||
startRatio = option.series[hoveredIndex].pieData.startRatio;
|
||||
endRatio = option.series[hoveredIndex].pieData.endRatio;
|
||||
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
|
||||
option.series[hoveredIndex].parametricEquation = getParametricEquation(
|
||||
startRatio,
|
||||
endRatio,
|
||||
isSelected,
|
||||
isHovered,
|
||||
k,
|
||||
option.series[hoveredIndex].pieData.value
|
||||
);
|
||||
option.series[hoveredIndex].pieStatus.hovered = isHovered;
|
||||
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
|
||||
hoveredIndex = '';
|
||||
}
|
||||
// 使用更新后的 option，渲染图表
|
||||
myChart.setOption(option);
|
||||
});
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
export const getOption = (dx: any, dy: any) => {
|
||||
return {
|
||||
grid: {
|
||||
left: '60',
|
||||
},
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#000000',
|
||||
},
|
||||
},
|
||||
type: 'category',
|
||||
data: dx,
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'red',
|
||||
width: 1,
|
||||
type: 'soild',
|
||||
},
|
||||
},
|
||||
interval: 25, // 步长
|
||||
min: 0, // 起始 - 设置y轴刻度的最小值
|
||||
max: 100, // 终止 - 设置y轴刻度的最大值
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: '#ffffff',
|
||||
formatter: function (value, index) {
|
||||
return value + (index === 0 ? '' : '%');
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: dy,
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
@@ -1,238 +0,0 @@
|
||||
<template>
|
||||
<div class="qh-outer-d">
|
||||
<div class="qh-title-d">
|
||||
<div>
|
||||
<div>
|
||||
{{ dateInfo?.day }}
|
||||
</div>
|
||||
<div>
|
||||
{{ dateInfo?.times }}
|
||||
</div>
|
||||
</div>
|
||||
<div> 青海油田员工健康服务数据看板 </div>
|
||||
<div>
|
||||
{{ rightDate }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="qh-body-d">
|
||||
<div class="qh-body-d-left">
|
||||
<one-left :title="titleInfo?.oneLeft" />
|
||||
<two-left :title="titleInfo?.twoLeft" />
|
||||
<three-left :title="titleInfo?.threeLeft" />
|
||||
</div>
|
||||
<div class="qh-body-d-middle">
|
||||
<div>
|
||||
<div>
|
||||
<div class="people-num">930</div>
|
||||
<div class="people-num-des">累计咨询总人数（人）</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="people-num">265</div>
|
||||
<div class="people-num-des">累计应急总人数（人）</div>
|
||||
</div>
|
||||
</div>
|
||||
<middle-d />
|
||||
</div>
|
||||
<div class="qh-body-d-right">
|
||||
<one-right :title="titleInfo?.oneRight" />
|
||||
<two-right :title="titleInfo?.twoRight" />
|
||||
<three-right :title="titleInfo?.threeRight" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import dayjs from 'dayjs';
|
||||
import { onMounted, ref, watch, onBeforeUnmount } from 'vue';
|
||||
import OneLeft from '/@/views/qh/components/oneLeft.vue';
|
||||
import TwoLeft from '/@/views/qh/components/twoLeft.vue';
|
||||
import ThreeLeft from '/@/views/qh/components/threeLeft.vue';
|
||||
import OneRight from '/@/views/qh/components/oneRight.vue';
|
||||
import TwoRight from '/@/views/qh/components/twoRight.vue';
|
||||
import ThreeRight from '/@/views/qh/components/threeRight.vue';
|
||||
import MiddleD from '/@/views/qh/components/middleD.vue';
|
||||
|
||||
const titleInfo = ref({
|
||||
oneLeft: '最新咨询记录',
|
||||
twoLeft: '就医科室占比',
|
||||
threeLeft: '最新咨询记录',
|
||||
oneRight: '最新咨询记录',
|
||||
twoRight: '最新咨询记录',
|
||||
threeRight: '最新咨询记录',
|
||||
});
|
||||
const dateInfo = ref<object>({});
|
||||
const rightDate = ref<string>('');
|
||||
const qhInterval = ref<any>();
|
||||
|
||||
onMounted(() => {
|
||||
getTime();
|
||||
qhInterval.value = setInterval(() => {
|
||||
getTime();
|
||||
}, 1000);
|
||||
rightDate.value = '累计运行时间：' + dayjs().diff(dayjs('2000-01-01'), 'days') + ' 天';
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
if (qhInterval.value) clearInterval(qhInterval.value);
|
||||
});
|
||||
|
||||
const getTime = () => {
|
||||
dateInfo.value = {
|
||||
day: dayjs().format('YYYY年MM月DD日'),
|
||||
times: dayjs().format('HH:mm:ss'),
|
||||
};
|
||||
};
|
||||
|
||||
watch(
|
||||
() => dateInfo.value.day,
|
||||
() => {
|
||||
rightDate.value = '累计运行时间：' + dayjs().diff(dayjs('2000-01-01'), 'days') + ' 天';
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
@import './style/index.less';
|
||||
.qh-outer-d {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 20px;
|
||||
background: #010b15;
|
||||
|
||||
.qh-title-d {
|
||||
color: #ffffff;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30px;
|
||||
|
||||
> div {
|
||||
flex: 1;
|
||||
|
||||
&:nth-child(1),
|
||||
&:nth-child(3) {
|
||||
font-size: 27px;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
> div {
|
||||
&:nth-child(1) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
padding: 0 15px;
|
||||
position: relative;
|
||||
&:before {
|
||||
position: absolute;
|
||||
height: 60%;
|
||||
top: 20%;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
background: #000000;
|
||||
content: '';
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
height: 60%;
|
||||
top: 20%;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
background: #000000;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qh-body-d {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding-bottom: 10px;
|
||||
|
||||
> div {
|
||||
&:nth-child(1),
|
||||
&:nth-child(3) {
|
||||
width: 25%;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qh-body-d-left,
|
||||
.qh-body-d-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> div {
|
||||
flex: 1;
|
||||
padding: 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.qh-body-d-left,
|
||||
.qh-body-d-right {
|
||||
> div {
|
||||
padding-bottom: 25px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.qh-body-d-middle {
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.people-num {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.people-num-des {
|
||||
padding-top: 5px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
> div {
|
||||
&:nth-child(1) {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
> div {
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
padding: 20px 30px;
|
||||
background: red;
|
||||
|
||||
&:nth-child(1) {
|
||||
margin: 50px 100px 0 0;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
margin: 50px 0 0 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,21 +0,0 @@
|
||||
.qh-item-d {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.qh-son-title {
|
||||
font-size: 30px;
|
||||
padding: 10px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
> div {
|
||||
&:nth-child(1) {
|
||||
background: linear-gradient(to right, #0b3d50 0% , #021a24 100% );
|
||||
}
|
||||
&:nth-child(2) {
|
||||
background: #071d34;
|
||||
flex: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
<template>
|
||||
<Dialog :openVis="visible" width="50%" title="健康终端报警列表" @close="closeDialog" :maskClosable="false">
|
||||
<template #container>
|
||||
<BasicTable ref="registerTable" class="table-container" :columns="columns" :api="getMonitorList" :apiParams="formState">
|
||||
<template #address="{ record, column, index }">
|
||||
<span v-if="record['address']">{{ record?.address }}</span>
|
||||
<span v-else style="color: #eb3636">{{ record?.gpsErrorMsg }}</span>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch, h } 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 { getMonitorList } from '/@/components/body-d-right/right.api.ts';
|
||||
|
||||
const props = defineProps({
|
||||
record: Object,
|
||||
title: String,
|
||||
useForm: Boolean,
|
||||
labelCol: Object,
|
||||
wrapperCol: Object,
|
||||
setting: Object,
|
||||
phoneType: String,
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'realName',
|
||||
key: 'realName',
|
||||
},
|
||||
{
|
||||
title: '二级单位',
|
||||
dataIndex: 'orgName2',
|
||||
key: 'orgName2',
|
||||
},
|
||||
{
|
||||
title: '联系电话',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
},
|
||||
{
|
||||
title: '异常事件',
|
||||
dataIndex: 'eventType_dictText',
|
||||
key: 'eventType_dictText',
|
||||
},
|
||||
{
|
||||
title: '异常值',
|
||||
dataIndex: 'dataValue',
|
||||
key: 'dataValue',
|
||||
},
|
||||
{
|
||||
title: '发生时间',
|
||||
dataIndex: 'warnTime',
|
||||
key: 'warnTime',
|
||||
},
|
||||
{
|
||||
title: '发生地点',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
slot: 'address',
|
||||
// customRender: ({ record }) => {
|
||||
// if (record?.address) {
|
||||
// return record?.address;
|
||||
// } else {
|
||||
// return h('span', { style: { color: '#eb3636' } }, record?.gpsErrorMsg);
|
||||
// }
|
||||
// },
|
||||
},
|
||||
];
|
||||
const formState = computed(() => ({
|
||||
dataType: props.setting.dataType,
|
||||
orgCode: props.setting?.orgCode,
|
||||
}));
|
||||
const { visible, closeDialog, openDialog } = useDialog({ title: props.title });
|
||||
const registerTable = ref();
|
||||
watch(props, () => {
|
||||
registerTable.value?.getRecords();
|
||||
});
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.table-container {
|
||||
margin: 0 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,91 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<public-title title="一线医疗点每日工作动态" themeType="dark" />
|
||||
<div class="inner">
|
||||
<div class="trends-item" v-for="(item, k) in trendsData" :key="k">
|
||||
<div class="trends-title-con">
|
||||
<span class="icon-medical"></span>
|
||||
<span class="trends-item-title">{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="trends-item-span-box">
|
||||
<span class="trends-item-span">高风险干预{{ item?.high }}人</span>
|
||||
<span class="trends-item-span">慢病管理{{ item?.slow }}人</span>
|
||||
<span class="trends-item-span">巡诊{{ item?.tour }}人</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { getWorkDaily } from '/@/views/yinChuan/yinChuan.api.ts';
|
||||
import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
|
||||
|
||||
const props = defineProps({});
|
||||
const { setSession, getSession } = useSession();
|
||||
const { WORK_DAILY } = caching;
|
||||
const trendsData = ref([]);
|
||||
|
||||
async function getTrendsData() {
|
||||
try {
|
||||
const { code, result } = await getWorkDaily({});
|
||||
if (code != 200) {
|
||||
return;
|
||||
}
|
||||
setSession(WORK_DAILY, result);
|
||||
trendsData.value = result;
|
||||
} catch {
|
||||
trendsData.value = JSON.parse(getSession(WORK_DAILY));
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getTrendsData();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
overflow: auto;
|
||||
|
||||
.trends-item {
|
||||
font-size: 16px;
|
||||
padding: 10px 20px;
|
||||
|
||||
.trends-title-con {
|
||||
margin-bottom: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon-medical {
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background: url('/@/assets/images/medical-center.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.trends-item-title {
|
||||
margin-left: 8px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.trends-item-span-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.trends-item-span {
|
||||
flex: 1;
|
||||
color: #ededed;
|
||||
}
|
||||
|
||||
.trends-item-span:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,198 +0,0 @@
|
||||
<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>
|
||||
@@ -1,228 +0,0 @@
|
||||
<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>
|
||||
@@ -1,109 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<public-title title="员工队伍健康状况" themeType="dark">
|
||||
<template #right>
|
||||
<!-- <span class="right-text" @click="viewDetail">更多</span>-->
|
||||
</template>
|
||||
</public-title>
|
||||
<div class="inner">
|
||||
<div v-for="item in list" :key="item.label" class="health-item">
|
||||
<span>{{ item.label }}</span>
|
||||
<span>{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
|
||||
import { getTeamHealth } from '/@/views/yinChuan/yinChuan.api.ts';
|
||||
|
||||
const props = defineProps({
|
||||
setting: Object,
|
||||
});
|
||||
const { setSession, getSession } = useSession();
|
||||
const { TEAM_HEALTH } = caching;
|
||||
const list = ref([
|
||||
{
|
||||
label: '在册总人数',
|
||||
value: '',
|
||||
key: 'total',
|
||||
},
|
||||
{
|
||||
label: '患重大疾病人数',
|
||||
value: '',
|
||||
key: 'bigIll',
|
||||
},
|
||||
{
|
||||
label: '健康高风险人数',
|
||||
value: '',
|
||||
key: 'highRisk',
|
||||
},
|
||||
{
|
||||
label: '患慢性病人数',
|
||||
value: '',
|
||||
key: 'slowIll',
|
||||
},
|
||||
{
|
||||
label: '健康指标异常人数',
|
||||
value: '',
|
||||
key: 'focusErr',
|
||||
},
|
||||
{
|
||||
label: '健康人数',
|
||||
value: '',
|
||||
key: 'health',
|
||||
},
|
||||
]);
|
||||
|
||||
function setList(data = {}) {
|
||||
list.value.forEach((item) => {
|
||||
const { key } = item;
|
||||
if (data && data.hasOwnProperty(key)) {
|
||||
item.value = data[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function viewDetail() {
|
||||
try {
|
||||
const { code, result } = await getTeamHealth({ dataType: props.setting?.dataType });
|
||||
if (code != 200) {
|
||||
return;
|
||||
}
|
||||
setList(result);
|
||||
setSession(TEAM_HEALTH, result);
|
||||
} catch {
|
||||
let data = JSON.parse(getSession(TEAM_HEALTH));
|
||||
setList(data);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
viewDetail();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 10px;
|
||||
|
||||
.right-text {
|
||||
font-weight: 100;
|
||||
cursor: pointer;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.health-item {
|
||||
flex: 1;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,18 +0,0 @@
|
||||
import { get } from '/@/api/request';
|
||||
|
||||
export enum Api {
|
||||
phoneList = '/health-emergency/emergency/tblUserHelp/phoneList',
|
||||
getWorkDaily = '/health-emergency/emergency/ycLargeScreen/medicalCenter',
|
||||
getTeamHealth = '/health-emergency/emergency/ycLargeScreen/userHealthCenter',
|
||||
ambulanceStat = '/health-emergency/emergency/ycLargeScreen/ambulanceStat',
|
||||
ambulancePage = '/health-emergency/emergency/ycLargeScreen/ambulancePage',
|
||||
}
|
||||
|
||||
// 呼入电话、受理电话
|
||||
export const getPhoneList = (params: any) => get(Api.phoneList, params);
|
||||
//一线医疗点每日工作动态
|
||||
export const getWorkDaily = (params: any) => get(Api.getWorkDaily, params);
|
||||
//员工队伍健康状况
|
||||
export const getTeamHealth = (params: any) => get(Api.getTeamHealth, params);
|
||||
export const ambulanceStatApi = (params: any) => get(Api.ambulanceStat, params);
|
||||
export const ambulancePageApi = (params: any) => get(Api.ambulancePage, params);
|
||||
@@ -1,476 +0,0 @@
|
||||
<template>
|
||||
<div class="outer">
|
||||
<login-out-button out-url="screenLogin" />
|
||||
<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="yichuan-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">
|
||||
<china-map
|
||||
:showFooter="false"
|
||||
:computedCenter="false"
|
||||
:mapOptions="YinChuanOption"
|
||||
: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>
|
||||
<EmployeeDialog ref="employeeDialogRef" :record="socketData" />
|
||||
<EmergencyDialog ref="emergencyDialogRef" :record="emergencyData" @confirmHelp="confirmHelp" />
|
||||
<YunZuoXiDialog ref="yunZuoXiDialogRef" :record="yunZuoXiData" @confirmHelp="confirmHelp" />
|
||||
<PhoneDialog ref="phoneDialogRef" :phoneType="phoneType" :setting="setting" :title="phoneDialogTitle" :useForm="true" />
|
||||
<TerminalAlarmDialog ref="terminalAlarmDialogRef" :setting="setting" />
|
||||
<emergency-data-dialog ref="emergencyDataDialog" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onUnmounted, ref, watch, nextTick, onMounted } from 'vue';
|
||||
import ServiceDetails from '/@/components/body-d-left/oneL.vue';
|
||||
import DailyWorkTrends from '/@/views/yinChuan/componetns/dailyWorkTrends/dailyWorkTrends.vue';
|
||||
import PhysicalExaminationData from '/@/components/body-d-left/threeL.vue';
|
||||
import TerminalAlarm from '/@/components/body-d-right/oneR.vue';
|
||||
import EmployeeHealth from '/@/views/yinChuan/componetns/employeeHealth/employeeHealth.vue';
|
||||
import ChinaMap from '/@/components/chinaMap/chinaMap.vue';
|
||||
import EmployeeDialog from '/@/views/components/employeeDialog.vue';
|
||||
import EmergencyDialog from '/@/views/components/emergencyDialog.vue';
|
||||
import YunZuoXiDialog from '/@/views/components/yunZuoXiDialog.vue';
|
||||
import PhoneDialog from '/@/views/components/phoneDialog/phoneDialog.vue';
|
||||
import TerminalAlarmDialog from '/@/views/yinChuan/componetns/TerminalAlarmDialog/TerminalAlarmDialog.vue';
|
||||
import EmergencyData from '/@/views/yinChuan/componetns/emergencyData/emergencyData.vue';
|
||||
import { openTestModal, useTopTime } from '/@/utils/utils.ts';
|
||||
import { basicPath, emergencyPath, useSocket, yinChuanPath } from '/@/utils/socket.ts';
|
||||
import { useRefresh } from '/@/hooks/autoRefresh';
|
||||
import { DEFAULT_TIME } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
|
||||
import { DataType, getSettings, ThemeType } from '/@/utils/settings.ts';
|
||||
import { ServerDetailType } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||||
import { YinChuanOption } from '/@/assets/mapUtils/mapConstant.ts';
|
||||
import { useUserStore } from '/@/store/modules/user.ts';
|
||||
import { Map } from '/@/assets/mapUtils/map.ts';
|
||||
import LoginOutButton from '/@/views/components/loginOutButton.vue';
|
||||
import EmergencyDataDialog from '/@/views/yinChuan/componetns/emergencyData/components/emergencyDataDialog.vue';
|
||||
|
||||
const title = ref('银川片应急就医服务中心');
|
||||
const phone = '(0951-6805199)';
|
||||
const setting = getSettings(DataType.yinChuan);
|
||||
onMounted(() => {
|
||||
init();
|
||||
document.title = title.value;
|
||||
openTestModal();
|
||||
document.addEventListener('visibilitychange', checkTabState);
|
||||
//设置主题
|
||||
store.setThemeType(ThemeType.dark);
|
||||
});
|
||||
const store = useUserStore();
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(interval.value);
|
||||
document.removeEventListener('visibilitychange', checkTabState);
|
||||
});
|
||||
const tabState = ref('');
|
||||
|
||||
//判断窗口是否处于激活状态，切换浏览器tab会导致部分echarts显示不正常
|
||||
function checkTabState() {
|
||||
tabState.value = document.hidden ? 'inactive' : 'active';
|
||||
}
|
||||
|
||||
const { refreshState } = useRefresh(DEFAULT_TIME);
|
||||
const dayTimeO = ref();
|
||||
const dayTimeT = ref();
|
||||
const interval = ref<any>(null);
|
||||
|
||||
function init() {
|
||||
getTime();
|
||||
interval.value = setInterval(() => {
|
||||
getTime();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
const emergencyDataDialog = ref();
|
||||
function emergencyDataList() {
|
||||
emergencyDataDialog.value.openDialog();
|
||||
}
|
||||
|
||||
function getTime() {
|
||||
const { timeLeft, timeRight } = useTopTime();
|
||||
dayTimeO.value = timeLeft;
|
||||
dayTimeT.value = timeRight;
|
||||
}
|
||||
|
||||
// 健康监测工具报警
|
||||
const { socketData, setSocketData, closeSocket } = useSocket(basicPath + `${DataType.yinChuan}`);
|
||||
const employeeDialogRef = ref();
|
||||
watch(socketData, (nVal) => {
|
||||
if (nVal) {
|
||||
nextTick(() => {
|
||||
store.setCount();
|
||||
setSocketData(nVal);
|
||||
employeeDialogRef.value.openDialog();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//模拟开启
|
||||
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();
|
||||
}
|
||||
|
||||
//应急求助
|
||||
const {
|
||||
socketData: emergencyData,
|
||||
setSocketData: setEmergencyData,
|
||||
closeSocket: closeSocket2,
|
||||
} = useSocket(emergencyPath + `${DataType.yinChuan}`);
|
||||
const emergencyDialogRef = ref();
|
||||
|
||||
watch(emergencyData, (nVal) => {
|
||||
if (nVal) {
|
||||
nextTick(() => {
|
||||
store.setCount();
|
||||
setEmergencyData(nVal);
|
||||
emergencyDialogRef.value.openDialog();
|
||||
});
|
||||
}
|
||||
});
|
||||
//银川云坐席
|
||||
const { socketData: yunZuoXiData, setSocketData: setYunZuoXiData, closeSocket: closeSocket3 } = useSocket(yinChuanPath);
|
||||
const yunZuoXiDialogRef = ref();
|
||||
watch(yunZuoXiData, (nVal) => {
|
||||
if (nVal) {
|
||||
nextTick(() => {
|
||||
store.setCount();
|
||||
setYunZuoXiData(nVal);
|
||||
yunZuoXiDialogRef.value.openDialog();
|
||||
});
|
||||
}
|
||||
});
|
||||
onUnmounted(() => {
|
||||
// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
|
||||
window.onbeforeunload = function () {
|
||||
closeSocket();
|
||||
closeSocket2();
|
||||
closeSocket3(); //银川云坐席
|
||||
};
|
||||
|
||||
clearInterval(interval.value);
|
||||
});
|
||||
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;
|
||||
}
|
||||
|
||||
// function test() {
|
||||
// let nVal = {
|
||||
// watchNo: 'CRFTQ22C03000080',
|
||||
// eventType: 'heart_rate',
|
||||
// bindUserId: 'fd358031299d4816b5d304fd818ecc73',
|
||||
// createBy: null,
|
||||
// createDate: null,
|
||||
// dataValue: '999',
|
||||
// address:
|
||||
// '一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字',
|
||||
// lon: 108.6666,
|
||||
// lat: 29.8888,
|
||||
// dataDate: '2023-12-07',
|
||||
// warnTime: '2023-12-07',
|
||||
// gpsErrorMsg: '',
|
||||
// lonGd: 108.67084314886117,
|
||||
// latGd: 29.88607705672868,
|
||||
// addressGd: null,
|
||||
// sendFlag: '0',
|
||||
// largeScreenFlag: '0',
|
||||
// orgCode: null,
|
||||
// orgName: '冯地坑采油作业区',
|
||||
// realName: '王志文',
|
||||
// phone: '15229020494',
|
||||
// };
|
||||
// nextTick(() => {
|
||||
// setEmergencyData(nVal);
|
||||
// emergencyDialogRef.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%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
//.yichuan-body-left,
|
||||
//.body-d-right {
|
||||
// text-align: center;
|
||||
//}
|
||||
|
||||
.yichuan-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>
|
||||
@@ -1,142 +0,0 @@
|
||||
<template>
|
||||
<div class="common-card" :class="[themeType]">
|
||||
<public-title title="服务详情数据" :themeType="themeType" />
|
||||
<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">
|
||||
<div
|
||||
v-for="(item, index) in statistics"
|
||||
:key="index"
|
||||
class="server-item"
|
||||
:class="[['gross', 'alerdyreceive'].includes(item.key) ? 'hasCursor' : '', themeType]"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
<span>{{ item?.name }}</span>
|
||||
<span>{{ item?.value }}</span>
|
||||
</div>
|
||||
<a-spin :spinning="spinning" class="spin"></a-spin>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import { list } from '/@/components/body-d-left/left.api';
|
||||
import { timeTab, useSpin, useStatistics } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||||
import { useDetailStore } from '/@/store/modules/detailData.ts';
|
||||
import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
|
||||
import { useTheme } from '/@/hooks/theme/useTheme.ts';
|
||||
import { left1 } from '/@/views/yinChuanTest/mockData.ts';
|
||||
|
||||
const { themeType } = useTheme();
|
||||
const { LEFT_KEY1 } = caching;
|
||||
const props = defineProps({
|
||||
refreshState: {
|
||||
type: Boolean,
|
||||
},
|
||||
setting: {
|
||||
type: Object,
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['handleClick']);
|
||||
const typeTime = ref(timeTab);
|
||||
const { statistics, setStatistics, getStatistics } = useStatistics();
|
||||
const selectIndex = ref(0);
|
||||
const selectVal = ref('2'); //本年
|
||||
const { setSpin, spinning } = useSpin();
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
const useDetail = useDetailStore();
|
||||
const { setSession, getSession } = useSession();
|
||||
|
||||
async function getList() {
|
||||
setSpin(true);
|
||||
try {
|
||||
const { code, result } = left1;
|
||||
setSpin(false);
|
||||
if (code != 200 || !result) {
|
||||
return;
|
||||
}
|
||||
setSession(LEFT_KEY1, JSON.stringify(result));
|
||||
setValue(result);
|
||||
} catch {
|
||||
setSpin(false);
|
||||
const result = JSON.parse(getSession(LEFT_KEY1));
|
||||
setValue(result);
|
||||
}
|
||||
}
|
||||
|
||||
function setValue(result = {}) {
|
||||
let { alerdyreceive = '', totalacceptance = '' } = result;
|
||||
setStatistics(result);
|
||||
if (alerdyreceive || totalacceptance) {
|
||||
useDetail.setAlerdyreceive(alerdyreceive);
|
||||
useDetail.setTotalacceptance(totalacceptance);
|
||||
}
|
||||
}
|
||||
|
||||
function handleSelect(index: number, value: string) {
|
||||
selectIndex.value = index;
|
||||
selectVal.value = value;
|
||||
getList();
|
||||
}
|
||||
|
||||
function handleClick(item) {
|
||||
emit('handleClick', item);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.refreshState,
|
||||
() => {
|
||||
getList();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
|
||||
.server-container {
|
||||
color: #fff;
|
||||
padding-top: 10px;
|
||||
height: 88%;
|
||||
display: grid;
|
||||
align-items: start;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
||||
.spin {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.server-item {
|
||||
font-size: 16px;
|
||||
padding: 6px 6% 6px 5%;
|
||||
|
||||
&.hasCursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,274 +0,0 @@
|
||||
<template>
|
||||
<div class="terminal-container common-card" :class="[themeType]">
|
||||
<public-title title="健康终端报警" :themeType="themeType">
|
||||
<template #right>
|
||||
<!-- <span class="right-text" :class="[themeType]" @click="viewDetail">查看详情</span>-->
|
||||
</template>
|
||||
</public-title>
|
||||
<div class="inner">
|
||||
<vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="4" v-bind="classOption">
|
||||
<div class="item right-top-item" :class="themeType" v-for="(item, i) in scrollList" :key="i">
|
||||
<span class="fixed-width" :title="item?.realName">{{ item?.realName }}</span>
|
||||
<span class="fixed-width" :title="item?.eventType_dictText">{{ item?.eventType_dictText }}</span>
|
||||
<div class="time-icon">
|
||||
<span>{{ item?.warnTime }}</span>
|
||||
<span class="terminal-icon" @click="handlePolice(item)" title="健康报警员工信息"></span>
|
||||
<span class="position" @click="sendPosition(item)" title="员工定位"></span>
|
||||
</div>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</div>
|
||||
<Dialog :openVis="openInfor" width="30%" title="健康报警员工信息" @close="handlePoliceClose">
|
||||
<template #container>
|
||||
<div class="police-con" :class="[themeType]">
|
||||
<div class="con-item">
|
||||
<div>姓名：</div>
|
||||
<div>{{ userInfo?.realName }}</div>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<div>二级单位：</div>
|
||||
<div>{{ userInfo?.orgName1 }}</div>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<div>手机号码：</div>
|
||||
<div>{{ userInfo?.phone }}</div>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<div>异常事件：</div>
|
||||
<div>{{ userInfo?.eventType_dictText }}</div>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<div>异常值：</div>
|
||||
<div>{{ userInfo?.dataValue }}</div>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<div>发生时间：</div>
|
||||
<div>{{ userInfo?.warnTime }}</div>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<div>发生地点：</div>
|
||||
<div v-if="userInfo?.address">{{ userInfo?.address }}</div>
|
||||
<div style="color: #eb3636" v-else>{{ userInfo?.gpsErrorMsg }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import Dialog from '/@/components/dialog/Dialog.vue';
|
||||
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
|
||||
import { Map } from '/@/assets/mapUtils/map.ts';
|
||||
import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
|
||||
import { DataType } from '/@/utils/settings.ts';
|
||||
import { useTheme } from '/@/hooks/theme/useTheme.ts';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { right1 } from '/@/views/yinChuanTest/mockData.ts';
|
||||
|
||||
const props = defineProps({
|
||||
setting: Object,
|
||||
});
|
||||
const { themeType } = useTheme();
|
||||
const emit = defineEmits(['emit-view-detail']);
|
||||
const router = useRouter();
|
||||
const { setSession, getSession } = useSession();
|
||||
const { RIGHT_KEY1 } = caching;
|
||||
|
||||
const classOption = ref({
|
||||
step: 0.3, // 速度
|
||||
});
|
||||
const openInfor = ref<boolean>(false); //弹窗显示
|
||||
const userInfo = ref({
|
||||
realName: '',
|
||||
orgName1: '',
|
||||
phone: '',
|
||||
eventType_dictText: '',
|
||||
warnTime: '',
|
||||
address: '',
|
||||
dataValue: '',
|
||||
});
|
||||
onMounted(() => {
|
||||
getScrollList();
|
||||
});
|
||||
|
||||
/**
|
||||
* @desc open员工信息
|
||||
*/
|
||||
function handlePolice(item) {
|
||||
userInfo.value = item;
|
||||
openInfor.value = true;
|
||||
classOption.value.step = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @desc close员工信息
|
||||
*/
|
||||
function handlePoliceClose() {
|
||||
openInfor.value = false;
|
||||
classOption.value.step = 0.3;
|
||||
}
|
||||
|
||||
/**
|
||||
* @desc 终端报警
|
||||
* */
|
||||
const scrollList = ref([]);
|
||||
|
||||
async function getScrollList() {
|
||||
try {
|
||||
const { code, result } = right1;
|
||||
if (code == 200) {
|
||||
setSession(RIGHT_KEY1, JSON.stringify(result.records));
|
||||
scrollList.value = result.records;
|
||||
}
|
||||
} catch {
|
||||
scrollList.value = JSON.parse(getSession(RIGHT_KEY1));
|
||||
}
|
||||
}
|
||||
|
||||
function sendPosition(item) {
|
||||
let { lon, lat } = item;
|
||||
if (lon && lat) {
|
||||
Map.createMarker(item, () => {
|
||||
handlePolice(item);
|
||||
});
|
||||
} else {
|
||||
message.warn('暂无经纬度信息！');
|
||||
}
|
||||
}
|
||||
|
||||
function viewDetail() {
|
||||
if (props.setting.dataType == DataType.xian) {
|
||||
router.push({ path: '/secondScreen' });
|
||||
}
|
||||
if (props.setting.dataType == DataType.yinChuan) {
|
||||
emit('emit-view-detail');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.right-text {
|
||||
font-weight: 100;
|
||||
cursor: pointer;
|
||||
margin-right: 3px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.right-text.light {
|
||||
color: #667ecc;
|
||||
}
|
||||
|
||||
.right-text:hover {
|
||||
color: #129bff;
|
||||
}
|
||||
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.scroll {
|
||||
width: 98%;
|
||||
height: 88%;
|
||||
overflow: hidden;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 3% 0;
|
||||
|
||||
.time-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.terminal-icon {
|
||||
margin-left: 15px;
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.position {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-size: 100% 100%;
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.police-con {
|
||||
padding: 2% 0 2% 5%;
|
||||
|
||||
.con-item {
|
||||
padding: 1.3% 0;
|
||||
display: flex;
|
||||
|
||||
div:nth-child(1) {
|
||||
font-weight: bold;
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
width: calc(100% - 100px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!--<style lang="less">-->
|
||||
<!-- .dialog-con {-->
|
||||
<!-- background-color: #00152b;-->
|
||||
<!-- // antd表格样式-->
|
||||
<!-- .ant-table-thead > tr > th {-->
|
||||
<!-- //border-bottom: 1px solid #1e73c2 !important;-->
|
||||
<!-- }-->
|
||||
|
||||
<!-- .ant-table-body {-->
|
||||
<!-- background-color: #00152b !important;-->
|
||||
<!-- }-->
|
||||
|
||||
<!-- .ant-modal-header {-->
|
||||
<!-- border-bottom: none !important;-->
|
||||
<!-- }-->
|
||||
|
||||
<!-- .ant-table-tbody > tr > td {-->
|
||||
<!-- border-bottom: 1px solid #1e73c2 !important;-->
|
||||
<!-- background-color: #00152b !important;-->
|
||||
<!-- color: #ffffff !important;-->
|
||||
<!-- }-->
|
||||
|
||||
<!-- .ant-table-tbody > tr.ant-table-row:hover > td,-->
|
||||
<!-- .ant-table-tbody > tr > td.ant-table-cell-row-hover,-->
|
||||
<!-- .ant-table-thead > tr > th {-->
|
||||
<!-- background-color: #00152b !important;-->
|
||||
<!-- color: #ffffff !important;-->
|
||||
<!-- }-->
|
||||
|
||||
<!-- .ant-table-cell-scrollbar {-->
|
||||
<!-- box-shadow: none !important;-->
|
||||
<!-- }-->
|
||||
|
||||
<!-- /*-->
|
||||
<!--表格滚动条-->
|
||||
<!--*/-->
|
||||
|
||||
<!-- .ant-table-body::-webkit-scrollbar-thumb {-->
|
||||
<!-- border: 4px solid rgba(0, 0, 0, 0);-->
|
||||
<!-- height: 6px;-->
|
||||
<!-- border-radius: 25px;-->
|
||||
<!-- background-clip: padding-box;-->
|
||||
<!-- background-color: rgba(30, 115, 194, 0.3);-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!--</style>-->
|
||||
@@ -1,92 +0,0 @@
|
||||
<template>
|
||||
<Dialog :openVis="visible" width="50%" title="健康终端报警列表" @close="closeDialog" :maskClosable="false">
|
||||
<template #container>
|
||||
<BasicTable ref="registerTable" class="table-container" :columns="columns" :api="getMonitorList" :apiParams="formState">
|
||||
<template #address="{ record, column, index }">
|
||||
<span v-if="record['address']">{{ record?.address }}</span>
|
||||
<span v-else style="color: #eb3636">{{ record?.gpsErrorMsg }}</span>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch, h } 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 { getMonitorList } from '/@/components/body-d-right/right.api.ts';
|
||||
|
||||
const props = defineProps({
|
||||
record: Object,
|
||||
title: String,
|
||||
useForm: Boolean,
|
||||
labelCol: Object,
|
||||
wrapperCol: Object,
|
||||
setting: Object,
|
||||
phoneType: String,
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'realName',
|
||||
key: 'realName',
|
||||
},
|
||||
{
|
||||
title: '二级单位',
|
||||
dataIndex: 'orgName2',
|
||||
key: 'orgName2',
|
||||
},
|
||||
{
|
||||
title: '联系电话',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
},
|
||||
{
|
||||
title: '异常事件',
|
||||
dataIndex: 'eventType_dictText',
|
||||
key: 'eventType_dictText',
|
||||
},
|
||||
{
|
||||
title: '异常值',
|
||||
dataIndex: 'dataValue',
|
||||
key: 'dataValue',
|
||||
},
|
||||
{
|
||||
title: '发生时间',
|
||||
dataIndex: 'warnTime',
|
||||
key: 'warnTime',
|
||||
},
|
||||
{
|
||||
title: '发生地点',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
slot: 'address',
|
||||
// customRender: ({ record }) => {
|
||||
// if (record?.address) {
|
||||
// return record?.address;
|
||||
// } else {
|
||||
// return h('span', { style: { color: '#eb3636' } }, record?.gpsErrorMsg);
|
||||
// }
|
||||
// },
|
||||
},
|
||||
];
|
||||
const formState = computed(() => ({
|
||||
dataType: props.setting.dataType,
|
||||
orgCode: props.setting?.orgCode,
|
||||
}));
|
||||
const { visible, closeDialog, openDialog } = useDialog({ title: props.title });
|
||||
const registerTable = ref();
|
||||
watch(props, () => {
|
||||
registerTable.value?.getRecords();
|
||||
});
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.table-container {
|
||||
margin: 0 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,615 +0,0 @@
|
||||
<template>
|
||||
<div class="center-map">
|
||||
<div class="china-map-box">
|
||||
<div class="tab-list">
|
||||
<div v-for="(item, i) in list" :class="[currentIndex == i ? 'active' : '']" class="tab" @click="changeTab(item, i)">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="currentIndex == list.length - 1" class="route-navigation">
|
||||
<a-form :model="formState" layout="inline">
|
||||
<a-form-item class="form-item-self" label="起点">
|
||||
<a-input v-model:value="formState.start" placeholder="请输入起点"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item class="form-item-self" label="终点">
|
||||
<a-input v-model:value="formState.end" placeholder="请输入终点"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button class="reset-btn" @click="removeInput">清空</a-button>
|
||||
<a-button class="search-btn" @click="searchRoute" :loading="searchFlag" :disabled="searchFlag"> 路线规划 </a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div v-show="showRoutePanel" v-click-outside="outClick" class="line-container">
|
||||
<div v-show="routeList.length" class="has-data">
|
||||
<div class="line-title"> {{ panelTitle }}</div>
|
||||
<div class="line-content">
|
||||
<div class="start">起点</div>
|
||||
<div class="line-body">
|
||||
<div class="line"></div>
|
||||
<div class="line-desc">
|
||||
<p v-for="(item, i) in routeList" :key="i">{{ item }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="end">终点</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="!routeList.length" class="empty-data"> 暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="showHospitalList" class="reset-map" @click="resetMap">
|
||||
<RedoOutlined title="重置地图" />
|
||||
</div>
|
||||
<RoutePanel
|
||||
class="driving-route-panel"
|
||||
v-show="showDrivingPanel"
|
||||
:drivingRoute="drivingRoute"
|
||||
:drivingTitle="drivingTitle"
|
||||
@out-click="showDrivingPanel = false"
|
||||
/>
|
||||
<div style="flex: 1; overflow: hidden; margin: 0 0 10px">
|
||||
<div id="mapContainer" class="mapContainer"></div>
|
||||
</div>
|
||||
<div v-show="false" id="container"></div>
|
||||
<div v-show="false" id="panel"></div>
|
||||
<div class="map-legend">
|
||||
<div v-for="(item, i) in legendList" :key="i" class="legend-item">
|
||||
<div><img :src="item.img" alt="" class="legend-img" /> {{ item.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="level">地图层级：{{ level }}</div>-->
|
||||
</div>
|
||||
<div class="center-footer" v-if="showFooter">
|
||||
<div class="count-item">
|
||||
<div class="num">{{ useDetail?.alerdyreceive || '0' }}</div>
|
||||
<div class="text">累计受理</div>
|
||||
</div>
|
||||
<div class="count-item">
|
||||
<div class="num">{{ useDetail?.totalacceptance || '0' }}</div>
|
||||
<div class="text">累计处置</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 附近医院、医疗点 -->
|
||||
<div class="hospital-list" v-if="showHospitalList">
|
||||
<div class="hospital-item" v-for="(item, index) in hospitalList" :key="index" @click="showDrivingLine(item)">
|
||||
<div>{{ item.name }}</div>
|
||||
<div>相距{{ item.distance }}</div>
|
||||
<div>驾车大约{{ item.driveTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { nextTick, onMounted, ref } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { RedoOutlined } from '@ant-design/icons-vue';
|
||||
import { Map } from '/@/assets/mapUtils/map';
|
||||
import { aircraft, getKmStr, getTimeStr, legendList, mapApiSwitch, tabList, TabType } from '/@/components/chinaMap/chinaHooks';
|
||||
import { useDetailStore } from '/@/store/modules/detailData.ts';
|
||||
import RoutePanel from '/@/components/chinaMap/components/routePanel.vue';
|
||||
import { mapData } from '/@/views/yinChuanTest/mockData.ts';
|
||||
|
||||
const props = defineProps({
|
||||
//是否展示底部统计
|
||||
showFooter: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return true;
|
||||
},
|
||||
},
|
||||
//地图是否按照接口数据的中心点定位
|
||||
computedCenter: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return true;
|
||||
},
|
||||
},
|
||||
// 地图配置
|
||||
mapOptions: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
//是否展示最近的三个医院
|
||||
showHospitalList: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false;
|
||||
},
|
||||
},
|
||||
hospitalList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['clearHospitalList']);
|
||||
const useDetail = useDetailStore();
|
||||
const formState = ref({
|
||||
start: '',
|
||||
end: '',
|
||||
});
|
||||
const list = ref(tabList);
|
||||
const currentIndex = ref(0);
|
||||
|
||||
function changeTab(item, i: number) {
|
||||
currentIndex.value = i; // 地方医院
|
||||
Map.clearActiveHospital();
|
||||
closeDrivingElement();
|
||||
Map.map.off('moveend', logMapinfo);
|
||||
if (TabType.diFangYiYuan == item.type) {
|
||||
Map.removeOverlayGroup();
|
||||
Map.map.on('moveend', logMapinfo);
|
||||
return;
|
||||
}
|
||||
if (TabType.zhiShengJi == item.type) {
|
||||
Map.createAircraft(aircraft);
|
||||
return;
|
||||
} else {
|
||||
getMapData(item.type, { type: item.type });
|
||||
}
|
||||
}
|
||||
|
||||
const currentCityCode = ref('');
|
||||
|
||||
function logMapinfo() {
|
||||
Map.map.getCity(function (info) {
|
||||
const { citycode } = info;
|
||||
if (currentCityCode.value != citycode) {
|
||||
Map.createActiveHospital(citycode);
|
||||
currentCityCode.value = citycode;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const level = ref(0);
|
||||
|
||||
function setLevel() {
|
||||
//获取当前地图级别
|
||||
level.value = Map.map.getZoom();
|
||||
}
|
||||
|
||||
async function getMapData(type, params = {}) {
|
||||
try {
|
||||
const { code, result } = mapData;
|
||||
if (code == 200) {
|
||||
if (Array.isArray(result) && result.length > 0) {
|
||||
Map.createOverlay(
|
||||
result,
|
||||
{
|
||||
content: (val) => {
|
||||
return `<div style="
|
||||
width: 21px;
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: -20px;" title="${val?.name}">
|
||||
</div>`;
|
||||
},
|
||||
},
|
||||
() => {},
|
||||
props.computedCenter
|
||||
);
|
||||
} else {
|
||||
Map.removeOverlayGroup();
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn(e);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
Map.initMap({ el: 'mapContainer', option: props.mapOptions }).then(() => {
|
||||
getMapData(tabList[0].type);
|
||||
Map.map && Map.map.on('zoomend', setLevel);
|
||||
Map.map && Map.map.on('zoomend', setLevel);
|
||||
});
|
||||
});
|
||||
const routeList = ref([]);
|
||||
const showRoutePanel = ref(false);
|
||||
const panelTitle = ref();
|
||||
|
||||
function outClick() {
|
||||
showRoutePanel.value = false;
|
||||
}
|
||||
|
||||
function setTitle({ time, distance }) {
|
||||
let str = '全程';
|
||||
str += getTimeStr(time);
|
||||
str += getKmStr(distance);
|
||||
panelTitle.value = str;
|
||||
}
|
||||
|
||||
let searchFlag = ref(false);
|
||||
|
||||
/**
|
||||
* @desc 路线规划
|
||||
* @param callback
|
||||
*/
|
||||
function searchRoute(callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) {
|
||||
showRoutePanel.value = false;
|
||||
panelTitle.value = '';
|
||||
if (!formState.value.start) {
|
||||
return message.warn('请输入起点');
|
||||
}
|
||||
if (!formState.value.end) {
|
||||
return message.warn('请输入终点');
|
||||
}
|
||||
searchFlag.value = true;
|
||||
//基本地图加载
|
||||
let map = new AMap.Map('container', {
|
||||
resizeEnable: true,
|
||||
center: [116.397428, 39.90923], //地图中心点
|
||||
zoom: 13, //地图显示的缩放级别
|
||||
});
|
||||
//构造路线导航类
|
||||
let driving = new AMap.Driving({
|
||||
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') {
|
||||
searchFlag.value = false;
|
||||
|
||||
// console.log('绘制驾车路线完成');
|
||||
} else {
|
||||
searchFlag.value = false;
|
||||
|
||||
// console.log('获取驾车数据失败：' + result);
|
||||
}
|
||||
});
|
||||
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;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function removeInput() {
|
||||
formState.value.start = '';
|
||||
formState.value.end = '';
|
||||
searchFlag.value = false;
|
||||
}
|
||||
|
||||
// 驾车路线
|
||||
const drivingRoute = ref([]);
|
||||
const drivingTitle = ref('');
|
||||
const showDrivingPanel = ref(false);
|
||||
|
||||
function showDrivingLine(item) {
|
||||
nextTick(() => {
|
||||
drivingTitle.value = '全程' + item.driveTime + item.distance;
|
||||
drivingRoute.value = item.routeList?.map((item) => item?.instruction);
|
||||
showDrivingPanel.value = true;
|
||||
if (item.lon) {
|
||||
Map.clearNaviLine();
|
||||
Map.createNaviLine(item.userLocation, [item.lon, item.lat]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function closeDrivingElement() {
|
||||
Map.clearNavigationElements();
|
||||
formState.value.start = '';
|
||||
formState.value.end = '';
|
||||
showDrivingPanel.value = false;
|
||||
emits('clearHospitalList');
|
||||
}
|
||||
|
||||
function resetMap() {
|
||||
closeDrivingElement();
|
||||
changeTab(list.value[currentIndex.value], currentIndex.value);
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.center-map {
|
||||
flex: 1;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: space-between;
|
||||
|
||||
.china-map-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
|
||||
.tab {
|
||||
width: calc(100% / 8);
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #29f1fa;
|
||||
background: url('/@/assets/img/tab-default.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
background: url('/@/assets/img/tab-active.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-navigation {
|
||||
margin: 12px 0;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #002e64;
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
z-index: 999;
|
||||
transition: all 0.3s;
|
||||
|
||||
:deep(.form-item-self) {
|
||||
label {
|
||||
color: #29f1fa;
|
||||
}
|
||||
|
||||
.ant-input {
|
||||
width: 280px;
|
||||
color: #d6d9e0;
|
||||
background: #2a4164;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
border: 1px solid #1b7ef2;
|
||||
}
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
width: 64px;
|
||||
height: 32px;
|
||||
border-radius: 5px;
|
||||
color: #45a2ff;
|
||||
background: #002e64;
|
||||
border: 1px solid #45a2ff;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
margin-left: 10px;
|
||||
width: 120px;
|
||||
height: 32px;
|
||||
color: #efefef;
|
||||
background: #45a2ff;
|
||||
border-radius: 5px;
|
||||
border-color: #45a2ff;
|
||||
}
|
||||
|
||||
.line-container {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 54px;
|
||||
width: 288px;
|
||||
padding: 9px 18px;
|
||||
min-height: 200px;
|
||||
max-height: 473px;
|
||||
overflow: auto;
|
||||
background: #2a4164;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #1b7ef2;
|
||||
|
||||
.line-title {
|
||||
margin-bottom: 9px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.line-content {
|
||||
font-size: 12px;
|
||||
|
||||
.start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '起';
|
||||
color: #fff;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: #1478f5;
|
||||
}
|
||||
}
|
||||
|
||||
.end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '终';
|
||||
color: #fff;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: #1478f5;
|
||||
}
|
||||
}
|
||||
|
||||
.line-body {
|
||||
display: flex;
|
||||
//max-height: 370px;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 1px;
|
||||
//max-height: 370px;
|
||||
background-color: #1478f5;
|
||||
margin: 5px 19px 5px 8px;
|
||||
}
|
||||
|
||||
.line-desc {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
margin-top: 30%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reset-map {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50px;
|
||||
z-index: 99;
|
||||
font-size: 20px;
|
||||
color: #05d5ff;
|
||||
cursor: pointer;
|
||||
background: #243b5d;
|
||||
padding: 0px 6px;
|
||||
}
|
||||
|
||||
//驾驶路线导航面板
|
||||
.driving-route-panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 86px;
|
||||
width: 288px;
|
||||
padding: 9px 18px;
|
||||
min-height: 200px;
|
||||
max-height: 473px;
|
||||
overflow: auto;
|
||||
background: #2a4164;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #1b7ef2;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.mapContainer {
|
||||
flex: 1;
|
||||
height: calc(100% + 22px);
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.map-legend {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 10px;
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.legend-item {
|
||||
width: 50%;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
|
||||
.legend-img {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.level {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 400px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.center-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
gap: 20px;
|
||||
|
||||
.count-item {
|
||||
width: 340px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
color: #ffffff;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #00071b;
|
||||
box-shadow: inset 0 0 40px 0 #1b7ef2;
|
||||
border-radius: 4px;
|
||||
|
||||
.num {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hospital-list {
|
||||
position: absolute;
|
||||
bottom: 200px;
|
||||
width: 800px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
|
||||
.hospital-item {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
gap: 20px;
|
||||
min-width: 230px;
|
||||
max-width: 230px;
|
||||
height: 110px;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
margin: 0 10px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
background-color: #00152b;
|
||||
border: 1px solid #1b7ef2;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 11px 0 rgba(194, 189, 189, 0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hospital-item:hover {
|
||||
background-color: #192a46;
|
||||
box-shadow: inset 0px 0px 16px 3px #2562a9;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,91 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<public-title title="一线医疗点每日工作动态" themeType="dark" />
|
||||
<div class="inner">
|
||||
<div class="trends-item" v-for="(item, k) in trendsData" :key="k">
|
||||
<div class="trends-title-con">
|
||||
<span class="icon-medical"></span>
|
||||
<span class="trends-item-title">{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="trends-item-span-box">
|
||||
<span class="trends-item-span">高风险干预{{ item?.high }}人</span>
|
||||
<span class="trends-item-span">慢病管理{{ item?.slow }}人</span>
|
||||
<span class="trends-item-span">巡诊{{ item?.tour }}人</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { getWorkDaily } from '/@/views/yinChuan/yinChuan.api.ts';
|
||||
import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
|
||||
import { left2 } from '/@/views/yinChuanTest/mockData.ts';
|
||||
|
||||
const props = defineProps({});
|
||||
const { setSession, getSession } = useSession();
|
||||
const { WORK_DAILY } = caching;
|
||||
const trendsData = ref([]);
|
||||
|
||||
async function getTrendsData() {
|
||||
try {
|
||||
const { code, result } = left2;
|
||||
if (code != 200) {
|
||||
return;
|
||||
}
|
||||
setSession(WORK_DAILY, result);
|
||||
trendsData.value = result;
|
||||
} catch {
|
||||
trendsData.value = JSON.parse(getSession(WORK_DAILY));
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getTrendsData();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
overflow: auto;
|
||||
|
||||
.trends-item {
|
||||
font-size: 16px;
|
||||
padding: 10px 20px;
|
||||
|
||||
.trends-title-con {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon-medical {
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background: url('/@/assets/images/medical-center.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.trends-item-title {
|
||||
margin-left: 8px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.trends-item-span-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.trends-item-span {
|
||||
flex: 1;
|
||||
color: #ededed;
|
||||
}
|
||||
|
||||
.trends-item-span:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,90 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<public-title title="一线医疗点每日工作动态" themeType="dark" />
|
||||
<div class="inner">
|
||||
<div class="trends-item" v-for="(item, k) in trendsData" :key="k">
|
||||
<div class="trends-title-con">
|
||||
<span class="icon-medical"></span>
|
||||
<span class="trends-item-title">{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="trends-item-span-box">
|
||||
<span class="trends-item-span">高风险干预{{ item?.high }}人</span>
|
||||
<span class="trends-item-span">慢病管理{{ item?.slow }}人</span>
|
||||
<span class="trends-item-span">巡诊{{ item?.tour }}人</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { getWorkDaily } from '/@/views/yinChuan/yinChuan.api.ts';
|
||||
import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
|
||||
|
||||
const props = defineProps({});
|
||||
const { setSession, getSession } = useSession();
|
||||
const { WORK_DAILY } = caching;
|
||||
const trendsData = ref([]);
|
||||
|
||||
async function getTrendsData() {
|
||||
try {
|
||||
const { code, result } = await getWorkDaily({});
|
||||
if (code != 200) {
|
||||
return;
|
||||
}
|
||||
setSession(WORK_DAILY, result);
|
||||
trendsData.value = result;
|
||||
} catch {
|
||||
trendsData.value = JSON.parse(getSession(WORK_DAILY));
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getTrendsData();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
overflow: auto;
|
||||
|
||||
.trends-item {
|
||||
font-size: 16px;
|
||||
padding: 10px 20px;
|
||||
|
||||
.trends-title-con {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon-medical {
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background: url('/@/assets/images/medical-center.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.trends-item-title {
|
||||
margin-left: 8px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.trends-item-span-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.trends-item-span {
|
||||
flex: 1;
|
||||
color: #ededed;
|
||||
}
|
||||
|
||||
.trends-item-span:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,110 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<public-title title="员工队伍健康状况" themeType="dark">
|
||||
<template #right>
|
||||
<!-- <span class="right-text" @click="viewDetail">更多</span>-->
|
||||
</template>
|
||||
</public-title>
|
||||
<div class="inner">
|
||||
<div v-for="item in list" :key="item.label" class="health-item">
|
||||
<span>{{ item.label }}</span>
|
||||
<span>{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
|
||||
import { getTeamHealth } from '/@/views/yinChuan/yinChuan.api.ts';
|
||||
import { right2 } from '/@/views/yinChuanTest/mockData.ts';
|
||||
|
||||
const props = defineProps({
|
||||
setting: Object,
|
||||
});
|
||||
const { setSession, getSession } = useSession();
|
||||
const { TEAM_HEALTH } = caching;
|
||||
const list = ref([
|
||||
{
|
||||
label: '在册总人数',
|
||||
value: '',
|
||||
key: 'total',
|
||||
},
|
||||
{
|
||||
label: '患重大疾病人数',
|
||||
value: '',
|
||||
key: 'bigIll',
|
||||
},
|
||||
{
|
||||
label: '健康高风险人数',
|
||||
value: '',
|
||||
key: 'highRisk',
|
||||
},
|
||||
{
|
||||
label: '患慢性病人数',
|
||||
value: '',
|
||||
key: 'slowIll',
|
||||
},
|
||||
{
|
||||
label: '健康指标异常人数',
|
||||
value: '',
|
||||
key: 'focusErr',
|
||||
},
|
||||
{
|
||||
label: '健康人数',
|
||||
value: '',
|
||||
key: 'health',
|
||||
},
|
||||
]);
|
||||
|
||||
function setList(data = {}) {
|
||||
list.value.forEach((item) => {
|
||||
const { key } = item;
|
||||
if (data && data.hasOwnProperty(key)) {
|
||||
item.value = data[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function viewDetail() {
|
||||
try {
|
||||
const { code, result } = right2;
|
||||
if (code != 200) {
|
||||
return;
|
||||
}
|
||||
setList(result);
|
||||
setSession(TEAM_HEALTH, result);
|
||||
} catch {
|
||||
let data = JSON.parse(getSession(TEAM_HEALTH));
|
||||
setList(data);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
viewDetail();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 10px;
|
||||
|
||||
.right-text {
|
||||
font-weight: 100;
|
||||
cursor: pointer;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.health-item {
|
||||
flex: 1;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,109 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<public-title title="员工队伍健康状况" themeType="dark">
|
||||
<template #right>
|
||||
<!-- <span class="right-text" @click="viewDetail">更多</span>-->
|
||||
</template>
|
||||
</public-title>
|
||||
<div class="inner">
|
||||
<div v-for="item in list" :key="item.label" class="health-item">
|
||||
<span>{{ item.label }}</span>
|
||||
<span>{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
|
||||
import { getTeamHealth } from '/@/views/yinChuan/yinChuan.api.ts';
|
||||
|
||||
const props = defineProps({
|
||||
setting: Object,
|
||||
});
|
||||
const { setSession, getSession } = useSession();
|
||||
const { TEAM_HEALTH } = caching;
|
||||
const list = ref([
|
||||
{
|
||||
label: '在册总人数',
|
||||
value: '',
|
||||
key: 'total',
|
||||
},
|
||||
{
|
||||
label: '患重大疾病人数',
|
||||
value: '',
|
||||
key: 'bigIll',
|
||||
},
|
||||
{
|
||||
label: '健康高风险人数',
|
||||
value: '',
|
||||
key: 'highRisk',
|
||||
},
|
||||
{
|
||||
label: '患慢性病人数',
|
||||
value: '',
|
||||
key: 'slowIll',
|
||||
},
|
||||
{
|
||||
label: '健康指标异常人数',
|
||||
value: '',
|
||||
key: 'focusErr',
|
||||
},
|
||||
{
|
||||
label: '健康人数',
|
||||
value: '',
|
||||
key: 'health',
|
||||
},
|
||||
]);
|
||||
|
||||
function setList(data = {}) {
|
||||
list.value.forEach((item) => {
|
||||
const { key } = item;
|
||||
if (data && data.hasOwnProperty(key)) {
|
||||
item.value = data[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function viewDetail() {
|
||||
try {
|
||||
const { code, result } = await getTeamHealth({ dataType: props.setting?.dataType });
|
||||
if (code != 200) {
|
||||
return;
|
||||
}
|
||||
setList(result);
|
||||
setSession(TEAM_HEALTH, result);
|
||||
} catch {
|
||||
let data = JSON.parse(getSession(TEAM_HEALTH));
|
||||
setList(data);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
viewDetail();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 10px;
|
||||
|
||||
.right-text {
|
||||
font-weight: 100;
|
||||
cursor: pointer;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.health-item {
|
||||
flex: 1;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,127 +0,0 @@
|
||||
<template>
|
||||
<div class="common-card" :class="[themeType]">
|
||||
<public-title title="体检数据" :themeType="themeType" />
|
||||
<div class="inner">
|
||||
<div class="type-time">
|
||||
<span
|
||||
v-for="(item, index) in timeTab"
|
||||
:key="index"
|
||||
:class="[selectIndex === index ? 'select' : 'unSelect', themeType]"
|
||||
@click="handleSelect(index, item.value)"
|
||||
>{{ item.name }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="physical-container">
|
||||
<a-spin :spinning="spinning" class="spin"></a-spin>
|
||||
<div class="RadarCharts" ref="radarChartsRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, unref, watch } from 'vue';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import { useSpin, timeTab, useHospitalList, radarCharts, allValueEmpty } from '/@/components/body-d-left/bodyLeftHooks';
|
||||
import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
|
||||
import * as echarts from 'echarts';
|
||||
import { useTheme } from '/@/hooks/theme/useTheme.ts';
|
||||
import { right3 } from '/@/views/yinChuanTest/mockData.ts';
|
||||
|
||||
const props = defineProps({
|
||||
refreshState: {
|
||||
type: Boolean,
|
||||
},
|
||||
setting: Object,
|
||||
});
|
||||
const { themeType } = useTheme();
|
||||
const { setSession, getSession } = useSession();
|
||||
const { LEFT_KEY3 } = caching;
|
||||
const { setSpin, spinning } = useSpin();
|
||||
const selectIndex = ref(0);
|
||||
const selectVal = ref('2'); //本年
|
||||
function handleSelect(index: number, value: string) {
|
||||
selectIndex.value = index;
|
||||
selectVal.value = value;
|
||||
setSpin(true);
|
||||
setTimeout(() => {
|
||||
setSpin(false);
|
||||
}, 1000);
|
||||
getList();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
const { radarList, setRadarList, getRadarList } = useHospitalList();
|
||||
|
||||
async function getList() {
|
||||
setSpin(true);
|
||||
try {
|
||||
const { code, result } = right3;
|
||||
setSpin(!spinning.value);
|
||||
if (code != 200) {
|
||||
return;
|
||||
}
|
||||
setSession(LEFT_KEY3, JSON.stringify(result));
|
||||
setValue(result);
|
||||
} catch {
|
||||
const result = JSON.parse(getSession(LEFT_KEY3));
|
||||
setValue(result);
|
||||
setSpin(!spinning.value);
|
||||
}
|
||||
}
|
||||
|
||||
function setValue(result) {
|
||||
setRadarList(result);
|
||||
const everyEmpty = allValueEmpty('value', getRadarList());
|
||||
everyEmpty && initChart();
|
||||
}
|
||||
|
||||
const radarChartsRef = ref<HTMLElement>();
|
||||
|
||||
function initChart() {
|
||||
const myChart = echarts.init(radarChartsRef.value);
|
||||
let countList = radarList?.value.map((item) => item?.userCount);
|
||||
if (countList.length < 1) return;
|
||||
let max = Math.max(...countList);
|
||||
const indicator = radarList?.value.map((item) => ({ name: item?.hospitalName, max: max }));
|
||||
const option = radarCharts({ indicator, countList, theme: 'dark' });
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.refreshState,
|
||||
() => {
|
||||
getList();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
|
||||
.physical-container {
|
||||
width: 96%;
|
||||
height: calc(100% - 35px);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-around;
|
||||
position: relative;
|
||||
|
||||
.spin {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.RadarCharts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,14 +0,0 @@
|
||||
import { get } from '/@/api/request';
|
||||
|
||||
export enum Api {
|
||||
phoneList = '/health-emergency/emergency/tblUserHelp/phoneList',
|
||||
getWorkDaily = '/health-emergency/emergency/ycLargeScreen/medicalCenter',
|
||||
getTeamHealth = '/health-emergency/emergency/ycLargeScreen/userHealthCenter',
|
||||
}
|
||||
|
||||
// 呼入电话、受理电话
|
||||
export const getPhoneList = (params: any) => get(Api.phoneList, params);
|
||||
//一线医疗点每日工作动态
|
||||
export const getWorkDaily = (params: any) => get(Api.getWorkDaily, params);
|
||||
//员工队伍健康状况
|
||||
export const getTeamHealth = (params: any) => get(Api.getTeamHealth, params);
|
||||
@@ -1,321 +0,0 @@
|
||||
<template>
|
||||
<div class="outer">
|
||||
<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="yichuan-body-left">
|
||||
<!--服务详情数据-->
|
||||
<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">
|
||||
<china-map
|
||||
:showFooter="false"
|
||||
:computedCenter="false"
|
||||
:mapOptions="YinChuanOptionTest"
|
||||
: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>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onUnmounted, ref, nextTick, onMounted } from 'vue';
|
||||
import ServiceDetails from '/@/views/yinChuanTest/componetns/ServiceDetails.vue';
|
||||
import DailyWorkTrends from '/@/views/yinChuanTest/componetns/dailyWorkTrends.vue';
|
||||
import PhysicalExaminationData from '/@/views/yinChuanTest/componetns/physicalExaminationData.vue';
|
||||
import TerminalAlarm from '/@/views/yinChuanTest/componetns/TerminalAlarm.vue';
|
||||
import EmployeeHealth from '/@/views/yinChuanTest/componetns/employeeHealth.vue';
|
||||
import ChinaMap from '/@/views/yinChuanTest/componetns/chinaMap.vue';
|
||||
import { useTopTime } from '/@/utils/utils.ts';
|
||||
import { useRefresh } from '/@/hooks/autoRefresh';
|
||||
import { DEFAULT_TIME } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { DataType, getSettings, ThemeType } from '/@/utils/settings.ts';
|
||||
import { ServerDetailType } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||||
import { useUserStore } from '/@/store/modules/user.ts';
|
||||
import { Map } from '/@/assets/mapUtils/map.ts';
|
||||
|
||||
const YinChuanOptionTest = {
|
||||
center: [108.32, 36.45], //地图中心点
|
||||
zoom: 7, //地图显示的缩放级别
|
||||
mapStyle: 'darkblue', //地图样式
|
||||
};
|
||||
const title = ref('应急就医服务中心');
|
||||
const phone = '(xxxx-xxxxxxx)';
|
||||
const route = useRoute();
|
||||
const setting = getSettings(DataType.yinChuan);
|
||||
onMounted(() => {
|
||||
init();
|
||||
document.title = title.value;
|
||||
document.addEventListener('visibilitychange', checkTabState);
|
||||
//设置主题
|
||||
store.setThemeType(ThemeType.dark);
|
||||
});
|
||||
const store = useUserStore();
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(interval.value);
|
||||
document.removeEventListener('visibilitychange', checkTabState);
|
||||
});
|
||||
const tabState = ref('');
|
||||
|
||||
//判断窗口是否处于激活状态，切换浏览器tab会导致部分echarts显示不正常
|
||||
function checkTabState() {
|
||||
tabState.value = document.hidden ? 'inactive' : 'active';
|
||||
}
|
||||
|
||||
const { refreshState } = useRefresh(DEFAULT_TIME);
|
||||
const dayTimeO = ref();
|
||||
const dayTimeT = ref();
|
||||
const interval = ref(1);
|
||||
|
||||
function init() {
|
||||
getTime();
|
||||
interval.value = setInterval(() => {
|
||||
getTime();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function getTime() {
|
||||
const { timeLeft, timeRight } = useTopTime();
|
||||
dayTimeO.value = timeLeft;
|
||||
dayTimeT.value = timeRight;
|
||||
}
|
||||
|
||||
const phoneDialogTitle = ref('呼入电话');
|
||||
const phoneDialogRef = ref();
|
||||
//0:处置 1:处理 2:呼入 3:全部
|
||||
const phoneType = ref('');
|
||||
|
||||
//呼入电话、受理电话弹窗
|
||||
function handlePhoneDialog(item) {
|
||||
const { name, key } = item;
|
||||
//呼入电话
|
||||
if (key == 'gross') {
|
||||
phoneType.value = ServerDetailType['gross'];
|
||||
//受理电话
|
||||
if (key == 'alerdyreceive') {
|
||||
phoneType.value = ServerDetailType['alerdyreceive'];
|
||||
}
|
||||
nextTick(() => {
|
||||
phoneDialogTitle.value = name;
|
||||
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;
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.outer {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background: url('/@/assets/images/bg.png') no-repeat;
|
||||
background-size: 100% 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%;
|
||||
}
|
||||
|
||||
//.yichuan-body-left,
|
||||
//.body-d-right {
|
||||
// text-align: center;
|
||||
//}
|
||||
|
||||
.yichuan-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%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user