YZProjectCloud/yanzhu-bigscreen/src/components/header.vue

<template>
    <div class="div-header">
        <el-row>
            <el-col :span="8">
                <div class="head-title-tab">
                    <div :class="nav == 1 ? 'head-nav active' : 'head-nav'" @click="doNav(1)">项目概况</div>
                    <div :class="nav == 2 ? 'head-nav active' : 'head-nav'" @click="doNav(2)">项目详情</div>
                    <div :class="nav == 3 ? 'head-nav active' : 'head-nav'" @click="doNav(3)">安全管理</div>
                    <div :class="nav == 4 ? 'head-nav active' : 'head-nav'" @click="doNav(4)">质量管理</div>
                    <div :class="nav == 5 ? 'head-nav active' : 'head-nav'" @click="doNav(5)">进度管理</div>
                </div>
            </el-col>
            <el-col :span="8" class="header-center">
                数字建安施工管理平台
            </el-col>
            <el-col :span="8">
                <div class="header-title-user-info">
                    <el-select v-model="selProject" popper-class="header-sel-project-pop"
                        style="width: 150px;margin-right: 20px;height:30px;line-height: 30px;"
                        @change="doProjectSelect">
                        <el-option v-for="it in projects" :key="it.id" :label="it.projectName"
                            :value="it.id"></el-option>
                    </el-select>
                    <span class="command" @click="doLogout">{{ nickName }}
                        <i class="el-icon-switch-button"></i>
                    </span>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            nav: 1,
            selProject: '',
            projects: []
        }
    },
    computed: {
        nickName() {
            return this.$store.getters.nickName;
        },
        curNav() {
            return this.$store.getters.nav;
        }
    },
    watch: {
        curNav(n, o) {
            this.nav = this.$store.getters.nav;
        }
    },
    mounted() {
        window.xapp = this;
        this.$api.project.findMyProjectList().then(d => {
            this.projects = d.rows || [];
            if (this.projects.length > 0) {
                let id = localStorage.getItem("selProj") || this.projects[0].id
                this.selProject = +id;
                this.doProjectSelect();
            }
        });
    },
    methods: {
        doProjectSelect() {
            let tmps = this.projects.filter(d => d.id == this.selProject);
            if (tmps.length > 0) {
                this.$store.dispatch('SetSelProject', tmps[0]);
            } else {
                this.$store.dispatch('SetSelProject', null);
            }
            localStorage.setItem("selProj", this.selProject);
        },
        doNav(n) {
            if (this.nav == n) {
                return;
            }
            this.nav = n;
            let path = ["/index", "/detail", "/prjSafety", "/prjQuality", "/prjProgress"][n - 1];
            this.$router.push(path);
        },
        doLogout() {
            this.$confirm('确定注销并退出系统吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$store.dispatch('LogOut').then(() => {
                    location.href = '/';
                })
            }).catch(() => { });
        }
    }
}
</script>

<style lang="less">
.div-header {
    line-height: 100px;

    .header-center {
        text-align: center;
        color: #3da2ff;
        font-size: 32px;
        font-weight: bold;
    }
}

@media (min-width: 1921px) and (max-width: 2560px) {
    .div-header {
        .head-nav {
            font-size: 18px;
            width: auto;
            height: auto;
            padding: 5px 40px;
            position: relative;
            top: -8px;
        }
    }

    .header-center {
        font-size: 42px !important;
        margin-top: 10px;
    }

    .header-title-user-info {
        font-size: 20px;

        .el-select {
            transform: scale(1.5);
            margin-right: 60px !important;
            position: relative;
            top: -5px;
        }
    }
    .header-sel-project-pop {
        transform: scale(1.5);
        width: 200px;
        min-width: unset !important;
        margin-left: 50px;
    }
}

@media (min-width: 2561px) {
    

    .header-center {
        font-size: 52px !important;
        margin-top: 10px;
    }

    .header-title-user-info {
        font-size: 30px;

        .el-select {
            transform: scale(2);
            margin-right: 100px !important;
            position: relative;
            top: -5px;
        }
    }

    .header-sel-project-pop {
        transform: scale(2);
        width: 200px;
        min-width: unset !important;
        margin-left: 100px;
    }
}
</style>