[新增]树形图插件

package-lock.json

@@ -5122,6 +5122,11 @@
         "tslib": "^1.9.0"
       }
     },
+    "angular2-tree-diagramm": {
+      "version": "1.0.7",
+      "resolved": "https://registry.nlark.com/angular2-tree-diagramm/download/angular2-tree-diagramm-1.0.7.tgz",
+      "integrity": "sha1-33XQ4LWccIbOguZ4v4GgXp+ZcoE="
+    },
     "animation-frame-polyfill": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/animation-frame-polyfill/download/animation-frame-polyfill-1.0.1.tgz",

package.json

@@ -26,6 +26,7 @@
     "@types/cesium": "^1.59.5",
     "@types/swiper": "^5.3.0",
     "angular-calendar": "^0.28.2",
+    "angular2-tree-diagramm": "^1.0.7",
     "bson-objectid": "^1.3.1",
     "cesium": "^1.64.0",
     "crypto-js": "^4.0.0",

src/app/ui/ng-tree-diagram/README.md

@@ -0,0 +1,53 @@
+# Angular tree diagram
+
+### About
+This is Angular 2+ Hierarchical UI module.
+
+### Preview
+<img src="http://i.imgur.com/CfQXRGm.png" width="500">
+
+### Demo
+On [gh-pages](https://artbelikov.github.io/angular2-tree-diagram/)
+
+### Features
+- Drag and drop
+- Zoom and pan
+- Configurable node width/height
+- Add/remove nodes
+- TreeComponent-like UI
+- Pure CSS relation lines
+- No dependencies
+
+### Installation
+```
+npm i angular2-tree-diagram
+```
+
+### Usage
+- Import module in your project
+- Use tree-diagram directive
+- Pass array of nodes and config
+- See example.json for more details
+
+### Example
+```
+<tree-diagram [data]="data"></tree-diagram>
+...
+data = {
+  json: [
+    {
+      "guid": "bc4c7a02-5379-4046-92be-12c67af4295a",
+      "displayName": "Elentrix",
+      "children": [
+        "85d412c2-ebc1-4d56-96c9-7da433ac9bb2",
+        "28aac445-83b1-464d-9695-a4157dab6eac"
+      ]
+    },
+    ...
+  ],
+  config: {
+    nodeWidth: 200,
+    nodeHeight: 100
+  }
+}
+```

src/app/ui/ng-tree-diagram/karma.conf.js

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ng-tree-diagram'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

src/app/ui/ng-tree-diagram/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ng-tree-diagram",
+  "lib": {
+    "entryFile": "src/ng-tree-diagram.ts"
+  }
+}

src/app/ui/ng-tree-diagram/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "angular2-tree-diagram",
+  "version": "1.2.0",
+  "author": "Artyom Belikov",
+  "peerDependencies": {
+    "@angular/common": "^9.0.1",
+    "@angular/core": "^9.0.1",
+    "tslib": "^1.10.0"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/artbelikov/angular2-tree-diagram/issues"
+  },
+  "homepage": "https://github.com/artbelikov/angular2-tree-diagram#readme"
+}

src/app/ui/ng-tree-diagram/src/lib/classes/index.ts

@@ -0,0 +1,3 @@
+export * from './node.class';
+export * from './node-maker.class';
+export * from './nodes-list.class';

src/app/ui/ng-tree-diagram/src/lib/classes/node-maker.class.ts

@@ -0,0 +1,50 @@
+import { TreeDiagramNode } from './node.class';
+
+export class TreeDiagramNodeMaker extends TreeDiagramNode {
+  private isMakerState = true;
+
+  public get isMaker() {
+    return this.isMakerState;
+  }
+
+  public drop(event) {
+    event.preventDefault();
+
+    const guid = this.getThisNodeList().draggingNodeGuid;
+
+    this.getThisNodeList().rootNode(guid);
+    this.displayName = 'New node';
+
+    return false;
+  }
+
+  public dragenter(event) {
+    event.dataTransfer.dropEffect = 'move';
+
+    const guid = this.getThisNodeList().draggingNodeGuid;
+    const node = this.getThisNodeList().getNode(guid);
+
+    if (node.parentId) {
+      this.displayName = 'Root';
+    }
+  }
+
+  public dragover(event) {
+    event.preventDefault();
+
+    const guid = this.getThisNodeList().draggingNodeGuid;
+    const node = this.getThisNodeList().getNode(guid);
+
+    if (!this.isDragging && node.parentId) {
+      this.isDragover = true;
+      event.dataTransfer.dropEffect = 'move';
+    }
+
+    return false;
+  }
+
+  public dragleave(event) {
+    this.displayName = 'New node';
+    this.isDragover = false;
+  }
+}

