athena-demo
/
digiwin-summit
11
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 2 Wiki Activity
Browse Source

fix(111): 解决页面闪现问题

master
丁翠 6 months ago
parent
8fae1b9020
commit
926df773be
3 changed files with 205 additions and 160 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      digital-future-summit/src/app/implementation/layout/layout.component.html
  2. +5
    -7
      digital-future-summit/src/app/implementation/layout/layout.component.less
  3. +199
    -152
      digital-future-summit/src/app/implementation/layout/layout.component.ts

+ 1
- 1
digital-future-summit/src/app/implementation/layout/layout.component.html View File

@ -32,7 +32,7 @@
</table>
</div>
<div class="container">
<div class="container" [class.hidden]="!showElement">
<!-- <img class="img" src="../../../assets/img/1122.png" /> -->
<div id="equipmentCloud" appDraggable [dragEnable]="dragEnable" (dragEvent)="handleElementDrag($event)"


+ 5
- 7
digital-future-summit/src/app/implementation/layout/layout.component.less View File

@ -9,7 +9,7 @@
/* 使背景图铺满整个浏览器窗口 */
}
.tab{
.tab {
position: absolute;
left: 0;
top: 0;
@ -27,7 +27,6 @@
display: none;
}
.container {
margin: 0;
padding: 0;
@ -42,7 +41,6 @@
width: 100%;
}
.container .box {
position: absolute;
z-index: 1000;
@ -60,7 +58,6 @@
height: 100px;
}
.container .box-partsCloud {
top: 10%;
right: 2%;
@ -82,7 +79,6 @@
background-color: wheat;
}
.container .box-AIOT {
top: 120px;
left: 20px;
@ -133,7 +129,6 @@
background-color: wheat;
}
.container .box-assistant {
top: 20px;
right: 0px;
@ -172,4 +167,7 @@
width: 150px;
color: brown;
background-color: wheat;
}
}
.hidden {
display: none;
}

+ 199
- 152
digital-future-summit/src/app/implementation/layout/layout.component.ts View File

