健康咨询平台实时时间
This commit is contained in:
@@ -22,6 +22,8 @@ export const Map = {
|
||||
emergencyMarker: null, // 应急人员marker
|
||||
startMarker: null,
|
||||
endMarker: null,
|
||||
driving: null,
|
||||
walking: null,
|
||||
/**
|
||||
* @desc 地图舒适化
|
||||
* @param el dom元素 id选择器
|
||||
@@ -246,7 +248,7 @@ export const Map = {
|
||||
ctx.textAlign = 'right';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.fillText(text, 25, 10);
|
||||
ctx.fillText(text, 24.5, 10.8);
|
||||
|
||||
resolve(canvas.toDataURL());
|
||||
};
|
||||
@@ -431,13 +433,13 @@ export const Map = {
|
||||
* @desc 创建地图详情弹窗
|
||||
*
|
||||
* */
|
||||
createInfoModal({ option, content }) {
|
||||
createInfoModal({ option, content }, flag = true) {
|
||||
let { latitude, longitude } = option;
|
||||
this.infoWindow = new AMap.InfoWindow({
|
||||
position: [longitude, latitude],
|
||||
offset: new AMap.Pixel(-8, -25),
|
||||
content: content,
|
||||
closeWhenClickMap: true,
|
||||
closeWhenClickMap: flag,
|
||||
});
|
||||
this.infoWindow.open(this.map);
|
||||
},
|
||||
|
||||
@@ -82,10 +82,12 @@
|
||||
if (props.afterFetch && isFunction(props.afterFetch)) {
|
||||
dataSource.value = props.afterFetch({ result, setPage: setPage, setDataSource: setDataSource });
|
||||
} else {
|
||||
dataSource.value = result?.records;
|
||||
dataSource.value = result?.records ? result?.records : result;
|
||||
}
|
||||
if (result.hasOwnProperty('records')) {
|
||||
paginationProp.value = { ...paginationProp.value, ...result };
|
||||
paginationProp.value.pageSize = result.size;
|
||||
}
|
||||
paginationProp.value = { ...paginationProp.value, ...result };
|
||||
paginationProp.value.pageSize = result.size;
|
||||
}
|
||||
} catch (e) {
|
||||
dataSource.value = [];
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
<svg t="1758877481917" class="icon" viewBox="0 0 1654 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6865"
|
||||
width="20" height="20">
|
||||
<path d="M827.076923 78.769231C590.769231 78.769231 393.846154 259.938462 393.846154 496.246154 393.846154 764.061538 590.769231 945.230769 827.076923 945.230769S1260.307692 771.938462 1260.307692 496.246154c0-236.307692-196.923077-417.476923-433.230769-417.476923zM0 456.861538h315.076923v78.769231H0v-78.769231z m1339.076923 70.892308c0 275.692308-228.430769 496.246154-512 496.246154S315.076923 803.446154 315.076923 527.753846v-31.507692C315.076923 228.430769 535.630769 7.876923 811.323077 0h15.753846c259.938462 0 480.492308 189.046154 512 441.107692v15.753846h315.076923v78.769231h-315.076923z"
|
||||
fill="#979797" p-id="6866"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 807 B |
@@ -0,0 +1,2 @@
|
||||
export const iconPath: string =
|
||||
'path://M827.076923 78.769231C590.769231 78.769231 393.846154 259.938462 393.846154 496.246154 393.846154 764.061538 590.769231 945.230769 827.076923 945.230769S1260.307692 771.938462 1260.307692 496.246154c0-236.307692-196.923077-417.476923-433.230769-417.476923zM0 456.861538h315.076923v78.769231H0v-78.769231z m1339.076923 70.892308c0 275.692308-228.430769 496.246154-512 496.246154S315.076923 803.446154 315.076923 527.753846v-31.507692C315.076923 228.430769 535.630769 7.876923 811.323077 0h15.753846c259.938462 0 480.492308 189.046154 512 441.107692v15.753846h315.076923v78.769231h-315.076923z';
|
||||
+2
-2
@@ -24,7 +24,7 @@ const routes: Array<RouteRecordRaw> = [
|
||||
meta: {
|
||||
title: '副屏',
|
||||
},
|
||||
component: () => import('/@/views/indexSun.vue'),
|
||||
component: () => import('/@/views/healthConsultation/HealthConsultationIndex.vue'),
|
||||
},
|
||||
{
|
||||
path: '/home',
|
||||
@@ -32,7 +32,7 @@ const routes: Array<RouteRecordRaw> = [
|
||||
meta: {
|
||||
title: '健康咨询',
|
||||
},
|
||||
component: () => import('../views/healthConsultation/HealthConsultationIndex.vue'),
|
||||
component: () => import('/@/views/indexSun.vue'),
|
||||
},
|
||||
{
|
||||
path: '/indexSon',
|
||||
|
||||
+7
-7
@@ -32,10 +32,10 @@ export function getToday() {
|
||||
}
|
||||
|
||||
//分钟转小时
|
||||
export function minuteToStr(minutes) {
|
||||
export function minuteToStr(minutes: any) {
|
||||
if (!minutes) return '0分';
|
||||
let h = Math.floor(minutes / 60);
|
||||
let m = Math.floor(minutes % 60);
|
||||
const h: any = Math.floor(minutes / 60);
|
||||
const m: any = Math.floor(minutes % 60);
|
||||
if (h) {
|
||||
return `${h}小时${m > 0 ? `${m}分钟` : ''}`;
|
||||
}
|
||||
@@ -43,12 +43,12 @@ export function minuteToStr(minutes) {
|
||||
}
|
||||
|
||||
//处理echarts-环形图 数据为0时不显示label
|
||||
export function visibleChartLabel(chartData) {
|
||||
export function visibleChartLabel(chartData: any) {
|
||||
const data = cloneDeep(chartData);
|
||||
let list = data?.map((item) => item?.value);
|
||||
let flag = list.every((item) => item == 0);
|
||||
const list: any = data?.map((item: any) => item?.value);
|
||||
const flag: any = list.every((item: any) => item == 0);
|
||||
if (!flag) {
|
||||
data.forEach((val) => {
|
||||
data.forEach((val: any) => {
|
||||
if (val.value == 0) {
|
||||
val.value = 0;
|
||||
}
|
||||
|
||||
@@ -87,6 +87,7 @@
|
||||
closeDialog();
|
||||
emit('confirmHelp', {
|
||||
...userInfo.value,
|
||||
emergencyType: userInfo.value?.popType + '',
|
||||
hospitalList: list.map((item: any) => {
|
||||
item['latitude'] = item['lat'];
|
||||
item['longitude'] = item['lon'];
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<span>二级单位:</span>
|
||||
<span>{{ userInfo?.orgName }}</span>
|
||||
<span>{{ userInfo?.deptName }}</span>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<span>手机号码:</span>
|
||||
@@ -32,6 +32,9 @@
|
||||
<span>发生地点:</span>
|
||||
<span>{{ userInfo?.address || userInfo?.gpsErrorMsg }}</span>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<a-button type="primary" @click="confirmHelp" :loading="helpLoading">确认</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
@@ -41,12 +44,15 @@
|
||||
import { useDialog } from '/@/views/components/dialogHooks.ts';
|
||||
import { watch, ref } from 'vue';
|
||||
import { useTheme } from '/@/hooks/theme/useTheme.ts';
|
||||
import { nearResourcesApi } from '/@/views/indexSun/indexSun.api.ts';
|
||||
|
||||
const props = defineProps({
|
||||
record: Object,
|
||||
});
|
||||
const userInfo = ref({});
|
||||
const { themeType } = useTheme();
|
||||
const helpLoading = ref<boolean>(false);
|
||||
const emit = defineEmits(['confirmHelp']);
|
||||
watch(
|
||||
() => props.record,
|
||||
(nVal) => {
|
||||
@@ -55,6 +61,35 @@
|
||||
);
|
||||
const { visible, title, closeDialog, openDialog } = useDialog({ title: '健康监测工具报警' });
|
||||
|
||||
//确认帮助
|
||||
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,
|
||||
departName: userInfo.value?.deptName,
|
||||
orgName: userInfo.value?.orgName,
|
||||
emergencyType: '3',
|
||||
userId: userInfo.value?.bindUserId,
|
||||
hospitalList: list.map((item: any) => {
|
||||
item['latitude'] = item['lat'];
|
||||
item['longitude'] = item['lon'];
|
||||
return item;
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
@@ -89,4 +124,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
text-align: center;
|
||||
margin-top: 2%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -33,6 +33,7 @@
|
||||
import healthContentBottomItem2 from './components/healthContentBottomItem2.vue';
|
||||
import healthContentBottomItem3 from './components/healthContentBottomItem3.vue';
|
||||
import healthContentBottomItem4 from './components/healthContentBottomItem4.vue';
|
||||
|
||||
import { ref, onMounted, watch, onUnmounted } from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { startTime } from '/@/utils/utils.ts';
|
||||
@@ -72,6 +73,7 @@
|
||||
getTime();
|
||||
updateRightDate();
|
||||
startTimer(); // 启动定时器
|
||||
document.title = '健康咨询平台';
|
||||
});
|
||||
|
||||
watch(
|
||||
@@ -97,7 +99,7 @@
|
||||
background-size: 100% 100%;
|
||||
|
||||
.sun-screen-title {
|
||||
height: 87px;
|
||||
height: 80px;
|
||||
background: url('/@/assets/indexSun/bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
@@ -125,10 +127,10 @@
|
||||
|
||||
.sun-title-center {
|
||||
flex: 1;
|
||||
font-size: 58px;
|
||||
font-size: 50px;
|
||||
letter-spacing: 10px;
|
||||
// text-shadow: 2px 2px 5px rgba(118, 141, 219, 0.53);
|
||||
font-weight: 400;
|
||||
font-weight: bold;
|
||||
font-family: PangMenZhengDao;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,19 +10,11 @@
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
import { getDocCountStat } from '/@/views/healthConsultation/api/health';
|
||||
import { iconPath } from '/@/router/iconPath.ts';
|
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
|
||||
// const total = 2920;
|
||||
|
||||
// const data = [
|
||||
// { name: '新疆医科大学第一附属医院', value: 650 },
|
||||
// { name: '昌吉州宝石花医院', value: 422 },
|
||||
// { name: '新疆维吾尔自治区人民医院', value: 928 },
|
||||
// { name: '新克拉玛依市中心医院', value: 560 },
|
||||
// ];
|
||||
|
||||
const transformHospitalData = (hospitals: { docCount: number; hospitalName: string }[]) => {
|
||||
return hospitals.map((hospital) => ({
|
||||
name: hospital.hospitalName,
|
||||
@@ -54,36 +46,29 @@
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
|
||||
const option: echarts.EChartsOption = {
|
||||
// title: {
|
||||
// text: '医院专家数量统计',
|
||||
// left: 'center',
|
||||
// top: 10,
|
||||
// textStyle: {
|
||||
// color: '#fff',
|
||||
// fontSize: 18,
|
||||
// fontWeight: 'bold',
|
||||
// },
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c}人 ({d}%)',
|
||||
position: 'right',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '专家人数',
|
||||
type: 'pie',
|
||||
radius: ['30%', '40%'],
|
||||
center: ['50%', '55%'],
|
||||
radius: ['30%', '50%'],
|
||||
center: ['40%', '50%'],
|
||||
data: value,
|
||||
minAngle: 10,
|
||||
label: {
|
||||
position: 'outside',
|
||||
show: true,
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
lineHeight: 20,
|
||||
fontSize: 10,
|
||||
lineHeight: 19,
|
||||
formatter: (params: any) => {
|
||||
const name: string = params.name;
|
||||
const value: number = params.value;
|
||||
const maxLen = 6; // 超过 6 个字就换行
|
||||
const maxLen = name.length > 10 ? 6 : 5;
|
||||
let newName = '';
|
||||
|
||||
for (let i = 0; i < name.length; i += maxLen) {
|
||||
@@ -93,18 +78,27 @@
|
||||
return `${newName}(${value}人)`;
|
||||
},
|
||||
},
|
||||
// itemStyle: {
|
||||
// borderRadius: 5,
|
||||
// borderColor: '#0f2c44',
|
||||
// borderWidth: 2,
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 20, // 第一段线长度(从圆到转折点)
|
||||
length2: 15, // 第二段线长度(从转折点到文字)
|
||||
smooth: 0.2, // 平滑度
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
// emphasis: {
|
||||
// scale: true,
|
||||
// scaleSize: -10,
|
||||
// },
|
||||
},
|
||||
],
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: '48%',
|
||||
left: '34%',
|
||||
top: '44%',
|
||||
style: {
|
||||
text: `总人数`,
|
||||
// textAlign: 'center',
|
||||
@@ -116,8 +110,8 @@
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: '56%', // 第二行位置
|
||||
left: '37%',
|
||||
top: '53.7%', // 第二行位置
|
||||
style: {
|
||||
// text: `${total}`,
|
||||
text: `${getTotalDocCount(value)}`,
|
||||
@@ -132,78 +126,32 @@
|
||||
legend: [
|
||||
{
|
||||
orient: 'vertical',
|
||||
left: 20,
|
||||
top: 10,
|
||||
itemGap: 10,
|
||||
icon: 'path://M200 512 H307 a154,154 0 1,0 308,0 a154,154 0 1,0 -308,0 H824',
|
||||
right: 20,
|
||||
top: 'center',
|
||||
icon: iconPath,
|
||||
formatter: (name) => {
|
||||
let newName = [];
|
||||
const maxLen = 6; // 超过 6 个字就换行
|
||||
for (let i = 0; i < name.length; i += maxLen) {
|
||||
newName.push(name.substring(i, i + maxLen));
|
||||
}
|
||||
|
||||
return `{name|${newName.join('\n')}}`;
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontSize: 10,
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 12,
|
||||
lineHeight: 12,
|
||||
fontSize: 10,
|
||||
color: '#fff',
|
||||
align: 'left', // 左对齐
|
||||
// lineHeight: 20,
|
||||
fontFamily: 'HarmonyOS Sans SC',
|
||||
verticalAlign: 'middle',
|
||||
},
|
||||
// value: {
|
||||
// fontSize: 14,
|
||||
// color: '#aaa',
|
||||
// align: 'left', // 左对齐
|
||||
// lineHeight: 20,
|
||||
// },
|
||||
},
|
||||
},
|
||||
// data: [data[0].name, data[3].name],
|
||||
data:
|
||||
value && Array.isArray(value)
|
||||
? value
|
||||
.filter((_, index) => index % 2 === 0)
|
||||
.slice(0, 2)
|
||||
.map((item) => item.name || '')
|
||||
: ['', ''],
|
||||
// formatter: (name: string) => {
|
||||
// const item = data.find((d) => d.name === name);
|
||||
// return `{name|${name}}\n{value|${item?.value}人}`;
|
||||
// },
|
||||
},
|
||||
{
|
||||
orient: 'vertical',
|
||||
right: 20,
|
||||
top: 10,
|
||||
itemGap: 10,
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 12,
|
||||
color: '#fff',
|
||||
align: 'right', // 右对齐
|
||||
// lineHeight: 20,
|
||||
},
|
||||
// value: {
|
||||
// fontSize: 14,
|
||||
// color: '#aaa',
|
||||
// align: 'right', // 右对齐
|
||||
// lineHeight: 20,
|
||||
// },
|
||||
},
|
||||
},
|
||||
// data: [data[1].name, data[2].name],
|
||||
data:
|
||||
value && Array.isArray(value)
|
||||
? value
|
||||
.filter((_, index) => index % 2 === 1)
|
||||
.slice(0, 2)
|
||||
.map((item) => item.name || '')
|
||||
: ['', ''],
|
||||
// formatter: (name: string) => {
|
||||
// const item = data.find((d) => d.name === name);
|
||||
// return `{name|${name}}\n{value|${item?.value}人}`;
|
||||
// },
|
||||
data: value,
|
||||
},
|
||||
],
|
||||
color: colors,
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
import { getDeptCountStat } from '/@/views/healthConsultation/api/health';
|
||||
import { iconPath } from '/@/router/iconPath.ts';
|
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
let chart: echarts.ECharts | null = null;
|
||||
@@ -36,6 +37,7 @@
|
||||
|
||||
const option: echarts.EChartsOption = {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {},
|
||||
// title: {
|
||||
// text: '单位咨询数量统计',
|
||||
// left: 'center',
|
||||
@@ -53,7 +55,7 @@
|
||||
itemGap: 30, // 默认 10,这里改成 30,让两段文字隔开一些
|
||||
// 圆环 icon
|
||||
// icon: 'path://M512 0a512 512 0 1 0 0 1024A512 512 0 0 0 512 0zm0 896a384 384 0 1 1 0-768 384 384 0 0 1 0 768z',
|
||||
icon: 'circle',
|
||||
icon: iconPath,
|
||||
data: ['员工咨询全科医生', '员工咨询专家'],
|
||||
},
|
||||
grid: {
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
import { getDepartmentCountStat } from '/@/views/healthConsultation/api/health';
|
||||
import { iconPath } from '/@/router/iconPath.ts';
|
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
let chart: echarts.ECharts | null = null;
|
||||
@@ -36,6 +37,7 @@
|
||||
|
||||
const option: echarts.EChartsOption = {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {},
|
||||
// title: {
|
||||
// text: '科室咨询数量统计',
|
||||
// left: 'center',
|
||||
@@ -51,9 +53,7 @@
|
||||
itemWidth: 20,
|
||||
itemHeight: 16,
|
||||
itemGap: 30, // 默认 10,这里改成 30,让两段文字隔开一些
|
||||
// 圆环 icon
|
||||
// icon: 'path://M512 0a512 512 0 1 0 0 1024A512 512 0 0 0 512 0zm0 896a384 384 0 1 1 0-768 384 384 0 0 1 0 768z',
|
||||
icon: 'circle',
|
||||
icon: iconPath,
|
||||
data: ['图文', '视频'],
|
||||
},
|
||||
grid: {
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
import { getHospitalCountStat } from '/@/views/healthConsultation/api/health';
|
||||
import { iconPath } from '/@/router/iconPath.ts';
|
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
let chart: echarts.ECharts | null = null;
|
||||
@@ -67,6 +68,7 @@
|
||||
|
||||
const option: echarts.EChartsOption = {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {},
|
||||
// title: {
|
||||
// text: '单位咨询数量统计',
|
||||
// left: 'center',
|
||||
@@ -82,9 +84,7 @@
|
||||
itemWidth: 20,
|
||||
itemHeight: 16,
|
||||
itemGap: 30, // 默认 10,这里改成 30,让两段文字隔开一些
|
||||
// 圆环 icon
|
||||
// icon: 'path://M512 0a512 512 0 1 0 0 1024A512 512 0 0 0 512 0zm0 896a384 384 0 1 1 0-768 384 384 0 0 1 0 768z',
|
||||
icon: 'circle',
|
||||
icon: iconPath,
|
||||
data: ['图文', '视频'],
|
||||
},
|
||||
grid: {
|
||||
|
||||
@@ -1,6 +1,13 @@
|
||||
<template>
|
||||
<swiper :slides-per-view="1" :space-between="10" :loop="true" :autoplay="{ delay: 10000, disableOnInteraction: false }" class="mySwiper">
|
||||
<swiper-slide v-for="(page, index) in pages" :key="index">
|
||||
<swiper
|
||||
v-if="pages().length > 0"
|
||||
:slides-per-view="1"
|
||||
:space-between="10"
|
||||
:loop="true"
|
||||
:autoplay="{ delay: 10000, disableOnInteraction: false }"
|
||||
class="mySwiper"
|
||||
>
|
||||
<swiper-slide v-for="(page, index) in pages()" :key="index">
|
||||
<div class="grid-container">
|
||||
<div v-for="item in page" :key="item.id" class="item">
|
||||
<div class="item-left">
|
||||
@@ -9,7 +16,7 @@
|
||||
<div class="item-right">
|
||||
<div class="name">
|
||||
<span>{{ item.doctorName }}</span>
|
||||
<span class="position">({{ item.doctorJob_dictText }})</span>
|
||||
<span class="position">({{ item.doctorTitle_dictText }})</span>
|
||||
</div>
|
||||
<div class="hospital">{{ item.resourceName }} | {{ item.departmentName }}</div>
|
||||
<div class="experience">
|
||||
@@ -28,7 +35,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, computed } from 'vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/navigation';
|
||||
@@ -60,13 +67,15 @@
|
||||
|
||||
// 将每 6 个元素分为一页
|
||||
const items = ref<Doctor[]>([]);
|
||||
const pages = computed(() => {
|
||||
|
||||
const pages = () => {
|
||||
const result: Doctor[][] = [];
|
||||
for (let i = 0; i < items.value.length; i += 6) {
|
||||
result.push(items.value.slice(i, i + 6));
|
||||
}
|
||||
console.log(result);
|
||||
return result;
|
||||
});
|
||||
};
|
||||
|
||||
function getData() {
|
||||
getDocList()
|
||||
|
||||
+207
-75
@@ -7,7 +7,8 @@
|
||||
</div>
|
||||
<div class="sun-title-center">{{ getCenterInfo.screenTitle || '健康服务中心' }}</div>
|
||||
<div class="sun-title-right">
|
||||
<a-button class="top-right-button" @click="toOther">健康监测大屏</a-button>
|
||||
<a-button class="top-right-button" @click="toZ">咨询服务平台</a-button>
|
||||
<a-button class="top-right-button" @click="toOther" :loading="otherLoading">健康监测大屏</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sun-body-content">
|
||||
@@ -34,6 +35,7 @@
|
||||
:hospitalList="hospitalList"
|
||||
@clear-hospital-list="clearHospitalList"
|
||||
:show-rest-b="showRestB"
|
||||
:user-data="userData"
|
||||
@handle-detail="handleCenterMapClick"
|
||||
:show-map-bottom="showMapBottom"
|
||||
@show-rest-b="
|
||||
@@ -47,7 +49,7 @@
|
||||
</div>
|
||||
<div class="sun-body-right">
|
||||
<div class="sun-body-right-one">
|
||||
<one-right-new :user-data="userData" @handle-view="handleOneRightView" @handle-archives="handleArchives" />
|
||||
<one-right-new :user-data="userData" @handle-view="handleOneRightView" @handle-emer="handleEmer" />
|
||||
</div>
|
||||
<div class="sun-body-right-two">
|
||||
<oneR
|
||||
@@ -68,7 +70,7 @@
|
||||
</div>
|
||||
<PhoneDialog ref="phoneDialogRef" :title="phoneDialogTitle" :useForm="true" :setting="setting" :phoneType="phoneType" />
|
||||
<!-- 健康监测弹窗 -->
|
||||
<EmployeeDialog ref="employeeDialogRef" :record="socketData" />
|
||||
<EmployeeDialog ref="employeeDialogRef" :record="socketData" @confirm-help="confirmHelp" />
|
||||
<!-- 应急、120弹窗 -->
|
||||
<EmergencyDialog ref="emergencyDialogRef" :record="socketData1" @confirm-help="confirmHelp" />
|
||||
<IndexModal
|
||||
@@ -83,13 +85,22 @@
|
||||
:twoROnly="twoROnly"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'd'">
|
||||
<template v-if="record?.latitude && record?.longitude">
|
||||
<environment-outlined style="height: auto !important; color: #178ef2 !important" @click="forHelp(record)" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<span style="color: red">未获取到位置信息</span>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'cz'">
|
||||
<a-button type="link" @click="forHelp(record)">救助信息</a-button>
|
||||
<a-button type="link" @click="forHelp(record)">求助信息</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</IndexModal>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { EnvironmentOutlined } from '@ant-design/icons-vue';
|
||||
import OneL from '/@/views/indexSun/oneL.vue';
|
||||
import twoL from '/@/views/indexSun/twoL.vue';
|
||||
import oneR from '/@/views/indexSun/oneR.vue';
|
||||
@@ -99,8 +110,10 @@
|
||||
centerMapColumns,
|
||||
centerMapFromList,
|
||||
columns,
|
||||
contactListColumns,
|
||||
fromLists,
|
||||
infoContentSpecial,
|
||||
monitorColumns,
|
||||
oneRNewColumns,
|
||||
threeRModalColumns,
|
||||
threeRModalFromList,
|
||||
@@ -125,9 +138,12 @@
|
||||
|
||||
const { getCenterInfo, setCount } = useUserStore();
|
||||
import {
|
||||
healthArchivesApi,
|
||||
careUserApi,
|
||||
contactListApi,
|
||||
nearResourcesApi,
|
||||
oneLApi,
|
||||
oneRApi,
|
||||
queryAnYanTokenApi,
|
||||
roomDetailApi,
|
||||
threeRModalApi,
|
||||
todayEmergencyListApi,
|
||||
@@ -141,6 +157,7 @@
|
||||
import ThreeLeftNew from '/@/views/indexSun/threeLeftNew.vue';
|
||||
import OneRightNew from '/@/views/indexSun/oneRightNew.vue';
|
||||
import TwoNewR from '/@/views/indexSun/twoNewR.vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
//0:处置 1:处理 2:呼入 3:全部
|
||||
const phoneType = ref('');
|
||||
const phoneDialogTitle = ref('呼入电话');
|
||||
@@ -165,6 +182,7 @@
|
||||
const showMapBottom = ref(false);
|
||||
const userData = ref<object>({});
|
||||
const centerMapRef = ref();
|
||||
const otherLoading = ref<boolean>(false);
|
||||
|
||||
onMounted(() => {
|
||||
getTime();
|
||||
@@ -201,6 +219,8 @@
|
||||
indexModalRef.value.closeDialog();
|
||||
record['lat'] = record?.latitude;
|
||||
record['lon'] = record?.longitude;
|
||||
Map.driving && Map.driving.clear();
|
||||
Map.walking && Map.walking.clear();
|
||||
if (record['lat']) {
|
||||
let list: any = [];
|
||||
const res: any = await nearResourcesApi({ longitude: record?.lon, latitude: record?.lat });
|
||||
@@ -217,11 +237,30 @@
|
||||
showRestB.value = false;
|
||||
userData.value = record;
|
||||
}
|
||||
confirmHelp(record);
|
||||
await confirmHelp(record);
|
||||
}
|
||||
|
||||
function toOther() {
|
||||
window.open('http://aygc.jy.pc.iosp.ydpt.tech/envShow/envFullscreen', '_blank');
|
||||
otherLoading.value = true;
|
||||
queryAnYanTokenApi()
|
||||
.then((res: any) => {
|
||||
if (res.code === 200) {
|
||||
otherLoading.value = false;
|
||||
window.open('http://aygc.pc.iosp.ydpt.tech/monitor/health?tokens=' + res?.result, '_blank');
|
||||
} else {
|
||||
message.error(res?.message);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
otherLoading.value = false;
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
async function toZ() {
|
||||
const routeUrl = router.resolve({
|
||||
path: '/home2',
|
||||
}).href;
|
||||
window.open(routeUrl, '_blank');
|
||||
}
|
||||
|
||||
function handleOneLeftClick(item: any) {
|
||||
@@ -259,8 +298,17 @@
|
||||
}
|
||||
|
||||
function handleOneRClick() {
|
||||
router.push({
|
||||
path: '/indexSon',
|
||||
// router.push({
|
||||
// path: '/indexSon',
|
||||
// });
|
||||
indexModalTitle.value = '健康终端报警';
|
||||
indexColumn.value = monitorColumns;
|
||||
firstFormOne.value = [];
|
||||
twoROnly.value = '';
|
||||
modalApi.value = oneRApi;
|
||||
needDept.value = true;
|
||||
nextTick(() => {
|
||||
indexModalRef.value.openDialog();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -269,7 +317,7 @@
|
||||
const { socketData, setSocketData, closeSocket } = useSocket(socketUrl);
|
||||
const employeeDialogRef = ref();
|
||||
|
||||
function employeeDialogOpen() {
|
||||
function openEmergencyOpen() {
|
||||
setSocketData1({
|
||||
userId: '1942871719583739905',
|
||||
phone: '15129287781',
|
||||
@@ -294,6 +342,60 @@
|
||||
});
|
||||
emergencyDialogRef.value.openDialog();
|
||||
}
|
||||
function employeeDialogOpen() {
|
||||
setSocketData({
|
||||
watchNo: 'A5GTQ24920002519',
|
||||
eventType: 'a_key_alarm',
|
||||
eventType_dictText: '一键告警',
|
||||
bindUserId: '1942871719583739905',
|
||||
bindDate: '2025-07-23',
|
||||
createBy: 'apiusername',
|
||||
createDate: '2025-09-25 15:01:11',
|
||||
dataValue: '',
|
||||
address: null,
|
||||
lon: 0,
|
||||
lat: 0,
|
||||
dataDate: '2025-09-25',
|
||||
warnTime: '2025-09-25 15:00:03',
|
||||
gpsErrorMsg: '定位超时',
|
||||
lonGd: null,
|
||||
latGd: null,
|
||||
addressGd: null,
|
||||
sendFlag: '0',
|
||||
largeScreenFlag: '0',
|
||||
orgCode: 'A01A01A02',
|
||||
orgName: '硬件部',
|
||||
realName: '连龙刚',
|
||||
phone: '15129287781',
|
||||
hospitalList: [
|
||||
{
|
||||
name: '跃满油田作业区',
|
||||
lon: 82.9955,
|
||||
lat: 40.787056,
|
||||
},
|
||||
{
|
||||
name: '跃满油田作业区',
|
||||
lon: 82.9955,
|
||||
lat: 40.787056,
|
||||
},
|
||||
{
|
||||
name: '采油一厂稠油小屋',
|
||||
lon: 84.881775,
|
||||
lat: 44.987652,
|
||||
},
|
||||
],
|
||||
centerId: '1940693902422519809',
|
||||
popType: 3,
|
||||
keyUser: '0',
|
||||
avatar: null,
|
||||
sex: 2,
|
||||
age: 37,
|
||||
workNo: '2025001',
|
||||
deptName: '软硬件开发部',
|
||||
audioUrl: null,
|
||||
});
|
||||
employeeDialogRef.value.openDialog();
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
// employeeDialogOpen();
|
||||
@@ -327,73 +429,98 @@
|
||||
const showHospitalList = ref(false);
|
||||
|
||||
async function confirmHelp(data: any) {
|
||||
if (!data.lon) return (showMapBottom.value = true);
|
||||
Map.driveLine && Map.driveLine.clear();
|
||||
try {
|
||||
const res = await careUserApi({ userId: data?.userId });
|
||||
data['careLiaisonName'] = res?.result?.careLiaisonName;
|
||||
data['careLiaisonPhone'] = res?.result?.careLiaisonPhone;
|
||||
data['lifeguardName'] = res?.result?.lifeguardName;
|
||||
data['lifeguardPhone'] = res?.result?.lifeguardPhone;
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
userData.value = data;
|
||||
if (!data.lon || !data.lat) {
|
||||
centerMapRef.value.newResetMap();
|
||||
showMapBottom.value = true;
|
||||
return;
|
||||
}
|
||||
Map.removeOverlayGroup();
|
||||
hospitalList.value = data.hospitalList;
|
||||
// showHospitalList.value = true;
|
||||
//用户的坐标信息
|
||||
let point = [data.lon, data.lat];
|
||||
// if (data.hospitalList && data.hospitalList.length > 0) {
|
||||
// try {
|
||||
const a = ((await getHospitalList(data.hospitalList, point)) as any) || [];
|
||||
hospitalList.value = a.sort((a: any, b: any) => a.distance - b.distance);
|
||||
// showHospitalList.value = true;
|
||||
// } catch (error) {
|
||||
// console.log('获取医院列表时出错:', error);
|
||||
// }
|
||||
// } else {
|
||||
// console.log('没有医院list');
|
||||
// }
|
||||
// showMapBottom.value = true;
|
||||
const arr = await Map.createOverlay1(
|
||||
[...hospitalList.value, { latitude: data.lat, longitude: data.lon }],
|
||||
{
|
||||
content: (val) => {
|
||||
return `<div style="
|
||||
try {
|
||||
hospitalList.value = data.hospitalList;
|
||||
// showHospitalList.value = true;
|
||||
//用户的坐标信息
|
||||
let point = [data.lon, data.lat];
|
||||
|
||||
centerMapRef.value.setStartPosition(data);
|
||||
// if (data.hospitalList && data.hospitalList.length > 0) {
|
||||
// try {
|
||||
const a = ((await getHospitalList(data.hospitalList, point)) as any) || [];
|
||||
hospitalList.value = a.sort((a: any, b: any) => a.distance - b.distance);
|
||||
// showHospitalList.value = true;
|
||||
// } catch (error) {
|
||||
// console.log('获取医院列表时出错:', error);
|
||||
// }
|
||||
// } else {
|
||||
// console.log('没有医院list');
|
||||
// }
|
||||
// showMapBottom.value = true;
|
||||
const arr = await Map.createOverlay1(
|
||||
[...hospitalList.value, { latitude: data.lat, longitude: data.lon }],
|
||||
{
|
||||
content: (val: any) => {
|
||||
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'
|
||||
);
|
||||
async (val) => {
|
||||
if (val.type == '3') {
|
||||
Map.createInfoModal({ option: val, content: infoContentSpecial(val) }, false);
|
||||
} else if (val.type == '4') {
|
||||
Map.createInfoModal({ option: val, content: infoContentSpecial(val) }, false);
|
||||
} else {
|
||||
Map.createInfoModal({ option: val, content: infoContentSpecial(val) }, false);
|
||||
}
|
||||
const end = await Map.getAddressByPoint([val.lon, val.lat]);
|
||||
if (!data?.address) {
|
||||
data['address'] = await Map.getAddressByPoint([data.lon, data.lat]);
|
||||
}
|
||||
centerMapRef.value.getSearch({
|
||||
startPosition: [data.lon, data.lat],
|
||||
endPosition: [val.lon, val.lat],
|
||||
start: data['address'],
|
||||
end,
|
||||
});
|
||||
('');
|
||||
},
|
||||
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) => {});
|
||||
|
||||
userData.value = data;
|
||||
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: any) => {
|
||||
console.log(err);
|
||||
});
|
||||
} catch (e: any) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
|
||||
async function getHospitalList(hospitalList, userLocation) {
|
||||
@@ -552,8 +679,8 @@
|
||||
firstFormOne.value = [];
|
||||
const params = {
|
||||
centerId: centerId.value,
|
||||
startDate: '2000-01-01',
|
||||
endDate: '2025-09-25',
|
||||
// startDate: '2000-01-01',
|
||||
// endDate: '2030-12-31',
|
||||
};
|
||||
indexModalTitle.value = '今日应急';
|
||||
modalApi.value = todayEmergencyListApi;
|
||||
@@ -562,14 +689,14 @@
|
||||
indexModalRef.value.openDialog();
|
||||
});
|
||||
}
|
||||
function handleArchives(userId: string) {
|
||||
indexColumn.value = oneRNewColumns;
|
||||
function handleEmer(userId: string) {
|
||||
indexColumn.value = contactListColumns;
|
||||
firstFormOne.value = [];
|
||||
const params = {
|
||||
userId: userId,
|
||||
userId,
|
||||
};
|
||||
indexModalTitle.value = '今日应急';
|
||||
modalApi.value = healthArchivesApi;
|
||||
indexModalTitle.value = '紧急联系人';
|
||||
modalApi.value = contactListApi;
|
||||
apiParams.value = params;
|
||||
nextTick(() => {
|
||||
indexModalRef.value.openDialog();
|
||||
@@ -617,6 +744,11 @@
|
||||
text-align: right;
|
||||
line-height: 50px;
|
||||
padding-right: 30px;
|
||||
> button {
|
||||
&:nth-child(1) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sun-title-center {
|
||||
|
||||
@@ -23,7 +23,8 @@
|
||||
<div class="reset-map" :class="[themeType]" @click="resetMap">
|
||||
<RedoOutlined title="重置地图" />
|
||||
</div>
|
||||
<div v-show="showRoutePanel" v-click-outside="outClick" class="line-container">
|
||||
<!-- <div v-show="showRoutePanel" v-click-outside="outClick" class="line-container" :class="['no-top']">-->
|
||||
<div v-show="showRoutePanel" class="line-container" :class="[currentIndex !== list.length - 1 ? 'no-top' : '']">
|
||||
<div v-show="routeList.length > 0" class="has-data">
|
||||
<div class="line-title"> {{ panelTitle }}</div>
|
||||
<div class="line-content">
|
||||
@@ -68,7 +69,7 @@
|
||||
<div>
|
||||
<img :src="noLocationPng" alt="" />
|
||||
</div>
|
||||
<div> 未获取到当前救助人员的位置信息 </div>
|
||||
<div> 未获取到当前求助信息的位置信息 </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -97,6 +98,8 @@
|
||||
const formState = ref({
|
||||
start: '',
|
||||
end: '',
|
||||
startPosition: [],
|
||||
endPosition: [],
|
||||
});
|
||||
// 1 aed 2 健康小屋 3 油田医院 4 救护车
|
||||
const numList = reactive([useStore.getTypeThree, useStore.getTypeOne, useStore.getTypeFive, useStore.getTypeFour]);
|
||||
@@ -127,14 +130,17 @@
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
userData: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
const showRoutePanel = ref(false);
|
||||
const panelTitle = ref();
|
||||
const level = ref(0);
|
||||
const routeList = ref([]);
|
||||
const routeList = ref<any[]>([]);
|
||||
const emits = defineEmits(['clearHospitalList', 'showRestB', 'handleDetail']);
|
||||
let placeSearch = null;
|
||||
let driving = null;
|
||||
let placeSearch: any = null;
|
||||
watch(
|
||||
() => props.showHospitalList,
|
||||
(v) => {
|
||||
@@ -169,11 +175,11 @@
|
||||
$bus.on(earlyWarning, (params) => {
|
||||
drawMarker(params);
|
||||
});
|
||||
document.addEventListener('click', (e) => {
|
||||
document.addEventListener('click', (e: any) => {
|
||||
let t = e.target.closest('.viewBtn');
|
||||
if (t) {
|
||||
if (t.id) {
|
||||
handleClcikDetail(JSON.parse(t.id));
|
||||
handleClickDetail(JSON.parse(t.id));
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -185,17 +191,20 @@
|
||||
const poi = result.poiList.pois[0]; // 取第一个结果
|
||||
const { lat, lng } = poi.location;
|
||||
formState.value.start = poi.name;
|
||||
formState.value.startPosition = [lng, lat];
|
||||
Map.createSMarker([lng, lat]);
|
||||
Map.map.setZoom(15);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function endSelect(e: any) {
|
||||
placeSearch.search(e.poi.name, function (status, result) {
|
||||
if (status === 'complete' && result.poiList.pois.length > 0) {
|
||||
const poi = result.poiList.pois[0]; // 取第一个结果
|
||||
const { lat, lng } = poi.location;
|
||||
formState.value.end = poi.name;
|
||||
formState.value.endPosition = [lng, lat];
|
||||
Map.createEMarker([lng, lat]);
|
||||
Map.map.setZoom(15);
|
||||
}
|
||||
@@ -205,7 +214,7 @@
|
||||
function showDrivingLine(item) {
|
||||
nextTick(() => {
|
||||
panelTitle.value = '全程' + item.driveTime + item.distance;
|
||||
routeList.value = item.routeList?.map((item) => item?.instruction);
|
||||
routeList.value = item.routeList?.map((item: any) => item?.instruction);
|
||||
if (item.lon) {
|
||||
Map.clearNaviLine();
|
||||
Map.createNaviLine(item.userLocation, [item.lon, item.lat]);
|
||||
@@ -221,14 +230,46 @@
|
||||
|
||||
function removeInput() {
|
||||
formState.value.start = '';
|
||||
formState.value.startPosition = [];
|
||||
formState.value.end = '';
|
||||
formState.value.endPosition = [];
|
||||
searchFlag.value = false;
|
||||
Map.startMarker && Map.startMarker?.setMap(null);
|
||||
Map.endMarker && Map.endMarker?.setMap(null);
|
||||
Map.driving && Map.driving.clear();
|
||||
Map.walking && Map.walking.clear();
|
||||
}
|
||||
|
||||
function changeTab(item: any, i: number) {
|
||||
closeDrivingElement();
|
||||
currentIndex.value = i;
|
||||
closeDrivingElement();
|
||||
tab(item);
|
||||
if (item.hasOwnProperty('type')) {
|
||||
formState.value.startPosition = [];
|
||||
formState.value.endPosition = [];
|
||||
emits('showRestB');
|
||||
} else {
|
||||
setInfoByUserData(props.userData);
|
||||
}
|
||||
}
|
||||
|
||||
function setInfoByUserData(data: any) {
|
||||
if (data?.address) {
|
||||
formState.value.start = data.address;
|
||||
formState.value.startPosition = [data?.lon, data?.lat];
|
||||
} else {
|
||||
if (data?.lon && data?.lat) {
|
||||
formState.value.startPosition = [data?.lon, data?.lat];
|
||||
Map.getAddressByPoint([data?.lon, data?.lat])
|
||||
.then((res: any) => {
|
||||
formState.value.start = res;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
formState.value.start = '';
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function tab(item: any) {
|
||||
@@ -242,7 +283,7 @@
|
||||
tab(item);
|
||||
}
|
||||
|
||||
function searchRoute(callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) {
|
||||
async function searchRoute(callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) {
|
||||
showRoutePanel.value = false;
|
||||
panelTitle.value = '';
|
||||
if (!formState.value.start) {
|
||||
@@ -251,44 +292,83 @@
|
||||
if (!formState.value.end) {
|
||||
return message.warn('请输入终点');
|
||||
}
|
||||
getSearch(formState.value);
|
||||
}
|
||||
|
||||
function getSearch({ startPosition, endPosition, start, end }) {
|
||||
Map.driving && Map.driving.clear();
|
||||
Map.walking && Map.walking.clear();
|
||||
const distance = Map.getDistance(startPosition, endPosition);
|
||||
searchFlag.value = true;
|
||||
// let map = new Map.aMap.Map('container', {
|
||||
// resizeEnable: true,
|
||||
// center: [116.397428, 39.90923], //地图中心点
|
||||
// zoom: 13, //地图显示的缩放级别
|
||||
// });
|
||||
driving = new Map.aMap.Driving({
|
||||
map: 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') {
|
||||
// console.log('绘制驾车路线完成');
|
||||
if (distance > 2000) {
|
||||
Map.driving = new Map.aMap.Driving({
|
||||
map: Map.map,
|
||||
panel: 'panel',
|
||||
});
|
||||
Map.driving.search([{ keyword: start }, { keyword: end }], function (status: any) {
|
||||
// result 即是对应的驾车导航信息,相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
|
||||
if (status === 'complete') {
|
||||
// console.log('绘制驾车路线完成');
|
||||
searchFlag.value = false;
|
||||
} else {
|
||||
searchFlag.value = false;
|
||||
}
|
||||
});
|
||||
Map.aMap.Event.addListener(Map.driving, 'complete', (res: any) => {
|
||||
const data = JSON.parse(JSON.stringify(res));
|
||||
searchFlag.value = false;
|
||||
} else {
|
||||
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;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
Map.walking = new Map.aMap.Walking({
|
||||
map: Map.map,
|
||||
panel: 'panel',
|
||||
});
|
||||
Map.walking.search([{ keyword: start }, { keyword: end }], function (status: any) {
|
||||
// result 即是对应的步行导航信息,相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
|
||||
if (status === 'complete') {
|
||||
// console.log('绘制步行路线完成');
|
||||
searchFlag.value = false;
|
||||
} else {
|
||||
searchFlag.value = false;
|
||||
}
|
||||
});
|
||||
Map.aMap.Event.addListener(Map.walking, 'complete', (res: any) => {
|
||||
const data = JSON.parse(JSON.stringify(res));
|
||||
searchFlag.value = false;
|
||||
}
|
||||
});
|
||||
Map.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;
|
||||
}
|
||||
});
|
||||
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;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function getMapData(type, params = { type: '' }) {
|
||||
async function getMapData(type: any, params = { type: '' }) {
|
||||
try {
|
||||
const { code, result } = await mapApiSwitch(type, params);
|
||||
if (!params.type) {
|
||||
@@ -327,7 +407,7 @@
|
||||
|
||||
// const viewBtn = document.getElementById(val.id);
|
||||
// viewBtn.onclick = () => {
|
||||
// handleClcikDetail(val);
|
||||
// handleClickDetail(val);
|
||||
// };
|
||||
},
|
||||
true
|
||||
@@ -342,15 +422,20 @@
|
||||
}
|
||||
|
||||
function closeDrivingElement() {
|
||||
if (driving) driving.clear();
|
||||
Map.clearNavigationElements();
|
||||
Map.driving && Map.driving.clear();
|
||||
Map.walking && Map.walking.clear();
|
||||
if (currentIndex.value !== list.value.length - 1) {
|
||||
Map.clearNavigationElements();
|
||||
} else {
|
||||
Map.clearNaviLine();
|
||||
}
|
||||
formState.value.start = '';
|
||||
formState.value.end = '';
|
||||
showRoutePanel.value = false;
|
||||
emits('clearHospitalList');
|
||||
}
|
||||
|
||||
function handleClcikDetail(res) {
|
||||
function handleClickDetail(res: any) {
|
||||
emits('handleDetail', res);
|
||||
}
|
||||
|
||||
@@ -389,12 +474,27 @@
|
||||
function resetMap() {
|
||||
Map.clearSOrE();
|
||||
closeDrivingElement();
|
||||
removeInput();
|
||||
changeTab(list.value[currentIndex.value === 4 ? 0 : currentIndex.value], currentIndex.value);
|
||||
emits('showRestB');
|
||||
}
|
||||
|
||||
function newResetMap() {
|
||||
Map.clearSOrE();
|
||||
closeDrivingElement();
|
||||
removeInput();
|
||||
tab(currentIndex.value);
|
||||
}
|
||||
|
||||
function setStartPosition(data: any) {
|
||||
setInfoByUserData(data);
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
resetMap,
|
||||
newResetMap,
|
||||
setStartPosition,
|
||||
getSearch,
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -668,11 +768,19 @@
|
||||
padding: 9px 18px;
|
||||
min-height: 200px;
|
||||
max-height: 473px;
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
background: #0a1d36;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//border: 1px solid #1b7ef2;
|
||||
|
||||
.has-data {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
}
|
||||
.line-title {
|
||||
margin-bottom: 9px;
|
||||
font-size: 14px;
|
||||
@@ -682,6 +790,8 @@
|
||||
}
|
||||
|
||||
.line-content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
font-size: 12px;
|
||||
color: var(--cardFontColor);
|
||||
|
||||
@@ -785,4 +895,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-top {
|
||||
top: 50px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -21,6 +21,9 @@ enum Api {
|
||||
nearResources = '/health-emergency/emergency/LargeScreenNew/nearResources',
|
||||
todayEmergencyList = '/health-emergency/emergency/LargeScreenNew/todayEmergencyList',
|
||||
healthArchives = '/health-emergency/emergency/LargeScreenNew/healthArchives',
|
||||
contactList = '/health-system/sys/api/emergencyContact/contactList',
|
||||
careUser = '/health-emergency/emergency/LargeScreenNew/careUser',
|
||||
queryAnYanToken = '/health-emergency/emergency/LargeScreenNew/queryAnYanToken',
|
||||
}
|
||||
|
||||
export const statisticsNewApi = (params: any) => post(Api.statisticsNew, params);
|
||||
@@ -35,6 +38,9 @@ export const twoRNApi = (params: any) => get(Api.twoRN, params);
|
||||
export const nearResourcesApi = (params: any) => get(Api.nearResources, params);
|
||||
export const todayEmergencyListApi = (params: any) => post(Api.todayEmergencyList, params);
|
||||
export const healthArchivesApi = (params: any) => get(Api.healthArchives, params);
|
||||
export const contactListApi = (params: any) => get(Api.contactList, params);
|
||||
export const careUserApi = (params: any) => get(Api.careUser, params);
|
||||
export const queryAnYanTokenApi = () => get(Api.queryAnYanToken, {});
|
||||
|
||||
export const threeRModalApi = (params: any) => post(Api.threeRModal, params);
|
||||
export const twoRModal1Api = (params: any) => post(Api.twoRModal1, params);
|
||||
|
||||
@@ -2,6 +2,7 @@ import * as echarts from 'echarts';
|
||||
import { initatorTypee, isTrueOfFalse, SexType, sexTypeList, sexTypeListNew } from '/@/utils/settings.ts';
|
||||
import { getDictByCode2 } from '/@/views/index.api.ts';
|
||||
import dayjs from 'dayjs';
|
||||
import { h } from 'vue';
|
||||
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;
|
||||
@@ -44,7 +45,7 @@ export function getClassCharts(dx: any, dy: any, m: any) {
|
||||
// nameGap: 10,
|
||||
// nameRotate: 0, // 设置旋转角度,0 表示水平
|
||||
nameTextStyle: {
|
||||
fontSize: 12,
|
||||
fontSize: 10,
|
||||
color: '#65C6E7',
|
||||
left: 100,
|
||||
},
|
||||
@@ -56,7 +57,7 @@ export function getClassCharts(dx: any, dy: any, m: any) {
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
interval: 25, // 步长
|
||||
// interval: 25, // 步长
|
||||
max: m,
|
||||
min: 0, // 起始 - 设置y轴刻度的最小值
|
||||
axisLabel: {
|
||||
@@ -837,6 +838,7 @@ export const oneRNewColumns = [
|
||||
title: '性别',
|
||||
dataIndex: 'sex',
|
||||
key: 'sex',
|
||||
width: 80,
|
||||
customRender: ({ text }) => {
|
||||
if (text == '1') {
|
||||
return '女';
|
||||
@@ -849,11 +851,13 @@ export const oneRNewColumns = [
|
||||
title: '年龄',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '应急方式',
|
||||
dataIndex: 'emergencyType',
|
||||
key: 'emergencyType',
|
||||
width: 90,
|
||||
customRender: ({ text }) => {
|
||||
switch (text) {
|
||||
case '0':
|
||||
@@ -869,9 +873,100 @@ export const oneRNewColumns = [
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '应急时间',
|
||||
dataIndex: 'time',
|
||||
key: 'time',
|
||||
},
|
||||
{
|
||||
title: '详细地址',
|
||||
dataIndex: 'd',
|
||||
key: 'd',
|
||||
width: 90,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'cz',
|
||||
key: 'cz',
|
||||
width: 80,
|
||||
},
|
||||
];
|
||||
|
||||
export const monitorColumns = [
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'realName',
|
||||
key: 'realName',
|
||||
},
|
||||
{
|
||||
title: '单位名称',
|
||||
dataIndex: 'orgName1',
|
||||
key: 'orgName1',
|
||||
},
|
||||
{
|
||||
title: '部门名称',
|
||||
dataIndex: 'orgName2',
|
||||
key: 'orgName2',
|
||||
},
|
||||
{
|
||||
title: '手机号码',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '事件类型',
|
||||
dataIndex: 'eventType_dictText',
|
||||
key: 'eventType_dictText',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '异常值',
|
||||
dataIndex: 'dataValue',
|
||||
key: 'dataValue',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '详细地址',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
customRender: ({ record }) => {
|
||||
return !record?.address ? h('div', { style: { color: 'red' } }, record?.gpsErrorMsg) : record?.address;
|
||||
},
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '预警时间',
|
||||
dataIndex: 'warnTime',
|
||||
key: 'warnTime',
|
||||
},
|
||||
];
|
||||
export const contactListColumns = [
|
||||
{
|
||||
title: '联系人姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '关系',
|
||||
dataIndex: 'familyRelation_dictText',
|
||||
key: 'familyRelation_dictText',
|
||||
},
|
||||
{
|
||||
title: '联系人电话',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
},
|
||||
{
|
||||
title: '身份证号',
|
||||
dataIndex: 'idCard',
|
||||
key: 'idCard',
|
||||
customRender: ({ text }) => {
|
||||
if (text) {
|
||||
return text.substring(0, 6) + '********' + text.substring(14);
|
||||
}
|
||||
return '-';
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="one-r-box">
|
||||
<div class="title">
|
||||
<div>救助信息</div>
|
||||
<div>求助信息</div>
|
||||
|
||||
<!-- <div class="top-button-d">-->
|
||||
<a-button size="small" class="title-button title-button-one" @click="handleView">今日应急</a-button>
|
||||
@@ -10,9 +10,9 @@
|
||||
<template v-if="props.userData && Object.keys(props.userData).length > 0">
|
||||
<div class="basic-info">
|
||||
<span>{{ userData.realName }}</span>
|
||||
<a-button v-if="props.userData && Object.keys(props.userData).length > 0" size="small" class="title-button" @click="handleArchives"
|
||||
>健康档案</a-button
|
||||
>
|
||||
<a-button v-if="props.userData && Object.keys(props.userData).length > 0" size="small" class="title-button" @click="handleArchives">
|
||||
健康档案
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="emer-top-d-outer">
|
||||
<div class="emer-top-d">
|
||||
@@ -39,14 +39,14 @@
|
||||
<div class="emer-item-d">
|
||||
<div>当前位置:</div>
|
||||
<div class="emer-item-d-t" :style="{ color: !userData?.lon || !userData?.lat ? '#F24439' : '' }">
|
||||
{{ !userData?.lon || !userData?.lat ? '未获取到位置信息' : locationInfo }}
|
||||
{{ !userData?.address ? (!userData?.lon || !userData?.lat ? '未获取到位置信息' : locationInfo) : userData?.address }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title title-two">
|
||||
<span>联系人</span>
|
||||
<a-button size="small" class="title-button">紧急联系人</a-button>
|
||||
<a-button size="small" class="title-button" @click="handleEmer">紧急联系人</a-button>
|
||||
</div>
|
||||
<div class="emer-info-outer">
|
||||
<div class="emer-info">
|
||||
@@ -77,26 +77,62 @@
|
||||
<Empty class="empty-d" :description="'暂无救助人员'" />
|
||||
</template>
|
||||
|
||||
<Dialog :openVis="openInfo" width="30%" title="健康报警员工信息" @close="handlePoliceClose">
|
||||
<Dialog :openVis="openInfo" 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">姓名:{{ archives?.realName || '--' }}</Col>
|
||||
<Col :span="8">性别:{{ archives?.sex_dictText || '--' }}</Col>
|
||||
<Col :span="8">年龄:{{ archives?.age || '--' }}</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col :span="8">二级单位:{{ archives?.orgName2 || '--' }}</Col>
|
||||
<Col :span="8">部门:{{ archives?.orgName || '--' }}</Col>
|
||||
<Col :span="8">手机号码:{{ archives?.phone || '--' }}</Col>
|
||||
</Row>
|
||||
<Row style="font-size: 14px; font-weight: bold"> 健康信息 </Row>
|
||||
<Row> 异常事件:{{ archives?.eventType_dictText || '--' }} </Row>
|
||||
<Row>
|
||||
<Col :span="8">异常值:{{ archives?.dataValue || '--' }}</Col>
|
||||
<Col :span="16">发生时间:{{ archives?.warnTime || '--' }}</Col>
|
||||
<Row class="open-info-top-title">
|
||||
<div class="title-left"></div>
|
||||
六大健康指标
|
||||
<div class="title-right"></div>
|
||||
</Row>
|
||||
<div class="open-info-body">
|
||||
<div>
|
||||
<div class="item-d">
|
||||
<div class="item-label">BMI:</div><div class="item-value">{{ archives?.bmi || '-' }}</div>
|
||||
</div>
|
||||
<div class="item-d">
|
||||
<div class="item-label">尿酸:</div><div class="item-value">{{ archives?.ua || '-' }}</div>
|
||||
</div>
|
||||
<div class="item-d">
|
||||
<div class="item-label">血同型半胱氨酸:</div><div class="item-value">{{ archives?.hcy || '-' }}</div>
|
||||
</div>
|
||||
<div class="item-d">
|
||||
<div class="item-label">空腹葡萄糖:</div><div class="item-value">{{ archives?.glu || '-' }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="color: #ffffff"> 血压:</div>
|
||||
<div class="son-item item-d">
|
||||
<div class="item-label">目前收缩压监测值:</div><div class="item-value">{{ archives?.sbp || '-' }}</div>
|
||||
</div>
|
||||
<div class="son-item item-d">
|
||||
<div class="item-label">目前舒张压监测值:</div><div class="item-value">{{ archives?.dbp || '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="color: #ffffff"> 血脂:</div>
|
||||
<div class="son-item item-d">
|
||||
<div class="item-label">总胆固醇:</div><div class="item-value">{{ archives?.tc || '-' }}</div>
|
||||
</div>
|
||||
<div class="son-item item-d">
|
||||
<div class="item-label">甘油三酯:</div><div class="item-value">{{ archives?.tg || '-' }}</div>
|
||||
</div>
|
||||
<div class="son-item item-d">
|
||||
<div class="item-label">低密度脂蛋白:</div><div class="item-value">{{ archives?.ldl || '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="item-d">
|
||||
<div class="item-label">既往史:</div><div class="item-value">{{ archives?.pastHistory || '-' }}</div>
|
||||
</div>
|
||||
<div class="item-d">
|
||||
<div class="item-label">手术史:</div><div class="item-value">{{ archives?.surgicalHistory || '-' }}</div>
|
||||
</div>
|
||||
<div class="item-d">
|
||||
<div class="item-label">用药史:</div><div class="item-value">{{ archives?.medicationHistory || '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
@@ -104,7 +140,7 @@
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import pointPng from '/@/assets/indexSun/point.png';
|
||||
import { Col, Empty, Row } from 'ant-design-vue';
|
||||
import { Empty, Row } from 'ant-design-vue';
|
||||
import { Map } from '/@/assets/mapUtils/map.ts';
|
||||
import { ref, watch } from 'vue';
|
||||
import Dialog from '/@/components/dialog/Dialog.vue';
|
||||
@@ -117,7 +153,7 @@
|
||||
const { themeType } = useTheme();
|
||||
const locationInfo = ref<string>('');
|
||||
|
||||
const emit = defineEmits(['handleView']);
|
||||
const emit = defineEmits(['handleView', 'handleEmer']);
|
||||
const openInfo = ref<boolean>(false);
|
||||
const archives = ref<object>({});
|
||||
|
||||
@@ -134,14 +170,29 @@
|
||||
function handleView() {
|
||||
emit('handleView');
|
||||
}
|
||||
|
||||
function handleEmer() {
|
||||
emit('handleEmer', props.userData?.userId);
|
||||
}
|
||||
|
||||
function handleArchives() {
|
||||
archives.value = {};
|
||||
openInfo.value = true;
|
||||
healthArchivesApi({ userId: props.userData?.userId })
|
||||
.then((res) => {})
|
||||
.catch((err) => {});
|
||||
.then((res: any) => {
|
||||
console.log(res);
|
||||
if (res?.code === 200) {
|
||||
archives.value = res?.result || {};
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
function handlePoliceClose() {
|
||||
archives.value = {};
|
||||
openInfo.value = false;
|
||||
}
|
||||
|
||||
function getTypeName(type: string) {
|
||||
@@ -159,6 +210,7 @@
|
||||
}
|
||||
}
|
||||
function getSex(type: string) {
|
||||
type = type + '';
|
||||
switch (type) {
|
||||
case '1':
|
||||
return '女';
|
||||
@@ -171,7 +223,7 @@
|
||||
|
||||
function getAddress() {
|
||||
Map.getAddressByPoint([props.userData?.lon, props.userData?.lat])
|
||||
.then((res: string) => {
|
||||
.then((res: any) => {
|
||||
locationInfo.value = res;
|
||||
})
|
||||
.catch((err) => {
|
||||
@@ -209,7 +261,7 @@
|
||||
.title-button {
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
font-size: 10px !important;
|
||||
font-size: 13px !important;
|
||||
padding: 2px 10px;
|
||||
background: radial-gradient(ellipse at center, #082147 0%, #08254c 55%, #085faa 100%);
|
||||
border-radius: 8px;
|
||||
@@ -320,4 +372,64 @@
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.title-left,
|
||||
.title-right {
|
||||
width: 48px;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #02fafc 0%, rgba(2, 250, 252, 0) 100%);
|
||||
border-radius: 1px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.title-left {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.open-info-top-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #5cfbff;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.open-info-body {
|
||||
padding: 0 20px;
|
||||
font-size: 16px;
|
||||
|
||||
> div {
|
||||
&:nth-child(1) {
|
||||
padding: 0 10px 10px;
|
||||
border-bottom: 1px solid #5cfbff;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
padding: 0 10px 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
> div {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item-d {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
color: #5cfbff;
|
||||
flex: 1;
|
||||
white-space: wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.son-item {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -31,10 +31,10 @@
|
||||
<div> <img :src="imgList[chooseType]" alt="" />{{ tabList[chooseType].label }}</div>
|
||||
<div v-if="[0, 1].includes(chooseType)"> 参考范围: {{ tabList[chooseType].tips }} </div>
|
||||
</div>
|
||||
<div style="height: 210px">
|
||||
<div style="height: 210px; display: flex; align-items: center; justify-content: center; width: 100%">
|
||||
<div style="height: 100%" class="content-chart">
|
||||
<template v-if="[0, 1, 2, 3].includes(chooseType)">
|
||||
<three-left-new-item :choose-type="chooseType" />
|
||||
<three-left-new-item :org-code="selectValue" :type="selectValue1" :choose-type="chooseType" />
|
||||
</template>
|
||||
<template v-if="[4].includes(chooseType)">
|
||||
<sleep-item :orgCode="selectValue" :type="selectValue1" style="height: 100%" />
|
||||
@@ -79,12 +79,12 @@
|
||||
{
|
||||
label: '心率',
|
||||
value: 0,
|
||||
tips: '正常范围60~100次/分',
|
||||
tips: '正常60~100次/分',
|
||||
},
|
||||
{
|
||||
label: '血氧',
|
||||
value: 1,
|
||||
tips: '血氧饱和度范围95%~100%',
|
||||
tips: '血氧饱和度95%~100%',
|
||||
},
|
||||
{
|
||||
label: '血压',
|
||||
@@ -115,9 +115,23 @@
|
||||
]);
|
||||
const newChart = ref<HTMLElement>();
|
||||
function clickChooseType(type: any) {
|
||||
if (timer.value) {
|
||||
clearInterval(timer.value);
|
||||
|
||||
timer.value = setInterval(() => {
|
||||
if (chooseType.value !== 5) {
|
||||
chooseType.value += 1;
|
||||
} else {
|
||||
chooseType.value = 0;
|
||||
}
|
||||
getData();
|
||||
}, 10000);
|
||||
}
|
||||
if (chooseType.value === type) return;
|
||||
chooseType.value = type;
|
||||
getData();
|
||||
nextTick(() => {
|
||||
getData();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@@ -144,7 +158,7 @@
|
||||
chooseType.value = 0;
|
||||
}
|
||||
getData();
|
||||
}, 5000);
|
||||
}, 10000);
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
@@ -447,7 +461,8 @@
|
||||
justify-content: space-between;
|
||||
}
|
||||
.content-chart {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
flex: 1;
|
||||
.charts {
|
||||
|
||||
@@ -32,6 +32,10 @@
|
||||
userCount: {
|
||||
type: Number,
|
||||
},
|
||||
chooseIndex: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
},
|
||||
themeType: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
@@ -59,7 +63,7 @@
|
||||
function initChart(chartData, total, color) {
|
||||
nextTick(() => {
|
||||
let myChart = echarts.init(healthChart.value);
|
||||
let options = circleRing(chartData, total, color);
|
||||
let options = circleRing(chartData, total, color, props.chooseIndex);
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
|
||||
@@ -27,10 +27,24 @@ export function screenPie(chartData) {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
formatter: function (params: any) {
|
||||
return `${params.name}\n占比:${params.percent}%\n人次:${params.value}次`;
|
||||
return `{name|${params.name}}\n{percent|占比:${params.percent}%}\n{value|${params.value}次}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 10,
|
||||
lineHeight: 15,
|
||||
},
|
||||
percent: {
|
||||
fontSize: 10,
|
||||
lineHeight: 15,
|
||||
},
|
||||
value: {
|
||||
fontSize: 10,
|
||||
lineHeight: 15,
|
||||
},
|
||||
},
|
||||
color: '#ffffff',
|
||||
fontSize: 14,
|
||||
fontSize: 10,
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
@@ -45,7 +59,7 @@ export function screenPie(chartData) {
|
||||
}
|
||||
|
||||
//左侧圆
|
||||
export function circleRing(chartData, total, color) {
|
||||
export function circleRing(chartData, total, color, index = 0) {
|
||||
const data = visibleChartLabel(chartData);
|
||||
return {
|
||||
color: color,
|
||||
@@ -79,15 +93,33 @@ export function circleRing(chartData, total, color) {
|
||||
position: 'outside',
|
||||
// formatter: '{a}{d}%\n{c}人次',
|
||||
formatter: function (params: any) {
|
||||
return `${params.name}:${params.percent}%\n${params.value}次`;
|
||||
if (index === 3) {
|
||||
return `{name|${params.name}}\n{percent|占比:${params.percent}%}\n{value|${params.value}次}`;
|
||||
} else {
|
||||
return `{name|${params.name}:${params.percent}%}\n{value|${params.value}次}`;
|
||||
}
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 10,
|
||||
lineHeight: 15,
|
||||
},
|
||||
percent: {
|
||||
fontSize: 10,
|
||||
lineHeight: 15,
|
||||
},
|
||||
value: {
|
||||
fontSize: 10,
|
||||
lineHeight: 15,
|
||||
},
|
||||
},
|
||||
color: '#ffffff',
|
||||
fontSize: 14,
|
||||
fontSize: 10,
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 2,
|
||||
length2: 30,
|
||||
length2: 25,
|
||||
minTurnAngle: 120,
|
||||
},
|
||||
data: data,
|
||||
|
||||
@@ -72,6 +72,7 @@
|
||||
}
|
||||
|
||||
.pie-container.self {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
:tips="dataList[props.chooseType].tips"
|
||||
:color="dataList[props.chooseType].color"
|
||||
:user-count="dataList[props.chooseType].userCount"
|
||||
:chooseIndex="props.chooseType"
|
||||
/>
|
||||
</template>
|
||||
r
|
||||
|
||||
@@ -93,7 +93,6 @@
|
||||
});
|
||||
}
|
||||
|
||||
const myChart = ref();
|
||||
function getData() {
|
||||
twoLApi({
|
||||
sex: chooseType.value,
|
||||
@@ -110,23 +109,24 @@
|
||||
});
|
||||
}
|
||||
|
||||
function initChart(value) {
|
||||
myChart.value = echarts.init(newChart.value!);
|
||||
function initChart(value: any) {
|
||||
let myChart = echarts.init(newChart.value);
|
||||
const dx =
|
||||
value.map((item) => {
|
||||
value.map((item: any) => {
|
||||
return item.name;
|
||||
}) || [];
|
||||
const dy =
|
||||
value.map((item) => {
|
||||
value.map((item: any) => {
|
||||
return item.count;
|
||||
}) || [];
|
||||
|
||||
const max = value.sort((a, b) => b.count - a.count).length > 0 ? value.sort((a, b) => b.count - a.count)[0].count : [];
|
||||
const max: any =
|
||||
value.sort((a: any, b: any) => b.count - a.count).length > 0 ? value.sort((a: any, b: any) => b.count - a.count)[0].count : [];
|
||||
const m = max % 25 === 0 ? max : (parseInt(max / 25) + 1) * 25;
|
||||
let option = getClassCharts(dx, dy, m);
|
||||
myChart.value.setOption(option);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.value.resize();
|
||||
myChart && myChart.resize();
|
||||
});
|
||||
}
|
||||
const emit = defineEmits(['handleView']);
|
||||
|
||||
@@ -7,13 +7,13 @@ export const list = [
|
||||
},
|
||||
{
|
||||
label: '关爱联络员',
|
||||
field: '',
|
||||
field: 'careLiaisonName',
|
||||
span: 12,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '单位',
|
||||
field: 'workNoUnit',
|
||||
field: 'workUnit',
|
||||
span: 24,
|
||||
options: null,
|
||||
},
|
||||
@@ -84,13 +84,13 @@ export const list = [
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '血压控制目标(收缩压)',
|
||||
label: '目标',
|
||||
field: 'systolicPressureTarget',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '目前收缩压监测值',
|
||||
label: '目前',
|
||||
field: 'systolicPressureCurrent',
|
||||
span: 8,
|
||||
options: null,
|
||||
@@ -102,13 +102,13 @@ export const list = [
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '血压控制目标(舒张压)',
|
||||
label: '目标',
|
||||
field: 'diastolicPressureTarget',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '目前舒张压监测值',
|
||||
label: '目前',
|
||||
field: 'diastolicPressureCurrent',
|
||||
span: 8,
|
||||
options: null,
|
||||
@@ -135,13 +135,13 @@ export const list = [
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '血糖控制目标',
|
||||
label: '目标',
|
||||
field: 'bloodSugarTarget',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '目前血糖监测值',
|
||||
label: '目前',
|
||||
field: 'bloodSugarCurrent',
|
||||
span: 8,
|
||||
options: null,
|
||||
@@ -153,13 +153,13 @@ export const list = [
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: 'LDL控制目标',
|
||||
label: '目标',
|
||||
field: 'ldlTarget',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '目前LDL监测值',
|
||||
label: '目前',
|
||||
field: 'ldlCurrent',
|
||||
span: 8,
|
||||
options: null,
|
||||
@@ -171,13 +171,13 @@ export const list = [
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: 'TC控制目标',
|
||||
label: '目标',
|
||||
field: 'tcTarget',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '目前TC监测值',
|
||||
label: '目前',
|
||||
field: 'tcCurrent',
|
||||
span: 8,
|
||||
options: null,
|
||||
@@ -189,13 +189,13 @@ export const list = [
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: 'TG控制目标',
|
||||
label: '目标',
|
||||
field: 'tgTarget',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '目前TG监测值',
|
||||
label: '目前',
|
||||
field: 'tgCurrent',
|
||||
span: 8,
|
||||
options: null,
|
||||
@@ -207,13 +207,13 @@ export const list = [
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '血尿酸控制目标',
|
||||
label: '目标',
|
||||
field: 'uricAcidTarget',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '目前血尿酸监测值',
|
||||
label: '目前',
|
||||
field: 'uricAcidCurrent',
|
||||
span: 8,
|
||||
options: null,
|
||||
@@ -225,13 +225,13 @@ export const list = [
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '同型半胱氨酸控制目标',
|
||||
label: '目标',
|
||||
field: 'homocysteineTarget',
|
||||
span: 8,
|
||||
options: null,
|
||||
},
|
||||
{
|
||||
label: '目前同型半胱氨酸监测值',
|
||||
label: '目前',
|
||||
field: 'homocysteineCurrent',
|
||||
span: 8,
|
||||
options: null,
|
||||
|
||||
Reference in New Issue
Block a user