src/app/ui/ng-tree-diagram/src/lib/classes/node.class.ts

@@ -0,0 +1,120 @@
+import { TreeDiagramNodesList } from './nodes-list.class';
+
+export class TreeDiagramNode {
+  public parentId: string | null;
+  public guid: string;
+  public width: number;
+  public height: number;
+  public isDragover: boolean;
+  public isDragging: boolean;
+  public children: Set<string>;
+  public displayName: string;
+  private toggleState: boolean;
+
+  public get isMaker() {
+    return false;
+  }
+
+  constructor(
+    props,
+    config,
+    public getThisNodeList: () => TreeDiagramNodesList
+  ) {
+    if (!props.guid) {
+      return;
+    }
+
+    for (const prop in props) {
+      if (props.hasOwnProperty(prop)) {
+        this[prop] = props[prop];
+      }
+    }
+
+    this.toggleState = false;
+
+    if (config.nodeWidth) {
+      this.width = config.nodeWidth;
+    }
+
+    if (config.nodeHeight) {
+      this.height = config.nodeHeight;
+    }
+
+    this.children = new Set(props.children as string[]);
+  }
+
+  public get isExpanded() {
+    return this.toggleState;
+  }
+
+  public destroy() {
+    this.getThisNodeList().destroy(this.guid);
+  }
+
+  public hasChildren() {
+    return !!this.children.size;
+  }
+
+  public toggle(state = !this.toggleState) {
+    this.toggleState = state;
+
+    if (state) {
+      this.getThisNodeList().toggleSiblings(this.guid);
+    }
+  }
+
+  public childrenCount() {
+    return this.children.size;
+  }
+
+  public isRoot() {
+    return this.parentId == null;
+  }
+
+  public dragenter(event) {
+    event.dataTransfer.dropEffect = 'move';
+  }
+
+  public dragleave(event) {
+    this.isDragover = false;
+  }
+
+  public dragstart(event) {
+    event.dataTransfer.effectAllowed = 'move';
+    this.isDragging = true;
+    this.toggle(false);
+    this.getThisNodeList().draggingNodeGuid = this.guid;
+  }
+
+  public dragover(event) {
+    event.preventDefault();
+
+    if (!this.isDragging) {
+      this.isDragover = true;
+    }
+
+    event.dataTransfer.dropEffect = 'move';
+    return false;
+  }
+
+  public dragend() {
+    this.isDragover = false;
+    this.isDragging = false;
+  }
+
+  public drop(event) {
+    event.preventDefault();
+
+    const guid = this.getThisNodeList().draggingNodeGuid;
+
+    this.getThisNodeList().transfer(guid, this.guid);
+    return false;
+  }
+
+  public addChild() {
+    const newNodeGuid = this.getThisNodeList().newNode(this.guid);
+
+    this.children.add(newNodeGuid);
+    this.toggle(true);
+  }
+}

src/app/ui/ng-tree-diagram/src/lib/classes/nodes-list.class.ts

