bbj-screen-widget 2.4.61 → 2.4.62

package/src/lib/tree-control/tree-control.component.html

@@ -0,0 +1,97 @@
+<div *ngIf="showSearch" class="searchBox">
+  <input
+    class="search-input"
+    type="text"
+    nz-input
+    [(ngModel)]="searchValue"
+    [placeholder]="searchPlaceholder"
+    [style]="{ 'border-color': searchBorderColor, background: searchBackgroundColor }"
+  />
+  <i nz-icon nzType="search"></i>
+</div>
+
+<div class="warp-tree">
+  <nz-tree
+    #tree
+    [ngClass]="{ 'ant-tree-nodeBgCustom': nodeBackground }"
+    [ngStyle]="style"
+    [nzData]="nodes"
+    [nzCheckable]="checkable"
+    [nzMultiple]="checkable"
+    [nzExpandAll]="expandAll"
+    [nzShowLine]="showLine"
+    [nzExpandedKeys]="expandedKeys"
+    [nzCheckStrictly]="checkStrictly"
+    [nzExpandedIcon]="nodeDefaultIcon ? multiExpandedIconTpl : null"
+    [nzTreeTemplate]="nzTreeTemplate"
+    [nzSearchValue]="searchValue"
+    [nzHideUnMatched]="true"
+    [nzSelectedKeys]="selectedKeys"
+    [nzCheckedKeys]="selectedKeys"
+    (nzClick)="onClick($event)"
+    (nzDblClick)="onNodeDblclick($event)"
+    (nzCheckBoxChange)="onCheckBoxChange($event)"
+  >
+  </nz-tree>
+  <ng-template #multiExpandedIconTpl let-node let-origin="origin">
+    <img [src]="nodeDefaultIcon" [class]="node.isExpanded ? 'nodeImg-open' : ''" />
+  </ng-template>
+
+  <ng-template #nzTreeTemplate let-node let-origin="origin">
+    <div
+      class="custom-node"
+      [style.color]="node.isSelected ? nodeCheckedColor : ''"
+      [style.backgroundImage]="
+        node.isSelected ? 'url(' + nodeCheckedBackground + ')' : nodeBackground ? 'url(' + nodeBackground + ')' : ''
+      "
+      [style.padding]="
+        (grid?.top || 0) + 'px ' + (grid?.right || 0) + 'px ' + (grid?.bottom || 0) + 'px ' + (grid?.left || 0) + 'px'
+      "
+    >
+      <img
+        *ngIf="origin.icon && iconPosition !== 'right'"
+        [src]="origin.icon"
+        [style.width.px]="iconWidth"
+        [style.height.px]="iconHeight"
+      />
+      <span
+        *ngIf="edittingNode !== node"
+        class="folder-name"
+        [innerHTML]="node.title | nzHighlight: searchValue:'i':'font-highlight'"
+        (click)="showNode(node)"
+      ></span>
+      <input *ngIf="edittingNode === node" #renameInput nz-input [(ngModel)]="node.title" (blur)="renameEnd(node)" />
+
+      <span class="node-count" [class.noCount]="origin.count === '0'" *ngIf="origin.count || origin.count === '0'"
+        >({{ origin.count }})</span
+      >
+      <img
+        *ngIf="origin.icon && iconPosition === 'right'"
+        [src]="origin.icon"
+        [style.width.px]="iconWidth"
+        [style.height.px]="iconHeight"
+      />
+
+      <!-- 
+
+      <img
+        *ngIf="origin.icon && iconPosition !== 'right'"
+        [src]="origin.icon"
+        [style.width.px]="iconWidth"
+        [style.height.px]="iconHeight"
+      />
+      <span
+        *ngIf="edittingNode !== node"
+        class="folder-name"
+        [innerHTML]="node.title | nzHighlight: searchValue:'i':'font-highlight'"
+      ></span>
+      <input *ngIf="edittingNode === node" #renameInput nz-input [(ngModel)]="node.title" (blur)="renameEnd(node)" />
+      <img
+        *ngIf="origin.icon && iconPosition === 'right'"
+        [src]="origin.icon"
+        [style.width.px]="iconWidth"
+        [style.height.px]="iconHeight"
+      /> -->
+    </div>
+  </ng-template>
+</div>

package/src/lib/tree-control/tree-control.component.less

