diff --git a/digital-future-summit/src/app/implementation/layout/layout.component.html b/digital-future-summit/src/app/implementation/layout/layout.component.html index 67667a1..ff20c5b 100644 --- a/digital-future-summit/src/app/implementation/layout/layout.component.html +++ b/digital-future-summit/src/app/implementation/layout/layout.component.html @@ -1,72 +1,112 @@
- - - -
- 装备云 -
- -
- 零部件云 -
- -
- AIOT设备智能化 -
- -
- 知识中台 -
- -
- chatFile -
- -
- 数据中台 -
- -
- 互联中台 -
- -
- 智能工作台 -
- - -
- T100 -
- -
- E10 -
- - -
- 高效设计研发 -
- - -
- 高管数智助理 -
- -
- 业务中台 -
- -
- 智能生产控制 -
- -
- 智能合并报表 -
- -
- 智驱中台 +
+ + + + + + + + + + +
用户： + + width + + height + + + + +
+
+ +
+ + +
+ 装备云 +
+ +
+ 零部件云 +
+ +
+ AIOT设备智能 +
+ +
+ 知识中台 +
+ +
+ chatFile +
+ +
+ 数据中台 +
+ +
+ 互联中台 +
+ +
+ 智能工作台 +
+ + +
+ T100 +
+ +
+ E10 +
+ + +
+ 高效设计研发 +
+ + +
+ 高管数智助理 +
+ +
+ 业务中台 +
+ +
+ 智能生产控制 +
+ +
+ 智能合并报表 +
+ +
+ 智驱中台 +
\ No newline at end of file diff --git a/digital-future-summit/src/app/implementation/layout/layout.component.less b/digital-future-summit/src/app/implementation/layout/layout.component.less index 159b4ec..3468eca 100644 --- a/digital-future-summit/src/app/implementation/layout/layout.component.less +++ b/digital-future-summit/src/app/implementation/layout/layout.component.less @@ -7,130 +7,170 @@ /* 背景图等比例缩小填充整个容器 */ height: 100vh; /* 使背景图铺满整个浏览器窗口 */ - display: flex; - justify-content: center; - align-items: center; - position: relative; } -.layout-body .img { +.tab{ + position: absolute; + left: 0; + top: 0; + z-index: 10000; + width: 800px; + background-color: aqua; +} + +.container .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; + display: none; +} + + +.container { + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + z-index: 100; + /* background-color: rgba(255, 0, 0, 0.5); */ + /* 使用RGBA设置背景颜色为红色，透明度为50% */ + height: 100vh; + width: 100%; } -.layout-body .box { + +.container .box { position: absolute; z-index: 1000; - background-color: white; font-size: large; text-align: center; padding: 10px 10px; cursor: pointer; + border: 1px solid #ddd; } -.layout-body .box-equipmentCloud { - top: 20px; - left: 20px; - width: 150px; +.container .box-equipmentCloud { + top: 10%; + left: 2%; + width: 320px; + height: 100px; } -.layout-body .box-partsCloud { - top: 70px; - left: 20px; - width: 150px; + +.container .box-partsCloud { + top: 10%; + right: 2%; + width: 350px; + height: 100px; } -.layout-body .box-AIOT { - top: 120px; +.container .box-KMO { + top: 170px; left: 20px; width: 150px; + background-color: wheat; } -.layout-body .box-KMO { - top: 170px; +.container .box-chatFile { + top: 220px; left: 20px; width: 150px; + background-color: wheat; } -.layout-body .box-chatFile { - top: 220px; + +.container .box-AIOT { + top: 120px; left: 20px; width: 150px; + background-color: wheat; } -.layout-body .box-DMP { +.container .box-DMP { top: 300px; left: 20px; width: 150px; + background-color: wheat; } -.layout-body .box-iPaaS { +.container .box-iPaaS { top: 350px; left: 20px; width: 150px; + background-color: wheat; } -.layout-body .box-EIP { +.container .box-EIP { top: 400px; left: 20px; width: 150px; + background-color: wheat; } -.layout-body .box-T100bs { +.container .box-T100bs { top: 450px; left: 20px; width: 150px; + background-color: wheat; } -.layout-body .box-E10229 { +.container .box-E10229 { top: 500px; left: 20px; width: 150px; + background-color: wheat; } -.layout-body .box-PLM { +.container .box-PLM { top: 550px; left: 20px; width: 150px; - color:darkmagenta; + color: darkmagenta; + background-color: wheat; } -.layout-body .box-assistant { +.container .box-assistant { top: 20px; right: 0px; width: 150px; color: brown; + background-color: wheat; } -.layout-body .box-BSC { +.container .box-BSC { top: 70px; right: 0px; width: 150px; color: brown; + background-color: wheat; } -.layout-body .box-mes { +.container .box-SSO_mes { top: 120px; right: 0px; width: 150px; color: brown; + background-color: wheat; } -.layout-body .box-SCS { +.container .box-SCS { top: 170px; right: 0px; width: 150px; color: brown; + background-color: wheat; } -.layout-body .box-AASK { +.container .box-AASK { top: 220px; right: 0px; width: 150px; color: brown; + background-color: wheat; } \ No newline at end of file diff --git a/digital-future-summit/src/app/implementation/layout/layout.component.ts b/digital-future-summit/src/app/implementation/layout/layout.component.ts index fc1b570..cb2dd75 100644 --- a/digital-future-summit/src/app/implementation/layout/layout.component.ts +++ b/digital-future-summit/src/app/implementation/layout/layout.component.ts @@ -2,14 +2,12 @@ import { systemList } from "./system"; // import { DwHttpApiInterceptor } from "@webdpt/framework/http"; /* eslint-disable quotes */ -import { Component, OnInit } from "@angular/core"; +import { Component, ElementRef, OnInit, Renderer2 } from "@angular/core"; import { DigiMiddlewareAuthApp, DigiMiddlewareAuthUser, } from "app/config/app-auth-token"; import { CommonService } from "../service/common.service"; -import { log } from "console"; -import { menuData } from './../menu/model/menu.model'; @Component({ selector: "app-layout", @@ -18,25 +16,51 @@ import { menuData } from './../menu/model/menu.model'; }) export class LayoutComponent implements OnInit { // 登出： https://iam-test.digiwincloud.com.cn/api/iam/v2/identity/logout - userToken: string; systemMaps = {}; - user_info = { - userId: "", // 当前用户账号 - tenantId: "", // 当前用户租户id - productKey: "", // json字段的头部 - }; queryDisplayList = []; - constructor(private commonService: CommonService) { } + USER_ID = ''; + + dragEnable: boolean = false; + + isDragging: boolean = false; + + layoutUsers = ['digiwin0001', 'digiwin0002', 'digiwin0003', 'digiwin0004', 'digiwin0005', 'default', + 'digiwin0006', 'digiwin0007', 'digiwin0008', 'digiwin0009', 'digiwin0010', 'dongsk@digiwin.com']; + + divContent = { + sysId: '', + top: '', + left: '', + height: '', + width: '', + userId: 'default', + tenantId: '', + topPercent: '', + leftPercent: '', + heightPercent: '', + widthPercent: '' + }; + + + constructor(private commonService: CommonService, private el: ElementRef, private renderer: Renderer2) { } ngOnInit(): void { this.systemMaps = systemList; this.initSystemBySemcSSO(); } - /** * 通过请求queryDisplayList接口登录 */ initSystemBySemcSSO() { + + + const DwUserInfo = JSON.parse(sessionStorage.getItem("DwUserInfo")); + + this.USER_ID = DwUserInfo.userId; + this.dragEnable = this.USER_ID === 'dongsk@digiwin.com'; + + console.log(this.dragEnable); + const headers = { "Digi-Middleware-Auth-App": DigiMiddlewareAuthApp, "Digi-Middleware-Auth-User": DigiMiddlewareAuthUser, @@ -55,15 +79,64 @@ export class LayoutComponent implements OnInit { url: item.cloudwebsite, applicationAppId: item.applicationAppId }; + + // 非管理员加载 + this.divContent.userId = this.USER_ID; + if (this.USER_ID === 'dongsk@digiwin.com') { + this.divContent.userId = "default"; + } + 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); + }); + } + }); + } + jumpToSystem(key: string) { - console.log(this.systemMaps); + + const DwUserInfo = JSON.parse(sessionStorage.getItem("DwUserInfo")); + + if (DwUserInfo.userId === 'dongsk@digiwin.com') { + return; + } + if (this.systemMaps[key] == null) { return; } @@ -72,12 +145,10 @@ export class LayoutComponent implements OnInit { // 免密跳转 if (item.linkLogin) { - window.open(item.url,'_blank'); + window.open(item.url, '_blank'); return; } - const DwUserInfo = JSON.parse(sessionStorage.getItem("DwUserInfo")); - const headers = { "Digi-Middleware-Auth-App": DigiMiddlewareAuthApp, "Digi-Middleware-Auth-User": DigiMiddlewareAuthUser, @@ -129,4 +200,107 @@ export class LayoutComponent implements OnInit { } } + handleElementDrag(data: any) { + // console.log(data); + + if (data.type === 'mousedown') { + this.isDragging = true; + this.divContent.height = data.height; + this.divContent.width = data.width; + this.divContent.top = data.top; + this.divContent.left = data.left; + this.divContent.sysId = data.id; + } + + if (data.type !== 'mouseup') { + return; + } + + if (data.left === '' || data.top === '') { + return; + } + + const DwUserInfo = JSON.parse(sessionStorage.getItem("DwUserInfo")); + + this.divContent.sysId = data.id; + this.divContent.top = data.top; + this.divContent.left = data.left; + this.divContent.height = data.height; + this.divContent.width = data.width; + this.divContent.tenantId = DwUserInfo.tenantId; + + console.log(this.divContent); + // this.commonService.postWithHeaders(this.commonService.apiUrl + "/restful/standard/demo/api/517/config/save", + // divContentX, + // { + // "Digi-Middleware-Auth-App": DigiMiddlewareAuthApp, + // "Digi-Middleware-Auth-User": DigiMiddlewareAuthUser, + // } + // ).then(res => { + // if (res && res.response) { + // alert('sucess!'); + // } + // }); + this.isDragging = false; + + } + + changeDiv(type: String) { + + 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 === '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 === '') { + return; + } + + + // 计算百分比 + const windowWidth: number = window.innerWidth; + const windowHeight: number = window.innerHeight; + + const top = parseFloat(this.divContent.top.replace("px", "")); + const left = parseFloat(this.divContent.left.replace("px", "")); + 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 = ''; + } + }); + + } + } diff --git a/digital-future-summit/src/app/implementation/layout/system.ts b/digital-future-summit/src/app/implementation/layout/system.ts index e8fbaf5..0d00789 100644 --- a/digital-future-summit/src/app/implementation/layout/system.ts +++ b/digital-future-summit/src/app/implementation/layout/system.ts @@ -1,7 +1,7 @@ /* eslint-disable quotes */ export const systemList = { EIP: { - key:"EIP", + key: "EIP", title: "智驱工作台", sid: 821224928908288, id: "digiwinSummit", @@ -10,19 +10,24 @@ export const systemList = { mockLogin: false, ssoLogin: false, }, + T100: { + key: "T100", + title: "T100", + url: "http://221.226.187.245:12080/wtoppth/ua/r/app/gwc_azzi000_nologin?Arg=2222", + mockLogin: false, + ssoLogin: false, + linkLogin: true, + }, iPaaS: { - key:"iPaaS", + key: "iPaaS", title: "数环通用", - sid: 821224928908288, - id: "digiwinSummit", - name: "数智未来峰会", url: "https://api.solinkup.com/console/loginByPhone?phone=13851711172", mockLogin: false, ssoLogin: false, linkLogin: true, }, DMP: { - key:"DMP", + key: "DMP", title: "数据中台", sid: 150269977879104, id: "zhoujg", @@ -32,7 +37,7 @@ export const systemList = { ssoLogin: false, }, chatFile: { - key:"chatFile", + key: "chatFile", title: "chatFile", sid: 610301619790400, id: "ShanghaiWorldExpo", @@ -42,7 +47,7 @@ export const systemList = { ssoLogin: false, }, KMO: { - key:"KMO", + key: "KMO", title: "知识中台", sid: 610301619790400, id: "ShanghaiWorldExpo", @@ -52,7 +57,7 @@ export const systemList = { ssoLogin: false, }, AIOT: { - key:"AIOT", + key: "AIOT", title: "AIOT", sid: 190963220054592, id: "zhoujg999", @@ -62,7 +67,7 @@ export const systemList = { ssoLogin: false, }, equipmentCloud: { - key:"equipmentCloud", + key: "equipmentCloud", title: "装备云", sid: 500620095189568, id: "88880310", @@ -72,7 +77,7 @@ export const systemList = { ssoLogin: false, }, partsCloud: { - key:"partsCloud", + key: "partsCloud", title: '零部件云', sid: 473371184808512, id: '20220815', @@ -80,5 +85,15 @@ export const systemList = { url: "https://athena.digiwincloud.com.cn", mockLogin: false, ssoLogin: false, + }, + scsCloud: { + key: "partsCloud", + title: '智合报', + sid: 484411116737088, + id: 'SCST100Athena', + name: 'scs华为云发版测试', + url: "https://athena.digiwincloud.com.cn", + mockLogin: false, + ssoLogin: false, } }; diff --git a/digital-future-summit/src/app/implementation/shared/draggable/draggable.directive.ts b/digital-future-summit/src/app/implementation/shared/draggable/draggable.directive.ts new file mode 100644 index 0000000..59451b4 --- /dev/null +++ b/digital-future-summit/src/app/implementation/shared/draggable/draggable.directive.ts @@ -0,0 +1,76 @@ +import { Directive, ElementRef, EventEmitter, HostListener, Output, Input, Renderer2 } from '@angular/core'; +import { element } from 'protractor'; + +@Directive({ + selector: '[appDraggable]' +}) +export class DraggableDirective { + private offsetX: number = 0; + private offsetY: number = 0; + private isDragging: boolean = false; + + constructor(private el: ElementRef, private renderer: Renderer2) { } + + @Input() dragEnable: boolean; + + @Output() dragEvent = new EventEmitter(); + + @HostListener('mousedown', ['$event']) + onMouseDown(event: MouseEvent) { + if (!this.dragEnable || this.isDragging) { + return; + } + this.isDragging = true; + this.offsetX = event.clientX - this.el.nativeElement.getBoundingClientRect().left; + this.offsetY = event.clientY - this.el.nativeElement.getBoundingClientRect().top; + + // this.renderer.setStyle(this.el.nativeElement, 'poniter', 'move'); + + this.dragEvent.emit({ + type: 'mousedown', + left: this.el.nativeElement.getBoundingClientRect().left + 'px', + top: this.el.nativeElement.getBoundingClientRect().top + 'px', + height: this.el.nativeElement.clientHeight + 'px', + width: this.el.nativeElement.clientWidth + 'px', + id: this.el.nativeElement.getAttribute('id') + }); + } + + @HostListener('mousemove', ['$event']) + onMouseMove(event: MouseEvent) { + if (this.isDragging) { + const x = event.clientX - this.offsetX; + const y = event.clientY - this.offsetY; + this.renderer.setStyle(this.el.nativeElement, 'left', x + 'px'); + this.renderer.setStyle(this.el.nativeElement, 'top', y + 'px'); + + // this.dragEvent.emit({ + // type: 'mousemove', + // left: this.el.nativeElement.style.left, + // top: this.el.nativeElement.style.top, + // height: this.el.nativeElement.clientHeight + 'px', + // width: this.el.nativeElement.clientWidth + 'px', + // id: this.el.nativeElement.getAttribute('id') + // }); + } + } + + @HostListener('mouseup') + onMouseUp() { + if (!this.dragEnable) { + return; + } + this.isDragging = false; + // 记录div位置 + // console.log('Left: ' + this.el.nativeElement.style.left + ', Top: ' + this.el.nativeElement.style.top); + this.dragEvent.emit({ + type: 'mouseup', + left: this.el.nativeElement.style.left, + top: this.el.nativeElement.style.top, + height: this.el.nativeElement.clientHeight + 'px', + width: this.el.nativeElement.clientWidth + 'px', + id: this.el.nativeElement.getAttribute('id') + }); + // this.renderer.removeStyle(this.el.nativeElement, 'poniter'); + } +} diff --git a/digital-future-summit/src/app/implementation/shared/shared.module.ts b/digital-future-summit/src/app/implementation/shared/shared.module.ts index 7c55c3b..c63c32c 100644 --- a/digital-future-summit/src/app/implementation/shared/shared.module.ts +++ b/digital-future-summit/src/app/implementation/shared/shared.module.ts @@ -2,6 +2,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { DwExceptionModule } from '@webdpt/components/exception'; +import { DraggableDirective } from './draggable/draggable.directive'; /** * 共享模組 @@ -18,7 +19,11 @@ import { DwExceptionModule } from '@webdpt/components/exception'; exports: [ FormsModule, ReactiveFormsModule, - DwExceptionModule + DwExceptionModule, + DraggableDirective + ], + declarations: [ + DraggableDirective ] }) export class SharedModule { }