460 lines
11 KiB
Vue
460 lines
11 KiB
Vue
<template>
|
||
<!-- 沈阳合盈 盘锦项目 首页定制 -->
|
||
<ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false">
|
||
<div class="largeScreen" ref="dataScreenRef">
|
||
<div class="header">
|
||
<span class="projectTitle">
|
||
<p v-if="COMPANY === 'agjtCommand'">指挥部大屏</p>
|
||
</span>
|
||
<div class="leftIcon">
|
||
<div class="info">智慧工厂安全生产监管平台</div>
|
||
</div>
|
||
<div class="rightIcon" @click.stop>
|
||
<div class="time">{{ nowTime }}</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>
|
||
</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="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 BASEURL = import.meta.env.VITE_API_URL;
|
||
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: "/commandScreen"
|
||
},
|
||
]);
|
||
// 鞍山指挥部大屏
|
||
let agjtCommandList = ref([
|
||
{
|
||
moduleName: "指挥部大屏",
|
||
modulePath: "/commandScreen"
|
||
}
|
||
]);
|
||
|
||
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;
|
||
}
|
||
});
|
||
};
|
||
const navigateTo = (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 === "agjtCommand") {
|
||
// menuList.value = AGJTCommandMenu;
|
||
menuList.value = agjtCommandList.value;
|
||
}
|
||
//这里是跳转过来后免登录的操作，接收token 登录 懂了
|
||
//数据看板跳转免登录
|
||
if (window.location.href.indexOf("token") != -1) {
|
||
|
||
const newToken = window.location.href.split("token=")[1];
|
||
const data = await jumpLargeUserInfoApi({ token: newToken });
|
||
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();
|
||
// let arr = data.result.menuAuthority.moduleList;
|
||
// arr.forEach((item: any) => {
|
||
// if (item.moduleType == 4) {
|
||
// menuList.value.push(item);
|
||
// return;
|
||
// }
|
||
// });
|
||
}
|
||
// await getAllModelMenu();
|
||
navigateTo(menuList.value[0], 1);
|
||
activeTab.value = menuList.value[0].modulePath;
|
||
itemList.value = menuList.value[0].menuList;
|
||
|
||
adminName.value = 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"); // 鞍山项目
|
||
}
|
||
if(COMPANY === "agjtCommand"){
|
||
window.location.replace("http://42.180.188.17:11211" + "/#/login?token=" + store.token);
|
||
}
|
||
}
|
||
</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: 10%;
|
||
background: url("@/assets/images/headerImg.webp") no-repeat;
|
||
background-size: 100% 100%;
|
||
.projectTitle {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: 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;
|
||
}
|
||
.leftIcon {
|
||
position: absolute;
|
||
display: flex;
|
||
width: 30%;
|
||
left: 15%;
|
||
color: #fff;
|
||
top: 1%;
|
||
.info {
|
||
font-size: 14px;
|
||
font-family: sadigitalNumber;
|
||
margin: 0.1% 40% 0 10%;
|
||
letter-spacing: 2px;
|
||
}
|
||
}
|
||
.rightIcon {
|
||
position: absolute;
|
||
display: flex;
|
||
width: 30%;
|
||
left: 70%;
|
||
color: #fff;
|
||
top: 1%;
|
||
.time {
|
||
font-size: 13px;
|
||
font-family: sadigitalNumber;
|
||
margin: 0.5% 40% 0 10%;
|
||
}
|
||
.Icon {
|
||
margin-right: 2%;
|
||
cursor: pointer;
|
||
width: 25px;
|
||
// margin-top: 0.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: 10px auto 10px 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;
|
||
// height: 75px;
|
||
padding-bottom: 4px;
|
||
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> |