feat(personalData): 优化个人数据弹窗布局与无数据提示展示

- 调整顶部操作栏布局为 space-between,增加垂直居中对齐
- 新增无数据提示文字(noDataTip)展示区域,位于日期切换按钮左侧
This commit is contained in:
2026-05-15 09:46:33 +08:00
parent 8044ce0461
commit 8e7b857dbd
@@ -10,7 +10,8 @@
<!-- <div>数据日期{{ userInfo.dataDate }}</div>--> <!-- <div>数据日期{{ userInfo.dataDate }}</div>-->
</div> </div>
<div style="width: 75%"> <div style="width: 75%">
<div style="display: flex; justify-content: flex-end; padding-right: 30px"> <div style="display: flex; justify-content: space-between; align-items: center; padding-right: 30px">
<div style="color: #faad14; font-size: 13px; padding-left: 4px">{{ noDataTip }}</div>
<div style="display: flex; font-size: 20px; align-items: center"> <div style="display: flex; font-size: 20px; align-items: center">
<a-button size="small" @click="changeDate('0')"> <a-button size="small" @click="changeDate('0')">
<LeftOutlined /> <LeftOutlined />
@@ -53,13 +54,14 @@
import AllLook from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/componets/allLook.vue'; import AllLook from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/componets/allLook.vue';
import { getDetail, userDataDayByMonth } from '/@/views/healthMonitor/healMonitorManage/monitorToll/personalData/personalData.api'; import { getDetail, userDataDayByMonth } from '/@/views/healthMonitor/healMonitorManage/monitorToll/personalData/personalData.api';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { Menu, message } from 'ant-design-vue'; import { Menu } from 'ant-design-vue';
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue'; import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
const userInfo = ref({}); const userInfo = ref({});
const infoData = ref({}); const infoData = ref({});
const userId = ref(''); const userId = ref('');
const haveInfo = ref(''); const haveInfo = ref('');
const nowDate = ref(dayjs()); const nowDate = ref(dayjs());
const noDataTip = ref('');
const loadedYear = ref(dayjs().format('YYYY')); const loadedYear = ref(dayjs().format('YYYY'));
const isRight = computed(() => dayjs(nowDate.value).format('YYYY-MM-DD') != dayjs().format('YYYY-MM-DD')); const isRight = computed(() => dayjs(nowDate.value).format('YYYY-MM-DD') != dayjs().format('YYYY-MM-DD'));
//表单赋值 //表单赋值
@@ -115,15 +117,18 @@
} }
async function getInfo() { async function getInfo() {
const dateStr = dayjs(nowDate.value).format('YYYY-MM-DD');
await getDetail({ await getDetail({
userId: userId.value, userId: userId.value,
dataDate: dayjs(nowDate.value).format('YYYY-MM-DD'), dataDate: dateStr,
}).then((res) => { }).then((res) => {
// openModal(true, {
// record,
// dataInfo: res,
// });
infoData.value = res; infoData.value = res;
// API 返回空数据时行内提示,否则清空提示
if (!res || Object.keys(res).length === 0) {
noDataTip.value = `${dateStr}】暂无监测数据`;
} else {
noDataTip.value = '';
}
}); });
} }
@@ -138,7 +143,9 @@
if (getDisabled(nowDate.value)) { if (getDisabled(nowDate.value)) {
getInfo(); getInfo();
} else { } else {
message.info('当日暂无监测数据'); // 本地记录无数据:清空展示数据并行内提示具体日期
infoData.value = {};
noDataTip.value = `${dayjs(nowDate.value).format('YYYY-MM-DD')}】暂无监测数据`;
} }
} }