@@ -0,0 +1,200 @@
+import { TreeDiagramNode } from './node.class';
+import { TreeDiagramNodeMaker } from './node-maker.class';
+
+export class TreeDiagramNodesList {
+  public roots: TreeDiagramNode[];
+  public makerGuid: string;
+  public draggingNodeGuid;
+  private nodesList: Map<string, TreeDiagramNode>;
+  private nodeTemplate = {
+    displayName: 'New node',
+    children: [],
+    guid: '',
+    parentId: null
+  };
+
+  constructor(nodes: any[], private config) {
+    this.nodesList = new Map();
+    nodes.forEach(treeNode => {
+      this.nodesList.set(
+        treeNode.guid,
+        new TreeDiagramNode(treeNode, config, this.getThisNodeList.bind(this))
+      );
+    });
+    this.makeRoots();
+    this.makerGuid = this.uuidv4();
+
+    const node = {
+      guid: this.makerGuid,
+      parentId: 'root',
+      children: [],
+      displayName: 'New node'
+    };
+    const maker = new TreeDiagramNodeMaker(
+      node,
+      this.config,
+      this.getThisNodeList.bind(this)
+    );
+
+    this.nodesList.set(this.makerGuid, maker);
+  }
+
+  public values() {
+    return this.nodesList.values();
+  }
+
+  public getNode(guid: string): TreeDiagramNode {
+    return this.nodesList.get(guid);
+  }
+
+  public rootNode(guid: string) {
+    const node = this.getNode(guid);
+    const maker = this.getNode(this.makerGuid);
+
+    node.isDragging = false;
+    node.isDragover = false;
+
+    if (node.parentId) {
+      const parent = this.getNode(node.parentId);
+      parent.children.delete(guid);
+    }
+
+    node.parentId = null;
+
+    this.makeRoots();
+    maker.isDragging = false;
+    maker.isDragover = false;
+  }
+
+  public transfer(originId: string, targetId: string) {
+    const origin = this.getNode(originId);
+    const target = this.getNode(targetId);
+
+    origin.isDragover = false;
+    origin.isDragging = false;
+    target.isDragover = false;
+
+    if (origin.parentId === targetId || originId === targetId) {
+      return;
+    }
+
+    const remakeRoots = origin.isRoot();
+
+    if (origin.parentId) {
+      const parent = this.getNode(origin.parentId);
+
+      parent.children.delete(originId);
+
+      if (!parent.hasChildren()) {
+        parent.toggle(false);
+      }
+    }
+
+    target.children.add(originId);
+    origin.parentId = targetId;
+
+    if (remakeRoots) {
+      this.makeRoots();
+    }
+
+    this.serialize();
+  }
+
+  public getThisNodeList() {
+    return this;
+  }
+
+  public toggleSiblings(guid: string) {
+    const target = this.getNode(guid);
+
+    if (target.parentId) {
+      const parent = this.getNode(target.parentId);
+
+      parent.children.forEach(nodeGuid => {
+        if (nodeGuid === guid) {
+          return;
+        }
+
+        this.getNode(nodeGuid).toggle(false);
+      });
+    } else {
+      for (const root of this.roots) {
+        if (root.guid === guid) {
+          continue;
+        }
+
+        root.toggle(false);
+      }
+    }
+  }
+
+  public serialize() {
+    const out = [];
+
+    this.nodesList.forEach((node: TreeDiagramNode) => {
+      const json: any = {
+        guid: node.guid,
+        displayName: node.displayName,
+        parentId: node.parentId,
+        children: Array.from(node.children),
+      };
+
+      out.push(json);
+    });
+
+    return out;
+  }
+
+  public destroy(guid: string) {
+    const target = this.getNode(guid);
+
+    if (target.parentId) {
+      const parent = this.getNode(target.parentId);
+      parent.children.delete(guid);
+    }
+
+    if (target.hasChildren()) {
+      target.children.forEach((child: string) => {
+        this.nodesList.delete(child);
+      });
+    }
+
+    this.nodesList.delete(guid);
+  }
+
+  public newNode(parentId = null) {
+    const nodeTemplate = Object.assign({}, this.nodeTemplate);
+
+    nodeTemplate.guid = this.uuidv4();
+    nodeTemplate.parentId = parentId;
+    this.nodesList.set(
+      nodeTemplate.guid,
+      new TreeDiagramNode(
+        nodeTemplate,
+        this.config,
+        this.getThisNodeList.bind(this)
+      )
+    );
+    this.makeRoots();
+
+    return nodeTemplate.guid;
+  }
+
+  private uuidv4() {
+    // tslint:disable-next-line:only-arrow-functions
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      // tslint:disable-next-line:one-variable-per-declaration no-bitwise
+      const r = (Math.random() * 16) | 0,
+        // tslint:disable-next-line:triple-equals no-bitwise
+        v = c == 'x' ? r : (r & 0x3) | 0x8;
+
+      return v.toString(16);
+    });
+  }
+
+  private makeRoots() {
+    this.roots = Array.from(this.values()).filter((node: TreeDiagramNode) =>
+      node.isRoot()
+    );
+  }
+}

src/app/ui/ng-tree-diagram/src/lib/index.ts

@@ -0,0 +1 @@
+export { TreeDiagramModule } from './tree.module';

