update

1.添加新疆大屏新首页

src/router/index.ts

@@ -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',
+    //     path: '/home1',
-        name: 'index1',
+    //     name: 'index1',
-        meta: {
+    //     meta: {
-            title: '副屏1',
+    //         title: '副屏1',
-        },
+    //     },
-        component: () => import('/@/views/index.vue'),
+    //     component: () => import('/@/views/index.vue'),
-    },
+    // },
 ];
 
 const router: Router = createRouter({

src/views/healthConsultation/HealthConsultationIndex.vue

@@ -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;

src/views/homePage.vue

@@ -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">
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;秉持“统一规范、高效联通、自主运算、智能提取”原则，健康服务中心创新构建健康监测、健康咨询、急救服务“三位一体”的数字化平台，打造覆盖预防、干预、急救全链条的智慧健康保障体系。该平台动态可视化追踪重点人群健康指标，依托远程医疗打破资源地域限制，构建“分钟级”急救响应通道，实现健康信息互联共享与闭环管理，推动健康服务从“被动应对”向“主动防控”升级，为员工身心健康构筑坚实防线，是守护油田员工健康的“数字哨兵”和新疆油田公司建设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>

src/views/indexSun.vue

@@ -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;
+                    }
                 }
             }