update: 初始化：新疆大屏基础搭建

2025-07-02 13:48:50 +08:00
parent 1cbda373e0
commit ff493d83d9
24 changed files with 1482 additions and 14 deletions
@@ -0,0 +1,145 @@
+<template>
+    <div class="outer">
+        <login-out-button out-url="login" />
+        <div class="title-d outer-title">
+            <div class="title-d-left">
+                {{ dayTimeO }}
+            </div>
+            <div class="title-d-middle"> 应急就医服务中心</div>
+            <div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
+        </div>
+        <div class="body-d">
+            <div class="body-d-left">
+                <OneL />
+                <twoL />
+                <threeL />
+            </div>
+            <div class="body-d-middle">
+                <CenterMap />
+            </div>
+            <div class="body-d-right">
+                <oneR :title="'体检数据'" :type="1" />
+                <oneR :title="'健康打卡数据'" :type="2" />
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+    import LoginOutButton from '/@/views/components/loginOutButton.vue';
+    import { onMounted, onUnmounted, ref } from 'vue';
+    import { useTopTime } from '/@/utils/utils.ts';
+    import OneL from '/@/views/indexSun/oneL.vue';
+    import twoL from '/@/views/indexSun/twoL.vue';
+    import threeL from '/@/views/indexSun/threeL.vue';
+    import oneR from '/@/views/indexSun/oneR.vue';
+    import CenterMap from '/@/views/indexSun/centerMap.vue';
+    const dayTimeO = ref();
+    const dayTimeT = ref();
+    const interval = ref(1);
+    function init() {
+        getTime();
+        interval.value = setInterval(() => {
+            getTime();
+        }, 1000);
+    }
+    function getTime() {
+        const { timeLeft, timeRight } = useTopTime();
+        dayTimeO.value = timeLeft;
+        dayTimeT.value = timeRight;
+    }
+    onMounted(() => {
+        init();
+    });
+    onUnmounted(() => {
+        clearInterval(interval.value);
+    });
+</script>
+<style lang="less" scoped>
+    .outer {
+        height: 100%;
+        box-sizing: border-box;
+        background: url('/@/assets/indexSun/bigBg.png') no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        .title-d {
+            height: 80px;
+            line-height: 60px;
+            display: flex;
+            color: #fff;
+            background: url('/@/assets/indexSun/bg.png') no-repeat;
+            background-size: 100% 100%;
+            .title-d-left,
+            .title-d-middle,
+            .title-d-right {
+                font-size: 22px;
+                text-align: center;
+                font-weight: bold;
+                letter-spacing: 1px;
+            }
+            > :nth-child(1) {
+                width: 20%;
+            }
+
+            > :nth-child(2) {
+                width: 60%;
+                font-size: 50px;
+                line-height: 80px;
+                letter-spacing: 10px;
+                text-shadow: 2px 2px 5px rgba(118, 141, 219, 0.53);
+                font-weight: bold;
+            }
+
+            > :nth-child(3) {
+                width: 20%;
+            }
+        }
+        .body-d {
+            display: flex;
+            height: calc(100% - 80px);
+            justify-content: space-between;
+            padding: 10px 20px 0;
+            > :nth-child(1) {
+                width: 22%;
+            }
+            > :nth-child(2) {
+                width: 50%;
+            }
+            > :nth-child(3) {
+                width: 24.5%;
+            }
+            .body-d-left {
+                display: flex;
+                flex-direction: column;
+                > div {
+                    border: 1px solid #00ccff;
+                    border-radius: 14px;
+                }
+                > :nth-child(2) {
+                    height: 37%;
+                }
+                > :nth-child(3) {
+                    height: 37%;
+                }
+                > :nth-child(n + 1) {
+                    margin-bottom: 15px;
+                }
+            }
+            .body-d-right {
+                display: flex;
+                flex-direction: column;
+                > div {
+                    border: 1px solid #00ccff;
+                    border-radius: 14px;
+                    height: 48.5%;
+                }
+                > :nth-child(n + 1) {
+                    margin-bottom: 15px;
+                }
+            }
+            .body-d-middle {
+                display: flex;
+                flex-direction: column;
+            }
+        }
+    }
+</style>