bbj-screen-widget 2.4.61 → 2.4.62

package/src/lib/shape/shape.component.ts

@@ -0,0 +1,207 @@
+import { Property, Widget, WidgetRef } from 'bbj-widget-base';
+import {
+  OnInit,
+  Component,
+  ElementRef,
+  OnDestroy,
+  NgZone,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+} from '@angular/core';
+import { NzResizeObserver } from 'ng-zorro-antd/core/resize-observers';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'sc-shape',
+  templateUrl: './shape.component.html',
+  styleUrls: ['./shape.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+@Widget('图形', { group: 'shape', icon: 'iconxingzhuang' })
+export class ShapeComponent implements OnInit, OnDestroy {
+  @Property('填充', {
+    ui: {
+      widget: 'myColor',
+      visibleIf: {
+        type: ['rect', 'polygonplus', 'polyhedrosis', 'circle', 'path', 'polygon', 'parallelogram', 'trapezoid'],
+      },
+    },
+  })
+  background = null;
+  @Property('线条颜色', { ui: { widget: 'myColor' } })
+  borderColor = '#3285ff';
+  @Property('线条粗细', { type: 'number' })
+  borderWidth = 1;
+  @Property('圆角', {
+    type: 'number',
+    ui: { widget: 'myRange', min: 0, max: 100, step: 1, visibleIf: { type: ['rect'] } },
+  })
+  fillet = 0;
+  @Property('几边形', {
+    type: 'number',
+    ui: { widget: 'myRange', min: 3, max: 100, step: 1, visibleIf: { type: ['polygonplus', 'polyhedrosis'] } },
+  })
+  side = 3;
+  @Property('内半径', { ui: { widget: 'myRange', min: 1, max: 99, step: 1, visibleIf: { type: ['polyhedrosis'] } } })
+  sr = 38;
+  @Property('上底', { ui: { widget: 'myRange', min: 1, max: 100, step: 1, visibleIf: { type: ['trapezoid'] } } })
+  upper = 60;
+  @Property('下底', {
+    ui: { widget: 'myRange', min: 1, max: 100, step: 1, visibleIf: { type: ['trapezoid'] } },
+  })
+  bottom = 100;
+  @Property('偏移', {
+    ui: {
+      widget: 'myRange',
+      min: -100,
+      max: 100,
+      step: 1,
+      visibleIf: { type: ['parallelogram', 'trapezoid', 'triangle'] },
+    },
+  })
+  deviation = 0;
+  @Property('透明度', { ui: { widget: 'myRange', min: 0, max: 1, step: 0.1 } })
+  opacity = 1;
+  @Property('阴影', { ui: { widget: 'myShadow' } })
+  shadow: any = { color: '', X: 0, Y: 0, Z: 0 };
+  @Property('', {
+    type: 'string',
+    ui: { hidden: true },
+  })
+  type = 'rect';
+  style: any;
+  image: string;
+  @Property('数据', { ui: { hidden: true } })
+  data: { x: number; y: number }[];
+  width: number;
+  height: number;
+  points: string;
+  destroy$ = new Subject();
+  filterId: string;
+  filterUrl: string;
+
+  constructor(
+    private elementRef: ElementRef,
+    private resizeObserver: NzResizeObserver,
+    private zone: NgZone,
+    private cd: ChangeDetectorRef,
+    private widgetRef: WidgetRef,
+  ) {}
+
+  ngOnInit() {
+    this.reset();
+    this.resizeObserver
+      .observe(this.elementRef)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        this.zone.run(() => {
+          this.reset();
+        });
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  reset() {
+    const { clientWidth: width, clientHeight: height } = this.elementRef.nativeElement;
+    this.width = width;
+    this.height = height;
+    this.style = {
+      opacity: this.opacity,
+      stroke: this.borderColor,
+      strokeWidth: this.borderWidth,
+      fill: this.background ? this.background : 'rgba(0,0,0,0)',
+    };
+    if (this.shadow && (this.shadow.X || this.shadow.Y || this.shadow.Z)) {
+      this.filterId = this.widgetRef.widget.id;
+      this.filterUrl = `url(#${this.filterId})`;
+    }
+    switch (this.type) {
+      case 'rect': // 矩形
+        this.style.rx = this.style.ry = this.fillet;
+        break;
+      case 'triangle': //三角形
+        this.points = `${width / 2 + (width * this.deviation) / 200},0 ${width},${height} 0,${height}`;
+        break;
+      case 'parallelogram': // 平行四边形
+        const offset = (width * this.deviation) / 100;
+        if (this.deviation >= 0) {
+          this.points = `${offset},0 ${width},0 ${width - offset},${height} 0,${height}`;
+        } else {
+          this.points = `0,0 ${width + offset},0 ${width},${height} ${-offset},${height}`;
+        }
+        break;
+      case 'trapezoid': // 梯形
+        const top = (this.upper * width) / 100;
+        const bottom = (this.bottom * width) / 100;
+        const offset1 = ((width - top) / 2) * (1 + this.deviation / 100);
+        const offset2 = ((width - bottom) / 2) * (1 - this.deviation / 100);
+        this.points = `${offset1},0 ${offset1 + top},0 ${offset2 + bottom},${height} ${offset2},${height}`;
+        break;
+      case 'polyline': //折线
+      case 'polygon': //多边形
+        this.points = '';
+        let minX: number, maxX: number, minY: number, maxY: number;
+        this.data.forEach(({ x, y }) => {
+          if (x < minX || minX == null) minX = x;
+          if (x > maxX || maxX == null) maxX = x;
+          if (y < minY || minY == null) minY = y;
+          if (y > maxY || maxY == null) maxY = y;
+        });
+        const scaleX = width / (maxX - minX);
+        const scaleY = height / (maxY - minY);
+        this.data.forEach(({ x, y }) => {
+          this.points += `${(x - minX) * scaleX},${(y - minY) * scaleY} `;
+        });
+        break;
+      case 'polygonplus': //正多边形
+        const rx = width / 2;
+        const ry = height / 2;
+        this.points = '';
+        for (let i = 0; i < this.side; i++) {
+          this.points += this.getEllipsePoint(i, this.side, rx, ry, rx, ry);
+        }
+        break;
+      case 'polyhedrosis': // 星形
+        this.points = '';
+        const rx1 = width / 2;
+        const ry1 = height / 2;
+        const rx2 = (rx1 * this.sr) / 100;
+        const ry2 = (ry1 * this.sr) / 100;
+        for (let i = 0; i < this.side; i++) {
+          this.points += this.getEllipsePoint(i, this.side, rx1, ry1, rx1, ry1);
+          this.points += this.getEllipsePoint(i + 1 / 2, this.side, rx1, ry1, rx2, ry2);
+        }
+        break;
+      case 'path':
+        this.points = '';
+        for (let i = 0; i < this.data.length; i++) {
+          this.points += 'L' + this.data[i].x + ' ' + this.data[i].y + ' ';
+        }
+        this.points = 'M' + this.points.substring(1) + 'Z';
+        break;
+      default:
+        break;
+    }
+    this.cd.markForCheck();
+  }
+
+  /**
+   * 获取椭圆上的的坐标点，起始角度为90度
+   * @param index 序号
+   * @param max 总数
+   * @param cx 中心x
+   * @param cy 中心y
+   * @param rx x半径
+   * @param ry y半径
+   * @returns
+   */
+  getEllipsePoint(index: number, max: number, cx: number, cy: number, rx: number, ry: number) {
+    const rad = ((index * 2) / max + 1 / 2) * Math.PI;
+    return cx + Math.cos(rad) * rx + ',' + (cy - Math.sin(rad) * ry) + ' ';
+  }
+}

package/src/lib/shape/shape.module.ts

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

package/src/lib/shared/component/video-player/video-player.component.html

@@ -0,0 +1,2 @@
+<video *ngIf="type !== 'iframe' || !src" class="video-js" #video controls autoplay></video>
+<iframe *ngIf="type === 'iframe' && src" [src]="src | nzSanitizer: 'resourceUrl'"></iframe>

package/src/lib/shared/component/video-player/video-player.component.less

@@ -0,0 +1,15 @@
+:host {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+video {
+  height: 100%;
+  width: 100%;
+}
+iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  pointer-events: none;
+}

package/src/lib/shared/component/video-player/video-player.component.spec.ts

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

package/src/lib/shared/component/video-player/video-player.component.ts

@@ -0,0 +1,132 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import { LazyResult, LazyService } from '@delon/util';
+import { FileUrlService } from '../../service/file-url.service';
+declare const flvjs;
+declare const Hls;
+@Component({
+  selector: 'sc-video-player',
+  templateUrl: './video-player.component.html',
+  styleUrls: ['./video-player.component.less'],
+})
+export class VideoPlayerComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit {
+  static loadFlvPromise: Promise<LazyResult>;
+  static loadHlsPromise: Promise<LazyResult>;
+  @Input()
+  type: string;
+  @Input()
+  src: string;
+  @Input()
+  hasAudio: boolean;
+  @ViewChild('video', { static: false })
+  video: ElementRef<HTMLVideoElement>;
+  flvPlayer: any;
+  hlsPlayer: any;
+  destroyed: boolean;
+  initd: boolean;
+
+  constructor(private lazy: LazyService, private fileUrlService: FileUrlService) {}
+
+  ngOnInit() {
+
+  }
+
+  ngAfterViewInit(): void {
+    this.reset();
+      this.initd = true;
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.initd && (changes.type || changes.src)) {
+      this.reset();
+    }
+  }
+
+  reset() {
+    if (this.type === 'hls') {
+      this.resetHls();
+    } else if (this.type === 'iframe') {
+      this.destroy();
+    } else {
+      this.resetFlv();
+    }
+  }
+
+  loadHls() {
+    if (VideoPlayerComponent.loadHlsPromise == null) {
+      VideoPlayerComponent.loadHlsPromise = this.lazy.loadScript('/assets/js/hls.js');
+    }
+    return VideoPlayerComponent.loadHlsPromise;
+  }
+
+  async resetHls() {
+    await this.loadHls();
+    this.destroy();
+    if (this.src && Hls.isSupported() && !this.destroyed) {
+      const url = this.fileUrlService.getUrl(this.src);
+      this.hlsPlayer = new Hls();
+      this.hlsPlayer.loadSource(url);
+      this.hlsPlayer.attachMedia(this.video.nativeElement);
+    }
+  }
+
+  async resetFlv() {
+    await this.loadFlv();
+    this.destroy();
+    // TODO 目前只做了flv，接下来要根据type播放不同类型
+    if (this.src && !this.destroyed) {
+      const url = this.fileUrlService.getUrl(this.src);
+      this.flvPlayer = flvjs.createPlayer(
+        {
+          type: 'flv',
+          url,
+          hasAudio: this.hasAudio === true,
+          hasVideo: true,
+          isLive: true,
+          withCredentials: false,
+        },
+        {
+          enableWorker: false,
+          lazyLoadMaxDuration: 3 * 60,
+          seekType: 'range',
+        },
+      );
+      this.flvPlayer.attachMediaElement(this.video.nativeElement);
+      this.flvPlayer.load();
+    }
+  }
+
+  loadFlv() {
+    if (VideoPlayerComponent.loadFlvPromise == null) {
+      VideoPlayerComponent.loadFlvPromise = this.lazy.loadScript('assets/js/flv.min.js');
+    }
+    return VideoPlayerComponent.loadFlvPromise;
+  }
+
+  destroy() {
+    if (this.flvPlayer) {
+      this.flvPlayer.unload();
+      this.flvPlayer.detachMediaElement();
+      this.flvPlayer.destroy();
+      this.flvPlayer = null;
+    }
+    if (this.hlsPlayer) {
+      this.hlsPlayer.destroy();
+      this.hlsPlayer = null;
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroy();
+    this.destroyed = true;
+  }
+}

package/src/lib/shared/component/video-player/video-player.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { VideoPlayerComponent } from './video-player.component';
+import { NzPipesModule } from 'ng-zorro-antd/pipes';
+
+@NgModule({
+  declarations: [VideoPlayerComponent],
+  imports: [CommonModule, NzPipesModule],
+  exports: [VideoPlayerComponent],
+})
+export class VideoPlayerModule {}

package/src/lib/shared/model/scale.token.ts

@@ -0,0 +1,8 @@
+import { InjectionToken } from "@angular/core";
+import { BehaviorSubject } from "rxjs";
+
+export interface ScaleConfig {
+    x: number;
+    y: number;
+  }
+export const SCALE_OBSERVER = new InjectionToken<BehaviorSubject<ScaleConfig>>('screen.scale-observer');

package/src/lib/shared/service/common.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { BaiduMapService } from 'bbj-screen-widget/core';
+import { GaodeMapService } from './gaode-map.service';
+
+/**
+ * @deprecated
+ * 用BaiduMapService和GaodeMapService替代
+ */
+@Injectable({ providedIn: 'root' })
+export class CommonService {
+  constructor(private baiduMapService: BaiduMapService, public gaodeMapService: GaodeMapService) {}
+
+  /**
+   * @deprecated
+   * 用BaiduMapService.loadMap替代
+   */
+  getMap(): Promise<any> {
+    return this.baiduMapService.loadMap();
+  }
+
+  /**
+   * @deprecated
+   * 用GaodeMapService.loadMap替代
+   */
+  loadMap(): Promise<any> {
+    return this.gaodeMapService.loadMap();
+  }
+}

package/src/lib/shared/service/file-url.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class FileUrlService {
+  getUrl(url: string) {
+    return url;
+  }
+}

package/src/lib/shared/service/gaode-map.service.ts

@@ -0,0 +1,37 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { LazyService } from '@delon/util';
+
+// (window as any)._AMapSecurityConfig = {
+//   securityJsCode: '1f288f3bf91dc24647c540ef2988ba30',
+// };
+declare const AMap;
+
+@Injectable({ providedIn: 'root' })
+export class GaodeMapService {
+  private loadAmapPromise: Promise<any>;
+
+  constructor(public lazy: LazyService, private http: HttpClient) {}
+
+  loadMap(): Promise<any> {
+    if (typeof AMap !== 'undefined') {
+      return Promise.resolve();
+    }
+    if (!this.loadAmapPromise) {
+      this.loadAmapPromise = this.lazy.loadScript(
+        'https://webapi.amap.com/maps?v=1.4.15&key=803815fd5b53fbb5bfb6656b049f1d37&plugin=AMap.ControlBar',
+      );
+    }
+    return this.loadAmapPromise;
+  }
+
+  getWeather(city): Promise<any> {
+    // 高德地图
+    return this.http
+      .jsonp(
+        `https://restapi.amap.com/v3/weather/weatherInfo?key=d633c7a49d34575ad5fb4235856f3a7b&city=${city}`,
+        'callback',
+      )
+      .toPromise();
+  }
+}

package/src/lib/shared/service/highcharts.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { LazyService } from '@delon/util';
+
+declare const Highcharts;
+
+@Injectable({ providedIn: 'root' })
+export class HighChartsService {
+  private loadHighChartsPromise: Promise<any>;
+  private loadHighCharts3DPromise: Promise<any>;
+  constructor(private lazy: LazyService) {}
+
+  load() {
+    if (typeof Highcharts !== 'undefined') {
+      return Promise.resolve();
+    }
+    if (this.loadHighChartsPromise == null) {
+      this.loadHighChartsPromise = this.lazy.loadScript('assets/js/highcharts/highcharts.js');
+    }
+    return this.loadHighChartsPromise;
+  }
+
+  async load3D() {
+    await this.load();
+    if (this.loadHighCharts3DPromise == null) {
+      this.loadHighCharts3DPromise = this.lazy.loadScript('assets/js/highcharts/highcharts-3d.js');
+    }
+    return this.loadHighCharts3DPromise;
+  }
+}

package/src/lib/shared/service/http.service.ts

@@ -0,0 +1,15 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class HttpService {
+  constructor(private http: HttpClient) {}
+
+  get(url: string, options: any) {
+    return this.http.get(url, options).toPromise();
+  }
+
+  post(url: string, body: any, options: any) {
+    return this.http.post(url, body, options).toPromise();
+  }
+}

package/src/lib/shared/util/base.util.ts

@@ -0,0 +1,4 @@
+import { v1 as uuid } from 'uuid';
+export const getUUID = () => {
+  return uuid().replace(/-/g, '');
+};

package/src/lib/shared/util/echarts.util.ts

@@ -0,0 +1,11 @@
+export function getEchartsTextStyle(font: any) {
+  const textStyle: any = {};
+  if (font) {
+    textStyle.color = font.color;
+    textStyle.fontFamily = font.family;
+    textStyle.fontWeight = font.weight;
+    textStyle.fontSize = font.size;
+    textStyle.lineHeight = font.lineHeight;
+  }
+  return textStyle;
+}

package/src/lib/shared/util/style.util.ts

@@ -0,0 +1,12 @@
+export function getFontStyle(font: any) {
+  let style: any = {};
+  if (font) {
+    if (font.size) style.fontSize = font.size + 'px';
+    if (font.family) style.fontFamily = font.family;
+    if (font.color) style.color = font.color;
+    if (font.weight) style.fontWeight = font.weight;
+    if (font.space) style.letterSpacing = font.space + 'px';
+    if (font.lineHeight) style.lineHeight = font.lineHeight + 'px';
+  }
+  return style;
+}

package/src/lib/shuffling-list/color.pipe.ts

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'bindColor',
+})
+export class ColorPipe implements PipeTransform {
+  transform(data: any, ...args: any[]): unknown {
+    if (data) {
+      const bindColor = args[0];
+      if (bindColor?.length) {
+        for (const item of bindColor) {
+          const { key, value, color } = item;
+          if (key && color && data[key] == value) {
+            return color;
+          }
+        }
+      }
+    }
+    return null;
+  }
+}