src/app/ui/ng-tree-diagram/src/lib/node/index.ts

@@ -0,0 +1 @@
+export { NodeComponent } from './node.component';

src/app/ui/ng-tree-diagram/src/lib/node/node.component.html

@@ -0,0 +1,65 @@
+<div class="line-to"></div>
+<div
+  id="tree-node-{{ node.guid }}"
+  [ngClass]="{
+    'tree-element-container': !0,
+    'tree-element-has-children': node.hasChildren()
+  }"
+  [style.width.px]="node.width"
+  [style.height.px]="node.height"
+>
+  <div
+    [ngClass]="{
+      'tree-element-main': !0,
+      dragover: node.isDragover,
+      expanded: node.isExpanded,
+      dragging: node.isDragging,
+      'tree-new-node': node.isMaker
+    }"
+    [attr.draggable]="node.isMaker ? null : 'true'"
+    [style.width.px]="node.width"
+    [style.height.px]="node.height"
+    (drop)="node.drop($event)"
+    (dragenter)="node.dragenter($event)"
+    (dragstart)="node.dragstart($event)"
+    (dragover)="node.dragover($event)"
+    (dragend)="node.dragend()"
+    (dragleave)="node.dragleave($event)"
+  >
+    <div
+      class="rect"
+      [style.width.px]="node.width"
+      [style.height.px]="node.height"
+    >
+      <div class="buttons">
+        <div class="delete" (click)="node.destroy()"></div>
+        <div class="toggler" (click)="node.toggle()"></div>
+        <div class="add" (click)="node.addChild()"></div>
+      </div>
+      <div class="tree-text tree-text-non-editable">
+        <span>{{ node.displayName }}</span>
+      </div>
+      <div class="tree-text tree-text-editable">
+        <span
+          contenteditable
+          [innerHtml]="node.displayName"
+          (blur)="onNodeBlur($event, node.guid)"
+        ></span>
+        <span class="children-count"> ({{ node.childrenCount() }})</span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="tree-children"
+    [style.transform]="childrenTransform"
+    *ngIf="node.isExpanded"
+  >
+    <div class="tree-elements-group">
+      <tree-diagram-node
+        *ngFor="let child of node.children"
+        [nodeId]="child"
+        class="tree-node tree-child"
+      ></tree-diagram-node>
+    </div>
+  </div>
+</div>

src/app/ui/ng-tree-diagram/src/lib/node/node.component.scss