@@ -0,0 +1,111 @@
+:host {
+  display: block;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.ant-tree {
+  background: initial;
+
+  ::ng-deep {
+
+    .ant-tree-switcher,
+    .ant-tree-checkbox-inner {
+      background: initial;
+    }
+
+    .ant-tree-switcher-icon {
+      font-size: inherit;
+    }
+
+    .ant-tree-checkbox {
+      color: inherit;
+    }
+
+    .ant-tree-checkbox-checked .ant-tree-checkbox-inner::after {
+      border-color: #1890ff;
+    }
+
+    .ant-tree-switcher-noop>i {
+      display: none;
+    }
+
+    .ant-tree-node-content-wrapper.ant-tree-node-selected {
+      background-color: var(--selected-background);
+    }
+
+    .ant-tree-node-content-wrapper:hover {
+      background-color: var(--selected-background);
+    }
+  }
+}
+
+::ng-deep {
+  .ant-tree.ant-tree-nodeBgCustom {
+    .ant-tree-node-content-wrapper {
+      flex: 1;
+    }
+
+    nz-tree-node-switcher {
+      width: 16px;
+    }
+  }
+}
+
+.custom-node {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  background-repeat: no-repeat;
+  background-size: 180px 8px;
+  background-position: 0 bottom;
+}
+
+.searchBox {
+  position: relative;
+  margin-bottom: 20px;
+
+  .search-input {
+    line-height: 32px;
+    height: 32px;
+    color: #7A8799;
+    outline: none;
+    box-shadow: none;
+  }
+
+  i.anticon {
+    width: 16px;
+    height: 16px;
+    color: #8F9AB3;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+}
+
+.warp-tree {
+  flex: 1;
+  overflow: auto;
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--treeScrollbar-thumb-background, '#ddd') !important;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+}
+
+.folder-name {
+  flex: 1;
+}
+
+.node-count {
+  color: rgba(255, 255, 255, 0.8);
+
+  &.noCount {
+    color: #7A8799;
+  }
+}

package/src/lib/tree-control/tree-control.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { TreeControlComponent } from './tree-control.component';
+
+describe('TreeControlComponent', () => {
+  let component: TreeControlComponent;
+  let fixture: ComponentFixture<TreeControlComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TreeControlComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TreeControlComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/tree-control/tree-control.component.ts

@@ -0,0 +1,363 @@
+import { Component, OnInit, SimpleChanges, OnChanges, EventEmitter, ElementRef, ViewChild } from '@angular/core';
+import { Data, Property, Widget, DataOutput, Event, EventParam, Method, Param, DataInput } from 'bbj-widget-base';
+import { NzFormatEmitEvent, NzTreeComponent, NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
+import { ArrayService } from '@delon/util';
+import { getFontStyle } from '../shared/util/style.util';
+
+@Component({
+  selector: 'sc-tree-control',
+  templateUrl: './tree-control.component.html',
+  styleUrls: ['./tree-control.component.less'],
+})
+@Widget('树控件', {
+  group: 'component',
+  image: 'assets/img/screen/Tree.png',
+  icon: 'bianzu40',
+})
+export class TreeControlComponent implements OnInit, OnChanges {
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = {
+    family: '',
+    color: '#595F7A',
+    weight: 'normal',
+    size: 16,
+    space: 0,
+    lineHeight: 0,
+  };
+  @Property('边距', { ui: { widget: 'myGrid' } })
+  grid: any = {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  };
+  @Property('复选框', { type: 'boolean' })
+  checkable = false;
+  @Property('输出格式', {
+    type: 'string',
+    enum: [
+      { label: '数组', value: 'array' },
+      { label: '字符串', value: 'string' },
+    ],
+    ui: {
+      widget: 'select',
+      visibleIf: { checkable: [true] },
+    },
+  })
+  outputType = 'array';
+  @Property('选择完全受控', {
+    type: 'boolean',
+    ui: { optionalHelp: '父子节点选中状态不再关联', visibleIf: { checkable: [true] } },
+  })
+  checkStrictly = false;
+  @Property('连接线', { type: 'boolean' })
+  showLine = false;
+  @Property('展开所有', { type: 'boolean' })
+  expandAll = false;
+  @Property('展开层级', {
+    type: 'integer',
+    minimum: 0,
+    ui: { precision: 0, visibleIf: { expandAll: [false] } },
+  })
+  expandLevel = 0;
+
+  @Property('图标宽度', { type: 'integer' })
+  iconWidth = 20;
+  @Property('图标高度', { type: 'integer' })
+  iconHeight = 20;
+  @Property('图标位置', {
+    enum: [
+      { label: '左', value: 'left' },
+      { label: '右', value: 'right' },
+    ],
+  })
+  iconPosition = 'left';
+
+  @Property('节点图标', {
+    type: 'string',
+    ui: {
+      widget: 'myUpload',
+    },
+  })
+  nodeDefaultIcon = null;
+  @Property('节点背景', {
+    type: 'string',
+    ui: {
+      widget: 'myUpload',
+    },
+  })
+  nodeBackground = null;
+
+  @Property('节点选中背景色', { ui: { widget: 'myColor' } })
+  selectedBackground = '#bae7ff';
+
+  @Property('节点选中字体色', { ui: { widget: 'myColor' } })
+  nodeCheckedColor = '#333';
+
+  @Property('节点选中背景', {
+    type: 'string',
+    ui: {
+      widget: 'myUpload',
+    },
+  })
+  nodeCheckedBackground = null;
+
+  @Property('双击重命名')
+  renamable: boolean;
+  @Property('显示搜索框')
+  showSearch: boolean;
+  searchValue: string;
+
+  @Property('搜索框颜色', {
+    ui: {
+      widget: 'myColor',
+      visibleIf: { showSearch: [true] },
+    },
+  })
+  searchBorderColor = '#8F9AB3';
+
+  @Property('搜索框背景色', {
+    ui: {
+      widget: 'myColor',
+      visibleIf: { showSearch: [true] },
+    },
+  })
+  searchBackgroundColor = 'rgba(0,0,0,0)';
+
+  @Property('搜索框提示语', {
+    type: 'string',
+    ui: {
+      visibleIf: { showSearch: [true] },
+    },
+  })
+  searchPlaceholder = '请输入搜索内容';
+
+  @Property('滚动条颜色', {
+    ui: {
+      widget: 'myColor',
+    },
+  })
+  treeScrollbarThumbBackground = '#ddd';
+
+  @Data({
+    properties: {
+      title: { type: 'string', title: '标题' },
+      key: { type: 'string', title: 'id' },
+      parentKey: { type: 'string', title: '父级id' },
+      icon: { type: 'string', title: '图标' },
+      count: { type: 'string', title: '数量' },
+    },
+  })
+  data = [
+    { title: '江苏省', key: '300', parentKey: '' },
+    { title: '浙江省', key: '100', parentKey: '' },
+    { title: '杭州市', key: '1001', parentKey: '100' },
+    { title: '顶顶区', key: '10010', parentKey: '1001' },
+    { title: '的方区', key: '10011', parentKey: '1001' },
+    { title: '温州市', key: '1002', parentKey: '100' },
+    { title: '鹿城区', key: '10020', parentKey: '1002' },
+    { title: '龙湾区', key: '10021', parentKey: '1002' },
+  ];
+
+  @DataInput('选中值')
+  value: any;
+
+  @DataOutput('选中id')
+  @Event('选中值改变', { params: 'id' })
+  keyChange = new EventEmitter<any>();
+
+  nodes: NzTreeNodeOptions[] = [];
+
+  expandedKeys: string[];
+
+  edittingNode: NzTreeNode; // 正在重命名的节点
+
+  @ViewChild('tree')
+  tree: NzTreeComponent;
+
+  @ViewChild('renameInput')
+  renameInput: ElementRef;
+
+  selectedKeys: string[] = [];
+  // checkedKeys: string[] = [];
+  style = {};
+  waittingSelect: string | string[];
+
+  paddNum: any;
+  constructor(private arrayService: ArrayService, private elementRef: ElementRef) {}
+
+  ngOnInit(): void {
+    document.body.style.setProperty('--treeScrollbar-thumb-background', this.treeScrollbarThumbBackground || '#ddd');
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.data) {
+      this.nodes = this.toTree(this.data);
+      if (this.waittingSelect) {
+        this.select(this.waittingSelect);
+      }
+    }
+    if (changes.font) {
+      this.updateStyle();
+    }
+
+    if (changes.data || changes.expandLevel || changes.expandAll) {
+      this.expand();
+    }
+  }
+
+  toTree(data: any[]) {
+    const nodeMap = {};
+    const nodes = [];
+    const root = [];
+    if (data) {
+      data.forEach(({ title, key, parentKey, parentKey_value, icon, count }) => {
+        if (key) {
+          const node: NzTreeNodeOptions = {
+            key,
+            title,
+            parentKey: parentKey_value || parentKey,
+            icon,
+            isLeaf: true,
+            count,
+          };
+          if (this.selectedKeys.includes(key)) {
+            node.selected = true;
+          }
+          nodeMap[key] = node;
+          nodes.push(node);
+        }
+      });
+      nodes.forEach((node) => {
+        if (node.parentKey) {
+          const parent = nodeMap[node.parentKey];
+          if (parent) {
+            parent.children = parent.children || [];
+            parent.children.push(node);
+            parent.isLeaf = false;
+            return;
+          }
+        }
+        root.push(node);
+      });
+    }
+    return root;
+  }
+
+  expand() {
+    // TODO nz的bug，在数据改变之后nzExpandAll无效，等修复了可以切换成这里的代码
+    // if (!this.expandAll) {
+    //   this.expandedKeys = [];
+    //   if (this.expandLevel) {
+    //     this.arrayService.visitTree(this.nodes, (item, parent, deep) => {
+    //       if (deep <= this.expandLevel) {
+    //         this.expandedKeys.push(item.key);
+    //       }
+    //     });
+    //   }
+    // }
+    this.expandedKeys = [];
+    if (this.expandAll || this.expandLevel) {
+      this.arrayService.visitTree(this.nodes, (item, parent, deep) => {
+        if (this.expandAll || deep <= this.expandLevel) {
+          this.expandedKeys.push(item.key);
+        }
+      });
+    }
+  }
+
+  updateStyle() {
+    this.style = getFontStyle(this.font);
+    this.elementRef.nativeElement.style.setProperty('--selected-background', this.selectedBackground || '#bae7ff');
+  }
+
+  onClick(event: NzFormatEmitEvent) {
+    this.onKeysChange(event.keys);
+    this.nodeClick(event.node.key, event.node.title);
+  }
+
+  onKeysChange(keys: string[]) {
+    this.waittingSelect = null;
+    this.selectedKeys = keys;
+    if (this.checkable) {
+      if (this.outputType === 'string') {
+        this.keyChange.emit(keys?.join(';'));
+      } else {
+        this.keyChange.emit(keys);
+      }
+    } else {
+      this.keyChange.emit(keys[0]);
+    }
+  }
+
+  onCheckBoxChange(event: NzFormatEmitEvent) {
+    this.onKeysChange(event.keys);
+  }
+
+  onNodeDblclick(event: NzFormatEmitEvent) {
+    if (this.renamable) {
+      this.edittingNode = event.node;
+      setTimeout(() => {
+        if (this.renameInput) {
+          this.renameInput.nativeElement.focus();
+        }
+      });
+    }
+  }
+
+  renameEnd(node: NzTreeNode) {
+    this.edittingNode = null;
+    this.rename(node.key, node.title);
+  }
+
+  showNode(e) {
+    console.log(e);
+  }
+
+  @Method('搜索')
+  search(@Param('内容') value: string) {
+    this.searchValue = value;
+  }
+
+  @Method('选中')
+  select(@Param('id') id: string | string[]) {
+    let find = false;
+    const keys = [];
+    if (id) {
+      if (this.checkable) {
+        if (typeof id === 'string') {
+          id = id.split(';');
+        }
+        keys.push(...id);
+      } else {
+        keys.push(id);
+      }
+    }
+    this.selectedKeys = keys;
+    if (keys.length) {
+      if (this.nodes) {
+        const nodes = [];
+        this.arrayService.visitTree(this.nodes, (n) => {
+          if (keys.includes(n.key)) {
+            nodes.push(n);
+          }
+        });
+        if (nodes.length) {
+          this.onKeysChange(keys);
+          nodes.forEach((node) => this.nodeClick(node.key, node.title));
+          find = true;
+        }
+      }
+      // 数据有可能还没加载，等数据加载了再选中
+      if (!find) {
+        this.waittingSelect = id;
+      }
+    }
+  }
+
+  @Event('点击')
+  nodeClick(@EventParam('id') id: string, @EventParam('标题') title: string) {}
+
+  @Event('重命名')
+  rename(@EventParam('id') id: string, @EventParam('名称') name: string) {}
+}

package/src/lib/tree-control/tree-control.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TreeControlComponent } from './tree-control.component';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+import { NzTreeModule } from 'ng-zorro-antd/tree';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { FormsModule } from '@angular/forms';
+import { NzHighlightModule } from 'ng-zorro-antd/core/highlight';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+@NgModule({
+  declarations: [TreeControlComponent],
+  imports: [CommonModule, WidgetBaseModule, NzTreeModule, NzInputModule, FormsModule, NzHighlightModule, NzIconModule],
+})
+export class TreeControlModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(TreeControlComponent);
+  }
+}

package/src/lib/tree-ring-chart/tree-ring-chart.component.html

@@ -0,0 +1,7 @@
+<div
+  echarts
+  [options]="chartOption"
+  class="demo-chart"
+  (chartClick)="onChartClick($event)"
+  [initOpts]="{ renderer: 'svg' }"
+></div>

package/src/lib/tree-ring-chart/tree-ring-chart.component.less

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+.demo-chart {
+  height: 100%;
+}

package/src/lib/tree-ring-chart/tree-ring-chart.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { TreeRingChartComponent } from './tree-ring-chart.component';
+
+describe('TreeRingChartComponent', () => {
+  let component: TreeRingChartComponent;
+  let fixture: ComponentFixture<TreeRingChartComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TreeRingChartComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TreeRingChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});