bbj-screen-widget 2.4.62 → 2.4.63

package/src/lib/custom-baidu-map/typhoon-area-layer/typhoon-area-layer.component.spec.ts

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

package/src/lib/custom-baidu-map/typhoon-area-layer/typhoon-area-layer.component.ts

@@ -1,99 +0,0 @@
-import { Component, NgZone, OnInit } from '@angular/core';
-import { Data, Property, Widget } from 'bbj-widget-base';
-import { BaseLayer } from '../base-layer';
-import { CustomBaiduMapComponent } from '../custom-baidu-map.component';
-
-declare const mapvgl;
-const EARTH_RADIUS = 6371.393;
-
-@Component({
-  selector: 'sc-typhoon-area-layer',
-  templateUrl: './typhoon-area-layer.component.html',
-  styleUrls: ['./typhoon-area-layer.component.less'],
-})
-@Widget('风圈', {
-  group: 'component',
-  hidden: true,
-})
-export class TyphoonAreaLayerComponent extends BaseLayer implements OnInit {
-  @Property('描边颜色', { ui: { widget: 'myColor' } })
-  lineColor = 'rgba(238,160,29,0.8)';
-  @Property('描边宽度', { type: 'number' })
-  lineWidth = 2;
-  @Property('填充颜色', { ui: { widget: 'myColor' } })
-  fillColor = 'rgba(238,160,29,0.3)';
-  @Data({
-    properties: {
-      lng: { type: 'number', title: '中心经度' },
-      lat: { type: 'number', title: '中心纬度' },
-      nw: { type: 'number', title: '西北半径' },
-      ne: { type: 'number', title: '东北半径' },
-      sw: { type: 'number', title: '西南半径' },
-      se: { type: 'number', title: '东南半径' },
-    },
-  })
-  data: any[] = [
-    {
-      lng: 144.7,
-      lat: 38.9,
-      nw: 50,
-      ne: 100,
-      sw: 150,
-      se: 200,
-    },
-  ];
-  layer: any;
-  constructor(protected parent: CustomBaiduMapComponent, protected zone: NgZone) {
-    super(parent, zone);
-  }
-
-  createLayers(): any[] {
-    this.layer = new mapvgl.PolygonLayer({
-      lineColor: this.lineColor,
-      lineWidth: this.lineWidth,
-      fillColor: this.fillColor,
-      renderOrder: -1,
-    });
-    return [this.layer];
-  }
-
-  updateData(): void {
-    const data = [];
-    this.data.forEach((r) => {
-      var kk = this.getTF([+r.lng, +r.lat], +r.ne, +r.se, +r.sw, +r.nw);
-      data.push({
-        geometry: {
-          type: 'Polygon',
-          coordinates: [kk],
-        },
-      });
-    });
-    this.layer.setData(data);
-  }
-
-  getTF(lat, ne, se, sw, nw) {
-    // 求出方位半径方向上弧形经纬度
-    const getPoints = (center, cradius, startAngle) => {
-      // l=EARTH_RADIUS*dy/180*Math.PI
-      const radius = (cradius * 180) / EARTH_RADIUS / Math.PI;
-      // let radius = cradius / 90;
-      let pointNum = 90;
-      let endAngle = startAngle + Math.PI / 2;
-      let points = [];
-      for (var i = 0; i <= pointNum; i++) {
-        const angle = startAngle + ((endAngle - startAngle) * i) / pointNum;
-        const x = center[0] + (radius * Math.cos(angle)) / Math.abs(Math.cos((center[1] * Math.PI) / 180));
-        const y = center[1] + radius * Math.sin(angle);
-        points.push([x, y]);
-      }
-      return points;
-    };
-
-    let r7Ne = getPoints(lat, ne, 0);
-    let r7Nw = getPoints(lat, nw, Math.PI / 2);
-    let r7Sw = getPoints(lat, sw, Math.PI);
-    let r7Se = getPoints(lat, se, (Math.PI * 3) / 2);
-
-    return [...r7Ne, ...r7Nw, ...r7Sw, ...r7Se];
-  }
-}

package/src/lib/custom-baidu-map/wind-layer/wind-layer.component.spec.ts

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

package/src/lib/custom-baidu-map/wind-layer/wind-layer.component.ts