@@ -0,0 +1,253 @@
+@mixin tree-button {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  border-radius: 2px;
+}
+
+.toggler {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -10px;
+  background: #2c4c63;
+  margin: 0 auto;
+  display: none;
+  z-index: 10;
+  @include tree-button;
+}
+
+.children-count {
+  display: none;
+}
+
+.tree-element-has-children {
+  > .tree-element-main {
+    .toggler {
+      display: block;
+    }
+    .rect {
+    }
+    .children-count {
+      display: inline;
+    }
+  }
+  > .tree-children {
+    display: inline-block;
+  }
+}
+
+.rect {
+  position: relative;
+  background-color: #fafafa !important;
+  border: 1px solid #dadada;
+  box-sizing: border-box;
+  -webkit-print-color-adjust: exact;
+  cursor: default !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 15px;
+  border-radius: 2px;
+}
+
+.tree-element-main {
+  text-align: center;
+  margin: 0 auto;
+  &:hover {
+    .buttons {
+      display: block;
+    }
+  }
+  &.expanded {
+    .rect {
+      background-color: #bce5ff !important;
+    }
+    .toggler {
+      transform: rotateZ(-45deg);
+      background: #427396;
+    }
+  }
+  &.dragover {
+    .rect {
+      box-shadow: 0 0 5px #427396;
+    }
+  }
+  &.dragging {
+    .buttons {
+      display: none !important;
+    }
+    .tree-node:before {
+      display: none !important;
+    }
+  }
+}
+
+.tree-element-container {
+  z-index: 100;
+}
+
+.tree-children {
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  white-space: nowrap;
+  perspective: 3000px;
+  perspective-origin: center bottom;
+  &:before {
+    content: "";
+    width: calc(50% - 1px);
+    position: absolute;
+    height: 30px;
+    left: 0;
+    top: -45px;
+    border-right: 1px solid #dadada;
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
+
+.line-to {
+  position: absolute;
+  top: -30px;
+  border-top: 1px solid #dadada;
+  width: calc(100% + 30px);
+  display: none;
+}
+
+.tree-node {
+  position: relative;
+  display: inline-block;
+  margin: 15px;
+  vertical-align: top;
+  &:before {
+    content: "";
+    width: calc(50% - 1px);
+    position: absolute;
+    height: 30px;
+    left: 0;
+    top: -30px;
+    border-right: 1px solid #dadada;
+  }
+  &:only-of-type {
+    > .line-to {
+      display: none !important;
+    }
+  }
+}
+
+.buttons {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: none;
+  .delete {
+    @include tree-button;
+    background-color: #a34851;
+    position: absolute;
+    right: -10px;
+    top: -10px;
+  }
+  .add {
+    @include tree-button;
+    background-color: #256947;
+    position: absolute;
+    right: -10px;
+    bottom: -10px;
+    &:before {
+      content: "";
+      position: absolute;
+      height: 12px;
+      width: 4px;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+      background-color: #2ba423;
+    }
+    &:after {
+      content: "";
+      position: absolute;
+      width: 12px;
+      height: 4px;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+      background-color: #2ba423;
+    }
+  }
+}
+
+.tree-text {
+  z-index: 10;
+  white-space: pre-line;
+  span {
+    cursor: pointer;
+  }
+}
+
+.tree-elements-group {
+  position: relative;
+
+  & > .tree-node.tree-child {
+    & > .line-to {
+      left: 0;
+      display: block;
+    }
+    &:first-of-type {
+      & > .line-to {
+        right: -30px;
+        width: calc(50% + 30px);
+        display: block;
+        left: auto;
+      }
+    }
+    &:last-of-type {
+      & > .line-to {
+        left: 0;
+        right: auto;
+        width: 50%;
+        display: block;
+      }
+    }
+    > .tree-child:last-child {
+      margin-right: 0;
+    }
+    > .tree-child:first-child {
+      margin-left: 0;
+    }
+  }
+}
+
+.tree-text-non-editable {
+  display: none;
+}
+
+.tree-new-node {
+  .rect {
+    opacity: 0.5;
+    border: 1px dashed #dadada;
+    cursor: pointer !important;
+  }
+  &:hover,
+  &.dragover {
+    .rect {
+      opacity: 1;
+    }
+  }
+  .tree-children,
+  .buttons {
+    display: none !important;
+  }
+  .tree-text-non-editable {
+    display: block;
+  }
+  .tree-text-editable {
+    display: none;
+  }
+}

src/app/ui/ng-tree-diagram/src/lib/node/node.component.ts

@@ -0,0 +1,49 @@
+import { Component, Input } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+import { NodesListService } from '../services/nodes-list.service';
+import { TreeDiagramNode } from '../classes/node.class';
+import { TreeDiagramNodeMaker } from '../classes/node-maker.class';
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'tree-diagram-node',
+  styleUrls: ['./node.component.scss'],
+  templateUrl: './node.component.html'
+})
+export class NodeComponent {
+  public node: TreeDiagramNode | TreeDiagramNodeMaker;
+  public childrenTransform;
+  private readonly isRtl: boolean;
+
+  constructor(
+    private nodesSrv: NodesListService,
+    private sanitizer: DomSanitizer
+  ) {
+    this.isRtl = document.getElementsByTagName('html')[0].getAttribute('dir') === 'rtl';
+  }
+
+  @Input() set nodeId(guid) {
+    this.node = this.nodesSrv.getNode(guid);
+
+    let calculation = `translate(calc(-50% + ${Math.round(
+      this.node.width / 2
+    )}px), 45px)`;
+
+    if (this.isRtl) {
+      calculation = `translate(calc(50% - ${Math.round(
+        this.node.width / 2
+      )}px), 45px)`;
+    }
+
+    this.childrenTransform = this.sanitizer.bypassSecurityTrustStyle(
+      calculation
+    );
+  }
+
+  onNodeBlur(event, nodeId) {
+    const node = this.nodesSrv.getNode(nodeId);
+
+    node.displayName = event.target.innerText;
+  }
+}

src/app/ui/ng-tree-diagram/src/lib/rtl.css

