OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

fix: 固定底部行条

Browse Source
This commit is contained in:
TsMask
2023-10-23 11:08:05 +08:00
parent 8cafa39539
commit da6ae18028
1 changed files with 58 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/layouts/BasicLayout.vue
View File

@@ -122,52 +122,52 @@ tabsStore.clear();
// //
onMounted(() => { onMounted(() => {
fnGetServerTime(); // fnGetServerTime();
useAlarmStore().fnGetActiveAlarmInfo(); useAlarmStore().fnGetActiveAlarmInfo();
}); });
// ==== 服务器时间显示 start // ==== 服务器时间显示 start
let serverTime = reactive({ // let serverTime = reactive({
timestamp: 0, // timestamp: 0,
zone: '', // 时区 UTC // zone: '', // 时区 UTC
str: '', // 年月日时分秒 // str: '', // 年月日时分秒
interval: 0 as any, // 定时器 // interval: 0 as any, // 定时器
}); // });
// 获取服务器时间 // // 获取服务器时间
function fnGetServerTime() { // function fnGetServerTime() {
getServerTime().then(res => { // getServerTime().then(res => {
if (res.code === RESULT_CODE_SUCCESS && res.data) { // if (res.code === RESULT_CODE_SUCCESS && res.data) {
// 时间戳 // // 时间戳
serverTime.timestamp = parseInt(res.data.timestamp); // serverTime.timestamp = parseInt(res.data.timestamp);
serverTime.interval = setInterval(() => { // serverTime.interval = setInterval(() => {
serverTime.timestamp += 1000; // serverTime.timestamp += 1000;
serverTime.str = parseDateToStr(serverTime.timestamp); // serverTime.str = parseDateToStr(serverTime.timestamp);
}, 1000); // }, 1000);
// 时区 // // 时区
const offsetHours = res.data.timeZone / 3600; // const offsetHours = res.data.timeZone / 3600;
if (offsetHours === 0) { // if (offsetHours === 0) {
serverTime.zone = 'UTC'; // serverTime.zone = 'UTC';
} else if (offsetHours > 0) { // } else if (offsetHours > 0) {
serverTime.zone = `UTC +${offsetHours}`; // serverTime.zone = `UTC +${offsetHours}`;
} else { // } else {
serverTime.zone = `UTC ${offsetHours}`; // serverTime.zone = `UTC ${offsetHours}`;
} // }
} // }
}); // });
} // }
// 监听可视改变 // 监听可视改变
document.addEventListener('visibilitychange', function () { document.addEventListener('visibilitychange', function () {
if (document.visibilityState == 'hidden') { if (document.visibilityState == 'hidden') {
//切离该页面时执行 //切离该页面时执行
clearInterval(serverTime.interval); // clearInterval(serverTime.interval);
} }
if (document.visibilityState == 'visible') { if (document.visibilityState == 'visible') {
//切换到该页面时执行 //切换到该页面时执行
clearInterval(serverTime.interval); // clearInterval(serverTime.interval);
fnGetServerTime(); // fnGetServerTime();
useAlarmStore().fnGetActiveAlarmInfo(); useAlarmStore().fnGetActiveAlarmInfo();
} }
}); });
@@ -237,15 +237,18 @@ document.addEventListener('visibilitychange', function () {
</RouterView> </RouterView>
<!--插槽-内容底部--> <!--插槽-内容底部-->
<template #footerRender> <template #footerRender="{ width }">
<footer class="footer"> <footer class="footer">
<div> &nbsp;
<span>{{ appStore.copyright }}</span> <div class="footer-fixed" :style="{ width }">
</div> <div>
<div> <span>{{ appStore.copyright }}</span>
<span class="footer-time"> </div>
{{ serverTime.str }} {{ serverTime.zone }} <div>
</span> <span class="footer-time">
<!-- {{ serverTime.str }} {{ serverTime.zone }} -->
</span>
</div>
</div> </div>
</footer> </footer>
</template> </template>
@@ -269,18 +272,25 @@ document.addEventListener('visibilitychange', function () {
} }
.footer { .footer {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
z-index: 16; z-index: 16;
margin: 0px; margin: 0px;
padding: 4px 16px;
width: auto; width: auto;
background: #fff;
box-shadow: 0 1px 4px #0015291f;
transition: background 0.3s, width 0.2s;
margin-top: 48px; margin-top: 48px;
padding: 4px 16px;
&-fixed {
position: fixed;
bottom: 0;
right: 0;
width: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
padding: 4px 16px;
background: #fff;
box-shadow: 0 1px 4px #0015291f;
transition: background 0.3s, width 0.2s;
}
&-time { &-time {
color: #00000085; color: #00000085;