bbj-screen-widget 2.4.62 → 2.4.63

package/src/lib/audio/audio.component.ts

@@ -1,167 +0,0 @@
-import { Component, ElementRef, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core';
-import { LazyService } from '@delon/util';
-import { Widget, Property, Data } from 'bbj-widget-base';
-import { FileUrlService } from '../shared/service/file-url.service';
-declare const flvjs;
-@Component({
-  selector: 'sc-audio',
-  templateUrl: './audio.component.html',
-  styleUrls: ['./audio.component.less'],
-})
-@Widget('音频', { group: 'audio', icon: 'icontupian' })
-export class AudioComponent implements OnInit, OnChanges{
-  @Property('', {
-    min: 1,
-    type: 'string',
-    ui: { widget: 'radio', spanLabel: 0, spanControl: 24 },
-    enum: [
-      { value: 'video', label: '视频' },
-      { value: 'audio', label: '音频' },
-      { value: 'auto', label: '自动' },
-    ],
-  })
-  type = 'video';
-  @Property('', {
-    min: 1,
-    ui: {
-      widget: 'myUploadAudio',
-      spanLabel: 0,
-      spanControl: 24,
-      list: [
-        { name: '无', value: null },
-        { name: '测试一号', value: 'https://xiche.oss-cn-beijing.aliyuncs.com/video/20180417154421.mp4' },
-        { name: '测试二号', value: 'https://xiche.oss-cn-beijing.aliyuncs.com/video/20180508102521.mp4' },
-      ],
-    },
-  })
-  src: string;
-  @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 };
-  @Data({
-    properties: {
-      src: { title: '视频/音频地址', type: 'string' },
-    },
-  })
-  data: any[];
-  _src: string;
-
-  @Property('视频格式', {
-    enum: [
-      { label: 'MP4', value: 'mp4' },
-      { label: 'flv', value: 'flv' },
-    ],
-    ui: { visibleIf: { type: ['video'] }, widget: 'select' },
-  })
-  videoType: string;
-
-  @Property('是否有声音', { ui: { visibleIf: { videoType: ['flv'] } } })
-  hasAudio: boolean;
-  style: any;
-  @ViewChild('video')
-  video: ElementRef;
-  flvPlayer: any;
-  obj: any;
-  // loadFlvPromise: Promise<any>;
-  _type: string;
-  // destroyed: boolean;
-  constructor( private fileUrlService: FileUrlService) {}
-
-  ngOnInit() {}
-
-  ngOnChanges(changes: SimpleChanges): void {
-    this.style = {
-      opacity: this.opacity,
-      boxShadow: this.shadow.color + ' ' + this.shadow.X + 'px ' + this.shadow.Y + 'px ' + this.shadow.Z + 'px',
-    };
-    if (changes.type || changes.videoType || changes.src || changes.data) {
-      this.reset();
-    }
-  }
-
-  async reset() {
-    this._src = null;
-    let url: string;
-    if (this.data && this.data.length && this.data[0].src) {
-      url = this.data[0].src;
-    } else {
-      url = this.src;
-    }
-    url = this.fileUrlService.getUrl(url);
-    if (this.type === 'auto' && url && url.includes('.')) {
-      const ext = url.substring(url.lastIndexOf('.') + 1);
-      switch (ext) {
-        case 'png':
-        case 'jpg':
-          this._type = 'image';
-          break;
-        case 'mp4':
-          this._type = 'video';
-          break;
-        case 'mp3':
-          this._type = 'audio';
-          break;
-      }
-    } else {
-      this._type = this.type;
-      if (this._type === 'video' && this.videoType === 'flv') {
-        this._type = 'flv';
-      }
-    }
-    this._src = url;
-    // if (url) {
-    //   if (this._type === 'video' && this.videoType === 'flv') {
-    //     const obj = new Object();
-    //     this.obj = obj;
-    //     await this.loadFlv();
-    //     if (this.obj === obj && !this.destroyed) {
-    //       this.destroyFlv();
-    //       // 防止异步操作先后顺序问题
-    //       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);
-    //       console.log('load');
-    //       this.flvPlayer.load();
-    //     }
-    //   } else {
-    //     this._src = url;
-    //   }
-    // }
-  }
-
-  // loadFlv() {
-  //   if (this.loadFlvPromise == null) {
-  //     this.loadFlvPromise = this.lazy.loadScript('assets/js/flv.min.js');
-  //   }
-  //   return this.loadFlvPromise;
-  // }
-
-  // destroyFlv() {
-  //   if (this.flvPlayer) {
-  //     console.log('destroy');
-  //     this.flvPlayer.unload();
-  //     this.flvPlayer.detachMediaElement();
-  //     this.flvPlayer.destroy();
-  //     this.flvPlayer = null;
-  //   }
-  // }
-
-  // ngOnDestroy(): void {
-  //   this.destroyFlv();
-  //   this.destroyed = true;
-  // }
-}

