feat(personalData): 优化个人数据弹窗布局与无数据提示展示
- 调整顶部操作栏布局为 space-between,增加垂直居中对齐 - 新增无数据提示文字(noDataTip)展示区域,位于日期切换按钮左侧
This commit is contained in:
+15
-8
@@ -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')}】暂无监测数据`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user