measure/src/layout/index.vue

<template>
    <el-container class="hc-layout-box" :class="[!isNullES(isLayout) && isLayout === 'no' ? 'is-no-layout' : '']">
        <el-header class="hc-layout-header">
            <div class="hc-layout-header-logo" :style="`width: ${isCollapse ? '0px' : '200px'};`" @click="logoClick">
                <!-- <img id="logo-icon" :src="appLogoIcon" alt=""> -->
                <span v-show="!isCollapse" class="logo-name">计量系统</span>
            </div>
            <div class="header-top-collapse-bar" @click="collapseChange">
                <HcIcon v-if="isCollapse" name="menu-unfold" />
                <HcIcon v-else name="menu-fold" />
            </div>
            <div class="header-top-menu-bar">
                <HcTopMenuBar :msg-count="taskCount" @load="topMenuLoad" @change="topMenuChange" />
            </div>
            <div class="header-content-bar">
                <HcCascader @send="cascaderSend" @change="cascaderChange" />
                <hc-upload-bar />
                <HelpInfoBar />
                <ConfigBar />
                <UserInfoBar @load="userInfoLoad" />
            </div>
        </el-header>
        <el-container class="hc-layout-container">
            <el-aside v-if="isAsideMenu" class="hc-layout-aside" :class="[isCollapse ? 'is-collapse' : '']" :width="isCollapse ? '90px' : '200px'">
                <MenuBar :collapse="isCollapse" :cur="menuBarKey" :datas="menuBarData" :msg-count="taskCount" @change="menuBarChange" />
            </el-aside>
            <el-main class="hc-layout-main">
                <div class="hc-router-menu-bar">
                    <RouterMenu @load="routerMenuLoad" />
                </div>
                <div id="hc-main-box" class="hc-main-page">
                    <div class="hc-main-body">
                        <router-view v-if="reloadRouter" v-slot="{ Component }">
                            <transition name="fade-transform">
                                <keep-alive :max="10">
                                    <component :is="Component" :msg-count="taskCount" />
                                </keep-alive>
                            </transition>
                        </router-view>
                    </div>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
import { nextTick, onMounted, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { getToken } from '~src/api/auth'
import { useRoute, useRouter } from 'vue-router'
import { initButtons } from '~sto/app'
import { isNullES, useClick } from 'js-fast-way'
import { HcSocket } from '~src/plugins/HcSocket'
import messageApi from '~api/tasks/message'

//初始组合式
const router = useRouter()
const useRoutes = useRoute()
const store = useAppStore()

const reloadRouter = ref(true)

//子组件
import HcTopMenuBar from './modules/HcTopMenu.vue'
import HcCascader from './modules/Cascader.vue'
import UserInfoBar from './modules/UserInfoBar.vue'
import HelpInfoBar from './modules/HelpInfoBar.vue'
import ConfigBar from './modules/ConfigBar.vue'
import RouterMenu from './modules/RouterMenu.vue'
import MenuBar from '~src/layout/modules/MenuBar.vue'

//菜单数据
const menuBarKey = ref('')
const menuBarData = ref([])
const isLayout = ref('')

//渲染完成
onMounted(() => {
    const layout = useRoutes?.query?.layout, layout2 = store.isLayout
    isLayout.value = layout ?? layout2
    initButtons()
})

//监听layout
watch(() => [
    useRoutes?.query?.layout,
    store.isLayout,
], ([layout, layout2]) => {
    isLayout.value = layout ?? layout2
}, { deep: true })

//路由信息
const routerMenuLoad = ({ key }) => {
    menuBarKey.value = key
}

// 是否折叠
const isCollapse = ref(false)
const collapseChange = () => {
    const bool = !isCollapse.value
    isCollapse.value = bool
    store.setCollapse(bool)
}

//顶部菜单导航
const isAsideMenu = ref(true)
const topMenuLoad = () => {
    isAsideMenu.value = false
}

//顶部菜单导航被点击
const topMenuChange = (data) => {
    if (!isNullES(data)) {
        menuBarData.value = data
        isAsideMenu.value = true
    }
}

//菜单被点击
const menuBarChange = ({ code }) => {
    menuBarKey.value = code
    router.push({ name: code })
}

//项目合同段的ID
let socket
const timeExamples = ref()
const times = ref(10000)
const cascaderSend = async ({ projectId, contractId }) => {
    await useClick()
    //合同段id为空，清空定时器
    if (isNullES(contractId)) {
        if (!isNullES(timeExamples.value)) clearInterval(timeExamples.value)
        return
    }
    //链接webSocket
    if (!isNullES(socket)) socket.close()
    socket = new HcSocket({ projectId, contractId, userId: userId.value }, (data) => {
        console.log('socket:', data)
    })
    //先获取一次
    await getUnreadMessage({ projectId, contractId })
    //切换项目合同段时，先清空轮询
    if (!isNullES(timeExamples.value)) clearInterval(timeExamples.value)
    //定时轮询获取数据
    timeExamples.value = setInterval(async () => {
        await getUnreadMessage({ projectId, contractId })
    }, times.value)
}

//获取未读消息数量
const taskCount = ref(0)
const getUnreadMessage = async ({ projectId, contractId }) => {
    //如果退出登录了，清空轮询
    if (isNullES(getToken())) {
        if (!isNullES(timeExamples.value)) clearInterval(timeExamples.value)
        return
    }
    //获取数据
    const { isRes, data } = await messageApi.getUnreadMessage({
        projectId, contractId,
    })
    taskCount.value = data ?? 0
    if (isRes) {
        times.value = 10000
    } else {
        times.value = 300000 //5分钟
    }
}

//用户信息
const userId = ref('')
const userInfoLoad = ({ user_id }) => {
    userId.value = user_id
}

// 项目切换
const cascaderChange = () => {
    reloadRouter.value = false
    nextTick(() => {
        reloadRouter.value = true
    })
}

//首页
const logoClick = () => {
    router.push({ name: 'home-index' })
}
</script>

<style lang="scss">
@import "./index.scss";
</style>