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 3b196be..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,69 +1,112 @@ - - -
- - - -
-
-
- 零部件云 -
-
-
- -
-
-
- 数据中台 -
-
-
-
- chatFile -
-
-
-
- 知识中台 -
-
-
-
- 智驱工作台 -
-
- -
-
- AIOT -
-
-
-
- 装备云 -
-
-
- -
-
-
- E10 -
-
-
-
- T100 -
-
-
-
+
+
+ + + + + + + + + + +
用户： + + 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 c4e2e2e..3468eca 100644 --- a/digital-future-summit/src/app/implementation/layout/layout.component.less +++ b/digital-future-summit/src/app/implementation/layout/layout.component.less @@ -1,159 +1,176 @@ -/deep/.dw-f-header { - // display: none; - box-shadow: none; +.layout-body { + margin: 0; + padding: 0; + background: url("../../../assets/img/1122.png") center center no-repeat; + /* 设置背景图 */ + background-size: cover; + /* 背景图等比例缩小填充整个容器 */ + height: 100vh; + /* 使背景图铺满整个浏览器窗口 */ } -/deep/.dw-f-menusider { - display: none; + +.tab{ + position: absolute; + left: 0; + top: 0; + z-index: 10000; + width: 800px; + background-color: aqua; } -/deep/.dw-f-header .dw-header-left { + +.container .img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; display: none; } -/deep/.dw-f-header .dw-header-right .dw-f-header-item { - 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%; +} + + +.container .box { + position: absolute; + z-index: 1000; + font-size: large; + text-align: center; + padding: 10px 10px; + cursor: pointer; + border: 1px solid #ddd; } -/deep/.dw-header-icon { - position: fixed; - right: 10px; - color: #fff; + +.container .box-equipmentCloud { + top: 10%; + left: 2%; + width: 320px; + height: 100px; } -/deep/nz-layout.ant-layout { - display: inline-block; + + +.container .box-partsCloud { + top: 10%; + right: 2%; + width: 350px; + height: 100px; } -.layout-box { - position: relative; - width: 100%; - height: 100%; - overflow: hidden; - background-image: url("../../../assets/img/new-bg.jpg"); - background-repeat: no-repeat; - background-size: cover; - background-position: center; - .top-box { - // background: rgba(0, 0, 0, 0.5); - width: 85%; - height: 10%; - position: absolute; - display: flex; - justify-content: flex-end; - box-sizing: border-box; - left: 0; - top: 16%; - /* bottom: 0; */ - right: 0; - margin: auto; - } - .top-system-content { - width: 80px; - height: 80px; - box-shadow: 2px 2px 4px rgba(124, 199, 243, 0.6); - // opacity: 0.6; - border-radius: 40px; - background: rgba(0, 0, 0, 0.5); - margin: 5px; - padding: 10px; - font-weight: bold; - display: flex; - text-align: center; - justify-content: flex-start; - align-items: center; - cursor: pointer; - } - .center-box { - // background: rgba(0, 0, 0, 0.5); - width: 60%; - height: 50%; - position: absolute; - display: flex; - justify-content: space-between; - box-sizing: border-box; - left: 0; - top: 20%; - bottom: 0; - right: 0; - margin: auto; - } - - .system-content { - width: 80px; - height: 80px; - box-shadow: 2px 2px 4px rgba(124, 199, 243, 0.6); - // opacity: 0.6; - border-radius: 40px; - background: rgba(0, 0, 0, 0.5); - margin: 5px; - padding: 10px; - font-weight: bold; - display: flex; - text-align: left; - justify-content: flex-start; - align-items: center; - cursor: pointer; - .div-position7 { - right: 5%; - position: absolute; - top: 35%; - } - } - .div-position1 { - left: 20%; - position: absolute; - top: 20%; - } - .div-position2 { - position: absolute; - right: 20%; - top: 20%; - } - .div-position3 { - right: 22%; - position: absolute; - top: 46%; - } - .div-position4 { - left: 24%; - position: absolute; - top: 46%; - } - .div-position5 { - left: 7%; - position: absolute; - top: 32%; - } - .div-position6 { - right: 5%; - position: absolute; - top: 35%; - } - .bottom-box { - // background: rgba(245, 186, 186, 0.5); - width: 60%; - height: 100px; - position: absolute; - display: flex; - justify-content: flex-start; - box-sizing: border-box; - left: 0; - bottom: 5%; - right: 0; - margin: auto; - } - .bottom-system-content { - width: 80px; - height: 80px; - box-shadow: 2px 2px 4px rgba(124, 199, 243, 0.6); - // opacity: 0.6; - border-radius: 40px; - background: rgba(0, 0, 0, 0.5); - margin: 5px; - padding: 10px; - font-weight: bold; - display: flex; - text-align: center; - justify-content: flex-start; - align-items: center; - cursor: pointer; - } -} -// .system-content:hover .system-box { -// transform: scale(1.1); /* 鼠标悬停时放大1.1倍 */ -// } + +.container .box-KMO { + top: 170px; + left: 20px; + width: 150px; + background-color: wheat; +} + +.container .box-chatFile { + top: 220px; + left: 20px; + width: 150px; + background-color: wheat; +} + + +.container .box-AIOT { + top: 120px; + left: 20px; + width: 150px; + background-color: wheat; +} + +.container .box-DMP { + top: 300px; + left: 20px; + width: 150px; + background-color: wheat; +} + +.container .box-iPaaS { + top: 350px; + left: 20px; + width: 150px; + background-color: wheat; +} + +.container .box-EIP { + top: 400px; + left: 20px; + width: 150px; + background-color: wheat; +} + +.container .box-T100bs { + top: 450px; + left: 20px; + width: 150px; + background-color: wheat; +} + +.container .box-E10229 { + top: 500px; + left: 20px; + width: 150px; + background-color: wheat; +} + +.container .box-PLM { + top: 550px; + left: 20px; + width: 150px; + color: darkmagenta; + background-color: wheat; +} + + +.container .box-assistant { + top: 20px; + right: 0px; + width: 150px; + color: brown; + background-color: wheat; +} + +.container .box-BSC { + top: 70px; + right: 0px; + width: 150px; + color: brown; + background-color: wheat; +} + +.container .box-SSO_mes { + top: 120px; + right: 0px; + width: 150px; + color: brown; + background-color: wheat; +} + +.container .box-SCS { + top: 170px; + right: 0px; + width: 150px; + color: brown; + background-color: wheat; +} + +.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 3f027ce..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,12 +2,13 @@ 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"; + @Component({ selector: "app-layout", templateUrl: "./layout.component.html", @@ -15,143 +16,291 @@ import { CommonService } from "../service/common.service"; }) export class LayoutComponent implements OnInit { // 登出： https://iam-test.digiwincloud.com.cn/api/iam/v2/identity/logout - userToken: string; - systemList = {}; - user_info = { - userId: "", // 当前用户账号 - tenantId: "", // 当前用户租户id - productKey: "", // json字段的头部 - }; + systemMaps = {}; 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.systemList = systemList; - this.getSystem(); - } - toLinkSystem(type?) { - // 1. 通过获取user_token获取单点登录链接 - // 请求获取user_token - switch (type) { - case "DMP": - this.getUserToken(type, this.systemList["DMP"]); - break; - case "chatFile": - this.getUserToken(type, this.systemList["chatFile"]); - break; - case "KMO": - this.getUserToken(type, this.systemList["KMO"]); - break; - case "EIP": - this.getUserToken(type, this.systemList["EIP"]); - break; - case "AIOT": - this.getUserToken(type, this.systemList["AIOT"]); - break; - case "equipmentCloud": - this.getUserToken(type, this.systemList["equipmentCloud"]); - break; - case "partsCloud": - this.getUserToken(type, this.systemList["partsCloud"]); - break; - case "E10229": - this.getUserToken(type, this.systemList["E10229"]); - break; - case "T100bs": - this.getUserToken(type, this.systemList["T100bs"]); - break; - } + this.systemMaps = systemList; + this.initSystemBySemcSSO(); } + /** * 通过请求queryDisplayList接口登录 */ - getSystem() { + 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, }; - this.commonService - .getRequestWithHeaders( - this.commonService.semcUrl + "/tenant/semc/applink/queryDisplayList", - headers - ) - .then((res) => { - this.queryDisplayList = res.response; - console.log("queryDisplayList", this.queryDisplayList); - }) - .catch((error) => console.error(error)); - } - /** - * 三种方式的url拼接 - */ - async getUserToken(type, item) { - console.log("item", item); - if (item.ssoLogin) { - // 单点登录跳转 queryDisplayList接口的数据 底部 e10 t100 - // 需要拼applicationAppId - console.log("单点登录跳转的方式", type); - let url = ""; - const queryDisplayList = this.queryDisplayList.filter((arr) => { - return arr.code === type; + 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.divContent.userId = "default"; + } + this.initSysLayout(); + }); - // console.log("queryDisplayList111", queryDisplayList); - if ( - queryDisplayList.length > 0 && - queryDisplayList[0]?.applicationAppId - ) { - url = - queryDisplayList[0]["cloudwebsite"] + - "&code=" + - queryDisplayList[0].applicationAppId; - } else { - url = queryDisplayList[0]["cloudwebsite"]; + 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, } - console.log("单点登录url", url); - window.open(url); - } else if (item.mockLogin) { - console.log("模拟登录的方式", type); - // 通过书康哥接口请求 模拟登录 - const DwUserInfo = JSON.parse(sessionStorage.getItem("DwUserInfo")); - console.log("DwUserInfo", DwUserInfo); - this.user_info.userId = DwUserInfo["userId"]; - this.user_info.tenantId = DwUserInfo["tenantId"]; - this.user_info.productKey = type; - console.log("user_info", this.user_info); - let getUrl = ""; - getUrl = - this.commonService.apiUrl + "/restful/standard/demo/api/default/login"; - this.commonService - .postWithHeaders(getUrl, this.user_info, {}) - .then((res) => { - // console.log("res", res); - if (res && res.response) { - this.userToken = res.response.user_token; - const url = item.url + "/sso-login?userToken=" + this.userToken; - window.open(url); - } + ).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) { + + + const DwUserInfo = JSON.parse(sessionStorage.getItem("DwUserInfo")); + + if (DwUserInfo.userId === 'dongsk@digiwin.com') { + return; + } + + if (this.systemMaps[key] == null) { + return; + } + + const item = this.systemMaps[key]; + + // 免密跳转 + if (item.linkLogin) { + window.open(item.url, '_blank'); + return; + } + + const headers = { + "Digi-Middleware-Auth-App": DigiMiddlewareAuthApp, + "Digi-Middleware-Auth-User": DigiMiddlewareAuthUser, + }; + + // 单点登录 + 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); + } + }); + 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); + } + }); + } else { - console.log("切换租户的方式", type); - // 接口 refresh/tenant 切换租户方式 - const getUrl = - this.commonService.iamUrl + "/api/iam/v2/identity/token/refresh/tenant"; - console.log("iamUrl", this.commonService.iamUrl); - const headers = { + + // 切换租户登录 + 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') { + 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, - }; - const data = { - tenantSid: item.sid, - }; - this.userToken = await this.commonService - .postWithHeaders(getUrl, data, headers) - .then((res) => { - // console.log("res", res); - return res.user_token; - }); - let url = ""; - url = item.url + "/sso-login?userToken=" + this.userToken; - console.log("切换租户的方式url", url); - window.open(url); - } + } + ).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 a2486d3..0d00789 100644 --- a/digital-future-summit/src/app/implementation/layout/system.ts +++ b/digital-future-summit/src/app/implementation/layout/system.ts @@ -1,6 +1,33 @@ /* eslint-disable quotes */ export const systemList = { + EIP: { + key: "EIP", + title: "智驱工作台", + sid: 821224928908288, + id: "digiwinSummit", + name: "数智未来峰会", + url: "https://athena.digiwincloud.com.cn", + 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", + title: "数环通用", + url: "https://api.solinkup.com/console/loginByPhone?phone=13851711172", + mockLogin: false, + ssoLogin: false, + linkLogin: true, + }, DMP: { + key: "DMP", title: "数据中台", sid: 150269977879104, id: "zhoujg", @@ -10,6 +37,7 @@ export const systemList = { ssoLogin: false, }, chatFile: { + key: "chatFile", title: "chatFile", sid: 610301619790400, id: "ShanghaiWorldExpo", @@ -19,24 +47,17 @@ export const systemList = { ssoLogin: false, }, KMO: { + key: "KMO", title: "知识中台", sid: 610301619790400, id: "ShanghaiWorldExpo", name: "ChatFile演示", - url: "https://kcf.apps.digiwincloud.com.cn", - mockLogin: false, - ssoLogin: false, - }, - EIP: { - title: "智驱工作台", - sid: 821224928908288, - id: "digiwinSummit", - name: "数智未来峰会", - url: "https://athena.digiwincloud.com.cn", + url: "https://kcp.apps.digiwincloud.com.cn", mockLogin: false, ssoLogin: false, }, AIOT: { + key: "AIOT", title: "AIOT", sid: 190963220054592, id: "zhoujg999", @@ -46,31 +67,33 @@ export const systemList = { ssoLogin: false, }, equipmentCloud: { + key: "equipmentCloud", title: "装备云", - sid: 821224928908288, - id: "digiwinSummit", - name: "数智未来峰会", + sid: 500620095189568, + id: "88880310", + name: "江苏Athena演示环境-E10", url: "https://athena.digiwincloud.com.cn", mockLogin: false, ssoLogin: false, }, partsCloud: { - title: "零部件云", - sid: 821224928908288, - id: "digiwinSummit", - name: "数智未来峰会", + key: "partsCloud", + title: '零部件云', + sid: 473371184808512, + id: '20220815', + name: '合规试制体验环境', url: "https://athena.digiwincloud.com.cn", - mockLogin: true, - ssoLogin: false, - }, - E10229: { - title: "E10", mockLogin: false, - ssoLogin: true, + ssoLogin: false, }, - T100bs: { - title: "T100", + scsCloud: { + key: "partsCloud", + title: '智合报', + sid: 484411116737088, + id: 'SCST100Athena', + name: 'scs华为云发版测试', + url: "https://athena.digiwincloud.com.cn", mockLogin: false, - ssoLogin: true, - }, + 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 { } diff --git a/digital-future-summit/src/assets/img/1122.png b/digital-future-summit/src/assets/img/1122.png new file mode 100644 index 0000000..c45e40e Binary files /dev/null and b/digital-future-summit/src/assets/img/1122.png differ