2024-04-01 15:03:53 +08:00

873 lines
19 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<!-- 沈阳合盈 盘锦项目 首页定制 -->
<ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false">
<div class="largeScreen" ref="dataScreenRef">
<div class="header">
<!-- 顶部左上角图片 -->
<!-- <div class="hearderIcon"><img src="@/assets/images/headerLeftIcon.png" alt="" /></div> -->
<span class="projectTitle">
<p v-if="COMPANY === 'syhy'">数字化智慧综合管控平台</p>
<p v-else>数字化项目监管平台</p>
</span>
<span class="projectSmallTitle" v-if="COMPANY === 'syhy'">
<p>盘锦西环66KV变电站工程</p>
</span>
<span class="projectSmallTitle" v-if="COMPANY === 'phmw'">
<p>鄱湖美湾医疗医美产业集群项目</p>
</span>
<span class="projectSmallTitle" v-if="COMPANY === 'hfqc'">
<p>乌丹站舍智慧工地项目</p>
</span>
<span class="projectSmallTitle" v-if="COMPANY === 'as'">
<p>鞍钢尾矿资源利用</p>
</span>
<div class="rightIcon" @click.stop>
<div class="time">{{ nowTime }}</div>
<!-- <div class="Icon">
<img src="@/assets/images/dustNoise/jobIcon.png" alt="" />
</div>
<div class="Icon">
<img src="@/assets/images/dustNoise/ysbfIcon.png" alt="" />
</div>
<div class="Icon">
<img src="@/assets/images/dustNoise/sjzxIcon.png" alt="" />
</div>
<div class="Icon">
<img src="@/assets/images/dustNoise/dpIcon.png" alt="" />
</div> -->
<div class="Icon">
<img src="@/assets/images/dustNoise/tbsjIcon.png" alt="" />
</div>
<div class="Icon" @click="showUserBox = !showUserBox">
<img src="@/assets/images/dustNoise/ryIcon.png" alt="" />
</div>
<!-- <el-dropdown trigger="click">
<template #dropdown>
<div class="userDialog" @click="loginOut">退出登录</div>
</template>
</el-dropdown> -->
</div>
<div class="userBox" v-show="showUserBox">
<div class="userItem">
<div class="sanJiao"></div>
<div class="userIcon">
<div class="icon"><img src="@/assets/images/dustNoise/userIcon.png" /></div>
<div class="userName">{{ adminName }}</div>
</div>
<div class="loginOut" @click="jumpBgd">
<div class="loginOutIcon"><img src="@/assets/images/dustNoise/jumpIcon.png" /></div>
<div class="userName">项目后台</div>
</div>
<div class="loginOut" @click="loginOut">
<div class="loginOutIcon"><img src="@/assets/images/dustNoise/loginOut.png" /></div>
<div class="userName">退出登录</div>
</div>
</div>
</div>
</div>
<div class="menuList">
<div v-for="(item, index) in menuList" :key="index" style=":nth-child(3):margin-left: 35% !important;" class="menStyle">
<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-show="itemList != null && itemList.length >= 1">
<div class="subItem" :style="COMPANY === 'hfqc' ? 'width:120px' : ''" v-for="(data, i) in itemList" :key="i" :index="data.companyPath" @click="navigateTo(data, 2)">
<span style="white-space: nowrap" :class="{ active2: activeTab2 === data.companyPath }">{{ data.menuName }}</span>
</div>
</div>
</div>
<div class="contentDate" v-show="itemList != null && itemList.length >= 1">
<span>自2022.02.28起开始计算至今日2023.04.16<span class="numColor">412</span>个日历天</span>
</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";
import { jumpLargeUserInfoApi } from "@/api/modules/login";
import { COMPANY } from "@/config/config";
const store = GlobalStore();
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: "/projectOverview"
},
{
moduleName: "智慧党建",
modulePath: "/smartPartyBuilding"
},
{
moduleName: "人员管理",
modulePath: "/laborManagement"
},
{
moduleName: "AI安全预警",
modulePath: "/aIEarlyWarning"
},
{
moduleName: "绿色施工",
modulePath: "/headNoise"
},
{
moduleName: "智能管理",
modulePath: "/videoManagement"
},
{
moduleName: "用电智能检测",
modulePath: "/electricityMonitor"
},
{
moduleName: "进度计划",
modulePath: "/schedulePlan"
}
]);
//嘉兴王江泾公用码头项目模块
let jiaXingMenuList = ref([
{
moduleName: "工程概况",
modulePath: "/projectOverview"
},
{
moduleName: "绿色施工",
modulePath: "/headNoise"
},
{
moduleName: "劳务管理",
modulePath: "/laborManagement"
},
{
moduleName: "安全管理",
modulePath: "/securityManagement"
},
{
moduleName: "AI预警中心",
modulePath: "/aIEarlyWarning"
},
{
moduleName: "视频管理",
modulePath: "/videoManagement"
}
]);
// 鄱湖美湾医疗、医美产业集群项目
let panHuMenuList = ref([
{
moduleName: "工程概览",
modulePath: "/projectOverview"
},
{
moduleName: "扬尘噪声",
modulePath: "/headNoise"
},
{
moduleName: "劳务管理",
modulePath: "/laborManagement"
},
{
moduleName: "视频管理",
modulePath: "/videoManagement"
},
{
moduleName: "车辆管理",
modulePath: "/vehicleManagement"
},
{
moduleName: "塔吊监测",
modulePath: "/towerCraneMonitoring"
},
{
moduleName: "地磅管理",
modulePath: "/loadometerManage"
},
{
moduleName: "烟感监测",
modulePath: "/smokeSensor"
}
]);
// 乌丹站舍智慧工地项目
let heFeiMenuList = ref([
{
moduleName: "",
modulePath: "/projectOverview",
menuList: [
{
menuName: "工程概况",
companyPath: "/projectOverview"
}
]
},
{
moduleName: "准入管理",
modulePath: "/laborManagement",
menuList: [
{
menuName: "劳务实名制",
companyPath: "/laborManagement"
},
{
menuName: "车辆出入管理",
companyPath: "/vehicleManagement"
}
]
},
{
moduleName: "反违章纠察",
modulePath: "/videoManagement",
menuList: [
{
menuName: "视频管理",
companyPath: "/videoManagement"
},
{
menuName: "AI智能预警",
companyPath: "/aIEarlyWarning"
},
]
},
{
moduleName: "智能安全帽",
modulePath: "/smartSafeHat",
menuList: [
{
menuName: "",
companyPath: "/smartSafeHat"
}
]
},
{
moduleName: "安全风险警示",
modulePath: "/distributionMonitoring",
menuList: [
{
menuName: "配电箱监测",
companyPath: "/distributionMonitoring"
},
{
menuName: "外墙脚手架监测",
companyPath: "/wallScaffold"
},
{
menuName: "临边防护报警",
companyPath: "/edgeProtection"
},
{
menuName: "智能烟感监测",
companyPath: "/qualityManagement"
}
]
},
{
moduleName: "高支模监测预警",
modulePath: "/highFormwork",
menuList: [
{
menuName: "",
companyPath: "/highFormwork"
}
]
}
])
// 鞍山项目
let anShanMenuList = ref([
{
moduleName: "综合管理",
modulePath: "/projectOverview",
menuList: [
{
menuName: "工程概况",
companyPath: "/projectOverview"
},
{
menuName: "智慧党建",
companyPath: "/smartPartyBuilding"
}
]
},
{
moduleName: "数字工地",
modulePath: "/videoManagement",
menuList: [
{
menuName: "视频管理",
companyPath: "/videoManagement"
},
{
menuName: "AI预警",
companyPath: "/aIEarlyWarning"
},
{
menuName: "地磅管理",
companyPath: "/loadometerManage"
},
{
menuName: "车辆管理",
companyPath: "/vehicleManagement"
},
{
menuName: "配电箱监测",
companyPath: "/distributionMonitoring"
},
{
menuName: "标养室监测",
companyPath: "/standardCureRoom"
},
{
menuName: "车辆定位",
companyPath: "/carPosition"
},
{
menuName: "机械设备定位",
companyPath: "/equipmentPosition"
},
{
menuName: "智能安全帽",
companyPath: "/smartSafeHat"
}
]
},
{
moduleName: "劳务管理",
modulePath: "/laborManagement"
},
{
moduleName: "安全管理",
modulePath: "/securityManagement",
menuList: [
{
menuName: "安全管理",
companyPath: "/securityManagement"
},
{
companyPath: "/foundationPitMonitor",
menuName: "基坑监测"
},
{
menuName: "隧道定位监测",
companyPath: "/tunnelPosition"
},
{
menuName: "临边防护",
companyPath: "/edgeProtection"
},
{
menuName: "有毒气体监测",
companyPath: "/toxicGasMonitor"
},
{
menuName: "高支模监测",
companyPath: "/highFormwork"
},
{
menuName: "高边坡监测",
companyPath: "/highSlope"
},
{
menuName: "烟感监测",
companyPath: "/smokeSensor"
},
{
menuName: "安全教育",
companyPath: "/safeEducation"
}
]
},
{
moduleName: "质量管理",
modulePath: "/qualityManagement",
menuList: [
{
menuName: "质量管理",
companyPath: "/qualityManagement"
},
{
menuName: "混凝土测温",
companyPath: "/concreteMonitor"
},
{
menuName: "进度计划",
companyPath: "/schedulePlan"
}
]
},
{
moduleName: "绿色施工",
modulePath: "/headNoise",
menuList: [
{
menuName: "扬尘噪声",
companyPath: "/headNoise"
},
{
companyPath: "/electricityMonitor",
menuName: "用电监测"
},
{
companyPath: "/waterMonitor",
menuName: "用水监测"
},
{
companyPath: "/sewageMonitor",
menuName: "污水监测"
}
]
},
{
moduleName: "大型机械",
modulePath: "/towerCraneMonitoring",
menuList: [
{
menuName: "塔吊监测",
companyPath: "/towerCraneMonitoring"
},
{
menuName: "升降机监测",
companyPath: "/elevatorMonitoring"
},
{
menuName: "卸料平台",
companyPath: "/unloadPlatform"
},
{
menuName: "混凝土拌合站",
companyPath: "/concreteMixingPlant"
},
{
menuName: "龙门吊监测",
companyPath: "/gantryCrane"
},
{
companyPath: "/erectCrane",
menuName: "架桥机"
},
{
companyPath: "/hangBasket",
menuName: "挂篮监测"
},
{
companyPath: "/pressureTestMachine",
menuName: "压力试验机"
},
{
companyPath: "/universalTestMachine",
menuName: "万能试验机"
},
{
companyPath: "/compressionIntegrate",
menuName: "抗压一体机"
},
{
companyPath: "/asphaltMixer",
menuName: "沥青拌合站"
},
{
companyPath: "/waterStabilizedMixer",
menuName: "水稳拌合站"
}
]
},
{ moduleName: "BIM模型", modulePath: "/bImModel" }
])
const itemList = ref([]);
const activeTab = ref(0);
const activeTab2 = ref(0);
const router = useRouter();
//获取动态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);
}
};
onMounted(async () => {
if (COMPANY === "jxwjj") {
menuList.value = jiaXingMenuList.value;
}
if (COMPANY === "phmw") {
menuList.value = panHuMenuList.value;
}
if (COMPANY === "hfqc") {
menuList.value = heFeiMenuList.value;
}
if (COMPANY === "as") {
menuList.value = anShanMenuList.value;
}
//这里是跳转过来后免登录的操作接收token 登录 懂了
//数据看板跳转免登录
if (window.location.href.indexOf("token") != -1) {
console.log("跳转进来了吗----", window.location.href.indexOf("token"));
const newToken = window.location.href.split("token=")[1];
const data = await jumpLargeUserInfoApi({ token: newToken });
console.log("跳转请求的数据----", data.result);
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);
}
// await getAllModelMenu();
navigateTo(menuList.value[0], 1);
activeTab.value = menuList.value[0].modulePath;
itemList.value = menuList.value[0].menuList;
// console.log("进入页面, ");
adminName.value = store.account;
// console.log("store数据", store.account);
// menuClick(menuList.value[0], activeIndex.value);
getNowTime();
document.addEventListener("click", bodyCloseMenus);
const subMenus = document.querySelectorAll(".menStyle");
if (subMenus.length >= 5 && COMPANY !== 'hfqc') {
subMenus[4].style.marginLeft = "30%";
}
if (COMPANY === 'hfqc') {
subMenus[3].style.marginLeft = "44%";
}
});
let timer = ref(null as any);
onBeforeUnmount(() => {
clearInterval(timer);
document.removeEventListener("click", bodyCloseMenus);
});
function bodyCloseMenus() {
if (showUserBox.value === true) {
showUserBox.value = false;
}
}
function getNowTime() {
let speed = 1000;
let theNowTime = function () {
nowTime.value = timeNumber();
};
timer.value = setInterval(theNowTime, speed);
}
function timeNumber() {
let today = new Date();
let date = today.getFullYear() + "-" + twoDigits(today.getMonth() + 1) + "-" + twoDigits(today.getDate());
let time = twoDigits(today.getHours()) + ":" + twoDigits(today.getMinutes()) + ":" + twoDigits(today.getSeconds());
return date + " " + time;
}
function twoDigits(val: any) {
if (val < 10) return "0" + val;
return val;
}
function loginOut() {
localStorage.removeItem("GlobalState");
location.reload();
router.push("/login");
}
//跳转后台
function jumpBgd() {
// window.location.replace("http://192.168.34.226:8080/#/projectIndex");
if (COMPANY === "syhy") {
window.location.replace("http://101.43.164.214:45020/#/projectIndex"); //沈阳和盈
}
if (COMPANY === "jxwjj") {
window.location.replace("http://183.249.224.118:9000/#/projectIndex"); //嘉兴王江泾公用码头
}
if (COMPANY === "phmw") {
window.location.replace("http://101.43.164.214:11111/#/projectIndex"); // 鄱湖美湾医疗、医美产业集群项目
}
if (COMPANY === "hfqc") {
window.location.replace("http://101.43.164.214:11111/#/projectIndex"); // 鄱湖美湾医疗、医美产业集群项目
}
if (COMPANY === "as") {
window.location.replace("http://182.90.224.237:15551/#/projectIndex"); // 鞍山项目
}
}
</script>
<style>
.el-popper__arrow {
background-color: #112d59;
}
</style>
<style lang="scss" scoped>
.largeScreen {
width: 100%;
height: 100%;
background: url("@/assets/images/bigImg.gif") no-repeat;
background-size: 100% 100%;
.header {
width: 100%;
height: 12%;
background: url("@/assets/images/headerImg.webp") no-repeat;
background-size: 100% 100%;
.projectTitle {
display: flex;
justify-content: center;
font-size: 38px;
color: #fff;
font-family: YouSheBiaoTiHei;
}
.projectSmallTitle {
position: absolute;
top: 6%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #fff;
font-family: YouSheBiaoTiHei;
}
.rightIcon {
position: absolute;
display: flex;
width: 30%;
left: 70%;
color: #fff;
top: 1%;
.time {
font-size: 13px;
font-family: sadigitalNumber;
margin: 1% 40% 0 10%;
}
.Icon {
margin-right: 2%;
cursor: pointer;
width: 25px;
margin-top: 1%;
}
}
}
.menuList {
display: flex;
height: 6%;
color: #ccc;
line-height: 55px;
margin: -4% auto 0 2%;
font-family: pmzd;
div {
position: relative;
margin-top: 1%;
height: 60%;
width: 9%; //二级
// width: 10%;//一级
cursor: pointer;
}
.subMenu {
width: 100%;
height: 100%;
display: flex;
font-size: 20px;
span {
width: 90%;
height: 10%;
margin-left: 2%;
line-height: 40px;
text-align: center;
}
}
.subMenuList {
position: absolute;
width: 98%;
height: 4%;
display: flex;
margin-top: 5%;
font-size: 14px;
font-family: none;
background: url("@/assets/images/subTabImg.gif") no-repeat;
background-size: 100% 100%;
margin-left: -1%;
.subItem {
width: 100px;
margin-top: -1.5%;
text-align: center;
}
:nth-child(1) {
margin-left: 2%;
}
}
}
.contentDate {
color: #fff;
float: right;
margin-right: 2%;
font-size: 14px;
.numColor {
color: #82fbea;
font-family: sadigitalNumber;
font-size: 24px;
font-weight: bold;
}
}
.dataBoardContent {
// height: 81%;//二级
height: 85%; //一级
// height: calc(100% - 15px - 50px - 60px - 20px);
// margin: 75px auto 16px auto;//二级
margin: 30px auto 16px auto; //一级
width: calc(100% - 40px);
// background-color: #01131F;
// opacity: 0.9;
}
}
.active {
display: inline-block;
height: 100%;
width: 90%;
background: url("@/assets/images/dustNoise/menuImg.png") no-repeat;
background-size: 100% 100%;
color: #fff;
}
.active2 {
color: #fff;
font-family: none;
}
.userDialog {
display: flex;
justify-content: center;
align-items: center;
width: 70px;
height: 25px;
text-align: center;
background-color: #112d59;
color: #5d75a0;
font-size: 12px;
cursor: pointer;
}
.userBox {
.userItem {
position: absolute;
width: 110px;
height: 100px;
right: 2%;
top: 4%;
background: #112d59;
border-radius: 0px 0px 0px 0px;
border: 0px solid #405e97;
z-index: 9;
.sanJiao {
position: absolute;
width: 0;
height: 0;
right: 0%;
top: -10%;
border-left: 6px solid transparent; /* 左边框透明 */
border-right: 6px solid transparent; /* 右边框透明 */
border-bottom: 6px solid #405e97; /* 底部边框颜色 */
transform: rotate(0deg); /* 旋转45度 */
}
.userIcon {
display: flex;
align-items: center;
justify-content: space-evenly;
height: 38px;
border-bottom: 1px solid #405e97;
cursor: pointer;
.icon {
width: 18px;
height: 18px;
img {
width: 100&;
height: 100%;
}
}
.userName {
width: 40px;
font-size: 12px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
color: #a9bce6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.loginOut {
display: flex;
justify-content: space-evenly;
align-items: center;
height: 26px;
padding-left: 5px;
cursor: pointer;
height: 30px;
.loginOutIcon {
width: 12px;
height: 12px;
img {
width: 100&;
height: 100%;
}
}
.userName {
width: 50px;
font-size: 12px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
color: #a9bce6;
}
}
}
}
.loginOut:hover {
background-color: #2758c0;
}
.hearderIcon {
left: 1%;
top: 1%;
height: 5%;
width: 12%;
position: absolute;
img {
width: 100%;
}
}
</style>