package/src/lib/shuffling-list/shuffling-list.component.html

@@ -0,0 +1,37 @@
+<ng-container *ngIf="data">
+  <div *ngIf="headDisplay" class="head" [ngStyle]="headStyle">
+    <div *ngIf="serialNumberDisplay" class="cell index-col"></div>
+    <div *ngFor="let column of columns" class="cell" [ngStyle]="column.headStyle">{{ column.title }}</div>
+  </div>
+  <div class="body" [class.carousel]="carousel" (mouseover)="mouseover()" (mouseout)="mouseout()">
+    <div class="body-scroll" [ngStyle]="tableStyle" (mousewheel)="onMousewheel($event)">
+      <ng-template #list>
+        <div
+          *ngFor="let row of content; let idx = index"
+          class="row"
+          [style.backgroundColor]="idx % 2 == 0 ? oddBackground : evenBackground"
+          [ngStyle]="rowStyle"
+          [style.color]="row | bindColor: bindColor"
+          (click)="onClick(row)"
+        >
+          <div *ngIf="serialNumberDisplay" class="cell index-col">
+            {{ idx + 1 }}
+          </div>
+          <ng-container *ngFor="let column of columns; let index = index">
+            <div class="cell" [ngStyle]="column.cellStyle" [title]="row[column.index]">
+              <span
+                *ngIf="row[column.index] != null"
+                [class.clickable]="column.clickable"
+                (click)="onCellClick(column, row, $event)"
+                [innerHTML]="row[column.index] | nzSafeNull | nzSanitizer: 'html'"
+              ></span>
+            </div>
+          </ng-container>
+        </div>
+        <div *ngIf="placeholder" [style.height.px]="placeholder"></div>
+      </ng-template>
+      <ng-container [ngTemplateOutlet]="list"></ng-container>
+      <ng-container *ngIf="_carousel" [ngTemplateOutlet]="list"></ng-container>
+    </div>
+  </div>
+</ng-container>