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

<template>
    <div class="div-header">
        <el-row>
            <el-col :span="8" style="margin-left:20px;width:calc(33.33% - 20px);">
                <div class="head-title-tab">
                    <div :class="nav == 1 ? 'head-nav active' : 'head-nav'" @click="doNav(1)" v-if="1==2">项目概况</div>
                    <div :class="nav == 2 ? 'head-nav active' : 'head-nav'" @click="doNav(2)" v-if="1==2">项目详情</div>
                    <div :class="nav == 7 ? 'head-nav active' : 'head-nav'" @click="doNav(7)" v-if="1==2">劳务管理</div>

                    <div :class="(nav >= 100 && nav < 200) || nav == 1 ? 'head-nav active' : 'head-nav'" style="position: relative;" class="has-submenu">
                        <div>项目概况</div>
                        <div class="header-btn-list">
                            <div class="header-btn-list-arrow"></div>
                            <div class="header-btn-list-item" style>
                                <div class="header-btn-list-padding menu-row1" style="text-align: left;">
                                    <button type="button" :class="nav == 101 ? 'active' : ''" class="sub-btn" @click="doNav(101)">项目详情</button>
                                    <button type="button" :class="nav == 102 ? 'active' : ''" class="sub-btn" @click="doNav(102)">劳务管理</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div :class="(nav >= 300 && nav < 400) || nav == 3 ? 'head-nav active' : 'head-nav'" style="position: relative;" class="has-submenu">
                        <div>安全管理</div>
                        <div class="header-btn-list">
                            <div class="header-btn-list-arrow"></div>
                            <div class="header-btn-list-item" style>
                                <div class="header-btn-list-padding menu-row1" style="text-align: left;">
                                    <button type="button" :class="nav == 301 ? 'active' : ''" class="sub-btn" @click="doNav(301)">安全隐患排查</button>
                                    <button type="button" :class="nav == 302 ? 'active' : ''" class="sub-btn" @click="doNav(302)">教育培训</button>
                                    <button type="button" :class="nav == 303 ? 'active' : ''" class="sub-btn" @click="doNav(303)">基坑监测</button>
                                    <button type="button" :class="nav == 304 ? 'active' : ''" class="sub-btn" @click="doNav(304)">塔机监测</button>
                                </div>
                                <div class="header-btn-list-padding menu-row1" style="text-align: left;">
                                    <button type="button" :class="nav == 305 ? 'active' : ''" class="sub-btn" @click="doNav(305)">高支模监测</button>
                                    <button type="button" :class="nav == 306 ? 'active' : ''" class="sub-btn" @click="doNav(306)">配电箱监测</button>
                                    <button type="button" :class="nav == 307 ? 'active' : ''" class="sub-btn" @click="doNav(307)">爬架监测</button>
                                    <button type="button" :class="nav == 308 ? 'active' : ''" class="sub-btn" @click="doNav(308)">升降机监测</button>
                                </div>
                                <div class="header-btn-list-padding menu-row1" style="text-align: left;">
                                    <button type="button" :class="nav == 309 ? 'active' : ''" class="sub-btn" @click="doNav(309)">视频监控</button>
                                    <button type="button" :class="nav == 310 ? 'active' : ''" class="sub-btn" @click="doNav(310)">AI预警</button>
                                    <button type="button" :class="nav == 311 ? 'active' : ''" class="sub-btn" @click="doNav(311)">标准化管理</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div :class="(nav >= 400 && nav < 500) || nav == 4 ? 'head-nav active' : 'head-nav'" style="position: relative;" class="has-submenu">
                        <div>质量管理</div>
                        <div class="header-btn-list">
                            <div class="header-btn-list-arrow"></div>
                            <div class="header-btn-list-item" style>
                                <div class="header-btn-list-padding menu-row1" style="text-align: left;">
                                    <button type="button" :class="nav == 401 ? 'active' : ''" class="sub-btn" @click="doNav(401)">质量隐患排查</button>
                                    <button type="button" :class="nav == 402 ? 'active' : ''" class="sub-btn" @click="doNav(402)">材料取样复试</button>
                                    <button type="button" :class="nav == 403 ? 'active' : ''" class="sub-btn" @click="doNav(403)">举牌验收</button>
                                    <button type="button" :class="nav == 404 ? 'active' : ''" class="sub-btn" @click="doNav(404)">标养室监测</button>
                                </div>
                                <div class="header-btn-list-padding menu-row1" style="text-align: left;">
                                    <button type="button" :class="nav == 405 ? 'active' : ''" class="sub-btn" @click="doNav(405)">标准化管理</button>
                                    <button type="button" :class="nav == 406 ? 'active' : ''" class="sub-btn" @click="doNav(406)">混泥土监测</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div :class="(nav >= 500 && nav < 600) || nav == 5 ? 'head-nav active' : 'head-nav'" style="position: relative;" class="has-submenu">
                        <div>进度管理</div>
                        <div class="header-btn-list">
                            <div class="header-btn-list-arrow"></div>
                            <div class="header-btn-list-item" style>
                                <div class="header-btn-list-padding menu-row1" style="text-align: left;">
                                    <button type="button" :class="nav == 502 ? 'active' : ''" class="sub-btn" @click="doNav(502)">进度管理</button>
                                    <button type="button" :class="nav == 501 ? 'active' : ''" class="sub-btn" @click="doNav(501)">延时摄影</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8" class="header-center">
                <img class="prj-logo" :src="selProject.setting.orgLogo" v-if="selProject && selProject.setting && selProject.setting.orgLogo" />
                <span class="sp-title">{{ selProject?.setting?.orgName ||selProject?.projectName|| '数字建安施工管理平台' }}</span>
            </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="selProjectId" popper-class="header-sel-project-pop" @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"
                        />
                    </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"
                        />
                    </svg>
                </i>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            nav: 1,
            selProject: null,
            selProjectId: '',
            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
        let prjTitle = localStorage.getItem('prj_title')
        document.title = prjTitle || document.title
        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.selProjectId = +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.selProjectId)
            if (tmps.length > 0) {
                this.$store.dispatch('SetSelProject', tmps[0])
                this.selProject = tmps[0]
                document.title = this.selProject.projectName + ' - 大屏'
            } else {
                this.$store.dispatch('SetSelProject', null)
                this.selProject = null
                document.title = '大屏'
            }
            localStorage.setItem('selProj', this.selProjectId)
            localStorage.setItem('prj_title', document.title)
        },
        doNav(n) {
            if (this.nav == n) {
                return
            }
            this.nav = n
            switch (n) {
                case 1:
                    this.$router.push('/index')
                    break
                case 101:
                    this.$router.push('/detail')
                    break
                case 3:
                    //this.$router.push('/prjSafety')
                    break
                case 309:
                    this.$router.push('/videoMonitor')
                    break
                case 301:
                    this.$router.push('/safetyCheck')
                    break
                case 304:
                    this.$router.push('/towerCrane')
                    break
                case 306:
                    this.$router.push('/powerIot')
                    break
                case 308:
                    this.$router.push('/dumbwaiter')
                    break
                case 310:
                    this.$router.push('/aiWarning')
                    break
                case 4:
                    //this.$router.push('/prjQuality')
                    break
                case 5:
                    //this.$router.push('/prjProgress')
                    break
                case 6:
                    this.$router.push('/greenCarbon')
                    break
                case 102:
                    this.$router.push('/labor')
                    break
                case 501:
                    this.$router.push('/photography')
                    break
                case 502:
                    this.$router.push('/planSchedule')
                    break
            }
        },
        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-title-user-info {
        font-size: 20px;

        .el-select {
            transform: scale(1.25);
            margin-right: 30px;
            position: relative;
            top: -5px;
            width: 250px;
            right: 10px;
        }
    }
    .sp-title {
        line-height: 40px;
        display: inline-block;
    }
    .header-center {
        text-align: center;
        color: #3da2ff;
        font-size: 32px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 113px;

        .prj-logo {
            width: 60px;
            height: 60px;
            vertical-align: middle;
            border-radius: 30px;
        }
    }

    .head-title-tab {
        .has-submenu {
            &:hover {
                .header-btn-list {
                    display: block;
                }
            }

            .header-btn-list {
                display: none;

                .header-btn-list-item {
                    .header-btn-list-padding {
                        padding: 0px;

                        button {
                            width: 120px;
                        }

                        &.menu-row2 {
                            .sub-btn {
                                color: #fff;

                                &:hover {
                                    color: #ccc;
                                }
                            }
                        }

                        &.menu-row1 {
                            .sub-btn {
                                color: rgb(1, 169, 255);

                                &:hover {
                                    color: #fff;
                                }
                            }
                        }

                        .sub-btn {
                            &.active {
                                color: #ffffffaa;
                            }
                        }
                    }
                }
            }
        }
    }
}