@@ -0,0 +1,13 @@
+html[dir=rtl] .tree-elements-group > div > .line-to {
+    right: 0!important;
+}
+
+html[dir=rtl] .tree-elements-group > div:first-of-type > .line-to {
+    left: -30px!important;
+    right: auto!important;
+}
+
+html[dir=rtl] .tree-elements-group > div:last-of-type > .line-to {
+    right: 0!important;
+    left: auto;
+}

src/app/ui/ng-tree-diagram/src/lib/services/nodes-list.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { TreeDiagramNodesList } from '../classes';
+
+@Injectable()
+export class NodesListService {
+  private nodesList: TreeDiagramNodesList;
+
+  public loadNodes(nodes: any[], config) {
+    this.nodesList = new TreeDiagramNodesList(nodes, config);
+
+    return this.nodesList;
+  }
+
+  public getNode(guid) {
+    return this.nodesList.getNode(guid);
+  }
+
+  public newNode() {
+    this.nodesList.newNode();
+  }
+
+  public makerNode() {
+    return this.nodesList.makerGuid;
+  }
+
+  public toJsonString() {
+    return JSON.stringify(this.nodesList.serialize());
+  }
+}

src/app/ui/ng-tree-diagram/src/lib/tree.component.html

@@ -0,0 +1,27 @@
+<div
+  class="tree-pane"
+  (mousedown)="onmousedown()"
+  (mouseup)="onmouseup()"
+  (mousemove)="onmousemove($event)"
+  (mousewheel)="onmousewheel($event)"
+>
+  <div class="tree-paning-container" [style.transform]="paneTransform">
+    <div *ngIf="nodes" class="tree-roots-elements">
+
+      <tree-diagram-node
+        [nodeId]="node.guid"
+        class="tree-root tree-node"
+        (mousedown)="preventMouse($event)"
+        *ngFor="let node of nodes.roots"
+      ></tree-diagram-node>
+
+      <tree-diagram-node
+        [nodeId]="nodeMaker"
+        (click)="newNode()"
+        (mousedown)="preventMouse($event)"
+        class="tree-root tree-new-node tree-node"
+      ></tree-diagram-node>
+
+    </div>
+  </div>
+</div>

src/app/ui/ng-tree-diagram/src/lib/tree.component.scss

@@ -0,0 +1,41 @@
+:host {
+  -webkit-print-color-adjust: exact;
+  position: relative;
+  display: block;
+  -webkit-touch-callout: none;
+  user-select: none;
+  overflow: hidden;
+  height: 100vh;
+  text-align: center;
+}
+
+.tree-roots-elements {
+  position: relative;
+  text-align: center;
+  display: inline-block;
+  white-space: nowrap;
+  cursor: default !important;
+  font-size: 0;
+  transform-origin: center;
+}
+
+.tree-node {
+  position: relative;
+  display: inline-block;
+  margin: 15px;
+  vertical-align: top;
+  &:only-of-type {
+    > .line-to {
+      display: none;
+    }
+  }
+}
+
+.tree-pane,
+.tree-paning-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}

src/app/ui/ng-tree-diagram/src/lib/tree.component.ts

@@ -0,0 +1,95 @@
+import { Component, Input } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+import { NodesListService } from './services/nodes-list.service';
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'tree-diagram',
+  styleUrls: ['./tree.component.scss'],
+  templateUrl: './tree.component.html'
+})
+export class TreeComponent {
+  public nodes;
+  private config = {
+    nodeWidth: 200,
+    nodeHeight: 100
+  };
+  private paneDragging = false;
+  private paneTransformState;
+  private zoom = 1;
+  private paneX = 0;
+  private paneY = 0;
+
+  public get paneTransform() {
+    return this.paneTransformState;
+  }
+
+  public set paneTransform(value) {
+    this.paneTransformState = value;
+  }
+
+  constructor(
+    private nodesSrv: NodesListService,
+    private sanitizer: DomSanitizer
+  ) {}
+
+  @Input() set data(data: { config: any; json: any[] }) {
+    if (!data || !Array.isArray(data.json)) {
+      return;
+    }
+
+    if (typeof data.config === 'object') {
+      this.config = Object.assign(this.config, data.config);
+    }
+
+    this.nodes = this.nodesSrv.loadNodes(data.json, this.config);
+  }
+
+  public get nodeMaker() {
+    return this.nodesSrv.makerNode();
+  }
+
+  public newNode() {
+    this.nodesSrv.newNode();
+  }
+
+  public onmousedown() {
+    this.paneDragging = true;
+  }
+
+  public onmousemove(event) {
+    if (this.paneDragging) {
+      const { movementX, movementY } = event;
+
+      this.paneX += movementX;
+      this.paneY += movementY;
+      this.makeTransform();
+    }
+  }
+
+  public onmouseup() {
+    this.paneDragging = false;
+  }
+
+  public makeTransform() {
+    this.paneTransform = this.sanitizer.bypassSecurityTrustStyle(
+      `translate(${this.paneX}px, ${this.paneY}px) scale(${this.zoom})`
+    );
+  }
+
+  public preventMouse(event) {
+    event.stopPropagation();
+  }
+
+  public onmousewheel(event) {
+    let delta;
+
+    event.preventDefault();
+    delta = event.detail || event.wheelDelta;
+    this.zoom += delta / 1000 / 2;
+    this.zoom = Math.min(Math.max(this.zoom, 0.2), 3);
+
+    this.makeTransform();
+  }
+}

