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"> 心血管监测 112</div>
            <div class="title-d-right"> 累计监测时间：{{ dayTimeT }}</div>
        </div>
        <div class="body-d">
            <div class="body-d-left">
                <screen-left :themeType="themeType" :key="tabState" :orgCode="orgCode" :type="type" :refreshState="refreshState" />
            </div>
            <div class="body-d-middle">
                <SecondMap :orgCode="orgCode" :type="type">
                    <template #rightForm>
                        <a-select
                            placeholder="选择单位"
                            v-model:value="orgCode"
                            class="type-select bg-000"
                            :options="option"
                            :field-names="fieldNames"
                        ></a-select>
                        <a-select placeholder="选择时间范围" v-model:value="type" class="type-select bg-000" :options="timeRangeOption"></a-select>
                    </template>
                </SecondMap>
            </div>
            <div class="body-d-right">
                <one-r :themeType="themeType" :key="tabState" :orgCode="orgCode" :type="type" :refreshState="refreshState" />
                <two-r :themeType="themeType" :key="tabState" :orgCode="orgCode" :type="type" :refreshState="refreshState" />
                <three-r :themeType="themeType" :orgCode="orgCode" :type="type" :refreshState="refreshState" />
            </div>
        </div>
        <div class="bottom-d"></div>
    </div>
</template>
<script setup lang="ts">
    import { RollbackOutlined } from '@ant-design/icons-vue';
    import { nextTick, onMounted, 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 SecondMap from '/@/components/secondaryScreen/secondMap/secondMap.vue';
    import screenLeft from '/@/components/secondaryScreen/screen-left/screenLeft.vue';
    import router from '/@/router';
    import { useDepart, useTimeType } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
    import { useTopTime } from '/@/utils/utils.ts';
    import { useUserStore } from '/@/store/modules/user.ts';
    import { useRefresh } from '/@/hooks/autoRefresh';
    import { DEFAULT_TIME } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
    import { onUnmounted } from 'vue';
    import { useTheme } from '/@/hooks/theme/useTheme.ts';
    import { ThemeType } from '/@/utils/settings.ts';

    const { refreshState } = useRefresh(DEFAULT_TIME);

    const store = useUserStore();

    onMounted(() => {
        store.setThemeType(ThemeType.dark);
    });
    const { themeType } = useTheme();
    const useStore = useUserStore();
    const { orgCode, option, fieldNames, setOrgCode } = useDepart();
    onMounted(() => {
        const userInfo = useStore.getUserInfo;
        let orgCode = userInfo?.secondDepart?.orgCode;
        if (orgCode) {
            nextTick(() => {
                setOrgCode(orgCode);
            });
        }
        init();
        document.addEventListener('visibilitychange', checkTabState);
    });
    onUnmounted(() => {
        document.removeEventListener('visibilitychange', checkTabState);
    });
    const tabState = ref('');

    //判断窗口是否处于激活状态，切换浏览器tab会导致部分echarts显示不正常
    function checkTabState() {
        tabState.value = document.hidden ? 'inactive' : 'active';
    }

    const { type, timeRangeOption } = useTimeType('week');

    function init() {
        getTime();
        setInterval(() => {
            getTime();
        }, 1000);
    }

    const dayTimeT = ref();

    function getTime() {
        const { timeRight } = useTopTime('2022-12-20');
        dayTimeT.value = timeRight;
    }

    function clickBack() {
        router.push({ path: '/home' });
    }
</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);
                max-height: calc(100% / 4);
                padding: 10px;
            }

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

        .type-select {
            width: 140px;
            margin-right: 10px;

            :deep(.ant-select-selection-item) {
                color: #fff !important;
            }
        }
    }

    .bottom-d {
        height: 40px;
        background: url('../assets/images/bottom-b.png') no-repeat;
        background-size: 100% 100%;
    }
</style>