@@ -1,404 +0,0 @@
-import { Component, OnChanges, OnDestroy, OnInit } from '@angular/core';
-import { SFArrayWidgetSchema } from '@delon/form';
-import { Data, Property, Widget } from 'bbj-widget-base';
-import { CustomBaiduMapComponent } from '../custom-baidu-map.component';
-declare const BMapGL;
-
-@Component({
-  selector: 'sc-wind-layer',
-  templateUrl: './wind-layer.component.html',
-  styleUrls: ['./wind-layer.component.less'],
-})
-@Widget('台风层', {
-  group: 'component',
-  image: '',
-  icon: '',
-  hidden: true,
-})
-export class WindLayerComponent implements OnInit, OnChanges, OnDestroy {
-  @Property('清晰度', { type: 'number' })
-  sharpness = 1000;
-  @Property('标记分组', {
-    type: 'array',
-    title: '标记分组',
-    maxItems: 10,
-    items: {
-      type: 'object',
-      properties: {
-        group: {
-          type: 'string',
-          title: '分组',
-        },
-        color: {
-          type: 'string',
-          title: '颜色',
-          ui: { widget: 'myColor' },
-        },
-        borderColor: {
-          type: 'string',
-          title: '线条颜色',
-          ui: { widget: 'myColor' },
-        },
-        borderWidth: {
-          type: 'number',
-          title: '线条粗细',
-        },
-        shadowColor: {
-          type: 'string',
-          title: '阴影颜色',
-          ui: { widget: 'myColor' },
-        },
-        image: {
-          type: 'string',
-          title: '中心图片',
-          ui: { widget: 'myUpload' },
-        },
-      },
-    },
-    ui: { grid: { arraySpan: 24 }, spanControl: 24 } as SFArrayWidgetSchema,
-  })
-  groups: any = [
-    {
-      group: '3',
-      color: 'rgba(62,194,35,0.4)',
-      borderColor: '#60db91',
-      borderWidth: 1,
-      shadowColor: 'rgba(96,219,145,0.2)',
-    },
-    {
-      group: '2',
-      color: 'rgba(255,101,41,0.4)',
-      borderColor: '#ff7b48',
-      borderWidth: 1,
-      shadowColor: 'rgba(255,166,51,0.2)',
-    },
-    {
-      group: '1',
-      color: 'rgba(243,68,68,0.4)',
-      borderColor: '#ff3355',
-      borderWidth: 1,
-      shadowColor: 'rgba(255,51,85,0.2)',
-      image: '/assets/img/screen/typhoon.png',
-    },
-  ];
-  @Data({
-    properties: {
-      lng: { type: 'number', title: '经度' },
-      lat: { type: 'number', title: '纬度' },
-      r: { type: 'number', title: '半径' },
-      group: { type: 'string', title: '分组' },
-    },
-  })
-  data: any[] = [
-    {
-      lng: 121.3,
-      lat: 27.4,
-      group: '3',
-      r: 160,
-    },
-    {
-      lng: 119.5,
-      lat: 29.97,
-      group: '3',
-      r: 160,
-    },
-    {
-      lng: 120.52,
-      lat: 33.93,
-      group: '3',
-      r: 75,
-    },
-    {
-      lng: 121.3,
-      lat: 27.4,
-      group: '2',
-      r: 80,
-    },
-    {
-      lng: 119.5,
-      lat: 29.97,
-      group: '2',
-      r: 80,
-    },
-    {
-      lng: 120.52,
-      lat: 33.93,
-      group: '2',
-      r: 50,
-    },
-    {
-      lng: 121.3,
-      lat: 27.4,
-      group: '1',
-      r: 40,
-    },
-    {
-      lng: 119.5,
-      lat: 29.97,
-      group: '1',
-      r: 40,
-    },
-    {
-      lng: 120.52,
-      lat: 33.93,
-      group: '1',
-      r: 25,
-    },
-  ];
-  id: string;
-  canvasOverlay: any;
-  constructor(private parent: CustomBaiduMapComponent) {}
-
-  ngOnInit(): void {}
-
-  async ngOnChanges() {
-    this.updateOverlay();
-    // if ((this.parent as any).enable3D) {
-
-    // } else {
-    //   this.parent.childInit({
-    //     id: this.id,
-    //     type: 'canvas',
-    //     update: this.updateCanvas,
-    //   });
-    // }
-  }
-
-  async updateOverlay() {
-    await this.parent.init$;
-    this.remove();
-    const canvas = this.getCanvas();
-    this.addCanvasOverlay(canvas);
-  }
-
-  addCanvasOverlay(item: any) {
-    if (item) {
-      var pStart = new BMapGL.Point(item.start.lng, item.start.lat);
-      var pEnd = new BMapGL.Point(item.end.lng, item.end.lat);
-      var bounds = new BMapGL.Bounds(
-        new BMapGL.Point(pStart.lng, pEnd.lat),
-        new BMapGL.Point(pEnd.lng, pStart.lat),
-      );
-      this.canvasOverlay = new BMapGL.GroundOverlay(bounds, {
-        type: 'canvas',
-        url: item.canvas,
-        opacity: 1,
-      });
-      this.parent.map.addOverlay(this.canvasOverlay);
-    }
-    // return canvasOverlay;
-  }
-
-  ngOnDestroy(): void {
-    this.remove();
-    // this.parent.deleteChild(this.id);
-  }
-
-  remove() {
-    if (this.canvasOverlay) {
-      this.parent.map.removeOverlay(this.canvasOverlay);
-      this.canvasOverlay = null;
-    }
-  }
-
-  getCanvas() {
-    // const images = {};
-    // if (this.groups?.length) {
-    //   for (const group of this.groups) {
-    //     if (group.image) {
-    //       images[group.image] = await this.loadImage(group.image);
-    //     }
-    //   }
-    // }
-    // console.log(this.data);
-    if (this.data && this.data.length >= 3) {
-      let startLng = 180;
-      let startLat = 90;
-      let endLng = -180;
-      let endLat = -90;
-      const data = this.data.map((record) => {
-        const r = (+record.r * 180) / Math.PI / 6371.393;
-        startLng = Math.min(startLng, +record.lng - r);
-        startLat = Math.min(startLat, +record.lat - r);
-        endLng = Math.max(endLng, +record.lng + r);
-        endLat = Math.max(endLat, +record.lat + r);
-        return { ...record, r };
-      });
-      const sharpness = this.sharpness || 1000;
-      const multiple = Math.min(sharpness / (endLng - startLng), sharpness / (endLat - startLat));
-      const c = document.createElement('canvas');
-      c.width = Math.round((endLng - startLng) * multiple);
-      c.height = Math.round((endLat - startLat) * multiple);
-      const groups = {};
-      data.forEach((record) => {
-        const group = record.group;
-        if (group) {
-          let points: any[] = groups[group];
-          if (!points) {
-            points = [];
-            groups[group] = points;
-          }
-          points.push({
-            x: (+record.lng - startLng) * multiple,
-            y: (endLat - +record.lat) * multiple,
-            r: record.r * multiple,
-          });
-        }
-      });
-      this.groups.forEach((group) => {
-        const points = groups[group.group];
-        if (points?.length >= 3) {
-          const ctx = c.getContext('2d');
-          const p1 = points[0];
-          const p2 = points[Math.floor(points.length / 2)];
-          const p3 = points[points.length - 1];
-          var gnt = ctx.createRadialGradient(p1.x, p1.y, 0, p1.x, p1.y, p1.r);
-          // gnt.addColorStop(1, 'green');
-          // gnt.addColorStop(0, 'green');
-          gnt.addColorStop(1, group.shadowColor || 'green');
-          gnt.addColorStop(0, 'rgba(0,0,0,0)');
-          ctx.fillStyle = gnt;
-          ctx.beginPath();
-          ctx.arc(p1.x, p1.y, p1.r, 0, Math.PI * 2, true);
-          ctx.closePath();
-          ctx.fill();
-          const getTangency = (p1, p2) => {
-            const l = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
-            return { x: p2.x + (p2.r * (p1.y - p2.y)) / l, y: p2.y + (p2.r * (p2.x - p1.x)) / l };
-          };
-          ctx.beginPath();
-          let start = Math.atan((p2.x - p1.x) / (p1.y - p2.y));
-          ctx.arc(p1.x, p1.y, p1.r, start - Math.PI, start, false);
-          let t = getTangency(p1, p2);
-          // ctx.lineTo(t.x, t.y);
-          let t2 = getTangency(p2, p3);
-          ctx.quadraticCurveTo(t.x, t.y, t2.x, t2.y);
-          // ctx.lineTo(t.x, t.y);
-          start = Math.atan((p3.x - p2.x) / (p2.y - p3.y));
-          ctx.arc(p3.x, p3.y, p3.r, start, start + Math.PI, true);
-          t = getTangency(p3, p2);
-          t2 = getTangency(p2, p1);
-          ctx.quadraticCurveTo(t.x, t.y, t2.x, t2.y);
-          // ctx.lineTo(t.x, t.y);
-          ctx.closePath();
-          ctx.fillStyle = group.color || 'green';
-          ctx.fill();
-          ctx.lineWidth = group.borderWidth || 1;
-          ctx.beginPath();
-          ctx.arc(p1.x, p1.y, p1.r, 0, Math.PI * 2, true);
-          ctx.closePath();
-          ctx.strokeStyle = group.borderColor || 'green';
-          ctx.stroke();
-          // if (group.image && images[group.image]) {
-          //   const imageSize = p1.r * 0.8;
-          //   ctx.drawImage(images[group.image], p1.x - imageSize, p1.y - imageSize, imageSize * 2, imageSize * 2);
-          // }
-        }
-      });
-      // const points = this.data.map((record) => {
-      //   return {
-      //     x: (+record.lng - startLng) * multiple,
-      //     y: (endLat - +record.lat) * multiple,
-      //     r: record.r * multiple,
-      //   };
-      // });
-      // c.toBlob((blob)=>{
-      //   FileSaver.saveAs(blob,'typhoon.png')
-      // })
-
-      return {
-        start: {
-          lng: startLng,
-          lat: startLat,
-        },
-        end: {
-          lng: endLng,
-          lat: endLat,
-        },
-        canvas: c,
-      };
-    }
-  }
-
-  // updateCanvas = (ctx: CanvasRenderingContext2D, pointToPixel: Function) => {
-  //   if (this.data && this.data.length >= 3) {
-  //     const data = this.data.map((record) => {
-  //       const r = (+record.r * 180) / Math.PI / 6371.393;
-  //       return { lat: +record.lat, lng: +record.lng, r, group: record.group };
-  //     });
-
-  //     const groups = {};
-  //     data.forEach((record) => {
-  //       const group = record.group;
-  //       if (group) {
-  //         let points: any[] = groups[group];
-  //         if (!points) {
-  //           points = [];
-  //           groups[group] = points;
-  //         }
-  //         const pixel = pointToPixel(record);
-  //         const pixel2 = pointToPixel({ lat: record.lat, lng: record.lng + record.r });
-  //         points.push({
-  //           x: pixel.x,
-  //           y: pixel.y,
-  //           r: pixel2.x - pixel.x,
-  //         });
-  //       }
-  //     });
-  //     this.groups.forEach((group) => {
-  //       const points = groups[group.group];
-  //       if (points?.length >= 3) {
-  //         const p1 = points[0];
-  //         const p2 = points[Math.floor(points.length / 2)];
-  //         const p3 = points[points.length - 1];
-  //         var gnt = ctx.createRadialGradient(p1.x, p1.y, 0, p1.x, p1.y, p1.r);
-
-  //         gnt.addColorStop(1, group.shadowColor || 'green');
-  //         gnt.addColorStop(0, 'rgba(0,0,0,0)');
-  //         ctx.fillStyle = gnt;
-  //         ctx.beginPath();
-  //         ctx.arc(p1.x, p1.y, p1.r, 0, Math.PI * 2, true);
-  //         ctx.closePath();
-  //         ctx.fill();
-  //         const getTangency = (p1, p2) => {
-  //           const l = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
-  //           return { x: p2.x + (p2.r * (p1.y - p2.y)) / l, y: p2.y + (p2.r * (p2.x - p1.x)) / l };
-  //         };
-  //         ctx.beginPath();
-  //         let start = Math.atan((p2.x - p1.x) / (p1.y - p2.y));
-  //         ctx.arc(p1.x, p1.y, p1.r, start - Math.PI, start, false);
-  //         let t = getTangency(p1, p2);
-  //         let t2 = getTangency(p2, p3);
-  //         ctx.quadraticCurveTo(t.x, t.y, t2.x, t2.y);
-  //         start = Math.atan((p3.x - p2.x) / (p2.y - p3.y));
-  //         ctx.arc(p3.x, p3.y, p3.r, start, start + Math.PI, true);
-  //         t = getTangency(p3, p2);
-  //         t2 = getTangency(p2, p1);
-  //         ctx.quadraticCurveTo(t.x, t.y, t2.x, t2.y);
-  //         ctx.closePath();
-  //         ctx.fillStyle = group.color || 'green';
-  //         ctx.fill();
-  //         ctx.lineWidth = group.borderWidth || 1;
-  //         ctx.beginPath();
-  //         ctx.arc(p1.x, p1.y, p1.r, 0, Math.PI * 2, true);
-  //         ctx.closePath();
-  //         ctx.strokeStyle = group.borderColor || 'green';
-  //         ctx.stroke();
-  //       }
-  //     });
-  //   }
-  // };
-
-  // loadImage(url: string): Promise<HTMLElement> {
-  //   return new Promise((resolve, reject) => {
-  //     const image = new Image();
-  //     image.src = url;
-  //     image.onload = () => {
-  //       resolve(image);
-  //     };
-  //     image.onerror = (e) => {
-  //       resolve(null);
-  //     };
-  //   });
-  // }
-}

