bbj-screen-widget 2.4.60 → 2.4.62

package/src/lib/planimetric-map2d/planimetric-map2d.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgxEchartsModule } from 'ngx-echarts';
+import { PlanimetricMap2dComponent } from './planimetric-map2d.component';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+import { FlyLineLayerModule } from './fly-line-layer/fly-line-layer.module';
+import { BreathingBubbleLayerModule } from '../breathing-bubble-layer/breathing-bubble-layer.module';
+import { Map2dPolylineLayerModule } from './map2d-polyline-layer/map2d-polyline-layer.module';
+import { Map2dMarkLayerModule } from './map2d-mark-layer/map2d-mark-layer.module';
+import { Map2dVisualLayerModule } from './map2d-visual-layer/map2d-visual-layer.module';
+
+@NgModule({
+  declarations: [PlanimetricMap2dComponent],
+  imports: [
+    CommonModule,
+    NgxEchartsModule,
+    WidgetBaseModule,
+    FlyLineLayerModule,
+    BreathingBubbleLayerModule,
+    Map2dPolylineLayerModule,
+    Map2dMarkLayerModule,
+    Map2dVisualLayerModule
+  ],
+})
+export class PlanimetricMap2dModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(PlanimetricMap2dComponent);
+  }
+}

package/src/lib/planimetric-map3d/map3d-line-layer/map3d-line-layer.component.spec.ts

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

package/src/lib/planimetric-map3d/map3d-line-layer/map3d-line-layer.component.ts

@@ -0,0 +1,123 @@
+import { HttpClient } from '@angular/common/http';
+import {
+  Component,
+  EventEmitter,
+  forwardRef,
+  Inject,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
+import { SFArrayWidgetSchema } from '@delon/form';
+import { Data, DataOutput, Property, Widget, Event } from 'bbj-widget-base';
+import { ParentContainerComponent } from '../../parent-container/parent-container.component';
+import { getEchartsTextStyle } from '../../shared/util/echarts.util';
+
+@Component({
+  selector: 'sc-map3d-line-layer',
+  templateUrl: './map3d-line-layer.component.html',
+  styleUrls: ['./map3d-line-layer.component.less'],
+})
+@Widget('折线图', {
+  group: 'component',
+  image: '',
+  icon: '',
+  hidden: true,
+})
+export class Map3dLineLayerComponent implements OnInit, OnChanges, OnDestroy {
+  @Property('线条宽度', {
+    ui: { widget: 'myRange', min: 1, max: 40, step: 1 },
+  })
+  width = 4;
+  @Property('线条颜色', {
+    type: 'string',
+    ui: {
+      widget: 'myColor',
+    },
+  })
+  color = 'rgba(242,213,173,0.85)';
+
+  @Data({
+    properties: {
+      group: { type: 'string', title: '分组' },
+      lng: { type: 'number', title: '经度' },
+      lat: { type: 'number', title: '纬度' },
+    },
+  })
+  data: any[] = [
+    {
+      group: 'x',
+      lng: '120.7',
+      lat: '28',
+    },
+    {
+      group: 'x',
+      lng: '120.71',
+      lat: '28.01',
+    },
+    {
+      group: 'x',
+      lng: '120.79',
+      lat: '28.1',
+    },
+    {
+      group: 'y',
+      lng: '120.72',
+      lat: '28.02',
+    },
+    {
+      group: 'y',
+      lng: '120.73',
+      lat: '28.03',
+    },
+    {
+      group: 'y',
+      lng: '120.81',
+      lat: '28.12',
+    },
+  ];
+  id: string;
+  constructor(@Inject(forwardRef(() => ParentContainerComponent)) private parent: ParentContainerComponent) {}
+
+  ngOnInit(): void {}
+
+  ngOnDestroy(): void {
+    this.parent.deleteChild(this.id);
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    this.reload();
+  }
+
+  async reload() {
+    console.log(this.data);
+    const data = [];
+    const lineMap = {};
+    this.data.forEach((r) => {
+      let line = lineMap[r.group];
+      if (!line) {
+        line = [];
+        lineMap[r.group] = line;
+        data.push(line);
+      }
+      line.push([+r.lng, +r.lat, 1]);
+    });
+
+    const item = {
+      type: 'lines3D',
+      coordinateSystem: 'geo3D',
+      polyline: true,
+      lineStyle: {
+        width: this.width,
+        color: this.color,
+        opacity: 1,
+      },
+      data,
+      silent: true, //不响应和触发鼠标事件
+    };
+    this.parent.childInit({
+      id: this.id,
+      item,
+    });
+  }
+}

package/src/lib/planimetric-map3d/map3d-line-layer/map3d-line-layer.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Map3dLineLayerComponent } from './map3d-line-layer.component';
+import { WidgetService } from 'bbj-widget-base';
+
+@NgModule({
+  declarations: [Map3dLineLayerComponent],
+  imports: [CommonModule],
+})
+export class Map3dLineLayerModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(Map3dLineLayerComponent);
+  }
+}