@ -2,7 +2,13 @@
import { systemList } from "./system";
// import { DwHttpApiInterceptor } from "@webdpt/framework/http";
/* eslint-disable quotes */
import { AfterViewInit, Component, ElementRef, OnInit, Renderer2 } from "@angular/core";
import {
AfterViewInit,
Component,
ElementRef,
OnInit,
Renderer2,
} from "@angular/core";
import {
DigiMiddlewareAuthApp,
DigiMiddlewareAuthUser,
@ -18,52 +24,66 @@ export class LayoutComponent implements OnInit, AfterViewInit {
// 登出： https://iam-test.digiwincloud.com.cn/api/iam/v2/identity/logout
systemMaps = {};
queryDisplayList = [];
USER_ID = '';
USER_ID = "";
dragEnable: boolean = false;
isDragging: boolean = false;
layoutUsers = ['digiwin0001', 'digiwin0002', 'digiwin0003', 'digiwin0004', 'digiwin0005', 'default', 'M00020',
'digiwin0006', 'digiwin0007', 'digiwin0008', 'digiwin0009', 'digiwin0010', 'dongsk@digiwin.com'];
layoutUsers = [
"digiwin0001",
"digiwin0002",
"digiwin0003",
"digiwin0004",
"digiwin0005",
"default",
"M00020",
"digiwin0006",
"digiwin0007",
"digiwin0008",
"digiwin0009",
"digiwin0010",
"dongsk@digiwin.com",
];
divContent = {
sysId: '',
top: '',
left: '',
height: '',
width: '',
userId: 'default',
tenantId: '',
topPercent: '',
leftPercent: '',
heightPercent: '',
widthPercent: ''
sysId: "",
top: "",
left: "",
height: "",
width: "",
userId: "default",
tenantId: "",
topPercent: "",
leftPercent: "",
heightPercent: "",
widthPercent: "",
};
showElement: boolean = false;
constructor(private commonService: CommonService, private el: ElementRef, private renderer: Renderer2) { }
constructor(
private commonService: CommonService,
private el: ElementRef,
private renderer: Renderer2
) {}
ngOnInit(): void {
this.systemMaps = systemList;
this.initSystemBySemcSSO();
}
ngAfterViewInit() {
// const divElement = this.el.nativeElement.querySelector('.layout-body');
}
/**
* 通过请求queryDisplayList接口登录
*/
initSystemBySemcSSO() {
const DwUserInfo = JSON.parse(sessionStorage.getItem("DwUserInfo"));
this.USER_ID = DwUserInfo.userId;
this.dragEnable = this.USER_ID === 'dongsk@digiwin.com' || this.USER_ID === 'M00020';
this.dragEnable =
this.USER_ID === "dongsk@digiwin.com" || this.USER_ID === "M00020";
console.log(this.dragEnable);
@ -71,78 +91,87 @@ export class LayoutComponent implements OnInit, AfterViewInit {
"Digi-Middleware-Auth-App": DigiMiddlewareAuthApp,
"Digi-Middleware-Auth-User": DigiMiddlewareAuthUser,
};
const url = this.commonService.semcUrl + "/tenant/semc/applink/queryDisplayList";
this.commonService.getRequestWithHeaders(url, headers).then((res) => {
this.queryDisplayList = res.response;
this.queryDisplayList.forEach(item => {
this.systemMaps["SSO_" + item.id] = {
key: item.id,
id: item.id,
title: item.name,
mockLogin: false,
ssoLogin: true,
callBackUrl: item.callBackUrl,
url: item.cloudwebsite,
applicationAppId: item.applicationAppId
};
// 非管理员加载
this.divContent.userId = this.USER_ID;
if (this.USER_ID === 'dongsk@digiwin.com' || this.USER_ID === 'M00020') {
this.divContent.userId = "default";
}
});
// 初始化布局
this.initSysLayout();
console.log("systemMaps", this.systemMaps);
const url =
this.commonService.semcUrl + "/tenant/semc/applink/queryDisplayList";
this.commonService
.getRequestWithHeaders(url, headers)
.then((res) => {
this.queryDisplayList = res.response;
this.queryDisplayList.forEach((item) => {
this.systemMaps["SSO_" + item.id] = {
key: item.id,
id: item.id,
title: item.name,
mockLogin: false,
ssoLogin: true,
callBackUrl: item.callBackUrl,
url: item.cloudwebsite,
applicationAppId: item.applicationAppId,
};
// 非管理员加载
this.divContent.userId = this.USER_ID;
if (
this.USER_ID === "dongsk@digiwin.com" ||
this.USER_ID === "M00020"
) {
this.divContent.userId = "default";
}
});
}).catch((error) => console.error(error));
// 初始化布局
this.initSysLayout();
console.log("systemMaps", this.systemMaps);
})
.catch((error) => console.error(error));
}
initSysLayout() {
if (!this.layoutUsers.includes(this.divContent.userId)) {
return;
}
const DwUserInfo = JSON.parse(sessionStorage.getItem("DwUserInfo"));
this.commonService.postWithHeaders(this.commonService.apiUrl + "/restful/standard/demo/api/517/config/list",
{
userId: this.divContent.userId,
tenantId: DwUserInfo.tenantId,
sysId: ''
},
{
"Digi-Middleware-Auth-App": DigiMiddlewareAuthApp,
"Digi-Middleware-Auth-User": DigiMiddlewareAuthUser,
}
).then(res => {
if (res && res.response) {
res.response.forEach(item => {
// console.log(item);
const sysEL = this.el.nativeElement.querySelector('#' + item.sysId);
// this.renderer.setStyle(sysEL, 'top', item.top);
// this.renderer.setStyle(sysEL, 'left', item.left);
// this.renderer.setStyle(sysEL, 'width', item.width);
// this.renderer.setStyle(sysEL, 'height', item.height);
this.renderer.setStyle(sysEL, 'top', item.topPercent);
this.renderer.setStyle(sysEL, 'left', item.leftPercent);
this.renderer.setStyle(sysEL, 'width', item.widthPercent);
this.renderer.setStyle(sysEL, 'height', item.heightPercent);
});
}
});
this.commonService
.postWithHeaders(
this.commonService.apiUrl +
"/restful/standard/demo/api/517/config/list",
{
userId: this.divContent.userId,
tenantId: DwUserInfo.tenantId,
sysId: "",
},
{
"Digi-Middleware-Auth-App": DigiMiddlewareAuthApp,
"Digi-Middleware-Auth-User": DigiMiddlewareAuthUser,
}
)
.then((res) => {
if (res && res.response) {
res.response.forEach((item) => {
// console.log(item);
const sysEL = this.el.nativeElement.querySelector("#" + item.sysId);
// this.renderer.setStyle(sysEL, 'top', item.top);
// this.renderer.setStyle(sysEL, 'left', item.left);
// this.renderer.setStyle(sysEL, 'width', item.width);
// this.renderer.setStyle(sysEL, 'height', item.height);
this.renderer.setStyle(sysEL, "top", item.topPercent);
this.renderer.setStyle(sysEL, "left", item.leftPercent);
this.renderer.setStyle(sysEL, "width", item.widthPercent);
this.renderer.setStyle(sysEL, "height", item.heightPercent);
this.showElement = true;
});
}
});
}
jumpToSystem(key: string) {
const DwUserInfo = JSON.parse(sessionStorage.getItem("DwUserInfo"));
if (DwUserInfo.userId === 'dongsk@digiwin.com' || DwUserInfo.userId === 'M00020') {
if (
DwUserInfo.userId === "dongsk@digiwin.com" ||
DwUserInfo.userId === "M00020"
) {
return;
}
@ -154,7 +183,7 @@ export class LayoutComponent implements OnInit, AfterViewInit {
// 免密跳转
if (item.linkLogin) {
window.open(item.url, '_blank');
window.open(item.url, "_blank");
return;
}
@ -165,54 +194,64 @@ export class LayoutComponent implements OnInit, AfterViewInit {
// 单点登录
if (item.ssoLogin) {
this.commonService.postWithHeaders(this.commonService.iamUrl + "/api/iam/v2/oauth2/authorize",
{
"appId": item.applicationAppId,
"callbackUrl": item.callBackUrl
},
headers
).then(res => {
if (res && res.data && res.data.code) {
window.open(item.url + "&code=" + res.data.code);
}
});
this.commonService
.postWithHeaders(
this.commonService.iamUrl + "/api/iam/v2/oauth2/authorize",
{
appId: item.applicationAppId,
callbackUrl: item.callBackUrl,
},
headers
)
.then((res) => {
if (res && res.data && res.data.code) {
window.open(item.url + "&code=" + res.data.code);
}
});
return;
}
// 模拟登录
if (item.mockLogin) {
this.commonService.postWithHeaders(this.commonService.apiUrl + "/restful/standard/demo/api/default/login",
{
userId: DwUserInfo.userId,
tenantId: DwUserInfo.tenantId,
productKey: item.id
}, headers
).then(res => {
if (res && res.response) {
window.open(item.url + "/sso-login?userToken=" + res.response.user_token);
}
});
this.commonService
.postWithHeaders(
this.commonService.apiUrl +
"/restful/standard/demo/api/default/login",
{
userId: DwUserInfo.userId,
tenantId: DwUserInfo.tenantId,
productKey: item.id,
},
headers
)
.then((res) => {
if (res && res.response) {
window.open(
item.url + "/sso-login?userToken=" + res.response.user_token
);
}
});
} else {
// 切换租户登录
this.commonService.postWithHeaders(this.commonService.iamUrl + "/api/iam/v2/identity/token/refresh/tenant",
{ tenantSid: item.sid },
headers
).then(res => {
if (res) {
window.open(item.url + "/sso-login?userToken=" + res.user_token);
}
});
this.commonService
.postWithHeaders(
this.commonService.iamUrl +
"/api/iam/v2/identity/token/refresh/tenant",
{ tenantSid: item.sid },
headers
)
.then((res) => {
if (res) {
window.open(item.url + "/sso-login?userToken=" + res.user_token);
}
});
}
}
handleElementDrag(data: any) {
// console.log(data);
if (data.type === 'mousedown') {
if (data.type === "mousedown") {
this.isDragging = true;
this.divContent.height = data.height;
this.divContent.width = data.width;
@ -221,11 +260,11 @@ export class LayoutComponent implements OnInit, AfterViewInit {
this.divContent.sysId = data.id;
}
if (data.type !== 'mouseup') {
if (data.type !== "mouseup") {
return;
}
if (data.left === '' || data.top === '') {
if (data.left === "" || data.top === "") {
return;
}
@ -251,36 +290,38 @@ export class LayoutComponent implements OnInit, AfterViewInit {
// }
// });
this.isDragging = false;
}
changeDiv(type: String) {
const sysEL = this.el.nativeElement.querySelector('#' + this.divContent.sysId);
const sysEL = this.el.nativeElement.querySelector(
"#" + this.divContent.sysId
);
if (sysEL === null) {
return;
}
if (type === 'W') {
this.renderer.setStyle(sysEL, 'width', this.divContent.width);
if (type === "W") {
this.renderer.setStyle(sysEL, "width", this.divContent.width);
}
if (type === 'H') {
this.renderer.setStyle(sysEL, 'height', this.divContent.width);
if (type === "H") {
this.renderer.setStyle(sysEL, "height", this.divContent.width);
}
}
save() {
if (!this.layoutUsers.includes(this.divContent.userId)) {
return;
}
if (this.divContent.left === '' || this.divContent.top === '' || this.divContent.sysId === '' ||
this.divContent.width === '' || this.divContent.height === '') {
if (
this.divContent.left === "" ||
this.divContent.top === "" ||
this.divContent.sysId === "" ||
this.divContent.width === "" ||
this.divContent.height === ""
) {
return;
}
// 计算百分比
const windowWidth: number = window.innerWidth;
const windowHeight: number = window.innerHeight;
@ -290,26 +331,32 @@ export class LayoutComponent implements OnInit, AfterViewInit {
const width = parseFloat(this.divContent.width.replace("px", ""));
const height = parseFloat(this.divContent.height.replace("px", ""));
this.divContent.topPercent = (Number((top / windowHeight).toFixed(4)) * 100).toString() + "%";
this.divContent.leftPercent = (Number((left / windowWidth).toFixed(4)) * 100).toString() + "%";
this.divContent.widthPercent = (Number((width / windowWidth).toFixed(4)) * 100).toString() + "%";
this.divContent.heightPercent = (Number((height / windowHeight).toFixed(4)) * 100).toString() + "%";
console.log('--save--divContent--', this.divContent);
this.commonService.postWithHeaders(this.commonService.apiUrl + "/restful/standard/demo/api/517/config/save",
this.divContent,
{
"Digi-Middleware-Auth-App": DigiMiddlewareAuthApp,
"Digi-Middleware-Auth-User": DigiMiddlewareAuthUser,
}
).then(res => {
if (res && res.response) {
alert('sucess!');
this.divContent.sysId = '';
}
});
this.divContent.topPercent =
(Number((top / windowHeight).toFixed(4)) * 100).toString() + "%";
this.divContent.leftPercent =
(Number((left / windowWidth).toFixed(4)) * 100).toString() + "%";
this.divContent.widthPercent =
(Number((width / windowWidth).toFixed(4)) * 100).toString() + "%";
this.divContent.heightPercent =
(Number((height / windowHeight).toFixed(4)) * 100).toString() + "%";
console.log("--save--divContent--", this.divContent);
this.commonService
.postWithHeaders(
this.commonService.apiUrl +
"/restful/standard/demo/api/517/config/save",
this.divContent,
{
"Digi-Middleware-Auth-App": DigiMiddlewareAuthApp,
"Digi-Middleware-Auth-User": DigiMiddlewareAuthUser,
}
)
.then((res) => {
if (res && res.response) {
alert("sucess!");
this.divContent.sysId = "";
}
});
}
}

Write Preview
Loading…
Cancel
Save