Merge branch 'yjl_dev' into 'shenzhen-dev'
大屏可视化页面自动适配调整 See merge request !10
This commit is contained in:
袁晶琳
commit
0025e26c27
11
package-lock.json
generated
11
package-lock.json
generated
@ -42,6 +42,7 @@
|
||||
"vue": "^3.2.47",
|
||||
"vue-i18n": "^9.1.9",
|
||||
"vue-router": "^4.1.6",
|
||||
"vue3-scale-box": "^0.1.9",
|
||||
"vue3-seamless-scroll": "^1.2.0",
|
||||
"vuedraggable": "^4.1.0"
|
||||
},
|
||||
@ -15679,6 +15680,11 @@
|
||||
"typescript": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/vue3-scale-box": {
|
||||
"version": "0.1.9",
|
||||
"resolved": "https://registry.npmjs.org/vue3-scale-box/-/vue3-scale-box-0.1.9.tgz",
|
||||
"integrity": "sha512-URKBWivTHglmwoqQTs9UBA+lWg7pMuyYusxI5ghU1ks3qZHcM+jCF5uoSiwlKpSd9XP47R3sO12oS+Sc5lW9ig=="
|
||||
},
|
||||
"node_modules/vue3-seamless-scroll": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/vue3-seamless-scroll/-/vue3-seamless-scroll-1.2.0.tgz",
|
||||
@ -27439,6 +27445,11 @@
|
||||
"semver": "^7.3.8"
|
||||
}
|
||||
},
|
||||
"vue3-scale-box": {
|
||||
"version": "0.1.9",
|
||||
"resolved": "https://registry.npmjs.org/vue3-scale-box/-/vue3-scale-box-0.1.9.tgz",
|
||||
"integrity": "sha512-URKBWivTHglmwoqQTs9UBA+lWg7pMuyYusxI5ghU1ks3qZHcM+jCF5uoSiwlKpSd9XP47R3sO12oS+Sc5lW9ig=="
|
||||
},
|
||||
"vue3-seamless-scroll": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/vue3-seamless-scroll/-/vue3-seamless-scroll-1.2.0.tgz",
|
||||
|
||||
@ -54,6 +54,7 @@
|
||||
"vue": "^3.2.47",
|
||||
"vue-i18n": "^9.1.9",
|
||||
"vue-router": "^4.1.6",
|
||||
"vue3-scale-box": "^0.1.9",
|
||||
"vue3-seamless-scroll": "^1.2.0",
|
||||
"vuedraggable": "^4.1.0"
|
||||
},
|
||||
|
||||
BIN
src/assets/images/subTabImg.gif
Normal file
BIN
src/assets/images/subTabImg.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
@ -72,6 +72,16 @@ export const staticRouter: RouteRecordRaw[] = [
|
||||
path: "/bImModel",
|
||||
name: "BIM模型",
|
||||
component: () => import("@/views/sevenLargeScreen/bImModel/index.vue")
|
||||
},
|
||||
{
|
||||
path: "/safetyManagement/securityManagement",
|
||||
name: "安全管理",
|
||||
component: () => import("@/views/sevenLargeScreen/safetyManagement/securityManagement.vue")
|
||||
},
|
||||
{
|
||||
path: "/safetyManagement/foundationPitMonitoring",
|
||||
name: "基坑监测",
|
||||
component: () => import("@/views/sevenLargeScreen/safetyManagement/foundationPitMonitoring.vue")
|
||||
}
|
||||
],
|
||||
meta: {
|
||||
|
||||
@ -23,7 +23,7 @@ export const GlobalStore = defineStore({
|
||||
editPassword: false,
|
||||
openDropdown: false,
|
||||
Message: null, // 点击跳转的时候存的数据
|
||||
projectDateAuth: null, //是否拥有所属工程的必填
|
||||
projectDateAuth: null, //动态路由
|
||||
isManager: "",
|
||||
// element组件大小
|
||||
assemblySize: "default",
|
||||
@ -77,7 +77,7 @@ export const GlobalStore = defineStore({
|
||||
setAccount(account: string | null) {
|
||||
this.account = account;
|
||||
},
|
||||
// 判断所属工程有没有校验
|
||||
// 动态路由
|
||||
setProjectDateAuth(projectDateAuth: number | null) {
|
||||
this.projectDateAuth = projectDateAuth;
|
||||
},
|
||||
|
||||
@ -85,7 +85,7 @@ const login = (formEl: FormInstance | undefined) => {
|
||||
globalStore.setToken(result.token);
|
||||
globalStore.setAccount(result.account);
|
||||
globalStore.setAccountType(result.accountType);
|
||||
globalStore.setProjectDateAuth(result.projectDateAuth);
|
||||
globalStore.setProjectDateAuth(result.menuAuthority);
|
||||
globalStore.setIsManager(result.isManager); //我已知晓
|
||||
|
||||
// 2.添加动态路由
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false">
|
||||
<div class="largeScreen" ref="dataScreenRef">
|
||||
<div class="header">
|
||||
<span class="projectTitle">
|
||||
@ -51,25 +52,26 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="menuList">
|
||||
<div
|
||||
v-for="(item, index) in menuList"
|
||||
:key="index"
|
||||
:class="{
|
||||
right: index > (menuList.length - 1) / 2,
|
||||
active: activeIndex == index ? 'active' : ''
|
||||
}"
|
||||
@click="menuClick(item, index)"
|
||||
>
|
||||
{{ item.moduleName }}
|
||||
<div v-for="(item, index) in menuList" :key="index">
|
||||
<div class="subMenu" :index="item.modulePath" :class="{ active: activeTab === item.modulePath }">
|
||||
<span @click="navigateTo(item, 1)">{{ item.moduleName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subMenuList" v-if="itemList != null && itemList.length >= 1">
|
||||
<div class="subItem" v-for="(data, i) in itemList" :key="i" :index="data.companyPath" @click="navigateTo(data, 2)">
|
||||
<span :class="{ active2: activeTab2 === data.companyPath }">{{ data.menuName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dataBoardContent">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</ScaleBox>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ScaleBox from "vue3-scale-box";
|
||||
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { GlobalStore } from "@/stores";
|
||||
@ -78,8 +80,28 @@ let nowTime = ref("2023-04-16 09:22:12" as any);
|
||||
let showUserBox = ref(false as any);
|
||||
let adminName = ref("" as any);
|
||||
let menuList = ref([
|
||||
{ moduleName: "扬尘噪声", modulePath: "/headNoise" },
|
||||
{ moduleName: "劳务管理", modulePath: "/laborManagement" },
|
||||
{
|
||||
moduleName: "安全管理",
|
||||
modulePath: "/safetyManagement/securityManagement",
|
||||
menuList: [
|
||||
{
|
||||
menuName: "安全管理",
|
||||
companyPath: "/safetyManagement/securityManagement"
|
||||
},
|
||||
{
|
||||
companyPath: "/safetyManagement/foundationPitMonitoring",
|
||||
menuName: "基坑监测"
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
moduleName: "扬尘噪声",
|
||||
modulePath: "/headNoise"
|
||||
},
|
||||
{
|
||||
moduleName: "劳务管理",
|
||||
modulePath: "/laborManagement"
|
||||
},
|
||||
{ moduleName: "视频管理", modulePath: "/videoManagement" },
|
||||
{ moduleName: "配电箱监测", modulePath: "/distributionMonitoring" },
|
||||
{ moduleName: "车辆管理", modulePath: "/vehicleManagement" },
|
||||
@ -87,18 +109,37 @@ let menuList = ref([
|
||||
{ moduleName: "升降机监测", modulePath: "/elevatorMonitoring" },
|
||||
{ moduleName: "BIM模型", modulePath: "/bImModel" }
|
||||
]);
|
||||
const activeIndex=ref(0)
|
||||
const itemList = ref([]);
|
||||
const activeTab = ref(0);
|
||||
const activeTab2 = ref(0);
|
||||
const router = useRouter();
|
||||
|
||||
const menuClick = (item, index) => {
|
||||
activeIndex.value = index;
|
||||
console.log("点击了tab", item);
|
||||
if (item.modulePath.includes("/")) {
|
||||
router.push(item.modulePath);
|
||||
//获取动态tab
|
||||
const getAllModelMenu = () => {
|
||||
let half = store.projectDateAuth.moduleList;
|
||||
half.forEach((item: any) => {
|
||||
if (item.moduleType == 4) {
|
||||
menuList.value.push(item);
|
||||
return;
|
||||
}
|
||||
});
|
||||
console.log("筛选出的数据看板路由", menuList.value);
|
||||
};
|
||||
const navigateTo = (path, type) => {
|
||||
console.log("点击的路由---", path, type);
|
||||
if (type == 1) {
|
||||
activeTab.value = path.modulePath;
|
||||
itemList.value = path.menuList;
|
||||
router.push(path.modulePath);
|
||||
} else {
|
||||
activeTab2.value = path.companyPath;
|
||||
router.push(path.companyPath);
|
||||
}
|
||||
};
|
||||
const moduleListData = ref([] as any);//动态路由
|
||||
onMounted(async () => {
|
||||
// await getAllModelMenu();
|
||||
activeTab.value = menuList.value[0].modulePath;
|
||||
itemList.value = menuList.value[0].menuList;
|
||||
//数据看板跳转免登录
|
||||
if (window.location.href.indexOf("token") != -1) {
|
||||
const token = window.location.href.split("token=")[1];
|
||||
@ -109,25 +150,27 @@ onMounted(async () => {
|
||||
},
|
||||
body: JSON.stringify({ token: token })
|
||||
});
|
||||
const data = await res.json();
|
||||
console.log("调用免登录接口返回的数据", data);
|
||||
// let arr = data.result.menuAuthority.moduleList;
|
||||
// arr.forEach((item: any) => {
|
||||
// if (item.moduleType == 4) {
|
||||
// moduleListData.value.push(item);
|
||||
// return;
|
||||
// }
|
||||
// });
|
||||
// console.log("当前项目的看板数据：：", moduleListData.value);
|
||||
store.setSN(data.result.sn);
|
||||
store.setToken(data.result.token);
|
||||
store.setAccount(data.result.account);
|
||||
store.setAccountType(data.result.accountType);
|
||||
store.setProjectDateAuth(data.menuAuthority);
|
||||
// const data = await res.json();
|
||||
// console.log("调用免登录接口返回的数据", data);
|
||||
// let arr = data.result.menuAuthority.moduleList;
|
||||
// arr.forEach((item: any) => {
|
||||
// if (item.moduleType == 4) {
|
||||
// menuList.value.push(item);
|
||||
// return;
|
||||
// }
|
||||
// });
|
||||
// console.log("当前项目的看板数据：：", moduleListData.value);
|
||||
}
|
||||
|
||||
// console.log("进入页面， ");
|
||||
adminName.value = store.account;
|
||||
// console.log("store数据", store.account);
|
||||
menuClick(menuList.value[0], activeIndex.value);
|
||||
// menuClick(menuList.value[0], activeIndex.value);
|
||||
getNowTime();
|
||||
document.addEventListener("click", bodyCloseMenus);
|
||||
});
|
||||
@ -227,33 +270,71 @@ function jumpBgd() {
|
||||
margin: -4% auto 0 2%;
|
||||
font-family: pmzd;
|
||||
div {
|
||||
position: relative;
|
||||
margin-top: 1%;
|
||||
height: 60%;
|
||||
width: 10%;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
font-size: calc(100vw * 20 / 1920);
|
||||
// text-align: center;
|
||||
}
|
||||
:nth-child(5) {
|
||||
margin-left: 35%;
|
||||
}
|
||||
.subMenu {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
font-size: calc(100vw * 20 / 1920);
|
||||
span {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
margin-top: -2%;
|
||||
margin-left: 2%;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.subMenuList {
|
||||
position: absolute;
|
||||
width: 98%;
|
||||
height: 4%;
|
||||
display: flex;
|
||||
margin-top: 5%;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
font-family: none;
|
||||
background: url("@/assets/images/subTabImg.gif") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-left: -1%;
|
||||
.subItem {
|
||||
width: 5%;
|
||||
margin-top: -1.5%;
|
||||
}
|
||||
:nth-child(1) {
|
||||
margin-left: 3%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dataBoardContent {
|
||||
height: 83%;
|
||||
height: 81%;
|
||||
// height: calc(100% - 15px - 50px - 60px - 20px);
|
||||
margin: 15px auto 16px auto;
|
||||
margin: 75px auto 16px auto;
|
||||
width: calc(100% - 40px);
|
||||
// background-color: #01131F;
|
||||
// opacity: 0.9;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 20%;
|
||||
width: 90%;
|
||||
// background: pink;
|
||||
background: url("@/assets/images/dustNoise/menuImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
}
|
||||
.active2 {
|
||||
color: #fff;
|
||||
font-family: none;
|
||||
}
|
||||
.userDialog {
|
||||
display: flex;
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
基坑监测
|
||||
<div style="color: #fff;">456</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: skyblue;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
安全管理
|
||||
<div style="color: #fff;">123</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user