bbj-screen-widget 2.4.61 → 2.4.62

package/src/lib/planimetric-map2d/map2d-polyline-layer/map2d-polyline-layer.component.spec.ts

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

package/src/lib/planimetric-map2d/map2d-polyline-layer/map2d-polyline-layer.component.ts

@@ -0,0 +1,107 @@
+import { Component, forwardRef, Inject, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Data, Property, Widget } from 'bbj-widget-base';
+import { ParentContainerComponent } from '../../parent-container/parent-container.component';
+
+@Component({
+  selector: 'sc-map2d-polyline-layer',
+  templateUrl: './map2d-polyline-layer.component.html',
+  styleUrls: ['./map2d-polyline-layer.component.less'],
+})
+@Widget('折线层', {
+  group: 'component',
+  image: '',
+  icon: '',
+  hidden: true,
+})
+export class Map2dPolylineLayerComponent implements OnInit, OnChanges, OnDestroy {
+  @Property('线条粗细', {
+    ui: { widget: 'myRange', min: 1, max: 100, step: 1 },
+  })
+  size = 1;
+  @Property('线条颜色', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  color = 'RGB(0, 252, 255)';
+  @Data({
+    properties: {
+      group: { type: 'string', title: '分组' },
+      lng: { type: 'number', title: '经度' },
+      lat: { type: 'number', title: '纬度' },
+    },
+  })
+  data: any[] = [
+    {
+      group: 'x',
+      lng: '116.85',
+      lat: '28.69',
+    },
+    {
+      group: 'x',
+      lng: '116.35',
+      lat: '28.79',
+    },
+    {
+      group: 'x',
+      lng: '116.10',
+      lat: '29',
+    },
+  ];
+  id: string;
+  datalist = [];
+  constructor(@Inject(forwardRef(() => ParentContainerComponent)) private parent: ParentContainerComponent) {}
+  ngOnDestroy(): void {
+    this.parent.deleteChild(this.id);
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    this.grouping();
+    const item = [
+      {
+        coordinateSystem: 'bmap',
+        data: this.datalist,
+        polyline: true,
+
+        lineStyle: {
+          normal: {
+            color: this.color,
+            opacity: 0.6,
+            width: this.size,
+          },
+        },
+        type: 'lines',
+        name: 'polyline',
+        zlevel: 1,
+      },
+    ];
+    this.parent.childInit({
+      id: this.id,
+      item,
+    });
+  }
+
+  ngOnInit(): void {}
+
+  grouping() {
+    this.datalist = [];
+    const grouppname = [];
+    const groups = {};
+    if (this.data == null) {
+      return;
+    }
+    this.data.forEach((t) => {
+      if (grouppname.indexOf(t.group) < 0) {
+        grouppname.push(t.group);
+      }
+      groups[t.group] = groups[t.group] || { coords: [] };
+      let point = [];
+      point.push(t.lng);
+      point.push(t.lat);
+      groups[t.group].coords.push(point);
+    });
+    grouppname.forEach((a) => {
+      this.datalist.push(groups[a]);
+    });
+  }
+}

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

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Map2dPolylineLayerComponent } from './map2d-polyline-layer.component';
+import {WidgetBaseModule, WidgetService} from 'bbj-widget-base';
+
+
+
+
+@NgModule({
+  declarations: [Map2dPolylineLayerComponent],
+  imports: [CommonModule, WidgetBaseModule],
+})
+export class Map2dPolylineLayerModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(Map2dPolylineLayerComponent);
+  }
+}

package/src/lib/planimetric-map2d/map2d-visual-layer/map2d-visual-layer.component.spec.ts

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

package/src/lib/planimetric-map2d/map2d-visual-layer/map2d-visual-layer.component.ts

