312 lines
11 KiB
Vue
312 lines
11 KiB
Vue
<template>
|
||
<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 }}<span style="margin-left: 30px">{{ rightDate }}</span>
|
||
</div>
|
||
<div class="sun-title-center">健康服务中心</div>
|
||
<div class="sun-title-right"></div>
|
||
</div>
|
||
|
||
<div class="body-box">
|
||
<div class="item-list-d">
|
||
<!-- <div v-for="(item, index) in itemList" :key="`list-item-${index}`" @click="toOther(index)">-->
|
||
<!-- <div>-->
|
||
<!-- <img :src="item.img" alt="" />-->
|
||
<!-- </div>-->
|
||
<!-- <div>-->
|
||
<!-- {{ item.label }}-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<template v-for="(item, index) in imgList" :key="`img-list-${index}`">
|
||
<img :src="item" alt="" @click="toOther(index)" />
|
||
</template>
|
||
</div>
|
||
<div class="bottom-d">
|
||
<span style="word-break: break-all">
|
||
秉持“统一规范、高效联通、自主运算、智能提取”原则，健康服务中心创新构建健康监测、健康咨询、急救服务“三位一体”的数字化平台，打造覆盖预防、干预、急救全链条的智慧健康保障体系。该平台动态可视化追踪重点人群健康指标，依托远程医疗打破资源地域限制，构建“分钟级”急救响应通道，实现健康信息互联共享与闭环管理，推动健康服务从“被动应对”向“主动防控”升级，为员工身心健康构筑坚实防线，是守护油田员工健康的“数字哨兵”和新疆油田公司建设5000万吨现代化综合性能源公司的“健康基石”。
|
||
</span>
|
||
</div>
|
||
|
||
<div class="spin-d" v-if="loading">
|
||
<a-spin size="large" />
|
||
</div>
|
||
</div>
|
||
|
||
<VideoComponent @click.stop v-if="videoUrl" :src="videoUrl" />
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import LoginOutButton from '/@/views/components/loginOutButton.vue';
|
||
import VideoComponent from '/@/views/components/videoComponent.vue';
|
||
import { useUserStore } from '/@/store/modules/user.ts';
|
||
import { onMounted, ref, watch } from 'vue';
|
||
import dayjs from 'dayjs';
|
||
import { getAuthCache } from '/@/utils/auth.ts';
|
||
import { startTime } from '/@/utils/utils.ts';
|
||
const { getCenterInfo } = useUserStore();
|
||
// import consultPng from '/@/assets/img/homePage/consult.png';
|
||
// import emergencyPng from '/@/assets/img/homePage/emergency.png';
|
||
// import monitorPng from '/@/assets/img/homePage/monitor.png';
|
||
import itemOnePng from '/@/assets/homePage/itemOne.png';
|
||
import itemTwoPng from '/@/assets/homePage/itemTwo.png';
|
||
import itemThreePng from '/@/assets/homePage/itemThree.png';
|
||
import { useRouter } from 'vue-router';
|
||
import { queryAnYanTokenApi } from '/@/views/indexSun/indexSun.api.ts';
|
||
import { message } from 'ant-design-vue';
|
||
|
||
const dateInfo = ref<object>({});
|
||
const qhInterval = ref();
|
||
const rightDate = ref<string>('');
|
||
const initDate = ref(startTime);
|
||
const router = useRouter();
|
||
const loading = ref<boolean>(false);
|
||
const imgList = [itemOnePng, itemTwoPng, itemThreePng];
|
||
|
||
import { getVideo } from '/@/api/user';
|
||
import { getAppEnvConfig } from '/@/utils/env.ts';
|
||
|
||
const videoUrlLocal = window.localStorage.getItem('videoUrl') || null;
|
||
// 1. 本次进来，直接取 Pinia/缓存中的老地址，保证视频组件能立即渲染
|
||
const videoUrl = ref(videoUrlLocal);
|
||
|
||
// const itemList = [
|
||
// {
|
||
// label: '健康监测平台',
|
||
// img: monitorPng,
|
||
// },
|
||
// {
|
||
// label: '急救服务平台',
|
||
// img: emergencyPng,
|
||
// },
|
||
// {
|
||
// label: '健康咨询平台',
|
||
// img: consultPng,
|
||
// },
|
||
// ];
|
||
|
||
onMounted(() => {
|
||
getTime();
|
||
qhInterval.value = setInterval(() => {
|
||
getTime();
|
||
}, 1000);
|
||
rightDate.value = '累计运行时间：' + (dayjs().diff(dayjs(initDate.value), 'days') + 1) + ' 天';
|
||
const centerInfo = getAuthCache('centerInfo');
|
||
document.title = centerInfo.screenTitle || '健康服务中心';
|
||
|
||
asyncUpdateVideoCache();
|
||
});
|
||
|
||
/**
|
||
* 异步校验并预热下次使用的视频
|
||
*/
|
||
async function asyncUpdateVideoCache() {
|
||
try {
|
||
const res: any = await getVideo();
|
||
if (res && res.success) {
|
||
const serverUrl = getAppEnvConfig().VITE_GLOB_API_URL + '/file/show/' + res.result.videoUrl;
|
||
|
||
// 2. 比对地址：如果服务器地址变了，说明下次需要换视频
|
||
if (serverUrl !== videoUrl.value) {
|
||
console.log('检测到新资源，后台开始异步预缓存...');
|
||
|
||
// 3. 立即更新 Pinia 和持久化缓存（这样下次进来 getSrc 就是新的了）
|
||
window.localStorage.setItem('videoUrl', serverUrl);
|
||
|
||
// 4. 动态插入 link 标签，让浏览器在后台静默下载新视频
|
||
// 浏览器会自动处理，不会影响当前正在播放的老视频
|
||
const link = document.createElement('link');
|
||
link.rel = 'preload';
|
||
link.as = 'video';
|
||
link.href = serverUrl;
|
||
link.type = 'video/mp4';
|
||
document.head.appendChild(link);
|
||
} else {
|
||
console.log('视频地址一致，不需要做任何操作...');
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.warn('后台异步更新视频缓存失败', e);
|
||
}
|
||
}
|
||
|
||
const getTime = () => {
|
||
dateInfo.value = {
|
||
day: dayjs().format('YYYY年MM月DD日'),
|
||
times: dayjs().format('HH:mm:ss'),
|
||
};
|
||
};
|
||
watch(
|
||
() => dateInfo.value.day,
|
||
() => {
|
||
rightDate.value = '累计运行时间：' + (dayjs().diff(dayjs(initDate.value), 'days') + 1) + ' 天';
|
||
}
|
||
);
|
||
|
||
function toOther(index: number) {
|
||
switch (index) {
|
||
case 0:
|
||
toOne();
|
||
break;
|
||
case 1:
|
||
toTwo();
|
||
break;
|
||
case 2:
|
||
toThree();
|
||
break;
|
||
}
|
||
}
|
||
|
||
function toOne() {
|
||
loading.value = true;
|
||
queryAnYanTokenApi()
|
||
.then((res: any) => {
|
||
if (res.code === 200) {
|
||
// res.result = {
|
||
// scope: 'default',
|
||
// expires_in: 3348,
|
||
// token_type: 'bearer',
|
||
// access_token: '2a643081-b661-4f44-bc36-6bc91addde3a',
|
||
// refresh_token: 'e0a91714-59aa-4311-bb6c-ca3a48f20dd1',
|
||
// satoken: '9a493672-36e0-4539-9a74-650e95cefc87',
|
||
// };
|
||
window.open(
|
||
`http://aygc.pc.iosp.ydpt.tech/monitor/health?tokens=${res?.result?.access_token}&expires_in=${res?.result?.expires_in}&refresh_token=${res?.result?.refresh_token}&satoken=${res?.result?.satoken}`,
|
||
'_blank'
|
||
);
|
||
} else {
|
||
message.error(res?.message);
|
||
}
|
||
loading.value = false;
|
||
})
|
||
.catch((err) => {
|
||
loading.value = false;
|
||
|
||
console.log(err);
|
||
});
|
||
}
|
||
function toTwo() {
|
||
const routeUrl = router.resolve({
|
||
path: '/home1',
|
||
}).href;
|
||
window.open(routeUrl, '_blank');
|
||
}
|
||
function toThree() {
|
||
const routeUrl = router.resolve({
|
||
path: '/home2',
|
||
}).href;
|
||
window.open(routeUrl, '_blank');
|
||
}
|
||
</script>
|
||
<style scoped lang="less">
|
||
.sun-screen-box {
|
||
height: 100vh;
|
||
letter-spacing: 2px;
|
||
background: url('/@/assets/homePage/bg.jpg') no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.sun-screen-title {
|
||
height: 80px;
|
||
font-family: MicrosoftYaHei-Bold;
|
||
background: url('/@/assets/indexSun/bg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
font-size: 20px;
|
||
color: #fff;
|
||
text-align: center;
|
||
|
||
.sun-title-left {
|
||
text-align: left;
|
||
flex: 1;
|
||
line-height: 60px;
|
||
padding-left: 15px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.sun-title-center {
|
||
flex: 1;
|
||
font-size: 50px;
|
||
line-height: 80px;
|
||
letter-spacing: 10px;
|
||
text-shadow: 2px 2px 5px rgba(118, 141, 219, 0.53);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.sun-title-right {
|
||
flex: 1;
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.body-box {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0 80px;
|
||
position: relative;
|
||
|
||
.item-list-d {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-top: 130px;
|
||
|
||
> img {
|
||
width: 560px;
|
||
height: 220px;
|
||
}
|
||
|
||
//> div {
|
||
// width: 480px;
|
||
// height: 520px;
|
||
// border: 1px solid #77849e;
|
||
// border-radius: 10px;
|
||
// color: #ffffff;
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
// justify-content: center;
|
||
// align-items: center;
|
||
// font-weight: 400;
|
||
// font-size: 40px;
|
||
// cursor: pointer;
|
||
// background: rgba(21, 38, 87, 0.2);
|
||
// img {
|
||
// width: 234px;
|
||
// height: 253px;
|
||
// }
|
||
//
|
||
// &:hover {
|
||
// border-color: #00ccff;
|
||
// color: #00ccff;
|
||
// background: rgba(21, 38, 87, 0.6);
|
||
// }
|
||
//}
|
||
}
|
||
|
||
.bottom-d {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-weight: 500;
|
||
font-family: HarmonyOS Sans SC;
|
||
font-size: 36px;
|
||
color: #c9daff;
|
||
}
|
||
|
||
.spin-d {
|
||
position: absolute;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
</style>
|