410 lines
19 KiB
Vue
410 lines
19 KiB
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 >= 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"></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: 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 4:
|
|
this.$router.push("/prjQuality");
|
|
break;
|
|
case 5:
|
|
this.$router.push("/prjProgress");
|
|
break;
|
|
case 6:
|
|
this.$router.push("/greenCarbon");
|
|
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> |