update
1.新疆大屏新需求
This commit is contained in:
@@ -29,7 +29,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<a-button type="primary" @click="confirmHelp">确认</a-button>
|
||||
<a-button type="primary" @click="confirmHelp" :loading="helpLoading">确认</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
@@ -39,10 +39,12 @@
|
||||
import { useDialog } from '/@/views/components/dialogHooks.ts';
|
||||
import { watch, ref, Ref } from 'vue';
|
||||
import { useTheme } from '/@/hooks/theme/useTheme.ts';
|
||||
import { nearResourcesApi } from '/@/views/indexSun/indexSun.api.ts';
|
||||
|
||||
const props = defineProps({
|
||||
record: Object,
|
||||
});
|
||||
const helpLoading = ref<boolean>(false);
|
||||
const emit = defineEmits(['confirmHelp']);
|
||||
const { themeType } = useTheme();
|
||||
|
||||
@@ -55,7 +57,7 @@
|
||||
phone?: string;
|
||||
}
|
||||
|
||||
const userInfo: Ref<UserInfo> = ref({});
|
||||
const userInfo: Ref<UserInfo> = ref<any>({});
|
||||
watch(
|
||||
() => props.record,
|
||||
(nVal: UserInfo) => {
|
||||
@@ -69,9 +71,28 @@
|
||||
});
|
||||
|
||||
//确认帮助
|
||||
function confirmHelp() {
|
||||
async function confirmHelp() {
|
||||
let list: any = [];
|
||||
try {
|
||||
helpLoading.value = true;
|
||||
const res: any = await nearResourcesApi({ longitude: userInfo.value?.lon, latitude: userInfo.value?.lat });
|
||||
if (res.code === 200) {
|
||||
list = res.result || [];
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
helpLoading.value = false;
|
||||
}
|
||||
closeDialog();
|
||||
emit('confirmHelp', userInfo.value);
|
||||
emit('confirmHelp', {
|
||||
...userInfo.value,
|
||||
hospitalList: list.map((item: any) => {
|
||||
item['latitude'] = item['lat'];
|
||||
item['longitude'] = item['lon'];
|
||||
return item;
|
||||
}),
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
<style scoped lang="less">
|
||||
.button-d {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
right: 50%;
|
||||
top: 0;
|
||||
z-index: 9999;
|
||||
color: transparent;
|
||||
|
||||
+241
-79
@@ -2,9 +2,13 @@
|
||||
<div class="sun-screen-box">
|
||||
<login-out-button out-url="login" />
|
||||
<div class="sun-screen-title">
|
||||
<div class="sun-title-left">{{ dateInfo?.day }} {{ dateInfo?.times }}</div>
|
||||
<div class="sun-title-center">应急就医服务中心</div>
|
||||
<div class="sun-title-right">{{ rightDate }}</div>
|
||||
<div class="sun-title-left">
|
||||
{{ dateInfo?.day }} {{ dateInfo?.times }}<span style="margin-left: 10px">{{ rightDate }}</span>
|
||||
</div>
|
||||
<div class="sun-title-center">{{ getCenterInfo.screenTitle || '健康服务中心' }}</div>
|
||||
<div class="sun-title-right">
|
||||
<a-button class="top-right-button" @click="toOther">健康监测大屏</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sun-body-content">
|
||||
<div class="sun-body-left">
|
||||
@@ -14,10 +18,13 @@
|
||||
<div class="sun-body-left-two">
|
||||
<twoL @handle-view="handleTwoLClick" :center-id="centerId" :bKey="`two-l-${count}`" />
|
||||
</div>
|
||||
<div class="sun-body-left-three" style="margin-bottom: 0">
|
||||
<div class="sun-body-left-three">
|
||||
<!-- <threeL />-->
|
||||
<threeNewL :bKey="`three-l-${count}`" :center-id="centerId" />
|
||||
</div>
|
||||
<div class="sun-body-left-four" style="margin-bottom: 0">
|
||||
<threeR @handle-click="handleThreeRClick" :center-id="centerId" :bKey="`four-l-${count}`" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="sun-body-center">
|
||||
<CenterMap
|
||||
@@ -26,15 +33,18 @@
|
||||
@clear-hospital-list="clearHospitalList"
|
||||
:show-rest-b="showRestB"
|
||||
@handle-detail="handleCenterMapClick"
|
||||
:map-bottom-info="mapBottom"
|
||||
:show-map-bottom="showMapBottom"
|
||||
@show-rest-b="
|
||||
() => {
|
||||
showRestB = false;
|
||||
showMapBottom = false;
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="sun-body-right">
|
||||
<div class="sun-body-right-one">
|
||||
<div class="sun-body-right-one" style="height: calc((100% - 350px) / 2 - 10px); margin-bottom: 10px">
|
||||
<oneR
|
||||
@handle-view="handleOneRClick"
|
||||
@show-reset="
|
||||
@@ -45,11 +55,11 @@
|
||||
:bKey="`one-r-${count}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="sun-body-right-two">
|
||||
<twoR @handle-click="handleTwoRClick" :center-id="centerId" :bKey="`two-r-${count}`" />
|
||||
<div class="sun-body-right-two" style="height: calc((100% - 350px) / 2 - 10px); margin-bottom: 10px">
|
||||
<rwo-new-r :center-id="centerId" :bKey="`two-n-r-${count}`" @handle-view="handleTwoNewRClick" />
|
||||
</div>
|
||||
<div class="sun-body-right-three">
|
||||
<threeR @handle-click="handleThreeRClick" :center-id="centerId" :bKey="`three-r-${count}`" />
|
||||
<div class="sun-body-right-three" style="height: 350px">
|
||||
<twoR @handle-click="handleTwoRClick" :center-id="centerId" :bKey="`two-r-${count}`" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -86,10 +96,13 @@
|
||||
centerMapFromList,
|
||||
columns,
|
||||
fromLists,
|
||||
infoContentSpecial,
|
||||
threeRModalColumns,
|
||||
threeRModalFromList,
|
||||
towRcolumns,
|
||||
twoRform,
|
||||
twoRNewColumns,
|
||||
twoRNewForm,
|
||||
} from '/@/views/indexSun/indexSun.ts';
|
||||
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import PhoneDialog from '/@/views/components/phoneDialog/phoneDialog.vue';
|
||||
@@ -114,8 +127,10 @@
|
||||
twoRModal1Api,
|
||||
twoRModal2Api,
|
||||
twoRModal3Api,
|
||||
twoRNApi,
|
||||
} from '/@/views/indexSun/indexSun.api.ts';
|
||||
import dayjs from 'dayjs';
|
||||
import RwoNewR from '/@/views/indexSun/rwoNewR.vue';
|
||||
//0:处置 1:处理 2:呼入 3:全部
|
||||
const phoneType = ref('');
|
||||
const phoneDialogTitle = ref('呼入电话');
|
||||
@@ -137,6 +152,8 @@
|
||||
const qhInterval = ref();
|
||||
const cInterval = ref();
|
||||
const initDate = ref(startTime);
|
||||
const mapBottom = ref({});
|
||||
const showMapBottom = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
getTime();
|
||||
@@ -152,6 +169,7 @@
|
||||
rightDate.value = '累计运行时间：' + (dayjs().diff(dayjs(initDate.value), 'days') + 1) + ' 天';
|
||||
const centerInfo = getAuthCache('centerInfo');
|
||||
centerId.value = centerInfo.id;
|
||||
document.title = centerInfo.screenTitle || '健康服务中心';
|
||||
});
|
||||
|
||||
const getTime = () => {
|
||||
@@ -167,6 +185,10 @@
|
||||
}
|
||||
);
|
||||
|
||||
function toOther() {
|
||||
window.open('http://aygc.jy.pc.iosp.ydpt.tech/envShow/envFullscreen', '_blank');
|
||||
}
|
||||
|
||||
function handleOneLeftClick(item) {
|
||||
const { name, key } = item;
|
||||
//呼入电话
|
||||
@@ -213,53 +235,77 @@
|
||||
const employeeDialogRef = ref();
|
||||
|
||||
function employeeDialogOpen() {
|
||||
setSocketData({
|
||||
userId: '001a9878fdaf401c844a03e2fc7c370b',
|
||||
realName: '曹燕',
|
||||
lon: 87.587482,
|
||||
lat: 43.856052,
|
||||
setSocketData1({
|
||||
userId: '1942871719583739905',
|
||||
phone: '15129287781',
|
||||
realName: '连龙刚',
|
||||
lon: 108.94734,
|
||||
lat: 34.218951,
|
||||
sex: 2,
|
||||
age: 40,
|
||||
orgCode: 'A01A33A05',
|
||||
orgName: '地质研究所',
|
||||
age: 37,
|
||||
orgCode: 'A01A01A02',
|
||||
orgName: '硬件部',
|
||||
departCode: 'A01A01',
|
||||
departName: '软硬件开发部',
|
||||
hospitalList: [
|
||||
{
|
||||
id: null,
|
||||
name: '交大一附院',
|
||||
lat: 34.22,
|
||||
lon: 108.94,
|
||||
name: '吉祥作业区',
|
||||
lat: 44.000833,
|
||||
lon: 89.214722,
|
||||
type: null,
|
||||
centerResource: false,
|
||||
manageName: null,
|
||||
managePhone: null,
|
||||
address: null,
|
||||
ambulance: null,
|
||||
docNum: null,
|
||||
nurseNum: null,
|
||||
expertNum: null,
|
||||
distance: null,
|
||||
distance: '383km',
|
||||
},
|
||||
{
|
||||
id: null,
|
||||
name: '高新医院',
|
||||
lat: 34.23,
|
||||
lon: 108.88,
|
||||
name: '吉祥作业区',
|
||||
lat: 44.000833,
|
||||
lon: 89.214722,
|
||||
type: null,
|
||||
centerResource: false,
|
||||
manageName: null,
|
||||
managePhone: null,
|
||||
address: null,
|
||||
ambulance: null,
|
||||
docNum: null,
|
||||
nurseNum: null,
|
||||
expertNum: null,
|
||||
distance: null,
|
||||
distance: '383km',
|
||||
},
|
||||
{
|
||||
id: null,
|
||||
name: '人民医院',
|
||||
lat: 34.24,
|
||||
lon: 108.93,
|
||||
name: '页岩油作业区',
|
||||
lat: 44.233333,
|
||||
lon: 89.105278,
|
||||
type: null,
|
||||
centerResource: false,
|
||||
manageName: null,
|
||||
managePhone: null,
|
||||
address: null,
|
||||
ambulance: null,
|
||||
docNum: null,
|
||||
nurseNum: null,
|
||||
expertNum: null,
|
||||
distance: null,
|
||||
distance: '363km',
|
||||
},
|
||||
],
|
||||
type: '0',
|
||||
centerId: '1940693902422519809',
|
||||
popType: 1,
|
||||
queue: null,
|
||||
noticeId: null,
|
||||
careLiaisonName: '周飞飞',
|
||||
careLiaisonPhone: '18800001111',
|
||||
lifeguardName: '李林林',
|
||||
lifeguardPhone: '15511110000',
|
||||
});
|
||||
emergencyDialogRef.value.openDialog();
|
||||
}
|
||||
@@ -297,38 +343,95 @@
|
||||
|
||||
async function confirmHelp(data) {
|
||||
if (!data.lon) return;
|
||||
hospitalList.value = [];
|
||||
Map.removeOverlayGroup();
|
||||
hospitalList.value = data.hospitalList;
|
||||
// showHospitalList.value = true;
|
||||
//用户的坐标信息
|
||||
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);
|
||||
});
|
||||
// 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');
|
||||
// }
|
||||
mapBottom.value = data;
|
||||
// mapBottom.value['careLiaisonName'] = '1';
|
||||
// mapBottom.value['careLiaisonPhone'] = '1';
|
||||
// mapBottom.value['lifeguardName'] = '1';
|
||||
// mapBottom.value['lifeguardPhone'] = '1';
|
||||
showMapBottom.value = true;
|
||||
const arr = Map.createOverlay(
|
||||
[...hospitalList.value, { latitude: data.lat, longitude: data.lon }],
|
||||
{
|
||||
content: (val) => {
|
||||
return `<div style="
|
||||
width: 21px;
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: -20px;" title="${val?.name}">
|
||||
</div>`;
|
||||
},
|
||||
},
|
||||
async (val) => {
|
||||
if (val.type == '3') {
|
||||
Map.createInfoModal({ option: val, content: infoContentSpecial(val) });
|
||||
} else if (val.type == '4') {
|
||||
Map.createInfoModal({ option: val, content: infoContentSpecial(val) });
|
||||
} else {
|
||||
Map.createInfoModal({ option: val, content: infoContentSpecial(val) });
|
||||
}
|
||||
Map.clearNaviLine();
|
||||
Map.createNaviLine([val.lon, val.lat], [data.lon, data.lat]);
|
||||
// const viewBtn = document.getElementById(val.id);
|
||||
// viewBtn.onclick = () => {
|
||||
// handleClcikDetail(val);
|
||||
// };
|
||||
('');
|
||||
},
|
||||
true,
|
||||
'1'
|
||||
);
|
||||
|
||||
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);
|
||||
Map.map.setFitView([...arr, Map.emergencyMarker], false, [180, 180, 180, 180]);
|
||||
})
|
||||
.catch((err) => {
|
||||
Map.map.setFitView(arr, false, [180, 180, 180, 180]);
|
||||
});
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
let t = '';
|
||||
let r = '';
|
||||
if (item.distance > 2000) {
|
||||
const { time, routeList } = await getDriveTime(userLocation, [item.lon, item.lat]);
|
||||
t = time;
|
||||
r = routeList;
|
||||
} else {
|
||||
const { time, routeList } = await getWalkingTime(userLocation, [item.lon, item.lat]);
|
||||
t = time;
|
||||
r = routeList;
|
||||
}
|
||||
item.driveTime = t;
|
||||
item.routeList = r;
|
||||
item.userLocation = userLocation;
|
||||
return item; // 返回更新后的医院条目
|
||||
});
|
||||
@@ -337,7 +440,8 @@
|
||||
|
||||
function getDistance(userLocation, destination) {
|
||||
const value = Map.getDistance(userLocation, destination);
|
||||
return value > 1000 ? (value / 1000).toFixed(2) + 'km' : parseInt(value) + 'm';
|
||||
// return value > 1000 ? (value / 1000).toFixed(2) + 'km' : parseInt(value) + 'm';
|
||||
return value;
|
||||
}
|
||||
|
||||
async function getDriveTime(userLocation, destination) {
|
||||
@@ -367,6 +471,33 @@
|
||||
};
|
||||
}
|
||||
}
|
||||
async function getWalkingTime(userLocation, destination) {
|
||||
let { time, steps } = await Map.getWalkingTime(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 = [];
|
||||
@@ -421,7 +552,22 @@
|
||||
indexModalRef.value.openDialog();
|
||||
});
|
||||
}
|
||||
function handleCenterMapClick(res) {
|
||||
|
||||
function handleTwoNewRClick() {
|
||||
indexColumn.value = twoRNewColumns;
|
||||
firstFormOne.value = twoRNewForm;
|
||||
const params = {
|
||||
centerId: centerId.value,
|
||||
};
|
||||
indexModalTitle.value = '重点关爱趋势预警';
|
||||
modalApi.value = twoRNApi;
|
||||
apiParams.value = params;
|
||||
nextTick(() => {
|
||||
indexModalRef.value.openDialog();
|
||||
});
|
||||
}
|
||||
|
||||
function handleCenterMapClick(res: any) {
|
||||
indexColumn.value = centerMapColumns;
|
||||
firstFormOne.value = centerMapFromList;
|
||||
const params = {
|
||||
@@ -447,14 +593,21 @@
|
||||
background: url('/@/assets/indexSun/bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
font-size: 22px;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
|
||||
.sun-title-left,
|
||||
.sun-title-left {
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
line-height: 60px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.sun-title-right {
|
||||
width: 23%;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
line-height: 50px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.sun-title-center {
|
||||
@@ -491,9 +644,7 @@
|
||||
}
|
||||
|
||||
.sun-body-left {
|
||||
.sun-body-left-one,
|
||||
.sun-body-left-two,
|
||||
.sun-body-left-three {
|
||||
> div {
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #00ccff;
|
||||
border-radius: 14px;
|
||||
@@ -501,28 +652,36 @@
|
||||
.one-l-box,
|
||||
.two-l-box,
|
||||
.three-l-box,
|
||||
.three-r-box,
|
||||
.three-new-l {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.sun-body-left-one {
|
||||
height: 27%;
|
||||
height: 20%;
|
||||
}
|
||||
|
||||
.sun-body-left-two {
|
||||
height: 34%;
|
||||
}
|
||||
|
||||
.sun-body-left-two,
|
||||
.sun-body-left-three {
|
||||
height: 36%;
|
||||
height: 28%;
|
||||
}
|
||||
.sun-body-left-four {
|
||||
height: 18%;
|
||||
}
|
||||
}
|
||||
|
||||
.sun-body-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.sun-body-right-one,
|
||||
.sun-body-right-two,
|
||||
.sun-body-right-three {
|
||||
border: 1px solid #00ccff;
|
||||
border-radius: 14px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.one-r-box,
|
||||
.two-r-box,
|
||||
@@ -530,19 +689,22 @@
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.sun-body-right-one {
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
.sun-body-right-two {
|
||||
height: 42%;
|
||||
}
|
||||
|
||||
.sun-body-right-three {
|
||||
height: 26%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-right-button {
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
width: 160px;
|
||||
height: 40px;
|
||||
background: radial-gradient(ellipse at center, #082147 0%, #08254c 55%, #085faa 100%);
|
||||
border-radius: 8px;
|
||||
border: 1px solid #55d3ff;
|
||||
}
|
||||
|
||||
:deep(.amap-info-close) {
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -63,27 +63,50 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hospital-list" :class="[themeType]" v-if="showHospitalList">
|
||||
<div class="hospital-item" v-for="(item, index) in hospitalList" :key="index" @click.stop="showDrivingLine(item)">
|
||||
<div>{{ item?.name }}</div>
|
||||
<div>相距{{ item?.distance }}</div>
|
||||
<div>驾车大约{{ item?.driveTime }}</div>
|
||||
<div class="hospital-list" :class="[themeType]" v-if="showMapBottom">
|
||||
<!-- <div class="hospital-item" v-for="(item, index) in hospitalList" :key="index" @click.stop="showDrivingLine(item)">-->
|
||||
<!-- <div>{{ item?.name }}</div>-->
|
||||
<!-- <div>相距{{ item?.distance }}</div>-->
|
||||
<!-- <div>驾车大约{{ item?.driveTime }}</div>-->
|
||||
<!-- </div>-->
|
||||
<div class="map-bottom">
|
||||
<div>
|
||||
<div class="title">关爱联络员</div>
|
||||
<template v-if="mapBottomInfo?.careLiaisonName && mapBottomInfo?.careLiaisonPhone">
|
||||
<div>{{ mapBottomInfo?.careLiaisonName }}</div>
|
||||
<div>{{ mapBottomInfo?.careLiaisonPhone }}</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="no-data"> 该员工暂未设置关爱联络员 <img :src="pointPng" alt="" /></div>
|
||||
</template>
|
||||
</div>
|
||||
<div>
|
||||
<div class="title">急救人员</div>
|
||||
<template v-if="mapBottomInfo?.lifeguardName && mapBottomInfo?.lifeguardPhone">
|
||||
<div>{{ mapBottomInfo?.lifeguardName }}</div>
|
||||
<div>{{ mapBottomInfo?.lifeguardPhone }}</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="no-data"> 该员工暂未设置急救人员 <img :src="pointPng" alt="" /></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, ref, watch } from 'vue';
|
||||
import { infoContent, infoContent1, legendList, tabList } from '/@/views/indexSun/indexSun.ts';
|
||||
import { infoContent, infoContent1, infoContent4, legendList, tabList } from '/@/views/indexSun/indexSun.ts';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { innerLineLight, outerLineOption } from '/@/assets/mapUtils/mapConstant.ts';
|
||||
import { Map } from '/@/assets/mapUtils/map.ts';
|
||||
import { aircraft, getKmStr, getTimeStr, mapApiSwitch, TabType } from '/@/components/xianMap/xianMapHooks.ts';
|
||||
import { getKmStr, getTimeStr, mapApiSwitch } from '/@/components/xianMap/xianMapHooks.ts';
|
||||
import { useDetailStore } from '/@/store/modules/detailData.ts';
|
||||
import $bus from '/@/utils/bus.ts';
|
||||
import { earlyWarning } from '/@/utils/busConstant.ts';
|
||||
import { useTheme } from '/@/hooks/theme/useTheme.ts';
|
||||
import { RedoOutlined } from '@ant-design/icons-vue';
|
||||
import pointPng from '/@/assets/indexSun/point.png';
|
||||
|
||||
const { themeType } = useTheme();
|
||||
const list = ref(tabList);
|
||||
@@ -116,6 +139,14 @@
|
||||
return [];
|
||||
},
|
||||
},
|
||||
mapBottomInfo: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
showMapBottom: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
});
|
||||
const useDetail = useDetailStore();
|
||||
const showRoutePanel = ref(false);
|
||||
@@ -297,8 +328,10 @@
|
||||
},
|
||||
},
|
||||
async (val) => {
|
||||
if (val.type == '2') {
|
||||
if (val.type == '3') {
|
||||
Map.createInfoModal({ option: val, content: infoContent(val) });
|
||||
} else if (val.type == '4') {
|
||||
Map.createInfoModal({ option: val, content: infoContent4(val) });
|
||||
} else {
|
||||
Map.createInfoModal({ option: val, content: infoContent1(val) });
|
||||
}
|
||||
@@ -569,6 +602,13 @@
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
.top-left-a-right {
|
||||
width: 48px;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #02fafc 0%, rgba(2, 250, 252, 0) 100%);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.modal-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -724,4 +764,35 @@
|
||||
:deep(.amap-sug-result) {
|
||||
background: #002e64 !important;
|
||||
}
|
||||
|
||||
.map-bottom {
|
||||
border-radius: 10px;
|
||||
background: #073148;
|
||||
width: 570px;
|
||||
height: 100px;
|
||||
padding: 5px 0;
|
||||
display: flex;
|
||||
line-height: 30px;
|
||||
> div {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
.title {
|
||||
color: #45ffa1;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
class="table-container"
|
||||
:api="api"
|
||||
:key="visible"
|
||||
:columns="column"
|
||||
:columns="props.column"
|
||||
:apiParams="formState"
|
||||
/>
|
||||
</template>
|
||||
@@ -56,9 +56,7 @@
|
||||
import Dialog from '/@/components/dialog/Dialog.vue';
|
||||
import { useDialog } from '/@/views/components/dialogHooks.ts';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { SexType } from '/@/utils/settings.ts';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
|
||||
import { allSecondaryDepartsApi, getThreeDepartByOrgCodeApi } from '/@/views/indexSun/indexSun.api.ts';
|
||||
import dayjs from 'dayjs';
|
||||
@@ -304,6 +302,7 @@
|
||||
...formState.value,
|
||||
...formRecord.value,
|
||||
salvageUserDepart: '',
|
||||
...props.apiParams,
|
||||
};
|
||||
}
|
||||
defineExpose({
|
||||
|
||||
@@ -17,22 +17,26 @@ enum Api {
|
||||
twoRModal3 = '/health-emergency/emergency/LargeScreenNew/healthBloodPressure',
|
||||
roomDetail = '/health-emergency/emergency/LargeScreenNew/healthRoomDetail',
|
||||
getSecondaryDepartment = '/sys/sysDepart/allSecondaryDeparts',
|
||||
twoRN = '/health-emergency/emergency/LargeScreenNew/loveTrend',
|
||||
nearResources = '/health-emergency/emergency/LargeScreenNew/nearResources',
|
||||
}
|
||||
|
||||
export const statisticsNewApi = (params) => post(Api.statisticsNew, params);
|
||||
export const twoLApi = (params) => get(Api.twoL, params);
|
||||
export const twoLModalApi = (params) => get(Api.twoLModal, params);
|
||||
export const oneLApi = (params) => post(Api.oneL, params);
|
||||
export const threeLApi = (params) => post(Api.threeL, params);
|
||||
export const oneRApi = (params) => get(Api.oneR, params);
|
||||
export const threeRApi = (params) => post(Api.threeR, params);
|
||||
export const twoRApi = (params) => post(Api.twoR, params);
|
||||
export const statisticsNewApi = (params: any) => post(Api.statisticsNew, params);
|
||||
export const twoLApi = (params: any) => get(Api.twoL, params);
|
||||
export const twoLModalApi = (params: any) => get(Api.twoLModal, params);
|
||||
export const oneLApi = (params: any) => post(Api.oneL, params);
|
||||
export const threeLApi = (params: any) => post(Api.threeL, params);
|
||||
export const oneRApi = (params: any) => get(Api.oneR, params);
|
||||
export const threeRApi = (params: any) => post(Api.threeR, params);
|
||||
export const twoRApi = (params: any) => post(Api.twoR, params);
|
||||
export const twoRNApi = (params: any) => get(Api.twoRN, params);
|
||||
export const nearResourcesApi = (params: any) => get(Api.nearResources, params);
|
||||
|
||||
export const threeRModalApi = (params) => post(Api.threeRModal, params);
|
||||
export const twoRModal1Api = (params) => post(Api.twoRModal1, params);
|
||||
export const twoRModal2Api = (params) => post(Api.twoRModal2, params);
|
||||
export const twoRModal3Api = (params) => post(Api.twoRModal3, params);
|
||||
export const roomDetailApi = (params) => post(Api.roomDetail, params);
|
||||
export const threeRModalApi = (params: any) => post(Api.threeRModal, params);
|
||||
export const twoRModal1Api = (params: any) => post(Api.twoRModal1, params);
|
||||
export const twoRModal2Api = (params: any) => post(Api.twoRModal2, params);
|
||||
export const twoRModal3Api = (params: any) => post(Api.twoRModal3, params);
|
||||
export const roomDetailApi = (params: any) => post(Api.roomDetail, params);
|
||||
export const getSecondaryDepartmentList = () => get({ url: Api.getSecondaryDepartment });
|
||||
export const allSecondaryDepartsApi = (params) => get(Api.allSecondaryDeparts, params);
|
||||
export const getThreeDepartByOrgCodeApi = (params) => get(Api.getThreeDepartByOrgCode, params);
|
||||
export const allSecondaryDepartsApi = (params: any) => get(Api.allSecondaryDeparts, params);
|
||||
export const getThreeDepartByOrgCodeApi = (params: any) => get(Api.getThreeDepartByOrgCode, params);
|
||||
|
||||
+192
-11
@@ -1,17 +1,17 @@
|
||||
import * as echarts from 'echarts';
|
||||
import { legend1, legend2, legend3, legend4, legend5 } from '/@/components/xianMap/xianMapHooks.ts';
|
||||
import { checkTypeList, initatorTypee, isTrueOfFalse, normalTypeList, SexType, sexTypeList, sexTypeListNew } from '/@/utils/settings.ts';
|
||||
import { getDictByCode, getDictByCode2 } from '/@/views/index.api.ts';
|
||||
import { get } from '/@/api/request';
|
||||
import { initatorTypee, isTrueOfFalse, SexType, sexTypeList, sexTypeListNew } from '/@/utils/settings.ts';
|
||||
import { getDictByCode2 } from '/@/views/index.api.ts';
|
||||
import dayjs from 'dayjs';
|
||||
export const legend1 = new URL('/@/assets/img/legend1.png', import.meta.url).href;
|
||||
export const legend2 = new URL('/@/assets/img/legend5.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 checkData = await (async () => {
|
||||
return await getDictByCode2({ dictCode: 'xj_check_type' });
|
||||
})();
|
||||
|
||||
export function getClassCharts(dx, dy, m) {
|
||||
export function getClassCharts(dx: any, dy: any, m: any) {
|
||||
return {
|
||||
grid: {
|
||||
top: 40,
|
||||
@@ -61,14 +61,14 @@ export function getClassCharts(dx, dy, m) {
|
||||
min: 0, // 起始 - 设置y轴刻度的最小值
|
||||
axisLabel: {
|
||||
color: '#65C6E7',
|
||||
formatter: function (value, index) {
|
||||
formatter: function (value: any) {
|
||||
return value;
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: dy.map((item) => {
|
||||
data: dy.map((item: any) => {
|
||||
return {
|
||||
value: item,
|
||||
itemStyle: {
|
||||
@@ -99,7 +99,8 @@ export function getClassCharts(dx, dy, m) {
|
||||
export enum TabType {
|
||||
all = '', //所有资源
|
||||
youTianYiYuan = '1', //油田医院
|
||||
jianKangXiaoWu = '2', //健康小屋
|
||||
jianKangXiaoWu = '3', //健康小屋
|
||||
aed = '4', //AED
|
||||
jiuHuChe = '5', //救护车
|
||||
}
|
||||
export const tabList = [
|
||||
@@ -119,6 +120,10 @@ export const tabList = [
|
||||
name: '救护车',
|
||||
type: TabType.jiuHuChe,
|
||||
},
|
||||
{
|
||||
name: 'AED',
|
||||
type: TabType.aed,
|
||||
},
|
||||
{
|
||||
name: '急救路线',
|
||||
},
|
||||
@@ -127,9 +132,10 @@ export const legendList = [
|
||||
{ img: legend2, text: '健康小屋', color: '#1BEFF6' },
|
||||
{ img: legend1, text: '油田医院', color: '#D86AF7' },
|
||||
{ img: legend3, text: '救护车', color: '#EE7E31' },
|
||||
{ img: legend4, text: 'AED', color: '#F23F3D' },
|
||||
];
|
||||
|
||||
export function infoContent(res) {
|
||||
export function infoContent(res: any) {
|
||||
return `
|
||||
<div class="modal-box">
|
||||
<div class="modal-item">
|
||||
@@ -149,7 +155,7 @@ export function infoContent(res) {
|
||||
</div>
|
||||
</div> `;
|
||||
}
|
||||
export function infoContent1(res) {
|
||||
export function infoContent1(res: any) {
|
||||
return `
|
||||
<div class="modal-box modal-box-normal">
|
||||
<div class="modal-item">
|
||||
@@ -162,6 +168,53 @@ export function infoContent1(res) {
|
||||
</div>
|
||||
</div> `;
|
||||
}
|
||||
export function infoContent4(res: any) {
|
||||
return `
|
||||
<div class="modal-box modal-box-normal">
|
||||
<div class="modal-item">
|
||||
<span class="item-one">AED名称：</span>
|
||||
<span class="item-two">${res.name ? res.name : '--'}</span>
|
||||
</div>
|
||||
<div class="modal-item">
|
||||
<div class="item-one">地点：</div>
|
||||
<div class="item-two" style="text-align: right">${res.address || '--'}</div>
|
||||
</div>
|
||||
</div> `;
|
||||
}
|
||||
export function infoContentSpecial(res: any) {
|
||||
return `
|
||||
<div class="modal-box" style="width: 400px !important;height: auto !important;line-height: 2.5">
|
||||
<div style="text-align: center;color: #5CFBFF;display: flex;align-items: center;justify-content: center">
|
||||
<div class="top-left-a-right" style="transform: rotate(180deg)"></div>
|
||||
<div style="margin: 0 10px;font-size: 16px">${res.type === '1' ? '油田医院' : res.type === '4' ? 'AED' : '健康小屋'}</div>
|
||||
<div class="top-left-a-right"></div>
|
||||
</div>
|
||||
<div class="modal-item" style="justify-content: flex-start">
|
||||
<div class="item-one" style="width: auto !important;">地址：</div>
|
||||
<div class="item-two" style="text-align: left: color: #5CFBFF; flex: 1">${res.address || '--'}</div>
|
||||
</div>
|
||||
<div class="modal-item" style="justify-content: flex-start">
|
||||
<div style="display: flex; flex: 1">
|
||||
<div class="item-one" style="width: auto !important;">相距：</div>
|
||||
<div class="item-two" style="text-align: left: color: #5CFBFF; flex: 1">${res.distance > 1000 ? (res.distance / 1000).toFixed(2) + 'km' : parseInt(res.distance) + 'm' || '--'}</div>
|
||||
</div>
|
||||
<div style="display: flex; flex: 1">
|
||||
<div class="item-one" style="width: auto !important;">${res.distance > 2000 ? '驾车' : '步行'}：</div>
|
||||
<div class="item-two" style="text-align: left: color: #5CFBFF; flex: 1">${res.driveTime || '--'}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-item" style="justify-content: flex-start">
|
||||
<div style="display: flex; flex: 1">
|
||||
<div class="item-one" style="width: auto !important;">联系人：</div>
|
||||
<div class="item-two" style="text-align: left: color: #5CFBFF; flex: 1">${res.manageName || '--'}</div>
|
||||
</div>
|
||||
<div style="display: flex; flex: 1">
|
||||
<div class="item-one" style="width: auto !important;">联系电话：</div>
|
||||
<div class="item-two" style="text-align: left: color: #5CFBFF; flex: 1">${res.managePhone || '--'}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> `;
|
||||
}
|
||||
const columns1 = [
|
||||
{
|
||||
title: '姓名',
|
||||
@@ -517,7 +570,7 @@ const towRcolumn3 = [
|
||||
key: 'inputDate',
|
||||
},
|
||||
];
|
||||
export function twoRform(type) {
|
||||
export function twoRform(type: any) {
|
||||
return [
|
||||
{
|
||||
label: '员工姓名',
|
||||
@@ -635,3 +688,131 @@ export const centerMapFromList = [
|
||||
defaultValue: '',
|
||||
},
|
||||
];
|
||||
|
||||
export const twoRNewColumns = [
|
||||
{
|
||||
title: '单位',
|
||||
dataIndex: 'workUnit',
|
||||
key: 'workUnit',
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
dataIndex: 'sex',
|
||||
key: 'sex',
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
customRender: ({ text }) => {
|
||||
if (text == '1') {
|
||||
return '女';
|
||||
} else {
|
||||
return '男';
|
||||
}
|
||||
},
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
title: '身高',
|
||||
dataIndex: 'height',
|
||||
key: 'height',
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
title: '体重',
|
||||
dataIndex: 'weight',
|
||||
key: 'weight',
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
title: 'BMI',
|
||||
dataIndex: 'bmi',
|
||||
key: 'bmi',
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
title: '肥胖人员',
|
||||
dataIndex: 'flagFat',
|
||||
key: 'flagFat',
|
||||
customRender: ({ text }) => {
|
||||
if (text == '1') {
|
||||
return '是';
|
||||
} else {
|
||||
return '否';
|
||||
}
|
||||
},
|
||||
width: 70,
|
||||
},
|
||||
{
|
||||
title: '高血压',
|
||||
dataIndex: 'hypertension',
|
||||
key: 'hypertension',
|
||||
customRender: ({ text }) => {
|
||||
if (text == '1') {
|
||||
return '是';
|
||||
} else {
|
||||
return '否';
|
||||
}
|
||||
},
|
||||
width: 70,
|
||||
},
|
||||
{
|
||||
title: '糖尿病',
|
||||
dataIndex: 'diabetes',
|
||||
key: 'diabetes',
|
||||
customRender: ({ text }) => {
|
||||
if (text == '1') {
|
||||
return '是';
|
||||
} else {
|
||||
return '否';
|
||||
}
|
||||
},
|
||||
width: 70,
|
||||
},
|
||||
{
|
||||
title: '关爱状态',
|
||||
dataIndex: 'dataLevel',
|
||||
key: 'dataLevel',
|
||||
customRender: ({ text }) => {
|
||||
if (text == '1') {
|
||||
return '是';
|
||||
} else {
|
||||
return '否';
|
||||
}
|
||||
},
|
||||
width: 70,
|
||||
},
|
||||
{
|
||||
title: '填报日期',
|
||||
dataIndex: 'updateDate',
|
||||
key: 'updateDate',
|
||||
customRender: ({ text, record }) => {
|
||||
return text ? dayjs(text).format('YYYY-MM-DD') : dayjs(record.createDate).format('YYYY-MM-DD');
|
||||
},
|
||||
width: 90,
|
||||
},
|
||||
];
|
||||
|
||||
export const twoRNewForm = [
|
||||
{
|
||||
label: '姓名',
|
||||
field: 'name',
|
||||
type: 'input',
|
||||
placeholder: '请输入姓名',
|
||||
defaultValue: '',
|
||||
},
|
||||
{
|
||||
label: '单位',
|
||||
field: 'orgName',
|
||||
type: 'input',
|
||||
placeholder: '请输入单位',
|
||||
defaultValue: '',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -50,8 +50,8 @@
|
||||
const { LEFT_KEY1 } = caching;
|
||||
const props = defineProps({
|
||||
bKey: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
<template v-if="scrollList.length > 0">
|
||||
<vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :copyNum="3" :limitScrollNum="5" v-bind="{ step: step }">
|
||||
<div class="item-d" v-for="(item, index) in scrollList" :key="index">
|
||||
<div>{{ item.realName }}</div>
|
||||
<div style="color: #f6ff00">{{ item.eventType_dictText }}{{ item.dataValue ? `(${item.dataValue})` : '' }}</div>
|
||||
<div>{{ item.warnTime }}</div>
|
||||
<div style="flex: 1">{{ item.realName }}</div>
|
||||
<div style="color: #f6ff00; flex: 1">{{ item.eventType_dictText }}{{ item.dataValue ? `(${item.dataValue})` : '' }}</div>
|
||||
<div class="item-d-img">
|
||||
<span style="margin-right: 20px">{{ item.warnTime }}</span>
|
||||
<img :src="pointPng" alt="" @click="handlePolice(item)" />
|
||||
<img :src="addressPng" alt="" @click="sendPosition(item)" />
|
||||
</div>
|
||||
@@ -85,8 +85,8 @@
|
||||
|
||||
const props = defineProps({
|
||||
bKey: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -0,0 +1,245 @@
|
||||
export const list = [
|
||||
{
|
||||
label: '姓名',
|
||||
field: 'name',
|
||||
span: 12,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '关爱联络员',
|
||||
field: '',
|
||||
span: 12,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '单位',
|
||||
field: 'workNoUnit',
|
||||
span: 24,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '肥胖人员',
|
||||
field: 'flagFat',
|
||||
span: 8,
|
||||
options: [
|
||||
{
|
||||
label: '是',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '否',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '身高(cm)',
|
||||
field: 'height',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '体重(kg)',
|
||||
field: 'weight',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: 'BMI',
|
||||
field: 'bmi',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '体重管理目标',
|
||||
field: 'targetWeight',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '目前BMI监测值',
|
||||
field: 'bmiCurrent',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '高血压',
|
||||
field: 'hypertension',
|
||||
span: 24,
|
||||
options: [
|
||||
{
|
||||
label: '否',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: '是',
|
||||
value: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '收缩压平均值',
|
||||
field: 'systolicPressureAvg',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '血压控制目标(收缩压)',
|
||||
field: 'systolicPressureTarget',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '目前收缩压监测值',
|
||||
field: 'systolicPressureCurrent',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '舒张压平均值',
|
||||
field: 'diastolicPressureAvg',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '血压控制目标(舒张压)',
|
||||
field: 'diastolicPressureTarget',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '目前舒张压监测值',
|
||||
field: 'diastolicPressureCurrent',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '糖尿病',
|
||||
field: 'diabetes',
|
||||
span: 24,
|
||||
options: [
|
||||
{
|
||||
label: '否',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: '是',
|
||||
value: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '空腹葡萄糖(GLU)',
|
||||
field: 'glu',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '血糖控制目标',
|
||||
field: 'bloodSugarTarget',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '目前血糖监测值',
|
||||
field: 'bloodSugarCurrent',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '低密度脂蛋白(LDL)',
|
||||
field: 'ldl',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: 'LDL控制目标',
|
||||
field: 'ldlTarget',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '目前LDL监测值',
|
||||
field: 'ldlCurrent',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '总胆固醇(TC)',
|
||||
field: 'tc',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: 'TC控制目标',
|
||||
field: 'tcTarget',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '目前TC监测值',
|
||||
field: 'tcCurrent',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '甘油三酯(TG)',
|
||||
field: 'tg',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: 'TG控制目标',
|
||||
field: 'tgTarget',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '目前TG监测值',
|
||||
field: 'tgCurrent',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '尿酸',
|
||||
field: 'uricAcid',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '血尿酸控制目标',
|
||||
field: 'uricAcidTarget',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '目前血尿酸监测值',
|
||||
field: 'uricAcidCurrent',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '同型半胱氨酸',
|
||||
field: 'homocysteine',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '同型半胱氨酸控制目标',
|
||||
field: 'homocysteineTarget',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '目前同型半胱氨酸监测值',
|
||||
field: 'homocysteineCurrent',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
];
|
||||
|
||||
export function getName(text: string, list: any[]) {
|
||||
const res = list.filter((item) => item.value == text);
|
||||
console.log(res);
|
||||
return res && res.length > 0 ? res[0].label : '-';
|
||||
}
|
||||
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div class="one-r-box">
|
||||
<div class="title">
|
||||
<span>重点关爱趋势预警</span>
|
||||
<span class="look-view" @click="handleView">查看详情</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-item">
|
||||
<template v-if="scrollList.length > 0">
|
||||
<vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :copyNum="3" :limitScrollNum="5" v-bind="{ step: step }">
|
||||
<div class="item-d" v-for="(item, index) in scrollList" :key="index">
|
||||
<div style="flex: 1">{{ item.name }}</div>
|
||||
<div style="margin-right: 20px">{{ item.sex }}-{{ item.age ? item.age + '岁' : '' }}</div>
|
||||
<div class="item-d-img">
|
||||
{{ item.updateDate ? dayjs(item.updateDate).format('YYYY-MM-DD') : dayjs(item.createDate).format('YYYY-MM-DD') }}
|
||||
<img :src="pointPng" alt="" @click="handlePolice(item)" />
|
||||
</div>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center">
|
||||
<Empty :description="'暂无数据'" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<Dialog :openVis="openInfor" width="40%" title="关爱人员详情" @close="handlePoliceClose">
|
||||
<template #container>
|
||||
<div class="police-con" :class="[themeType]">
|
||||
<Row type="flex">
|
||||
<Col v-for="(item, index) in filedList" :key="`filed-list-${index}`" :span="item.span">
|
||||
<div class="col-d">
|
||||
<div style="width: 180px; text-align: right">{{ item.label }}：</div>
|
||||
<div style="flex: 1">
|
||||
<template v-if="!item.options">
|
||||
{{ userInfo?.[item.field] && userInfo?.[item.field] !== 0 ? userInfo?.[item.field] : '-' }}
|
||||
</template>
|
||||
<template v-else> {{ getName(userInfo?.[item.field], item.options) }} </template>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
|
||||
import { Empty } from 'ant-design-vue';
|
||||
import { ref, onMounted, watch, reactive } from 'vue';
|
||||
import pointPng from '/@/assets/indexSun/point.png';
|
||||
import Dialog from '/@/components/dialog/Dialog.vue';
|
||||
import { useTheme } from '/@/hooks/theme/useTheme.ts';
|
||||
import { twoRNApi } from '/@/views/indexSun/indexSun.api.ts';
|
||||
import dayjs from 'dayjs';
|
||||
import { Row, Col } from 'ant-design-vue';
|
||||
import { getName, list } from '/@/views/indexSun/rowNewR.data.ts';
|
||||
|
||||
const { themeType } = useTheme();
|
||||
const step = ref(0.2);
|
||||
const scrollList = ref<any[]>([]);
|
||||
const openInfor = ref<boolean>(false); //弹窗显示
|
||||
const userInfo = ref<any>({});
|
||||
|
||||
const filedList = reactive(list);
|
||||
|
||||
const props = defineProps({
|
||||
bKey: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
centerId: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['handleView', 'showReset']);
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
watch(props, () => {
|
||||
getList();
|
||||
});
|
||||
function getList() {
|
||||
twoRNApi({ centerId: props.centerId })
|
||||
.then((res: any) => {
|
||||
if (res.code === 200) {
|
||||
scrollList.value = res?.result?.records || [];
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {});
|
||||
}
|
||||
function handlePolice(item: any) {
|
||||
userInfo.value = item;
|
||||
openInfor.value = true;
|
||||
step.value = 0;
|
||||
}
|
||||
function handlePoliceClose() {
|
||||
openInfor.value = false;
|
||||
step.value = 0.2;
|
||||
}
|
||||
function handleView() {
|
||||
emit('handleView');
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.one-r-box {
|
||||
background: rgba(8, 75, 100, 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
letter-spacing: 0px;
|
||||
.title {
|
||||
height: 40px;
|
||||
border-radius: 14px 14px 0 0;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
letter-spacing: 2px;
|
||||
color: #ffffff;
|
||||
line-height: 40px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: linear-gradient(to right, rgba(8, 75, 100, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
.look-view {
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding: 10px 20px;
|
||||
height: calc(100% - 40px);
|
||||
.content-item {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.item-d {
|
||||
background: #09314d;
|
||||
margin-bottom: 10px;
|
||||
padding: 6px 15px;
|
||||
display: flex;
|
||||
border-radius: 10px;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
.item-d-img {
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.police-con {
|
||||
padding: 10px;
|
||||
display: grid;
|
||||
color: #ffffff;
|
||||
max-height: 60vh;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.col-d {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -41,8 +41,8 @@
|
||||
const scrollList = ref<any[]>([]);
|
||||
const props = defineProps({
|
||||
bKey: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -100,7 +100,7 @@
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 10px;
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
|
||||
@@ -54,8 +54,8 @@
|
||||
|
||||
const props = defineProps({
|
||||
bKey: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
centerId: {
|
||||
type: String,
|
||||
|
||||
@@ -48,8 +48,8 @@
|
||||
const { getCenterInfo } = useUserStore();
|
||||
const props = defineProps({
|
||||
bKey: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
const chooseType = ref('0');
|
||||
@@ -93,7 +93,7 @@
|
||||
});
|
||||
}
|
||||
|
||||
const myChart = ref(null);
|
||||
const myChart = ref();
|
||||
function getData() {
|
||||
twoLApi({
|
||||
sex: chooseType.value,
|
||||
|
||||
@@ -124,8 +124,8 @@
|
||||
|
||||
const props = defineProps({
|
||||
bKey: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
centerId: {
|
||||
type: String,
|
||||
|
||||
Reference in New Issue
Block a user