<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)" v-if="1==2">项目概况</div> <div :class="nav == 2 ? 'head-nav active' : 'head-nav'" @click="doNav(2)">项目详情</div> <div :class="(nav >= 300 && nav < 400) || nav == 3 ? 'head-nav active' : 'head-nav'" style="position: relative;" class="has-submenu"> <div @click="doNav(3)">安全管理</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 @click="doNav(4)">质量管理</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> <button type="button" :class="nav == 407 ? 'active' : ''" class="sub-btn" @click="doNav(407)">爬架监测</button> <button type="button" :class="nav == 408 ? 'active' : ''" class="sub-btn" @click="doNav(408)">施工电梯监测</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 @click="doNav(5)">进度管理</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 == 5 ? 'active' : ''" class="sub-btn" @click="doNav(5)">进度管理</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" /> {{ selProject?.setting?.orgName || '数字建安施工管理平台' }} </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" 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" /> </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 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] } else { this.$store.dispatch('SetSelProject', null) this.selProject = null } localStorage.setItem('selProj', this.selProjectId) }, doNav(n) { if (this.nav == n) { return } this.nav = n switch (n) { case 1: this.$router.push('/index') break case 2: 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 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 501: this.$router.push('/photography') 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-center { text-align: center; color: #3da2ff; font-size: 32px; font-weight: bold; .prj-logo { width: 40px; height: 40px; vertical-align: middle; border-radius: 20px; } } .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: 40px; height: 40px; vertical-align: middle; border-radius: 20px; } } } .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; } .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; margin-top: 10px; .prj-logo { width: 50px; height: 50px; vertical-align: middle; border-radius: 25px; } } .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; } .head-title-tab { .header-btn-list { top: 50px; left: 50px; .sub-btn { font-size: 24px; width: 160px !important; line-height: 50px; height: 50px; } } } } </style>