package/src/lib/audio/audio.module.ts

@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AudioComponent } from './audio.component';
-import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
-import { VideoPlayerModule } from '../shared/component/video-player/video-player.module';
-
-@NgModule({
-  declarations: [AudioComponent],
-  imports: [CommonModule, WidgetBaseModule, VideoPlayerModule],
-})
-export class AudioModule {
-  constructor(widgetService: WidgetService) {
-    widgetService.register(AudioComponent);
-  }
-}

package/src/lib/background/background.component.html

@@ -1 +0,0 @@
-<div [ngStyle]="style" [style.backgroundImage]="'url(' + image + ')'" class="background"></div>

package/src/lib/background/background.component.less

@@ -1,6 +0,0 @@
-.background {
-  width: 100%;
-  height: 100%;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-}

package/src/lib/background/background.component.spec.ts

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

package/src/lib/background/background.component.ts

@@ -1,33 +0,0 @@
-import { Component, ElementRef, HostBinding, HostListener, OnInit } from '@angular/core';
-import { Property, Widget } from 'bbj-widget-base';
-
-@Component({
-  selector: 'sc-background',
-  templateUrl: './background.component.html',
-  styleUrls: ['./background.component.less'],
-})
-@Widget('图片', { group: 'background', icon: 'iconbeijing' })
-export class BackgroundComponent implements OnInit {
-  @Property('', { min: 1, ui: { widget: 'myUpload', spanLabel: 0, spanControl: 24 } })
-  image: string;
-  @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 };
-  style: any;
-  type: string;
-  @Property('响应鼠标事件', { type: 'boolean', default: true })
-  pointerEvents = false;
-
-  constructor(private ele: ElementRef) {}
-
-  ngOnInit() {
-    this.style = {
-      opacity: this.opacity,
-      boxShadow: this.shadow.color + ' ' + this.shadow.X + 'px ' + this.shadow.Y + 'px ' + this.shadow.Z + 'px',
-    };
-    if (this.pointerEvents === false) {
-      this.ele.nativeElement.style.pointerEvents = 'none';
-    }
-  }
-}

package/src/lib/background/background.module.ts

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

package/src/lib/bar-chart-three-d/bar-chart-three-d.component.html

@@ -1 +0,0 @@
-<div *ngIf="chartOption" echarts [options]="chartOption" class="demo-chart" (chartClick)="onChartClick($event)"></div>

package/src/lib/bar-chart-three-d/bar-chart-three-d.component.less

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

package/src/lib/bar-chart-three-d/bar-chart-three-d.component.spec.ts

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

package/src/lib/bar-chart-three-d/bar-chart-three-d.component.ts

