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="head-title-tab" style="display: inline-block">
                <div :class="nav == 6 ? 'head-nav active' : 'head-nav'" @click="doNav(6)">绿碳中心</div>
                </div>
                <div class="header-title-user-info" style="display:inline-block;float:right;">
                    <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>
                <i class="set-fullscreen set-font-size" style="margin-left: 16px;position: absolute;top: 0px;right: 24px;"
            @click="toggleFullScreen">
            <svg class="icon" v-if="!isFullScreen"
                style="width: 20px; vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024"
                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3304">
                <path
                    d="M145.066667 85.333333h153.6c25.6 0 42.666667-17.066667 42.666666-42.666666S324.266667 0 298.666667 0H34.133333C25.6 0 17.066667 8.533333 8.533333 17.066667 0 25.6 0 34.133333 0 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666666s42.666667-17.066667 42.666666-42.666666V145.066667l230.4 230.4c17.066667 17.066667 42.666667 17.066667 59.733334 0 17.066667-17.066667 17.066667-42.666667 0-59.733334L145.066667 85.333333z m170.666666 563.2L162.133333 802.133333l-76.8 76.8V725.333333C85.333333 699.733333 68.266667 682.666667 42.666667 682.666667s-42.666667 17.066667-42.666667 42.666666v256c0 25.6 17.066667 42.666667 42.666667 42.666667h256c25.6 0 42.666667-17.066667 42.666666-42.666667s-17.066667-42.666667-42.666666-42.666666H145.066667l76.8-76.8 153.6-153.6c17.066667-17.066667 17.066667-42.666667 0-59.733334-17.066667-17.066667-42.666667-17.066667-59.733334 0z m665.6 34.133334c-25.6 0-42.666667 17.066667-42.666666 42.666666v153.6l-76.8-76.8-153.6-153.6c-17.066667-17.066667-42.666667-17.066667-59.733334 0-17.066667 17.066667-17.066667 42.666667 0 59.733334l153.6 153.6 76.8 76.8H725.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666s17.066667 42.666667 42.666666 42.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666666z m0-682.666667h-256c-25.6 0-42.666667 17.066667-42.666666 42.666667s17.066667 42.666667 42.666666 42.666666h153.6l-76.8 76.8-153.6 153.6c-17.066667 17.066667-17.066667 42.666667 0 59.733334 17.066667 17.066667 42.666667 17.066667 59.733334 0l153.6-153.6 76.8-76.8v153.6c0 25.6 17.066667 42.666667 42.666666 42.666666s42.666667-17.066667 42.666667-42.666666v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z"
                    fill="" p-id="3305"></path>
            </svg>
            <svg class="icon" v-else style="width: 24px; vertical-align: middle;fill: currentColor;overflow: hidden;"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3952">
                <path
                    d="M384 597.333333h-256c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667h153.6L17.066667 947.2c-17.066667 17.066667-17.066667 42.666667 0 59.733333 17.066667 17.066667 42.666667 17.066667 59.733333 0L341.333333 742.4v153.6c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z m358.4 85.333334h153.6c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666667h-256c-25.6 0-42.666667 17.066667-42.666667 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666667-42.666667V742.4l264.533333 264.533333c17.066667 17.066667 42.666667 17.066667 59.733333 0 17.066667-17.066667 17.066667-42.666667 0-59.733333L742.4 682.666667zM640 426.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666667H742.4L1006.933333 76.8c17.066667-17.066667 17.066667-42.666667 0-59.733333-17.066667-17.066667-42.666667-17.066667-59.733333 0L682.666667 281.6V128c0-25.6-17.066667-42.666667-42.666667-42.666667s-42.666667 17.066667-42.666667 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666667z m-256-341.333334c-25.6 0-42.666667 17.066667-42.666667 42.666667v153.6L76.8 8.533333C59.733333 0 25.6 0 8.533333 8.533333 0 25.6 0 59.733333 8.533333 76.8L281.6 341.333333H128c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z"
                    p-id="3953"></path>
            </svg>
        </i>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            nav: 1,
            selProject: '',
            projects: [],
            isFullScreen: false,
        }
    },
    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: {
        toggleFullScreen() {
            let el = document.body;
            this.$toggleFullScreen(el);
            setTimeout(() => {
                this.isFullScreen = document.fullscreenElement == el;
            }, 400);
        },
        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","/greenCarbon"][n - 1];
            this.$router.push(path);
        },
        doLogout() {
            this.$confirm('确定注销并退出系统吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$store.dispatch('LogOut').then(() => {
                    location.href = window.XDBSAPP;
                })
            }).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>