cattleTransportation/pc-cattle-transportation/src/components/layout/component/header.vue

<template>
    <section id="webAdminLayoutHeader" class="h-full flex items-center header-menu">
        <div class="flex-1">
            <el-breadcrumb :separator-icon="ArrowRight">
                <!-- <el-breadcrumb-item :to="{ path: '/' }"> </el-breadcrumb-item> -->
                <el-breadcrumb-item v-if="webTitle !== '首页'">{{ webTitle }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="flex">
            <!-- 新的数据大屏入口 -->
            <div style="margin-right: 20px">
                <el-button type="primary" plain @click="router.push('/datav')">
                    <el-icon style="margin-right: 5px"><DataAnalysis /></el-icon>
                    数据监控大屏
                </el-button>
            </div>
            
            <div style="margin-right: 20px" v-if="userType == 1">
                <el-button type="primary">
                    <a style="color: #fff" href="https://b.datav.run/share/page/7d743ac7c27c0d332d0a19e758e0d7c4" target="_blank"> 可视化大屏 </a>
                </el-button>
            </div>
            <div class="headImg">
                <img alt="" src="../../../assets/photo.jpg" />
            </div>
            <div class="headName">{{ username }}</div>
            <em style="font-style: normal; position: relative; top: 2px">|</em>
            <div class="loginOut" @click="loginOut">退出</div>
        </div>
    </section>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue';
import { ArrowRight, DataAnalysis } from '@element-plus/icons-vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useUserStore } from '~/store/user';
import { loginoutApi } from '~/api/sys.js';
import { removeToken } from '~/utils/auth.js';

import usePermissionStore from '@/store/permission.js';

const permissionStore = usePermissionStore();

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
const userType = ref(userStore.userType);

const username = ref(userStore.username);

const webTitle = ref('');
onMounted(() => {
    webTitle.value = route.meta.title;
});

watch(
    () => route.path,
    () => {
        webTitle.value = route.meta.title;
    },
    {
        immediate: true,
        deep: true,
    },
);

const loginOut = () => {
    ElMessageBox.confirm('您确定要退出吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            // router.push('/login');
            loginoutApi().then((ret) => {
                userStore.updateToken('');
                userStore.updateUserName('');
                userStore.updateLoginUser(null);
                permissionStore.setRoutes([]);
                permissionStore.setSidebarRouters([]);
                removeToken();
                ElMessage({ type: 'success', message: '已经退出！' });
                router.push('/login');
            });
        })
        .catch(() => {
            ElMessage({ type: 'info', message: '取消退出！' });
        });
};
</script>
<style scoped>
.el-breadcrumb {
    color: #000;
}

.headImg {
    color: #666;
    margin-right: 20px;
}

.headImg img {
    margin: auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.headName {
    font-family: MicrosoftYaHei;
    font-size: 14px;
    color: #666666;
    letter-spacing: 0.17px;
    display: inline-block;
    line-height: 30px;
    padding-right: 20px;
}

.loginOut {
    margin-left: 20px;
    color: #3b74ff;
    font-size: 12px;
    justify-content: center;
    align-items: center;
    display: inline-block;
    line-height: 30px;
    cursor: pointer;
}
</style>