package/src/lib/planimetric-map3d/map3d-mark-layer/map3d-mark-layer.component.spec.ts

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

package/src/lib/planimetric-map3d/map3d-mark-layer/map3d-mark-layer.component.ts

@@ -0,0 +1,229 @@
+import { HttpClient } from '@angular/common/http';
+import {
+  Component,
+  EventEmitter,
+  forwardRef,
+  Inject,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
+import { SFArrayWidgetSchema } from '@delon/form';
+import { Data, DataOutput, Property, Widget, Event } from 'bbj-widget-base';
+import { ParentContainerComponent } from '../../parent-container/parent-container.component';
+import { getEchartsTextStyle } from '../../shared/util/echarts.util';
+
+@Component({
+  selector: 'sc-map3d-mark-layer',
+  templateUrl: './map3d-mark-layer.component.html',
+  styleUrls: ['./map3d-mark-layer.component.less'],
+})
+@Widget('散点图', {
+  group: 'component',
+  image: '',
+  icon: '',
+  hidden: true,
+})
+export class Map3dMarkLayerComponent implements OnInit, OnChanges, OnDestroy {
+  @Property('分组', {
+    type: 'array',
+    title: '分组',
+    maxItems: 10,
+    items: {
+      type: 'object',
+      properties: {
+        group: {
+          type: 'string',
+          title: '分组',
+        },
+        symbol: {
+          type: 'string',
+          title: '形状',
+          enum: [
+            { label: '圆', value: 'circle' },
+            { label: '矩形', value: 'rect' },
+            { label: '圆角矩形', value: 'roundRect' },
+            { label: '三角形', value: 'triangle' },
+            { label: '菱形', value: 'diamond' },
+            { label: '针形', value: 'pin' },
+            { label: '箭头', value: 'arrow' },
+            { label: '无', value: 'none' },
+            { label: '图片', value: 'image' },
+          ],
+        },
+        image: {
+          title: '图片',
+          type: 'string',
+          ui: {
+            widget: 'myPicture',
+            visibleIf: { symbol: ['image'] },
+          },
+        },
+        size: {
+          type: 'number',
+          title: '大小',
+        },
+        color: {
+          type: 'string',
+          title: '颜色',
+          ui: {
+            widget: 'myColor',
+          },
+        },
+        font: {
+          type: 'string',
+          title: '字体',
+          ui: { widget: 'myFont' },
+        },
+      },
+      required: [],
+    },
+    ui: { grid: { arraySpan: 24 }, spanControl: 24 } as SFArrayWidgetSchema,
+  })
+  groups = [
+    {
+      group: '',
+      symbol: 'circle',
+      size: 30,
+    },
+  ];
+  @Data({
+    properties: {
+      id: { type: 'string', title: 'id' },
+      address: { type: 'string', title: '地点' },
+      information: { type: 'string', title: '信息' },
+      group: { type: 'string', title: '标记分组' },
+      lng: { type: 'number', title: '经度' },
+      lat: { type: 'number', title: '纬度' },
+    },
+  })
+  data: any[] = [
+    {
+      address: '机楼1号',
+      information: '暂无信息',
+      group: '',
+      lng: '120',
+      lat: '28',
+    },
+  ];
+  id: string;
+  @DataOutput(['id', 'address', 'lng', 'lat'])
+  @Event('点击标记', {
+    params: {
+      properties: {
+        id: { type: 'string', title: 'id' },
+        address: { type: 'string', title: '地点' },
+        lng: { type: 'number', title: '经度' },
+        lat: { type: 'number', title: '纬度' },
+      },
+    },
+  })
+  makerClick = new EventEmitter();
+  constructor(
+    @Inject(forwardRef(() => ParentContainerComponent)) private parent: ParentContainerComponent,
+    private http: HttpClient,
+  ) {}
+  ngOnDestroy(): void {
+    this.parent.deleteChild(this.id);
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    this.reload();
+  }
+
+  async reload() {
+    const groupMap = {};
+    const seriesList = [];
+    const seriesMap = {};
+    for (const group of this.groups) {
+      const groupName = group.group || '';
+      groupMap[groupName] = group;
+      const series = await this.getSeries(group);
+      seriesList.push(series);
+      seriesMap[groupName] = series;
+    }
+
+    this.data.forEach((record) => {
+      let series = seriesMap[record.group];
+      if (series == null) {
+        series = seriesMap[''];
+      }
+      if (series) {
+        series.data.push({
+          id: record.id,
+          name: record.address,
+          value: [+record.lng, +record.lat, 1, record.information],
+        });
+      }
+    });
+    this.parent.childInit({
+      id: this.id,
+      item: seriesList,
+      onClick: (event) => {
+        const obj = event.data;
+        this.makerClick.emit({
+          id: obj.id,
+          address: obj.name,
+          lng: obj.value[0],
+          lat: obj.value[1],
+        });
+      },
+    });
+  }
+
+  async getSeries(group: any) {
+    let symbol = group.symbol;
+    if (symbol === 'image') {
+      const url = group.image as string;
+      if (url) {
+        if (url.endsWith('svg')) {
+          const svgStr: any = await this.http.get(url, { responseType: 'text' }).toPromise();
+          const svg = new DOMParser().parseFromString(svgStr, 'text/xml');
+          const paths = svg.getElementsByTagName('path');
+          symbol = 'path://';
+          for (let i = 0; i < paths.length; i++) {
+            const path = paths[i];
+            if (i > 0) {
+              symbol += ' ';
+            }
+            symbol += path.getAttribute('d').replace(' ', ',');
+          }
+        } else {
+          symbol = 'image://' + location.origin + url;
+        }
+      } else {
+        symbol = 'none';
+      }
+    }
+    const series = {
+      id: this.id + group.group,
+      type: 'scatter3D',
+      coordinateSystem: 'geo3D',
+      data: [],
+      tooltip: {
+        formatter: (params) => params.value[3],
+      },
+      label: {
+        show: true,
+        formatter: '{b}',
+        position: 'bottom',
+        textStyle: getEchartsTextStyle(group.font),
+      },
+      // emphasis: {
+      //   label: {
+      //     show: true,
+      //   },
+      // },
+      symbol,
+      symbolSize: group.size,
+      itemStyle: {
+        color: group.color,
+        opacity: 1,
+      },
+      // zlevel: 10,
+    };
+    return series;
+  }
+
+  ngOnInit(): void {}
+}

package/src/lib/planimetric-map3d/map3d-mark-layer/map3d-mark-layer.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Map3dMarkLayerComponent } from './map3d-mark-layer.component';
+import { WidgetService } from 'bbj-widget-base';
+
+@NgModule({
+  declarations: [Map3dMarkLayerComponent],
+  imports: [CommonModule],
+})
+export class Map3dMarkLayerModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(Map3dMarkLayerComponent);
+  }
+}

package/src/lib/planimetric-map3d/planimetric-map3d.component.html

@@ -0,0 +1,2 @@
+<ng-template *ngFor="let child of children" widget-host [widget]="child"></ng-template>
+<div echarts *ngIf="hasMap" [options]="chartOption" class="demo-chart" (chartClick)='markClick($event)' (contextmenu)='rollback($event)'></div> 

package/src/lib/planimetric-map3d/planimetric-map3d.component.less

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

package/src/lib/planimetric-map3d/planimetric-map3d.component.spec.ts

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