bbj-screen-widget 2.4.46 → 2.4.48

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

@@ -1,123 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,229 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,2 +0,0 @@
-<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

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

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

@@ -1,25 +0,0 @@
-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

@@ -1,227 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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);
-  }
-}