新增设计，拖拽记录位置

6 months ago · b5eb52f048
--- 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 @@
 <div class="layout-body">

  <img class="img" src="../../../assets/img/1122.png" />

  <div class="box box-equipmentCloud" (click)="jumpToSystem('equipmentCloud')">
    <span>装备云</span>
  </div>

  <div class="box box-partsCloud" (click)="jumpToSystem('partsCloud')">
    <span>零部件云</span>
  </div>

  <div class="box box-AIOT" (click)="jumpToSystem('AIOT')">
    <span>AIOT设备智能化</span>
  </div>

  <div class="box box-KMO" (click)="jumpToSystem('KMO')">
    <span>知识中台</span>
  </div>

  <div class="box box-chatFile" (click)="jumpToSystem('chatFile')">
    <span>chatFile</span>
  </div>

  <div class="box box-DMP" (click)="jumpToSystem('DMP')">
    <span>数据中台</span>
  </div>

  <div class="box box-iPaaS" (click)="jumpToSystem('iPaaS')">
    <span>互联中台</span>
  </div>

  <div class="box box-EIP" (click)="jumpToSystem('EIP')">
    <span>智能工作台</span>
  </div>


  <div class="box box-T100bs" (click)="jumpToSystem('SSO_T100bs')">
    <span>T100</span>
  </div>

  <div class="box box-E10229" (click)="jumpToSystem('SSO_E10229')">
    <span>E10</span>
  </div>


  <div class="box box-PLM" (click)="jumpToSystem('SSO_PLM')">
    <span>高效设计研发</span>
  </div>


  <div class="box box-assistant" (click)="jumpToSystem('data_assistant')">
    <span>高管数智助理</span>
  </div>

  <div class="box box-BSC" (click)="jumpToSystem('BSC')">
    <span>业务中台</span>
  </div>

  <div class="box box-mes" (click)="jumpToSystem('sMES')">
    <span>智能生产控制</span>
  </div>

  <div class="box box-SCS" (click)="jumpToSystem('SCS')">
    <span>智能合并报表</span>
  </div>

  <div class="box box-AASK" (click)="jumpToSystem('AASK')">
    <span>智驱中台</span>
  <div class="tab" *ngIf="dragEnable">
    <table>
      <tr>
        <td style="text-align: right; padding: 4px;">用户：</td>
        <td>
          <input type="button" type="text" [(ngModel)]="divContent.userId" />
        </td>
        <td style="text-align: right; padding: 4px;">width</td>
        <td>
          <input type="button" type="text" [(ngModel)]="divContent.width" (change)="changeDiv('W')" />
        </td>
        <td style="text-align: right; padding: 4px;">height</td>
        <td>
          <input type="button" type="text" [(ngModel)]="divContent.height" (change)="changeDiv('H')"  />
        </td>
        <td>
          <input type="button" value="refresh" (click)="initSysLayout()" />
          <input type="button" value="save" style="margin-left:10px;" (click)="save()" />
        </td>
      </tr>
    </table>
  </div>

  <div class="container">
    <img class="img" src="../../../assets/img/1122.png" />

    <div id="equipmentCloud" appDraggable [dragEnable]="dragEnable" (dragEvent)="handleElementDrag($event)"
      class="box box-equipmentCloud" (click)="jumpToSystem('equipmentCloud')">
      <span>装备云</span>
    </div>

    <div id="partsCloud" appDraggable [dragEnable]="dragEnable" (dragEvent)="handleElementDrag($event)"
      class="box box-partsCloud" (click)="jumpToSystem('partsCloud')">
      <span>零部件云</span>
    </div>

    <div id="AIOT" appDraggable [dragEnable]="dragEnable" (dragEvent)="handleElementDrag($event)" class="box box-AIOT"
      (click)="jumpToSystem('AIOT')">
      <span>AIOT设备智能</span>
    </div>

    <div id="KMO" appDraggable [dragEnable]="dragEnable" (dragEvent)="handleElementDrag($event)" class="box box-KMO"
      (click)="jumpToSystem('KMO')">
      <span>知识中台</span>
    </div>

    <div id="chatFile" appDraggable [dragEnable]="dragEnable" (dragEvent)="handleElementDrag($event)"
      class="box box-chatFile" (click)="jumpToSystem('chatFile')">
      <span>chatFile</span>
    </div>

    <div id="DMP" appDraggable [dragEnable]="dragEnable" (dragEvent)="handleElementDrag($event)" class="box box-DMP"
      (click)="jumpToSystem('DMP')">
      <span>数据中台</span>
    </div>

    <div id="iPaaS" appDraggable [dragEnable]="dragEnable" (dragEvent)="handleElementDrag($event)" class="box box-iPaaS"
      (click)="jumpToSystem('iPaaS')">
      <span>互联中台</span>
    </div>

    <div id="EIP" appDraggable [dragEnable]="dragEnable" (dragEvent)="handleElementDrag($event)" class="box box-EIP"
      (click)="jumpToSystem('EIP')">
      <span>智能工作台</span>
    </div>


    <div id="T100" appDraggable [dragEnable]="dragEnable" (dragEvent)="handleElementDrag($event)" class="box box-T100bs"
      (click)="jumpToSystem('T100')">
      <span>T100</span>
    </div>

    <div id="SSO_E10229" appDraggable [dragEnable]="dragEnable" (dragEvent)="handleElementDrag($event)"
      class="box box-E10229" (click)="jumpToSystem('SSO_E10229')">
      <span>E10</span>
    </div>


    <div id="SSO_PLM" appDraggable [dragEnable]="dragEnable" (dragEvent)="handleElementDrag($event)" class="box box-PLM"
      (click)="jumpToSystem('SSO_PLM')">
      <span>高效设计研发</span>
    </div>


    <div id="data_assistant" appDraggable [dragEnable]="dragEnable" (dragEvent)="handleElementDrag($event)"
      class="box box-assistant" (click)="jumpToSystem('data_assistant')">
      <span>高管数智助理</span>
    </div>

    <div id="BSC" appDraggable [dragEnable]="dragEnable" (dragEvent)="handleElementDrag($event)" class="box box-BSC"
      (click)="jumpToSystem('BSC')">
      <span>业务中台</span>
    </div>

    <div id="SSO_mes" appDraggable [dragEnable]="dragEnable" (dragEvent)="handleElementDrag($event)"
      class="box box-SSO_mes" (click)="jumpToSystem('SSO_mes')">
      <span>智能生产控制</span>
    </div>

    <div id="SCS" appDraggable [dragEnable]="dragEnable" (dragEvent)="handleElementDrag($event)" class="box box-SCS"
      (click)="jumpToSystem('SCS')">
      <span>智能合并报表</span>
    </div>

    <div id="AASK" appDraggable [dragEnable]="dragEnable" (dragEvent)="handleElementDrag($event)" class="box box-AASK"
      (click)="jumpToSystem('AASK')">
      <span>智驱中台</span>
    </div>
  </div>

 </div>
--- 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;
 }
--- 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 = '';
      }
    });

  }

 }
--- 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,
  }
 };
--- a/digital-future-summit/src/app/implementation/shared/draggable/draggable.directive.ts
+++ 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<any>();

  @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');
  }
 }
--- 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 { }