src/app/ui/ng-tree-diagram/src/lib/tree.module.ts

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { TreeComponent } from './tree.component';
+import { NodeComponent } from './node';
+import { NodesListService } from './services/nodes-list.service';
+
+@NgModule({
+    declarations: [
+        TreeComponent,
+        NodeComponent
+    ],
+    imports: [
+        CommonModule
+    ],
+    exports: [
+        TreeComponent,
+        NodeComponent
+    ],
+    providers: [
+        NodesListService
+    ]
+})
+export class TreeDiagramModule {
+
+}

src/app/ui/ng-tree-diagram/src/ng-tree-diagram.ts

@@ -0,0 +1,8 @@
+/*
+ * Public API Surface of ng-tree-diagram
+ */
+
+export * from './lib/tree.module';
+export * from './lib/services/nodes-list.service';
+export * from './lib/node';
+export * from './lib/classes';

src/app/ui/ng-tree-diagram/src/test.ts

@@ -0,0 +1,26 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

src/app/ui/ng-tree-diagram/tsconfig.lib.json

@@ -0,0 +1,23 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

src/app/ui/ng-tree-diagram/tsconfig.lib.prod.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "angularCompilerOptions": {
+    "enableIvy": false
+  }
+}

src/app/ui/ng-tree-diagram/tsconfig.spec.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

src/app/ui/ng-tree-diagram/tslint.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "lib",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "lib",
+      "kebab-case"
+    ]
+  }
+}

src/app/ui/plan-template/plan-template.component.html

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2021-05-19 15:50:20
  * @LastEditors: sueRimn
- * @LastEditTime: 2021-06-08 15:52:04
+ * @LastEditTime: 2021-06-09 15:08:00
 -->
 <div class="box">
     <div class="boxleft">
@@ -215,8 +215,8 @@
                               </div>
                             </div>
                           </div>
-                          <div>
+                          <div style="height: 500px;width: 100%;" *ngIf="element.level==4">
-                            
+                            <tree-diagram [data]="element.tableth" [(ngModel)]="element.tableth"></tree-diagram>
                           </div>
                         </div>
                       </div>

src/app/ui/plan-template/plan-template.component.ts

@@ -4,61 +4,35 @@
  * @Author: sueRimn
  * @Date: 2021-05-31 10:40:01
  * @LastEditors: sueRimn
- * @LastEditTime: 2021-06-08 15:33:13
+ * @LastEditTime: 2021-06-09 15:04:53
  */
 
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject, OnInit,ViewEncapsulation } from '@angular/core';
 import { HttpClient } from '@angular/common/http'
 import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 import {FlatTreeControl, NestedTreeControl} from '@angular/cdk/tree';
 import {MatTreeFlatDataSource, MatTreeFlattener, MatTreeNestedDataSource} from '@angular/material/tree';