@@ -1,271 +0,0 @@
-import { Component, OnChanges, OnInit, SimpleChanges, EventEmitter } from '@angular/core';
-import { Property, Widget, Data, Drill, DataOutput } from 'bbj-widget-base';
-import { BasicLineChartComponent } from '../basic-line-chart/basic-line-chart.component';
-import 'echarts-gl';
-@Component({
-  selector: 'sc-bar-chart-three-d',
-  templateUrl: './bar-chart-three-d.component.html',
-  styleUrls: ['./bar-chart-three-d.component.less'],
-})
-@Widget('3D柱状图', {
-  group: 'barChart',
-  image: 'assets/img/screen/basic-bar-chart.png',
-  icon: 'icontubiao',
-})
-export class BarChartThreeDComponent extends BasicLineChartComponent implements OnInit, OnChanges {
-  @Property('类型', { ui: { hidden: true } })
-  type = 'basic';
-  @Property('图表样式', {
-    ui: {
-      widget: 'myImageExample',
-      spanLabel: 24,
-      spanControl: 24,
-      reset: ['barColor'],
-      example: [
-        {
-          background: 'assets/img/screen/3d1.png',
-          data: { barColor: ['#FAA736'] },
-        },
-        {
-          background: 'assets/img/screen/3d2.png',
-          data: { barColor: ['#00D190'] },
-        },
-        {
-          background: 'assets/img/screen/3d3.png',
-          data: { barColor: ['#3285FF'] },
-        },
-        {
-          background: 'assets/img/screen/3d4.png',
-          data: { barColor: ['#8934F8'] },
-        },
-      ],
-    },
-  })
-  example: any;
-  @Property('系列颜色', {
-    ui: {
-      widget: 'seriesColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
-    },
-  })
-  barColor = ['#3285FF', '#00D2FD'];
-  @Property('字体', { ui: { widget: 'myFont' } })
-  font: any = {
-    family: '',
-    color: '#FFFFFF',
-    weight: 'normal',
-    size: 12,
-    space: 0,
-    lineHeight: 12,
-  };
-  @Property('边距', { ui: { widget: 'myGrid' } })
-  grid: any = {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-  };
-  // @Property('轴单位', { ui: { widget: 'myUnit' } })
-  // unit = { x: '', y: '' };
-  @Property('y轴单位', { type: 'string' })
-  yUnit = '';
-  @Property('x轴单位', { type: 'string' })
-  xUnit = '';
-  @Property('y轴最大')
-  yMax: number;
-  @Property('网络线', {
-    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
-  })
-  netLine = false;
-  @Property('标签', {
-    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
-  })
-  label = false;
-  @Property('自动旋转', {
-    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
-  })
-  autoRotate = false;
-  @Property('柱子宽度', {
-    ui: { widget: 'myRange', min: 100, max: 1000, step: 100 },
-  })
-  boxWidth = 200;
-  @Property('柱子深度', {
-    ui: { widget: 'myRange', min: 10, max: 100, step: 10 },
-  })
-  boxDepth = 20;
-
-  @Data({
-    properties: {
-      x: { type: 'string', title: '类目' },
-      y: { type: 'number', title: '值' },
-      z: { type: 'string', title: '系列' },
-    },
-  })
-  _data = [
-    { x: '一月', y: 10, s: '收入' },
-    { x: '二月', y: 20, s: '收入' },
-    { x: '三月', y: 25, s: '收入' },
-    { x: '四月', y: 35, s: '收入' },
-    { x: '五月', y: 27, s: '收入' },
-    { x: '六月', y: 28, s: '收入' },
-    { x: '一月', y: 18, s: '支出' },
-    { x: '二月', y: 28, s: '支出' },
-    { x: '三月', y: 32, s: '支出' },
-    { x: '四月', y: 48, s: '支出' },
-    { x: '五月', y: 20, s: '支出' },
-    { x: '六月', y: 17, s: '支出' },
-  ];
-  @Drill()
-  @DataOutput(['x', 'z'])
-  dataClick = new EventEmitter<any>();
-  sData = [];
-  series = [];
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes._data) {
-      this.reloadData();
-
-      const style = {
-        color: this.font.color,
-        fontFamily: this.font.family,
-        fontWeight: this.font.weight,
-        fontSize: this.font.size,
-        margin: this.font.lineHeight,
-      };
-
-      this.chartOption = {
-        xAxis3D: {
-          name: this.xUnit,
-          nameTextStyle: style,
-          type: 'category',
-          splitLine: {
-            show: false,
-          },
-          data: this.xData,
-        },
-        yAxis3D: {
-          name: '',
-          type: 'category',
-          data: [],
-        },
-        zAxis3D: {
-          name: this.yUnit,
-          nameTextStyle: style,
-          type: 'value',
-          splitLine: {
-            show: this.netLine,
-            lineStyle: {
-              width: 1,
-            },
-          },
-        },
-        grid3D: {
-          top: this.grid.top,
-          right: this.grid.right,
-          left: this.grid.left,
-          bottom: this.grid.bottom,
-          boxWidth: this.boxWidth,
-          boxDepth: this.boxDepth,
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            lineStyle: {
-              color: this.font.color,
-              width: 1,
-            },
-          },
-          axisLabel: {
-            textStyle: style,
-          },
-          viewControl: {
-            alpha: 10,
-            beta: 0,
-            autoRotate: this.autoRotate,
-            zoomSensitivity: 0,
-            autoRotateAfterStill: 15,
-            distance: 250,
-          },
-        },
-        color: ['#45C1FC', '#00A1FB', '#0076B7', '#004D7E', '#003560', '#001736'],
-        series: [],
-      };
-      if (this.type === '3D') {
-        this.series = [this.series[0]];
-      }
-      for (let i = 0; i < this.series.length; i++) {
-        this.chartOption.series.push({
-          type: 'bar3D',
-          itemStyle: {},
-          data: [],
-          shading: 'lambert',
-          stack: 'stack',
-          label: {
-            show: this.label,
-            textStyle: style,
-          },
-          emphasis: {
-            label: {
-              textStyle: {
-                fontSize: this.font.size,
-                color: this.font.color,
-                fontWeight: this.font.weight,
-                fontFamily: this.font.family,
-                lineHeight: this.font.lineHeight,
-                borderWidth: 0,
-                borderColor: '#00000000',
-              },
-            },
-          },
-        });
-        this.chartOption.series[i].itemStyle.color = this.barColor[i];
-        const temp = [];
-        this._data.forEach((record) => {
-          if (this.series[i] === record.s) {
-            temp.push(record);
-          }
-        });
-        this.xData.forEach((x) => {
-          let count = 0;
-          temp.forEach((t) => {
-            if (t.x === x) {
-              count++;
-            }
-          });
-          if (count === 0) {
-            this._data.push({ x, y: 0, s: this.series[i] });
-          }
-        });
-        this._data.sort((prev, next) => {
-          return this.xData.indexOf(prev.x) - this.xData.indexOf(next.x);
-        });
-        this._data
-          .filter((els) => els.s === this.series[i])
-          .forEach((el) => {
-            for (let j = 0; j < this.xData.length; j++) {
-              if (this.xData[j] === el.x) {
-                this.chartOption.series[i].data.push([j, 0, el.y]);
-              }
-            }
-          });
-      }
-    }
-  }
-  reloadData() {
-    if (this._data[0]) {
-      for (let i = 0; i < this._data.length; i++) {
-        if (this._data[i].s) {
-          this.series[i] = this._data[i].s;
-        }
-      }
-      this.uniqueData(this.series);
-    }
-    for (let i = 0; i < this._data.length; i++) {
-      this.xData[i] = this._data[i].x;
-    }
-    this.uniqueData(this.xData);
-  }
-  ngOnInit() {}
-  onChartClick(event) {
-    this.dataClick.emit({ x: event.name, s: event.seriesName });
-  }
-}

package/src/lib/bar-chart-three-d/bar-chart-three-d.module.ts

@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { NgxEchartsModule } from 'ngx-echarts';
-import { BarChartThreeDComponent } from './bar-chart-three-d.component';
-import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
-
-@NgModule({
-  declarations: [BarChartThreeDComponent],
-  imports: [CommonModule, WidgetBaseModule, NgxEchartsModule],
-})
-export class BarChartThreeDModule {
-  constructor(widgetService: WidgetService) {
-    widgetService.register(BarChartThreeDComponent);
-  }
-}

package/src/lib/basic-bar-chart/basic-bar-chart.component.html

@@ -1,7 +0,0 @@
-<div
-  echarts
-  [options]="chartOption"
-  style="height: 100%"
-  (chartClick)="onChartClick($event)"
-  [initOpts]="{ renderer: 'svg' }"
-></div>

package/src/lib/basic-bar-chart/basic-bar-chart.component.less

@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  width: 100%;
-}

package/src/lib/basic-bar-chart/basic-bar-chart.component.spec.ts

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