@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;

            .prj-logo {
                width: 80px;
                height: 80px;
                vertical-align: middle;
                border-radius: 40px;
            }
        }
    }
    .sp-title {
        line-height: 48px !important;
        font-size: 36px;
    }
    .header-center {
        font-size: 42px !important;
        padding: 0px 60px;
    }

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

        .el-select {
            transform: scale(1.5) !important;
            margin-right: 60px !important;

            width: 260px !important;
            right: 10px !important;
        }
    }

    .header-sel-project-pop {
        transform: scale(1.5);
        width: 330px;
        min-width: unset !important;
        margin-left: 50px;
    }

    .head-title-tab {
        .header-btn-list {
            top: 40px;
            left: 40px;

            .sub-btn {
                font-size: 18px;
                width: 140px !important;
                line-height: 40px;
                height: 40px;
            }
        }
    }
}

@media (min-width: 2561px) {
    .header-center {
        font-size: 52px !important;
        padding: 0px 60px;
        .prj-logo {
            width: 100px;
            height: 100px;
            vertical-align: middle;
            border-radius: 50px;
        }
    }
    .sp-title {
        line-height: 50px !important;
        font-size: 40px;
    }
    .header-title-user-info {
        font-size: 30px !important;

        .el-select {
            transform: scale(2) !important;
            margin-right: 100px !important;
            width: 273px !important;
            right: 40px !important;
        }
    }

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

    .head-title-tab {
        .header-btn-list {
            top: 50px;
            left: 50px;

            .sub-btn {
                font-size: 24px;
                width: 160px !important;
                line-height: 50px;
                height: 50px;
            }
        }
    }
}
</style>