update

1.修改大屏副屏结构
2023-12-06 17:14:18 +08:00
parent 89107d019d
commit 3b9b1d67fc
5 changed files with 261 additions and 7 deletions
@@ -0,0 +1,174 @@
+<template>
+    <div class="outer">
+        <div class="title-d">
+            <div class="title-d-left">
+                <span style="cursor: pointer" @click="clickBack">
+                    <a-space>
+                        <rollback-outlined />
+                    </a-space>
+                    返回
+                </span>
+            </div>
+            <div class="title-d-middle"> 应急就医服务中心</div>
+            <div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
+        </div>
+        <div class="body-d">
+            <div class="body-d-left">
+                <template v-for="(item, index) in dataList" :key="`list${data}`">
+                    <item-d :title="item" :data="[]" />
+                </template>
+            </div>
+            <div class="body-d-middle">
+                <china-map />
+            </div>
+            <div class="body-d-right">
+                <one-r />
+                <two-r />
+                <three-r />
+            </div>
+        </div>
+        <div class="bottom-d"></div>
+    </div>
+</template>
+<script setup lang="ts">
+    import { RollbackOutlined } from '@ant-design/icons-vue';
+    import { ref } from 'vue';
+    import OneR from '../components/body-d-right/oneR.vue';
+    import TwoR from '../components/body-d-right/twoR.vue';
+    import ThreeR from '../components/body-d-right/threeR.vue';
+    import ChinaMap from '../components/chinaMap/chinaMap.vue';
+    import * as dayjs from 'dayjs';
+    import router from '/@/router';
+    import ItemD from '/@/components/item-d/item-d.vue';
+
+    const dayTimeO = ref();
+    const dayTimeT = ref();
+    const dataList = ref(['心率', '血氧', '压力', '体温']);
+
+    function init() {
+        getTime();
+        setInterval(() => {
+            getTime();
+        }, 1000);
+    }
+
+    function getTime() {
+        dayTimeO.value = dayjs().format('YYYY年MM月DD日 HH时mm分ss秒');
+        dayTimeT.value =
+            dayjs().diff(dayjs('2018-10-01'), 'day') +
+            '天' +
+            getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD') + ' 00:00:00'), 'hours')) +
+            '时' +
+            getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD HH') + ':00:00'), 'minutes')) +
+            '分' +
+            getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD HH:mm') + ':00'), 'seconds')) +
+            '秒';
+    }
+
+    function getZero(num: any) {
+        if (num < 10) {
+            return '0' + num;
+        }
+        return num;
+    }
+
+    function clickBack() {
+        router.go(-1);
+    }
+
+    init();
+</script>
+<style lang="less" scoped>
+    .outer {
+        height: 100%;
+        box-sizing: border-box;
+        background: url('../assets/images/bg.png') no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .title-d {
+        height: 80px;
+        line-height: 80px;
+        display: flex;
+        padding-bottom: 9px;
+        background: url('../assets/images/top-title.png') no-repeat;
+        background-size: 100% 100%;
+
+        .title-d-left,
+        .title-d-middle,
+        .title-d-right {
+            font-size: 27px;
+            color: #ffffff;
+            line-height: 60px;
+            text-align: center;
+        }
+
+        .title-d-left {
+            text-align: left !important;
+            padding-left: 80px;
+        }
+
+        > :nth-child(1) {
+            width: 29%;
+        }
+
+        > :nth-child(2) {
+            width: 42%;
+            font-size: 40px;
+            font-weight: bold;
+        }
+
+        > :nth-child(3) {
+            width: 29%;
+        }
+    }
+
+    .body-d {
+        display: flex;
+        height: calc(100% - 120px);
+        padding-top: 10px;
+
+        > :nth-child(1) {
+            width: 25%;
+        }
+
+        > :nth-child(2) {
+            width: 50%;
+        }
+
+        > :nth-child(3) {
+            width: 25%;
+        }
+
+        .body-d-left,
+        .body-d-right {
+            text-align: center;
+        }
+
+        .body-d-right {
+            > :nth-child(n) {
+                width: 100%;
+                height: calc(100% / 3);
+                padding: 10px;
+            }
+        }
+        .body-d-left {
+            > :nth-child(n) {
+                width: 100%;
+                height: calc(100% / 4);
+                padding: 10px;
+            }
+        }
+
+        .body-d-middle {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+
+    .bottom-d {
+        height: 40px;
+        background: url('../assets/images/bottom-b.png') no-repeat;
+        background-size: 100% 100%;
+    }
+</style>