@@ -0,0 +1,337 @@
+import {
+  Component,
+  EventEmitter,
+  forwardRef,
+  Inject,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
+import { Data, DataOutput, Drill, Property, Widget } from 'bbj-widget-base';
+import { ParentContainerComponent } from '../../parent-container/parent-container.component';
+
+@Component({
+  selector: 'sc-map2d-visual-layer',
+  templateUrl: './map2d-visual-layer.component.html',
+  styleUrls: ['./map2d-visual-layer.component.less'],
+})
+@Widget('热力层', {
+  group: 'component',
+  image: '',
+  icon: '',
+  hidden: true,
+})
+export class Map2dVisualLayerComponent implements OnInit, OnChanges, OnDestroy {
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = {
+    family: '',
+    color: '#FFFFFF',
+    weight: 'normal',
+    size: 12,
+    space: 0,
+    lineHeight: 12,
+  };
+
+  @Property('左侧边距', { type: 'number' })
+  left = 26;
+  @Property('底部边距', { type: 'number' })
+  bottom = 40;
+  @Property('分级', {
+    type: 'array',
+    title: '热力等级',
+    maxItems: 10,
+    items: {
+      type: 'object',
+      properties: {
+        gte: {
+          type: 'number',
+          title: '大于',
+        },
+        lte: {
+          type: 'number',
+          title: '小于等于',
+        },
+        label: {
+          type: 'string',
+          title: '标签',
+        },
+        color: {
+          type: 'string',
+          title: '颜色',
+          ui: {
+            widget: 'myColor',
+          },
+        },
+        colorEnd: {
+          type: 'string',
+          title: '渐变颜色',
+          ui: {
+            widget: 'myColor',
+          },
+        },
+        unit: {
+          type: 'string',
+          title: '单位',
+        },
+      },
+      required: ['label', 'color'],
+    },
+    ui: { grid: { arraySpan: 24 }, spanControl: 24 },
+  })
+  level = [
+    { gte: 0, lte: 50, label: '等级1', color: '#AAAAAA', colorEnd: null, unit: '' },
+    {
+      gte: 50,
+      label: '等级2',
+      color: '#FF3333',
+      colorEnd: null,
+      unit: '',
+    },
+  ];
+  // @Property('地图颜色', {
+  //   type: 'string',
+  //   ui: {
+  //     widget: 'myColor',
+  //   },
+  // })
+  // mapColor = '#FFFFFF';
+  // @Property('选中区域颜色', {
+  //   type: 'string',
+  //   ui: {
+  //     widget: 'myColor',
+  //   },
+  // })
+  // selectAreaColor = '#f2d5ad';
+  @Property('正极名称', {
+    max: {
+      type: 'string',
+      title: 'max',
+      ui: {},
+    },
+    required: ['max'],
+  })
+  max = '高';
+
+  @Property('负极名称', {
+    min: {
+      type: 'string',
+      title: 'min',
+      ui: {},
+    },
+    required: ['min'],
+  })
+  min = '低';
+  @Property('前缀', {
+    min: {
+      type: 'string',
+      ui: {},
+    },
+  })
+  prefix = '';
+  @Property('后缀', {
+    min: {
+      type: 'string',
+      ui: {},
+    },
+  })
+  suffix = '';
+  @Data({
+    properties: {
+      name: { type: 'string', title: '地名' },
+      value: { type: 'number', title: '值' },
+      tooltip: { type: 'string', title: '提示' },
+      lng: { type: 'number', title: '中心经度' },
+      lat: { type: 'number', title: '中心纬度' },
+    },
+  })
+  _data: any[] = [
+    { name: '南海诸岛', value: 0, tooltip: '告警统计' + '<br />' + '失联告警：0' },
+    { name: '北京', value: 54, tooltip: '告警统计' + '<br />' + '失联告警：54' },
+    { name: '天津', value: 13, tooltip: '告警统计' + '<br />' + '失联告警：13' },
+    { name: '上海', value: 40, tooltip: '告警统计' + '<br />' + '失联告警：40' },
+    { name: '重庆', value: 75, tooltip: '告警统计' + '<br />' + '失联告警：75' },
+    { name: '河北', value: 13, tooltip: '告警统计' + '<br />' + '失联告警：13' },
+    { name: '海口市', value: 70, tooltip: '告警统计' + '<br />' + '失联告警：70' },
+  ];
+  @Drill()
+  @DataOutput(['name', 'value', 'tooltip', 'lng', 'lat'])
+  dataClick = new EventEmitter<any>();
+  xData = [];
+  yData = [];
+  series = [];
+  image: string;
+  style = {
+    color: '',
+    fontFamily: '',
+    fontWeight: '',
+    fontSize: '',
+    lineHeight: '',
+  };
+  data: any;
+  visualMap = {};
+  id: string;
+  constructor(@Inject(forwardRef(() => ParentContainerComponent)) private parent: ParentContainerComponent) {}
+  ngOnDestroy(): void {
+    this.parent.deleteChild(this.id);
+  }
+
+  ngOnInit(): void {}
+  ngOnChanges(changes: SimpleChanges): void {
+    this.style = {
+      color: this.font.color,
+      fontFamily: this.font.family,
+      fontWeight: this.font.weight,
+      fontSize: this.font.size,
+      lineHeight: this.font.lineHeight,
+    };
+    if (changes._data) {
+      let gradual = false;
+      let lucency = false;
+      const pieces = this.level.map((level) => {
+        const piece = { ...level };
+        if (!lucency && this.isLucency(level.color)) {
+          lucency = true;
+        }
+        if (level.color && level.colorEnd) {
+          gradual = true;
+          piece.color = {
+            type: 'radial',
+            x: 0.5,
+            y: 0.5,
+            r: 0.8,
+            colorStops: [
+              {
+                offset: 0,
+                color: level.color, // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: level.colorEnd, // 100% 处的颜色
+              },
+            ],
+            globalCoord: false, // 缺省为 false
+          } as any;
+        }
+        return piece;
+      });
+      this.visualMap = {
+        min: 0,
+        max: 500,
+        left: this.left || 26,
+        bottom: this.bottom || 40,
+        showLabel: !0,
+        text: [this.max, this.min],
+        pieces,
+        textStyle: this.style,
+        show: !0,
+      };
+      // geo: {
+      //   map: this.mapStyle,
+      //   roam: !1,
+      //   scaleLimit: {
+      //     min: 1,
+      //     max: 2
+      //   },
+      //   // label: {
+      //   //   normal: {
+      //   //     show: !0,
+      //   //     fontSize: '14',
+      //   //     color: 'rgba(0,0,0,0.7)'
+      //   //   }
+      //   // },
+      //   itemStyle: {
+      //     normal: {
+      //       borderColor: 'rgba(0, 0, 0, 0.2)',
+      //       areaColor: this.mapColor,
+      //     },
+      //     emphasis: {
+      //       areaColor: this.selectAreaColor,
+      //       shadowOffsetX: 0,
+      //       shadowOffsetY: 0,
+      //       borderWidth: 0
+      //     }
+      //   }
+      // },
+      let item = [];
+      if (this._data.length) {
+        item = [
+          {
+            name: '',
+            type: 'map',
+            geoIndex: 0,
+            mapType: '',
+            label: {
+              normal: {
+                show: true,
+                formatter: (val) => {
+                  const value = val.value ? val.value : 0;
+                  const prefix = this.prefix ? this.prefix : '';
+                  const suffix = this.suffix ? this.suffix : '';
+                  return (val.name + '-' + prefix + value + suffix).split('-').join('\n');
+                },
+                textStyle: this.style,
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            // itemStyle: {
+            //   normal: {
+            //     borderColor: 'rgba(0, 0, 0, 0.2)',
+            //     areaColor: this.mapColor,
+            //   },
+            //   emphasis: {
+            //     areaColor: this.selectAreaColor,
+            //     shadowOffsetX: 0,
+            //     shadowOffsetY: 0,
+            //     borderWidth: 0,
+            //   },
+            // },
+            data: this._data,
+          },
+        ];
+      }
+      const child: any = {
+        id: this.id,
+        item: item,
+        visualMap: this.visualMap,
+        type: 'visual',
+      };
+      // 如果有渐变或者半透明，添加一个不透明的图层作为图例（台风项目的需求）
+      if (gradual || lucency) {
+        child.visualMap2 = {
+          ...this.visualMap,
+          pieces: this.level.map((level) => {
+            return { ...level, color: this.opacity(level.color) };
+          }),
+        };
+        child.visualMap.show = false;
+      }
+      this.parent.childInit(child);
+    }
+  }
+
+  isLucency(color: string) {
+    if (color) {
+      const match = /rgba\(\d+,\d+,\d+,([\d.]+)\)/.exec(color);
+      if (match) {
+        const opacity = Number(match[1]);
+        if (opacity < 1) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  opacity(color: string) {
+    if (color) {
+      color = color.replace(/rgba\((\d+),(\d+),(\d+),([\d.]+)\)/, (str, r, g, b, a) => {
+        console.log(str, r, g, b, a);
+        return `rgb(${r},${g},${b})`;
+      });
+    }
+    return color;
+  }
+}

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Map2dVisualLayerComponent } from './map2d-visual-layer.component';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+
+
+
+@NgModule({
+  declarations: [
+    Map2dVisualLayerComponent
+  ],
+  imports: [CommonModule, WidgetBaseModule],
+})
+export class Map2dVisualLayerModule { 
+  constructor(widgetService: WidgetService) {
+    widgetService.register(Map2dVisualLayerComponent);
+  }
+}

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

@@ -0,0 +1,11 @@
+<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)"
+  [initOpts]="{ renderer: renderer}"
+></div>
+<!--  -->

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

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

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

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