update
1.添加新疆大屏新首页
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 179 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
+16
-8
@@ -29,6 +29,14 @@ const routes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: '/home',
|
||||
name: 'index',
|
||||
meta: {
|
||||
title: '健康服务中心',
|
||||
},
|
||||
component: () => import('/@/views/homePage.vue'),
|
||||
},
|
||||
{
|
||||
path: '/home1',
|
||||
name: 'index1',
|
||||
meta: {
|
||||
title: '健康咨询',
|
||||
},
|
||||
@@ -42,14 +50,14 @@ const routes: Array<RouteRecordRaw> = [
|
||||
},
|
||||
component: () => import('/@/views/indexSon.vue'),
|
||||
},
|
||||
{
|
||||
path: '/home1',
|
||||
name: 'index1',
|
||||
meta: {
|
||||
title: '副屏1',
|
||||
},
|
||||
component: () => import('/@/views/index.vue'),
|
||||
},
|
||||
// {
|
||||
// path: '/home1',
|
||||
// name: 'index1',
|
||||
// meta: {
|
||||
// title: '副屏1',
|
||||
// },
|
||||
// component: () => import('/@/views/index.vue'),
|
||||
// },
|
||||
];
|
||||
|
||||
const router: Router = createRouter({
|
||||
|
||||
@@ -110,7 +110,6 @@
|
||||
.sun-title-left {
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
// font-size: 22px;
|
||||
font-size: clamp(14px, 1vw, 50px);
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
|
||||
@@ -0,0 +1,239 @@
|
||||
<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">{{ getCenterInfo.screenTitle || '健康服务中心' }}</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>
|
||||
</div>
|
||||
<div class="bottom-d">
|
||||
秉持“统一规范、高效联通、自主运算、智能提取”原则，健康服务中心创新构建健康监测、健康咨询、急救服务“三位一体”的数字化平台，打造覆盖预防、干预、急救全链条的智慧健康保障体系。该平台动态可视化追踪重点人群健康指标，依托远程医疗打破资源地域限制，构建“分钟级”急救响应通道，实现健康信息互联共享与闭环管理，推动健康服务从“被动应对”向“主动防控”升级，为员工身心健康构筑坚实防线，是守护油田员工健康的“数字哨兵”和新疆油田公司建设5000万吨现代化综合性能源公司的“健康基石”。
|
||||
</div>
|
||||
|
||||
<div class="spin-d" v-if="loading">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import LoginOutButton from '/@/views/components/loginOutButton.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 { 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 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 || '健康服务中心';
|
||||
});
|
||||
|
||||
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) {
|
||||
window.open('http://aygc.pc.iosp.ydpt.tech/monitor/health?tokens=' + res?.result, '_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/indexSun/bigBg.png') 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 151px;
|
||||
position: relative;
|
||||
|
||||
.item-list-d {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 130px;
|
||||
|
||||
> 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-size: 18px;
|
||||
color: #c9daff;
|
||||
}
|
||||
|
||||
.spin-d {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,7 +3,7 @@
|
||||
<login-out-button out-url="login" />
|
||||
<div class="sun-screen-title">
|
||||
<div class="sun-title-left">
|
||||
{{ dateInfo?.day }} {{ dateInfo?.times }}<span style="margin-left: 10px">{{ rightDate }}</span>
|
||||
{{ dateInfo?.day }} {{ dateInfo?.times }}<span style="margin-left: 30px">{{ rightDate }}</span>
|
||||
</div>
|
||||
<div class="sun-title-center">{{ getCenterInfo.screenTitle || '健康服务中心' }}</div>
|
||||
<div class="sun-title-right">
|
||||
@@ -732,22 +732,26 @@
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
|
||||
.sun-title-left {
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
line-height: 60px;
|
||||
padding-left: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.sun-title-right {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
line-height: 50px;
|
||||
padding-right: 30px;
|
||||
> button {
|
||||
&:nth-child(1) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user