bbj-screen-widget 2.4.45 → 2.4.46

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();
+  });
+});

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

@@ -0,0 +1,227 @@
+import {
+  Component,
+  OnInit,
+  forwardRef,
+  ViewChild,
+  ElementRef,
+  OnDestroy,
+  OnChanges,
+  SimpleChanges,
+  EventEmitter,
+} from '@angular/core';
+import { Widget, Property, Data, DataOutput, Event } from 'bbj-widget-base';
+import { ParentContainerComponent } from '../parent-container/parent-container.component';
+import { HttpClient } from '@angular/common/http';
+import * as echarts from 'echarts';
+import { NgxEchartsDirective } from 'ngx-echarts';
+import { PlanimetricMap2dComponent } from '../planimetric-map2d/planimetric-map2d.component';
+import { getEchartsTextStyle } from '../shared/util/echarts.util';
+
+const buttonEnum = [
+  { label: '鼠标左键', value: 'left' },
+  { label: '鼠标中键', value: 'middle' },
+  { label: '鼠标右键', value: 'right' },
+];
+
+@Component({
+  selector: 'sc-planimetric-map3d',
+  templateUrl: './planimetric-map3d.component.html',
+  styleUrls: ['./planimetric-map3d.component.less'],
+  providers: [{ provide: ParentContainerComponent, useExisting: forwardRef(() => PlanimetricMap3dComponent) }],
+})
+@Widget('3D平面地图', {
+  group: 'component',
+  image: 'assets/img/screen/3dmap.png',
+  icon: 'iconmokuai',
+  children: [
+    {
+      title: '散点图',
+      type: 'sc-map3d-mark-layer',
+      option: {},
+      hidden: true,
+      hideChild: true,
+    },
+  ],
+  childTypes: ['sc-map3d-mark-layer', 'sc-map3d-line-layer'],
+  description: 'hasChildItem',
+})
+export class PlanimetricMap3dComponent extends PlanimetricMap2dComponent implements OnInit, OnDestroy, OnChanges {
+  @Property('地图样式', {
+    ui: {
+      widget: 'myUrlSelect',
+      url: '/assets/mapListItem.json',
+    },
+  })
+  mapStyle = 'china';
+  @Property('区域背景', {
+    ui: {
+      widget: 'myColor',
+    },
+  })
+  areaColor = '#323c48';
+  @Property('区域描边', {
+    ui: {
+      widget: 'myColor',
+    },
+  })
+  borderColor = '#404a59';
+  @Property('移动高亮', {
+    ui: {
+      widget: 'myColor',
+    },
+  })
+  _areaColor = '#2a333d';
+  @Property('地区字体', { ui: { widget: 'myFont' } })
+  areaNamefont: any = {
+    family: '',
+    color: '#FFFFFF',
+    weight: 'normal',
+    size: 12,
+    space: 0,
+    lineHeight: 12,
+  };
+  @Property('显示地名', {
+    type: 'boolean',
+  })
+  showAreaName = true;
+  @Property('阴影颜色', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  shadowColor = '#2a333d';
+  @Property('边框粗细', {
+    type: 'number',
+  })
+  boderWidth = 2;
+  @Property('模型高度', { type: 'number' })
+  regionHeight = 3;
+  @Property('投影方式', {
+    enum: [
+      { label: '透视投影', value: 'perspective' },
+      { label: '正交投影', value: 'orthographic' },
+    ],
+  })
+  projection = 'perspective';
+  @Property('视角距离', { type: 'number', ui: { visibleIf: { projection: ['perspective'] } } })
+  distance = 100;
+  @Property('正交大小', { type: 'number', ui: { visibleIf: { projection: ['orthographic'] } } })
+  orthographicSize = 100;
+  @Property('alpha角', { type: 'number' })
+  alpha = 40;
+  @Property('beta角', { type: 'number' })
+  beta = 0;
+  @Property('平移操作', { enum: buttonEnum })
+  panMouseButton = 'middle';
+  @Property('旋转操作', { enum: buttonEnum })
+  rotateMouseButton = 'left';
+  @Property('开启光晕', { type: 'boolean' })
+  bloomEnable: boolean;
+  @Property('光晕强度', { type: 'number', ui: { visibleIf: { bloomEnable: [true] } } })
+  bloomIntensity = 0.1;
+
+  chartOption: any;
+  hasMap = false;
+  @Data({
+    properties: {
+      name: { type: 'string', title: '地名' },
+      lng: { type: 'number', title: '经度' },
+      lat: { type: 'string', title: '纬度' },
+    },
+  })
+  data: any[] = [];
+  @DataOutput(['name', 'lng', 'lat'])
+  @Event('选中', {
+    params: {
+      properties: {
+        name: { type: 'string', title: '值' },
+        lng: { type: 'number', title: '经度' },
+        lat: { type: 'string', title: '纬度' },
+      },
+    },
+  })
+  areaClick = new EventEmitter();
+
+  constructor(http: HttpClient) {
+    super(http);
+  }
+
+  chartInit() {
+    // this.loadMap(this.mapStyle).then((data) => {
+
+    const textStyle = getEchartsTextStyle(this.areaNamefont);
+    const geo3D = {
+      type: 'map3D',
+      boxHeight: 7,
+      regionHeight: this.regionHeight,
+      label: {
+        //静态的时候展示样式
+        show: this.showAreaName, //是否显示地图省份得名称
+        distance: 0,
+        ...textStyle,
+      },
+      selectedMode: this.selectedMode,
+      itemStyle: {
+        color: this.areaColor,
+        borderColor: this.borderColor,
+        borderWidth: this.boderWidth,
+      },
+      emphasis: {
+        label: {
+          show: this.showAreaName,
+          ...textStyle,
+        },
+        itemStyle: {
+          color: this._areaColor,
+        },
+      },
+      map: this.mapStyle,
+      roam: this.zoomSwitch,
+      nameMap: this.nameMap,
+      zoom: this.zoom,
+      // silent: false,
+      // regions,
+      viewControl: {
+        projection: this.projection,
+        distance: this.distance,
+        orthographicSize: this.orthographicSize,
+        alpha: this.alpha,
+        beta: this.beta,
+        panMouseButton: this.panMouseButton,
+        rotateMouseButton: this.rotateMouseButton,
+      },
+      postEffect: {
+        enable: this.bloomEnable,
+        bloom: {
+          enable: this.bloomEnable,
+          bloomIntensity: this.bloomIntensity,
+        },
+      },
+    };
+    let series = [];
+    this._children.forEach((child) => {
+      if (Array.isArray(child.item)) {
+        series.push(...child.item);
+      } else {
+        series.push(child.item);
+      }
+    });
+    // series.push(geo3D);
+    this.chartOption = {
+      geo3D,
+      tooltip: {},
+      series,
+    };
+    // });
+  }
+
+  // loadMap(name: string) {
+  //   let loadMapPromise = this.loadedMap[name];
+  //   if (!loadMapPromise) {
+  //     loadMapPromise = this.http.get('assets/echarts/map/json/' + name + '.json').toPromise();
+  //     this.loadedMap[name] = loadMapPromise;
+  //   }
+  //   return loadMapPromise;
+  // }
+}

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

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PlanimetricMap3dComponent } from './planimetric-map3d.component';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+import { NgxEchartsModule } from 'ngx-echarts';
+import { Map3dMarkLayerModule } from './map3d-mark-layer/map3d-mark-layer.module';
+import { Map3dLineLayerModule } from './map3d-line-layer/map3d-line-layer.module';
+
+@NgModule({
+  declarations: [PlanimetricMap3dComponent],
+  imports: [CommonModule, WidgetBaseModule, NgxEchartsModule, Map3dMarkLayerModule,Map3dLineLayerModule],
+})
+export class PlanimetricMap3dModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(PlanimetricMap3dComponent);
+  }
+}