package/src/lib/data-map/data-map.component.html

@@ -1,9 +0,0 @@
-<div id="dataMap" style="width: 100%; height: 100%">
-  <div
-    echarts
-    [options]="chartOption"
-    class="demo-chart"
-    style="width: 100%; height: 100%"
-    [initOpts]="{ renderer: 'svg' }"
-  ></div>
-</div>

package/src/lib/data-map/data-map.component.spec.ts

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

package/src/lib/data-map/data-map.component.ts

@@ -1,105 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import {Data, Property, Widget} from 'bbj-widget-base';
-import {HttpClient} from '@angular/common/http'
-import * as echarts from 'echarts';
-
-@Component({
-  selector: 'sc-data-map',
-  templateUrl: './data-map.component.html',
-  styleUrls: ['./data-map.component.less']
-})
-@Widget('数据地图', {
-  group: 'component',
-  image: 'assets/img/screen/2dmap.png',
-})
-export class DataMapComponent implements OnInit {
-  @Property('字体', { ui: { widget: 'myFont' } })
-  font: any = {
-    family: '',
-    color: '#000000',
-    weight: 'normal',
-    size: 16,
-    space: 0,
-    lineHeight: 0,
-  };
-  @Property('告警值', { type: 'number'})
-  _alarm=100;
-  @Property('告警颜色',{ui:{widget: 'myColor', example:['#D0021B','#F5A623','#F8E71C','#50E3C2','#3285FF','#B45FFF','#9B9B9B','#333333']}})
-  _alarmColor = '#D0021B';
-  @Property('正常颜色',{ui:{widget: 'myColor', example:['#D0021B','#F5A623','#F8E71C','#50E3C2','#3285FF','#B45FFF','#9B9B9B','#333333']}})
-  _normalColor = '#3285FF';
-  @Property('高亮背景',{ui:{widget: 'myColor', example:['#D0021B','#F5A623','#F8E71C','#50E3C2','#3285FF','#B45FFF','#9B9B9B','#333333']}})
-  _areaColor = '#FF0000';
-  @Data({
-    properties: {
-      name: {type: 'string', title: '地点'},
-      value: {type: 'number', title: '值'},
-    },
-  })
-  _data: any[] = [
-    {name: '龙湾区', value: 100},
-    {name: '永嘉县', value: 45},
-    {name: '瑞安市', value: 200},
-    {name: '洞头县', value: 99},
-    {name: '鹿城区', value: 1},
-    {name: '瓯海区', value: 1},
-    {name: '乐清市', value: 1},
-    {name: '文成县', value: 1},
-    {name: '平阳县', value: 1},
-    {name: '泰顺县', value: 1},
-    {name: '苍南县', value: 1},
-  ];
-  chartOption: any;
-  constructor(private http: HttpClient) { }
-
-  ngOnInit() {
-    this.http.get('/assets/echarts/map/json/wenzhou.json').toPromise()
-      .then(data => {
-        echarts.registerMap('wenzhou', data);
-        this.chartOption = {
-          tooltip: {
-            trigger: 'item',
-            formatter: '{b}<br/>{c} (p / km2)'
-          },
-          visualMap: {
-            type: 'piecewise',
-            pieces: [
-              {gte: this._alarm,color:this._alarmColor}, // 不指定 max，表示 max 为无限大（Infinity）。
-              {gte: 0, lt: this._alarm,color:this._normalColor},
-            ],
-            show:false,
-          },
-          series: [
-            {
-              name: '浙江',
-              type: 'map',
-              mapType: 'wenzhou', // 自定义扩展图表类型
-              label: {
-                show: true,
-                normal: {
-                  textStyle: {
-                    fontSize: this.font.size,
-                    fontWeight: this.font.weight,
-                    color: this.font.color,
-                    fontFamily : this.font.family,
-                    lineHeight : this.font.lineHeight,
-                  }
-                }
-              },
-              itemStyle:{
-                normal:{label:{show:true}},
-                emphasis:{
-                  label:{show:true},
-                  areaColor: this._areaColor,
-                  // borderColor:'red'
-                }
-              },
-              data:this._data,
-            }
-          ]
-        };
-      })
-
-  }
-
-}