修改大屏切换

dev_xd
haha 2025-06-12 00:01:30 +08:00
parent 9db50321d6
commit e50c4aa274
3 changed files with 647 additions and 426 deletions

View File

@ -1,57 +1,177 @@
<template>
<div class="div-header">
<el-row>
<el-col :span="8" style="margin-left:20px;width:calc(33.33% - 20px);">
<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 == 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
: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
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
: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>
<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>
<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;">
<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 == 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>
<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
: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>
<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>
@ -66,14 +186,39 @@
</div>
</div>
</div>
<div :class="(nav >= 500 && nav < 600) || nav == 5 ? 'head-nav active' : 'head-nav'" style="position: relative;" class="has-submenu">
<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
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>
@ -81,27 +226,61 @@
</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>
<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
:class="nav == 6 ? 'head-nav active' : 'head-nav'"
@click="doNav(6)"
>
绿碳中心
</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>
</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">
<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;"
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"
@ -116,7 +295,12 @@
<svg
class="icon"
v-else
style="width: 24px; vertical-align: middle;fill: currentColor;overflow: hidden;"
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"
@ -139,128 +323,136 @@ export default {
return {
nav: 1,
selProject: null,
selProjectId: '',
selProjectId: "",
projects: [],
isFullScreen: false,
}
};
},
computed: {
nickName() {
return this.$store.getters.nickName
return this.$store.getters.nickName;
},
curNav() {
return this.$store.getters.nav
return this.$store.getters.nav;
},
},
watch: {
curNav(n, o) {
this.nav = this.$store.getters.nav
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()
if (location.href.includes("#/detail?prjId=")) {
const urlParams = new URLSearchParams(location.href.split("?")[1]);
const prjId = urlParams.get("prjId");
localStorage.setItem("selProj", prjId);
setTimeout(() => {
location.hash = "#/detail";
}, 800);
}
})
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)
let el = document.body;
this.$toggleFullScreen(el);
setTimeout(() => {
this.isFullScreen = document.fullscreenElement == el
}, 400)
this.isFullScreen = document.fullscreenElement == el;
}, 400);
},
doProjectSelect() {
let tmps = this.projects.filter((d) => d.id == this.selProjectId)
let tmps = this.projects.filter((d) => d.id == this.selProjectId);
if (tmps.length > 0) {
this.$store.dispatch('SetSelProject', tmps[0])
this.selProject = tmps[0]
this.selProject.vendorsCode = 'uni'
document.title = this.selProject.projectName + ' - 大屏'
this.$store.dispatch("SetSelProject", tmps[0]);
this.selProject = tmps[0];
this.selProject.vendorsCode = "uni";
document.title = this.selProject.projectName + " - 大屏";
} else {
this.$store.dispatch('SetSelProject', null)
this.selProject = null
document.title = '大屏'
this.$store.dispatch("SetSelProject", null);
this.selProject = null;
document.title = "大屏";
}
localStorage.setItem('selProj', this.selProjectId)
localStorage.setItem('prj_title', document.title)
localStorage.setItem("selProj", this.selProjectId);
localStorage.setItem("prj_title", document.title);
},
doNav(n) {
if (this.nav == n) {
return
return;
}
this.nav = n
this.nav = n;
switch (n) {
case 1:
this.$router.push('/index')
break
this.$router.push("/index");
break;
case 101:
this.$router.push('/detail')
break
this.$router.push("/detail");
break;
case 3:
//this.$router.push('/prjSafety')
break
break;
case 309:
this.$router.push('/videoMonitor')
break
this.$router.push("/videoMonitor");
break;
case 301:
this.$router.push('/safetyCheck')
break
this.$router.push("/safetyCheck");
break;
case 304:
this.$router.push('/towerCrane')
break
this.$router.push("/towerCrane");
break;
case 306:
this.$router.push('/powerIot')
break
this.$router.push("/powerIot");
break;
case 308:
this.$router.push('/dumbwaiter')
break
this.$router.push("/dumbwaiter");
break;
case 310:
this.$router.push('/aiWarning')
break
this.$router.push("/aiWarning");
break;
case 4:
//this.$router.push('/prjQuality')
break
break;
case 5:
//this.$router.push('/prjProgress')
break
break;
case 6:
this.$router.push('/greenCarbon')
break
this.$router.push("/greenCarbon");
break;
case 102:
this.$router.push('/labor')
break
this.$router.push("/labor");
break;
case 501:
this.$router.push('/photography')
break
this.$router.push("/photography");
break;
case 502:
this.$router.push('/planSchedule')
break
this.$router.push("/planSchedule");
break;
}
},
doLogout() {
this.$confirm('确定注销并退出系统吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
this.$confirm("确定注销并退出系统吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.$store.dispatch('LogOut').then(() => {
location.href = window.XDBSAPP
this.$store.dispatch("LogOut").then(() => {
location.href = window.XDBSAPP;
});
})
})
.catch(() => {})
.catch(() => {});
},
},
}
};
</script>
<style lang="less">

View File

@ -1,12 +1,28 @@
<template>
<div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<div
:class="{ 'has-logo': showLogo }"
:style="{
backgroundColor:
sideTheme === 'theme-dark'
? variables.menuBackground
: variables.menuLightBackground,
}"
>
<logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
:text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
:background-color="
sideTheme === 'theme-dark'
? variables.menuBackground
: variables.menuLightBackground
"
:text-color="
sideTheme === 'theme-dark'
? variables.menuColor
: variables.menuLightColor
"
:unique-opened="true"
:active-text-color="theme"
:collapse-transition="false"
@ -24,19 +40,29 @@
</template>
<script setup>
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/assets/styles/variables.module.scss'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
import Logo from "./Logo";
import SidebarItem from "./SidebarItem";
import variables from "@/assets/styles/variables.module.scss";
import useAppStore from "@/store/modules/app";
import useSettingsStore from "@/store/modules/settings";
import usePermissionStore from "@/store/modules/permission";
import useUserStore from "@/store/modules/user";
const route = useRoute();
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()
const appStore = useAppStore();
const settingsStore = useSettingsStore();
const permissionStore = usePermissionStore();
const userStore = useUserStore();
const sidebarRouters = computed(() => permissionStore.sidebarRouters);
const sidebarRouters = computed(() => {
let tmps = permissionStore.sidebarRouters;
tmps.forEach((item) => {
if (item.meta && item.meta.title == "项目大屏") {
item.name += "?prjId=" + userStore.currentPrjId;
item.path += "?prjId=" + userStore.currentPrjId;
}
});
return tmps;
});
const showLogo = computed(() => settingsStore.sidebarLogo);
const sideTheme = computed(() => settingsStore.sideTheme);
const theme = computed(() => settingsStore.theme);
@ -49,6 +75,5 @@ const activeMenu = computed(() => {
return meta.activeMenu;
}
return path;
})
});
</script>

View File

@ -115,6 +115,7 @@ import {
devicePositionUpdateItems,
} from "@/api/bim/bim.js";
import icons from "./icons.js";
import { debounce } from "lodash-es";
export default {
name: "SandTableSetting",
components: {
@ -157,7 +158,10 @@ export default {
this.initEngine();
},
methods: {
doSave() {
doSave: debounce(function () {
this.toSave();
}, 300),
toSave() {
this.$confirm("确认保存修改?", "提示", {
type: "warning",
confirmButtonText: "确 认",