xj-screen/src/views/centralScreen/centralScreen.vue

<template>
    <div class="outer">
        <div class="title-d">
            <div class="title-d-left">
                {{ dayTimeO }}
            </div>
            <div class="title-d-middle">
                <span>{{ title }}</span>
                <span class="phone">({{ phone }})</span>
            </div>
            <div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
        </div>
        <div class="body-d">
            <div class="central-screen-body-left">
                <!--服务详情数据-->
                <ServiceDetails
                    theme="dark"
                    :refreshState="refreshState"
                    :setting="setting"
                    class="service-details"
                    @handleClick="handlePhoneDialog"
                />
                <!--一线医疗点每日工作动态-->
                <DailyWorkTrends theme="dark" :refreshState="refreshState" class="daily-work-trends" />
            </div>
            <div class="body-d-middle">
                <CenterMap
                    :showFooter="false"
                    :computedCenter="false"
                    :mapOptions="YinChuanOption"
                    :showHospitalList="showHospitalList"
                    :hospitalList="hospitalList"
                    @clearHospitalList="clearHospitalList"
                />
            </div>
            <div class="body-d-right">
                <!--健康终端报警-->
                <TerminalAlarm :refreshState="refreshState" :setting="setting" @emit-view-detail="handleEmployeeDialog" />
                <!--员工队伍健康状况-->
                <EmployeeHealth theme="dark" :refreshState="refreshState" :setting="setting" />
                <!--体检数据-->
                <PhysicalExaminationData :key="tabState" :refreshState="refreshState" :setting="setting" />
            </div>
        </div>
        <div class="bottom-d"></div>
    </div>
</template>
<script setup lang="ts">
    import { onMounted, onUnmounted, ref } from 'vue';
    import { YinChuanOption } from '/@/assets/mapUtils/mapConstant.ts';
    import ServiceDetails from '/@/views/centralScreen/components/serviceDetails.vue';
    import CenterMap from '/@/views/centralScreen/components/centerMap.vue';
    import TerminalAlarm from '/@/components/body-d-right/oneR.vue';
    import DailyWorkTrends from '/@/views/centralScreen/components/dailyWorkTrends.vue';
    import EmployeeHealth from '/@/views/centralScreen/components/employeeHealth.vue';
    import PhysicalExaminationData from '/@/views/centralScreen/components/physicalExaminationData.vue';
    import { useRefresh } from '/@/hooks/autoRefresh';
    import { DEFAULT_TIME } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
    import { useTopTime } from '/@/utils/utils.ts';
    import { DataType, getSettings, ThemeType } from '/@/utils/settings.ts';
    import { useUserStore } from '/@/store/modules/user.ts';

    const { refreshState } = useRefresh(DEFAULT_TIME);
    const dayTimeO = ref();
    const dayTimeT = ref();
    const interval = ref(1);
    const title = ref('新版应急就医服务中心');
    const phone = ref('0951-6805199');

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

    function getTime() {
        const { timeLeft, timeRight } = useTopTime();
        dayTimeO.value = timeLeft;
        dayTimeT.value = timeRight;
    }

    const setting = getSettings(DataType.yinChuan);
    onMounted(() => {
        init();
        document.title = title.value;
        document.addEventListener('visibilitychange', checkTabState);
        //设置主题
        store.setThemeType(ThemeType.dark);
    });
    const store = useUserStore();

    onUnmounted(() => {
        clearInterval(interval.value);
        document.removeEventListener('visibilitychange', checkTabState);
    });
    const tabState = ref('');

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

    const phoneDialogTitle = ref('呼入电话');
    const phoneDialogRef = ref();
    //0:处置 1:处理 2:呼入 3:全部
    const phoneType = ref('');

    //呼入电话、受理电话弹窗
    function handlePhoneDialog(item) {
        const { name, key } = item;
        //呼入电话
        if (key == 'gross') {
            phoneType.value = ServerDetailType['gross'];
            //受理电话
            if (key == 'alerdyreceive') {
                phoneType.value = ServerDetailType['alerdyreceive'];
            }
            nextTick(() => {
                phoneDialogTitle.value = name;
                phoneDialogRef.value.openDialog();
            });
        }
    }
</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-middle {
            .phone {
                font-size: 27px;
                margin-left: 4px;
            }
        }

        > :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: 24%;
        }

        > :nth-child(2) {
            width: 52%;
        }

        > :nth-child(3) {
            width: 24%;
        }

        .central-screen-body-left {
            .service-details {
                height: 33%;
            }

            .daily-work-trends {
                height: 67%;
            }
        }

        .body-d-right {
            > :nth-child(n) {
                width: 100%;
                height: calc(100% / 3);
                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>