duoji-frontend/src/layouts/PageHeader.vue

<template>
    <div :class="['header', collapsed ? 'collapsed-header' :'']">
        <div class="header-left">
            <a-layout-header style="background: #fff; padding: 0">
                <a-icon
                    class="trigger"
                    :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                    @click="collapsedFlag"
                />
            </a-layout-header>
        </div>
        <div class="header-right">
            <div class="header-top-right-circle" @click="visible = !visible"></div>
            <a-badge :count="count" @click="openPlc">
                <a-icon type="bell" style="font-size:20px;cursor:pointer"/>
            </a-badge>
            <a-popover id="popover" v-model="visible" placement="bottom" trigger="click">
                <a href="javascript:;" style="margin:0 10px">
                    {{
                    userInfo.name ? userInfo.name : "userName"
                    }}
                </a>
                <div class="flex flex-column" :style="{ 'min-width': '78px' }" slot="content">
                    <a
                        class="block mb16"
                        href="javascript:;"
                        @click="visible = false;$router.push({name: 'center'})"
                    >个人中心</a>
                    <a href="javascript:;" @click="logout">退出登录</a>
                </div>
            </a-popover>
        </div>
    </div>
</template>

<script>
import {mapState, mapMutations, mapGetters} from "vuex";
export default {
    name: "PageHeader",
    computed: {
        ...mapState(["aside_collapsed", "userInfo"]),
        ...mapGetters(['getAside_collapsed'])
    },
    watch: {
        getAside_collapsed: function (newValue) {
            console.log(newValue)
            this.collapsed = newValue
        }
    },
    data() {
        return {
            visible: false,
            collapsed: false,
            count: 0
        };
    },
    mounted() {
        this.getplcStatus()
        const that = this
        setInterval(function () {
            that.getplcStatus()
        }, 5000)
    },
    methods: {
        ...mapMutations(["setState"]),
        logout() {
            this.visible = false;
            localStorage.clear();
            sessionStorage.clear();
            this.$axios({
                url: "/app/userCenter",
                method: "GET"
            }).then(res => {
                window.open(res.data.url + "?action=logout", "_self");
            }).catch(err => {

            });
        },
        collapsedFlag() {
            // console.log(11111)
            this.collapsed = !this.collapsed
            this.$store.commit('aside_collapsed', this.collapsed);
        },
        getplcStatus() {
            this.$axios({
                url: "/plc/plcStatus",
                method: "GET"
            }).then(res => {
                console.log(res.data)
                if (res.code == 200) {
                    this.count = res.data
                }
            }).catch(err => {
                console.log(err)
            })
        },
        openPlc() {
            this.$router.push({name: 'plcStatus'})
        }
    }
};
</script>

<style lang="scss">
.header {
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    /*border: solid 1px skyblue;*/
    box-shadow: 0px 2px 5px rgba(0, 21, 41, 0.15);
    /*margin-bottom: 2px;*/
    position: fixed;
    top: 0;
    width: calc(100% - 270px);
    z-index: 999;

    &-left {
        .trigger {
            font-size: 18px;
            line-height: 64px;
            padding: 0 24px;
            cursor: pointer;
            transition: color 0.3s;
        }
    }

    &-right {
        display: flex;
        align-items: flex-start;
        padding-right: 20px;
        &-circle {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: #fff;
            margin-right: 8px;
            cursor: pointer;
        }
    }
}
.collapsed-header{
    width: calc(100% - 80px);
}
</style>