-interface FoodNode {
+
-  name: string;
-  children?: FoodNode[];
-  }
-  const TREE_DATA: FoodNode[] = [
-  {
-  name: 'Fruit',
-  children: [
-  {name: 'Apple'},
-  {name: 'Banana'},
-  {name: 'Fruit loops'},
-  ]
-  }, {
-  name: 'Vegetables',
-  children: [
-  {
-  name: 'Green',
-  children: [
-  {name: 'Broccoli'},
-  {name: 'Brussels sprouts'},
-  ]
-  }, {
-  name: 'Orange',
-  children: [
-  {name: 'Pumpkins'},
-  {name: 'Carrots'},
-  ]
-  },
-  ]
-  },
-  ];
 @Component({
   selector: 'app-plan-template',
+  //encapsulation: ViewEncapsulation.None,
   templateUrl: './plan-template.component.html',
   styleUrls: ['./plan-template.component.scss']
 })
 export class PlanTemplateComponent implements OnInit {
 
-  treeControl = new NestedTreeControl<FoodNode>(node => node.children);
+  
-  dataSource = new MatTreeNestedDataSource<FoodNode>();
   constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) {
-    this.dataSource.data = TREE_DATA;
+    
    }
 
   ngOnInit(): void {
     this.getLeftdata()
+    this.tree = {
+      json:this.treedate,
+      config: this.treeConfig
+  };
   }
   groupPanle=true//分组展开
   attPanle=true
@@ -67,6 +41,23 @@ export class PlanTemplateComponent implements OnInit {
   /* {planCategory:3,basicCategoryId:"5e7c49e861550e2754d461ce",buildingTypeId: "5e7c8ffba3050b1a840ed4b6",unitname:'高层建筑',data:[]},
   {planCategory:5,basicCategoryId:"60127efe2757e904e5721d83",buildingTypeId: "5e7c9018a3050b1a840ed4b7",unitname:'地下建筑',data:[]} */
 ]
+  //树形结构数据
+  treedate=[
+    {
+      "guid": "bc4c7a02-5379-4046-92be-12c67af4295a",
+      "displayName": "Elentrix",
+      "children": [
+        /* "85d412c2-ebc1-4d56-96c9-7da433ac9bb2",
+        "28aac445-83b1-464d-9695-a4157dab6eac" */
+      ]
+    }
+    
+  ]
+  tree
+  treeConfig = {
+    nodeWidth: 90,
+    nodeHeight: 60
+};
   group=[]
   getLeftdata(){
     this.http.get("/api/PlanTemplate").subscribe((data:any)=>{
@@ -463,6 +454,7 @@ export class PlanTemplateComponent implements OnInit {
   }
   //保存
   save(){
+    console.log(this.newleftTabledata,this.tree)
     const config = new MatSnackBarConfig();
     config.verticalPosition = 'top';
     config.duration = 3000
@@ -487,8 +479,7 @@ export class PlanTemplateComponent implements OnInit {
     }
     
   }
-  //树形结构
+  
-  hasChild = (_: number, node: FoodNode) => !!node.children && node.children.length > 0;
   
   //单位基本信息和建筑信息表格
   displayedColumns: string[] = ['name','level','default','must', 'danwei','operation'];
@@ -830,10 +821,17 @@ export class disaster{
     }else if(this.headName==undefined||this.headName==''){
       this.snackBar.open('请输入表头名称!','确定',config);
     }else{
+      let tree={
+        json:[],
+        config: {
+          nodeWidth: 90,
+          nodeHeight: 60
+        }
+      }
       let attrubute={
         headName:this.headName,
         level:this.level,
-        tableth:this.level==1||this.level==2?[]:this.level==3?'':'',
+        tableth:this.level==1||this.level==2?[]:this.level==3?'':tree,
         lieNumber:this.lieNumber,
         hNumber:this.hNumber
       }

src/app/ui/ui.module.ts

@@ -91,6 +91,8 @@ import { addGroup } from './plan-template/plan-template.component'
 import { adddwsurvey } from './plan-template/plan-template.component'
 import { addattinf } from './plan-template/plan-template.component'
 import { disaster } from './plan-template/plan-template.component'
+import { BrowserModule } from '@angular/platform-browser';
+import { TreeDiagramModule } from './ng-tree-diagram/src/ng-tree-diagram';
 
 @NgModule({
   declarations: [UiComponent, UserdataComponent, ChangepasswordComponent, OrganizationComponent, UnittypeComponent, AuthorityComponent, RoleComponent, UsermanagementComponent,
@@ -153,7 +155,9 @@ import { disaster } from './plan-template/plan-template.component'
     ReactiveFormsModule,
     FormsModule,
     PaginatorModule,
-    FileUploadModule
+    FileUploadModule,
+    //BrowserModule,
+    TreeDiagramModule
   ],