update

1.修改特殊大屏（宽度200%，偏移中心） 2.设置特殊参数/specialScreen 3.添加隐藏退出功能
2024-10-16 14:04:27 +08:00
parent 1aaf8e7120
commit 64feafb1d5
5 changed files with 158 additions and 47 deletions
@@ -1,12 +1,11 @@
 import { defineStore } from 'pinia';
 import { loginApi, getUserInfo, doLogout } from '/@/api/user.ts';
 import { TOKEN_KEY, USER_INFO_KEY } from '/@/enum/cacheEnum.ts';
-import { getBaseLogin, PageEnum } from '/@/enum/pageEnum.ts';
+import { getBaseLogin } from '/@/enum/pageEnum.ts';
 import { getAuthCache, setAuthCache } from '/@/utils/auth.ts';
 import { useRouter } from 'vue-router';
 import { LoginInfo, LoginParams, UserInfo } from '/@/store/modules/storeType.ts';
 import { store } from '/@/store';
-import { message } from 'ant-design-vue';

 const router = useRouter();
 export const useUserStore = defineStore({
@@ -1,48 +1,51 @@
 <template>
-    <div class="outer">
-        <div class="title-d">
-            <div class="title-d-left">
-                {{ dayTimeO }}
+    <div class="outer" style="position: relative">
+        <login-out-button out-url="centralScreenLogin" />
+        <div class="container-div" :class="[screenPath === sPath ? 'container-div-s' : '']">
+            <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="title-d-middle">
-                <span>{{ title }}</span>
-                <span class="phone">({{ phone }})</span>
+            <div class="body-d">
+                <div class="central-screen-body-left" :class="[screenPath === '/screenLogin' ? 'central-screen-body-left-s' : '']">
+                    <!--服务详情数据-->
+                    <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" :class="[screenPath === sPath ? 'body-d-middle-s' : '']">
+                    <CenterMap
+                        :showFooter="false"
+                        :computedCenter="false"
+                        :mapOptions="options"
+                        :showHospitalList="showHospitalList"
+                        :hospitalList="hospitalList"
+                        @clearHospitalList="clearHospitalList"
+                    />
+                </div>
+                <div class="body-d-right" :class="[screenPath === sPath ? 'body-d-right-s' : '']">
+                    <!--健康终端报警-->
+                    <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="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
+            <div class="bottom-d"></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="true"
-                    :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>
        <EmployeeDialog ref="employeeDialogRef" :record="socketData" />
        <EmergencyDialog ref="emergencyDialogRef" :record="socketData" @confirmHelp="confirmHelp" />
        <YunZuoXiDialog ref="yunZuoXiDialogRef" :record="socketData" @confirmHelp="confirmHelp" />
@@ -55,7 +58,6 @@
 </template>
 <script setup lang="ts">
    import { onMounted, onUnmounted, ref, nextTick, watch } 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 '/@/views/centralScreen/components/terminalAlarm.vue';
@@ -76,6 +78,8 @@
    import EmergencyDialog from '/@/views/components/emergencyDialog.vue';
    import { basicPath, emergencyPath, useSocket, yinChuanPath } from '/@/utils/socket.ts';
    import { handleSocketUrl } from '/@/views/centralScreen/components/centerMapHooks.ts';
+    import { getEmergencyCenterApi } from '/@/api/user.ts';
+    import LoginOutButton from '/@/views/components/loginOutButton.vue';

    const userStore = useUserStore();
    let { simpleName, centerTel } = userStore.getCenterInfo || { simpleName: '', centerTel: '' };
@@ -83,9 +87,17 @@
    const dayTimeO = ref();
    const dayTimeT = ref();
    const interval = ref(1);
-    const title = ref(simpleName ? simpleName + '应急就医服务中心' : '应急就医服务中心');
+    const title = ref(simpleName || '' + '应急就医服务中心');
    const phone = ref(centerTel || '0951-6805199');

+    const screenPath = ref('');
+    const sPath = ref('/specialScreen');
+    const options = ref({
+        center: [106.32, 38.45], //地图中心点
+        zoom: 8, //地图显示的缩放级别
+        mapStyle: 'darkblue', //地图样式
+    });
+
    function init() {
        getTime();
        interval.value = setInterval(() => {
@@ -99,8 +111,28 @@
        dayTimeT.value = timeRight;
    }

+    const { getCenterInfo } = useUserStore();
+
    const setting = getSettings(DataType.yinChuan);
-    onMounted(() => {
+    onMounted(async () => {
+        screenPath.value = getCenterInfo?.screenPath;
+        options.value = {
+            center: [getCenterInfo?.longitude || 106.32, getCenterInfo?.latitude || 38.45], //地图中心点
+            zoom: 6, //地图显示的缩放级别
+            mapStyle: 'darkblue', //地图样式
+        };
+        try {
+            const { result } = await getEmergencyCenterApi();
+            if (result?.screenPath !== getCenterInfo?.screenPath) {
+                screenPath.value = result?.screenPath;
+                options.value = {
+                    center: [result?.longitude || 106.32, result?.latitude || 38.45], //地图中心点
+                    zoom: 6, //地图显示的缩放级别
+                    mapStyle: 'darkblue', //地图样式
+                };
+                userStore.setCenterInfo(result);
+            }
+        } catch (e) {}
        init();
        document.title = title.value;
        document.addEventListener('visibilitychange', checkTabState);
@@ -265,7 +297,7 @@
    //     }
    // });
    //银川云坐席
-    let socketUrl = handleSocketUrl(emergencyPath, userStore.getCenterInfo?.id);
+    let socketUrl = handleSocketUrl(basicPath, userStore.getCenterInfo?.id);
    const { socketData, setSocketData, closeSocket } = useSocket(socketUrl, false);
    const yunZuoXiDialogRef = ref(); //云坐席
    const emergencyDialogRef = ref(); //紧急求助
@@ -303,6 +335,16 @@
        background-size: 100% 100%;
    }

+    .container-div {
+        height: 100%;
+    }
+    .container-div-s {
+        width: 200%;
+        height: 100%;
+        transform: scaleX(0.5);
+        transform-origin: left top;
+    }
+
    .title-d {
        height: 80px;
        line-height: 80px;
@@ -388,4 +430,13 @@
        background: url('/@/assets/images/bottom-b.png') no-repeat;
        background-size: 100% 100%;
    }
+    .central-screen-body-left {
+        width: calc(100% / 6) !important;
+    }
+    .body-d-middle {
+        width: calc(100% * 2 / 3) !important;
+    }
+    .body-d-right {
+        width: calc(100% / 6) !important;
+    }
 </style>
@@ -0,0 +1,55 @@
+<template>
+    <div class="button-d" @click="clickLoginOut"> </div>
+    <a-modal v-model:visible="visible" title="提示" @ok="loginOut">
+        <p>是否退出</p>
+    </a-modal>
+</template>
+<script setup lang="ts">
+    import { propTypes } from '/@/utils/propTypes.ts';
+    import router from '/@/router';
+    import { ref } from 'vue';
+
+    const props = defineProps({
+        outUrl: propTypes.string.def(''),
+    });
+
+    const visible = ref(false);
+    const count = ref(0);
+    const setTimeOutE = ref(null);
+
+    function clickLoginOut() {
+        setTimeOutE.value && clearTimeout(setTimeOutE.value);
+        count.value++;
+        if (count.value >= 5) {
+            count.value = 0;
+            visible.value = true;
+        } else {
+            setTimeOutE.value = setTimeout(() => {
+                count.value = 0;
+            }, 3000);
+        }
+    }
+
+    function loginOut() {
+        localStorage.clear();
+        sessionStorage.clear();
+        if (props.outUrl) {
+            router.replace(props.outUrl);
+        } else {
+            router.replace('/login');
+        }
+    }
+</script>
+<style scoped lang="less">
+    .button-d {
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 9999;
+        color: transparent;
+        background-color: transparent;
+        border: none;
+        outline: none;
+        padding: 20px 45px;
+    }
+</style>
@@ -1,5 +1,6 @@
 <template>
    <div class="outer">
+        <login-out-button out-url="login" />
        <div class="title-d outer-title" :class="themeType">
            <div class="title-d-left">
                {{ dayTimeO }}
@@ -64,6 +65,7 @@
    import { useUserStore } from '/@/store/modules/user.ts';
    import { lightMapOption } from '/@/assets/mapUtils/mapConstant.ts';
    import { useTheme } from '/@/hooks/theme/useTheme.ts';
+    import LoginOutButton from '/@/views/components/loginOutButton.vue';

    const { refreshState } = useRefresh(DEFAULT_TIME);
    const dayTimeO = ref();
@@ -352,6 +354,7 @@
        box-sizing: border-box;
        background: url('/@/assets/images/backgroundNew.png') no-repeat;
        background-size: 100% 100%;
+        position: relative;
    }

    .title-d {
@@ -1,5 +1,6 @@
 <template>
    <div class="outer">
+        <login-out-button out-url="screenLogin" />
        <div class="title-d">
            <div class="title-d-left">
                {{ dayTimeO }}
@@ -72,6 +73,7 @@
    import { YinChuanOption } from '/@/assets/mapUtils/mapConstant.ts';
    import { useUserStore } from '/@/store/modules/user.ts';
    import { Map } from '/@/assets/mapUtils/map.ts';
+    import LoginOutButton from '/@/views/components/loginOutButton.vue';

    const title = ref('银川片应急就医服务中心');
    const phone = '(0951-6805199)';
@@ -362,6 +364,7 @@
        box-sizing: border-box;
        background: url('/@/assets/images/bg.png') no-repeat;
        background-size: 100% 100%;
+        position: relative;
    }

    .title-d {