xj-screen/src/views/indexSon.vue

<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${index}`">
                    <item-d :title="item.title" :data="item.data" :tips="item.tips" :color="item.color" />
                </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/secondaryScreen/screen-right/oneR.vue';
    import TwoR from '/@/components/secondaryScreen/screen-right/twoR.vue';
    import ThreeR from '/@/components/secondaryScreen/screen-right/threeR.vue';
    import ChinaMap from '/@/components/secondaryScreen/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([
        {
            title: '心率',
            data: [
                { name: '正常', value: 234 },
                { name: '警戒', value: 204 },
                { name: '危险', value: 34 },
            ],
            color: ['#0098FA', '#FF6648', '#FB466C'],
            tips: '正常范围60~100次/分',
        },
        {
            title: '血氧',
            data: [
                { name: '正常', value: 234 },
                { name: '警戒', value: 204 },
                { name: '危险', value: 34 },
            ],
            color: ['#0098FA', '#FF6648', '#FB466C'],
            tips: '血氧饱和度范围95%~100%',
        },
        {
            title: '压力',
            data: [
                { name: '正常', value: 234 },
                { name: '放松', value: 204 },
                { name: '中等', value: 34 },
                { name: '偏高', value: 78 },
            ],
            color: ['#1DCC79', '#0098FA', '#0CD9B5', '#6C63F0'],
            tips: '',
        },
        {
            title: '体温',
            data: [
                { name: '37.2', value: 234 },
                { name: '37.2-38', value: 204 },
                { name: '>38', value: 34 },
            ],
            color: ['#0098FA', '#0CD9B5', '#3B72AD'],
            tips: '',
        },
    ]);

    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(1) {
                width: 100%;
                height: calc(100% / 4);
                padding: 10px;
            }

            > :nth-child(2) {
                width: 100%;
                height: calc(100% / 4);
                padding: 10px;
            }

            > :nth-child(3) {
                width: 100%;
                height: calc(100% / 2);
                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>