bbj-screen-widget 2.4.62 → 2.4.63

package/src/lib/line-light-flow/line-light-flow.component.spec.ts

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

package/src/lib/line-light-flow/line-light-flow.component.ts

@@ -1,274 +0,0 @@
-import { AfterViewInit, Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
-import { Property, Widget } from 'bbj-widget-base';
-
-@Component({
-  selector: 'sc-line-light-flow',
-  templateUrl: './line-light-flow.component.html',
-  styleUrls: ['./line-light-flow.component.css'],
-})
-@Widget('光线特效', {
-  group: 'mipAnim',
-})
-export class LineLightFlowComponent implements OnInit, AfterViewInit {
-  @Property('线条颜色', {
-    ui: {
-      widget: 'myColor',
-    },
-  })
-  lineColor = '#004CB3';
-  @Property('线条阴影', {
-    ui: {
-      widget: 'myColor',
-    },
-  })
-  lineshadowColor = 'rgba(0, 193, 220, 1)';
-
-  @Property('高亮颜色', {
-    ui: {
-      widget: 'myColor',
-    },
-  })
-  lineHightLightColor = '#8ED6FF';
-
-  @Property('中间间距', {
-    type: 'number'
-  })
-  distance = 10;
-  @Property('上边距', {
-    type: 'number'
-  })
-  topDistance = 0;
-
-  @ViewChild('lineCanvas') lineCanvas: ElementRef;
-  opt: any;
-
-  @ViewChild('canvasBox') canvasBox: ElementRef;
-  resizeTimeout: any;
-  constructor() {
-
-  }
-
-  @HostListener('window:resize')
-  resize() {
-    if (this.resizeTimeout) {
-      clearTimeout(this.resizeTimeout);
-    }
-    this.resizeTimeout = setTimeout(() => {
-      this.reload();
-      this.resizeTimeout = null;
-    }, 100);
-  }
-  ngAfterViewInit(): void {
-    this.reload();
-  }
-
-  reload() {
-    this.opt = {};
-    this.opt.currentIndex = 1;
-    this.opt.canvas = this.lineCanvas.nativeElement;
-    this.initOpt();
-    this._initCanvas(this.opt.canvas, this.opt.width, this.opt.height);
-    this._createPattern(this.opt.canvas);
-    this.draw(0);
-
-  }
-
-  ngOnInit(): void {
-    // this.opt = {};
-    // this.opt.currentIndex = 1;
-    // this.opt.canvas = this.lineCanvas.nativeElement;
-
-    // this.initOpt();
-    // this._initCanvas(this.opt.canvas, this.opt.width, this.opt.height);
-    // this._createPattern(this.opt.canvas);
-    // this.draw(0);
-  }
-
-  initOpt() {
-    const d = this.distance || 100;
-    const innerW = this.canvasBox.nativeElement.offsetWidth;
-    // const d = Math.round(innerW * (Number(this.distance) || 10) / 100); // 间距
-    console.log(innerW, innerW * (Number(this.distance)) / 100, '间距', d)
-    this.opt = {
-        ...this.opt,
-        animating: true,
-        distance: d,
-        width: innerW,
-        tabHeight: 40,
-        height: 60,
-        curDisX: 0,
-        currentIndex: 0,
-        avgSpeed: this.calcAVGSpeed(d * 2),
-        tabWidthList: [
-          Math.round(innerW / 2) - d / 2,
-          Math.round(innerW / 2) + d / 2,
-        ]
-      };
-  }
-  // 计算速度
-  calcAVGSpeed(a) {
-    const [j, k, l] = [0.85, 10, 4];
-    let b = (l * j * a + k * (1 - j) * a) / (k * l * 20);
-    return (b = Math.max(Math.abs(b), 2.5) * Math.sign(b)), b;
-  }
-  // 获取当前速度
-  getCurSpeed(a, b) {
-    const [j, k, l] = [0.85, 10, 4];
-    const c = Math.abs(a) > Math.abs(j * b) ? l * this.opt.avgSpeed : k * this.opt.avgSpeed;
-    return c;
-  }
-  // 生成曲线
-  _calCurve(a, b, c, d, e, f) {
-    // console.log(a + f,b,c-f,d,c,d);
-    e.bezierCurveTo(a + f, b, c - f, d, c, d);
-  }
-
-  // 初始化画布
-  _initCanvas(canvas, width, height) {
-    const devicePixelRatio = window.devicePixelRatio;
-    const canvasObj = canvas.getContext('2d');
-    canvas.width = width * devicePixelRatio;
-    canvas.height = height * devicePixelRatio;
-    canvas.style.width = width + 'px';
-    canvas.style.height = height + 'px';
-    canvasObj.scale(devicePixelRatio, devicePixelRatio);
-  }
-
-  // 创建遮盖蒙版
-  _createPattern(a) {
-    const [b, c, d] = [140, 23, 1];
-    let e = document.createElement('canvas');
-    (e.width = b), (e.height = c), (e.style.width = b / d + 'px'), (e.style.height = c / d + 'px');
-    const f = e.getContext('2d');
-    // 缩放 宽高 100%
-    f.scale(d, d);
-    f.lineWidth = 0.4;
-    for (let g = 3, h = 0.8, j = 1; 2 > j; j++) {
-      // 设置或返回用于笔触的颜色、渐变或模式
-      f.strokeStyle = 'RGBA(0, 0, 0,0)';
-      // 开始一条路径
-      f.beginPath();
-      // 把路径移动到画布中的指定点，不创建线条
-      f.moveTo(0, j * g);
-      // 添加一个新点，然后在画布中创建从该点到最后指定点的线条
-      f.lineTo(b, j * g);
-      // 绘制已定义的路径
-      f.stroke();
-      // 创建从当前点回到起始点的路径
-      f.closePath();
-      if (10 < j) { h -= 0.1; }
-    }
-    const i = a.getContext('2d').createPattern(e, 'repeat-x');
-    (this.opt.pattern = i), (e = null);
-  }
-
-
-  // 高亮
-  _drawHightlight(a) {
-    // a = 0
-    const opt = this.opt;
-    const b = opt.canvas.getContext('2d');
-    const d = 0.3;
-    // clearRect 在给定的矩形内清除指定的像素,这里清完了
-    b.clearRect(0, 0, 2 * opt.width, 2 * opt.height);
-    b.shadowColor = this.lineshadowColor;
-    b.shadowBlur = 5;
-    b.strokeStyle = this.lineColor;
-    b.lineWidth = 0.8;
-    b.fillStyle = 'none';
-    this._draw(b, false);
-    // 这里绘制了外围边框线条
-    // return false;
-    const e = b.createLinearGradient(0, 0, opt.width, opt.height);
-    const f = a - d;
-    e.addColorStop(Math.min(1, Math.max(0, 0 + f)), 'rgba(0,0,0,0)');
-    e.addColorStop(Math.min(1, Math.max(0, 0 + f + 0.1)), this.lineHightLightColor);
-    e.addColorStop(Math.min(1, 0 + f + d), this.lineHightLightColor);
-    e.addColorStop(Math.min(1, 0 + f + d + 0.1), 'rgba(0,0,0,0)');
-    e.addColorStop(1, 'rgba(0,0,0,0)');
-    b.lineWidth = 1.5;
-    b.strokeStyle = e;
-    b.fillStyle = opt.pattern;
-    this._draw(b, true);
-  }
-
-  draw(a) {
-    // console.log(a);
-    this._drawHightlight(a);
-    // return false;
-
-    this.opt.timer = requestAnimationFrame(() => {
-      // console.log(a);
-      this.draw((a + 0.005) % 1.6);
-    });
-  }
-
-  _draw(canvasObj, trueorfalse) {
-    const opt = this.opt;
-    const tableHeight = opt.tabHeight;
-    const [f, g, i, j, k] = [0, 110, 40, 0.5, 2.5];
-    let l = 0;
-    if (
-      (canvasObj.beginPath(),
-        canvasObj.moveTo(-50, -15),
-        canvasObj.lineTo(-50, j),
-        opt.animating)
-    ) {
-      const m = this.getCurSpeed(opt.curDisX, opt.distance);
-      l = Math.min(Math.abs(opt.distance), Math.abs(opt.curDisX + m)) * Math.sign(m);
-    }
-    if (
-      (canvasObj.lineTo(
-        f + opt.tabWidthList[0] + l - g / 2,
-        k + j
-      ),
-        this._calCurve(
-          f + opt.tabWidthList[0] + l - g / 2,
-          k + j,
-          f + opt.tabWidthList[0] + l + g / 2,
-          tableHeight + j,
-          canvasObj,
-          i
-        ),
-        opt.animating)
-    ) {
-      const o =
-        opt.tabWidthList[opt.nextIndex + 1] -
-        opt.tabWidthList[opt.nextIndex];
-      canvasObj.lineTo(
-        f + opt.tabWidthList[0] + o + l - g / 2,
-        tableHeight + j
-      ),
-        this._calCurve(
-          f + opt.tabWidthList[0] + o + l - g / 2,
-          tableHeight + j,
-          f + opt.tabWidthList[0] + o + l + g / 2,
-          k + j,
-          canvasObj,
-          i
-        );
-    } else {
-      // lineTO添加一个新点 宽度长度
-      canvasObj.lineTo(
-        f + opt.tabWidthList[1] + l - g / 2,
-        tableHeight + j
-      );
-      this._calCurve(
-        f + opt.tabWidthList[1] + l - g / 2,
-        tableHeight + j,
-        f + opt.tabWidthList[1] + l + g / 2,
-        k + j,
-        canvasObj,
-        i
-      );
-    }
-
-    canvasObj.lineTo(opt.width + 10, j);
-    canvasObj.lineTo(opt.width + 10, -15);
-    canvasObj.closePath();
-    canvasObj.stroke();
-    if (trueorfalse) { canvasObj.fill(); }
-    if (opt.animating && trueorfalse) { opt.curDisX = l; }
-    if (Math.abs(l) >= Math.abs(opt.distance)) { opt.animating = false; }
-  }
-}

package/src/lib/line-light-flow/line-light-flow.module.ts

@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
-import { LineLightFlowComponent } from './line-light-flow.component';
-
-
-
-@NgModule({
-  declarations: [
-    LineLightFlowComponent
-  ],
-  imports: [
-    CommonModule,
-    WidgetBaseModule
-  ]
-})
-export class LineLightFlowModule {
-  constructor(widgetService: WidgetService) {
-    widgetService.register(LineLightFlowComponent);
-  }
- }

package/src/lib/liquid-fill/liquid-fill.component.html

@@ -1 +0,0 @@
-<div echarts [options]="chartOption" class="demo-chart" [initOpts]="{ renderer: 'svg' }"></div>

package/src/lib/liquid-fill/liquid-fill.component.less

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

package/src/lib/liquid-fill/liquid-fill.component.spec.ts

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

package/src/lib/liquid-fill/liquid-fill.component.ts

@@ -1,127 +0,0 @@
-import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { Property, Widget, Data } from 'bbj-widget-base';
-
-import 'echarts-liquidfill';
-@Component({
-  selector: 'sc-liquid-fill',
-  templateUrl: './liquid-fill.component.html',
-  styleUrls: ['./liquid-fill.component.less'],
-})
-@Widget('水球图', {
-  group: 'otherChart',
-  image: 'assets/img/screen/liquidFill.png',
-  icon: 'icontubiao',
-})
-export class LiquidFillComponent implements OnInit,OnChanges {
-
-  @Property('字体', { ui: { widget: 'myFont' } })
-  font: any = {
-    family: '',
-    color: '#294D99',
-    weight: 'normal',
-    size: 40,
-    space: 0,
-    lineHeight: '',
-  };
-  @Property('字体覆盖', {
-    ui: {
-      widget: 'myColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
-    },
-  })
-  cover = '#fff';
-  @Property('背景色', {
-    ui: {
-      widget: 'myColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
-    },
-  })
-  bg = '#DEDEDE';
-  @Property('边框色', {
-    ui: {
-      widget: 'myColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
-    },
-  })
-  border = '#DEDEDE';
-  @Property('水波色系', {
-    ui: {
-      widget: 'seriesColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
-    },
-  })
-  seriesColor = ['#1DE2C4', '#008FE9'];
-  @Property('水波层数', {
-    ui: { widget: 'myRange', min: 1, max: 5, step: 1 },
-  })
-  level = 2;
-  @Property('形状', {
-    ui: { widget: 'select' },
-    enum: [
-      { label: '圆形', value: 'circle' },
-      { label: '矩形', value: 'rect' },
-      { label: '圆角矩形', value: 'roundRect' },
-      { label: '三角形', value: 'triangle' },
-      { label: '菱形', value: 'diamond' },
-      { label: '大头针', value: 'pin' },
-      { label: '箭头', value: 'arrow' },
-    ],
-  })
-  shape = 'circle';
-  @Property('动画', {
-    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
-  })
-  waveAnimation = true;
-  image: string;
-  constructor() {}
-  @Data({
-    properties: { value: { type: 'number', title: '值' } },
-  })
-  _data: any[] = [{ value: 0.48 }];
-  chartOption: any = null;
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes._data) {
-      const value = this._data[0].value;
-      const style = {
-        color: this.font.color,
-        fontFamily: this.font.family,
-        fontWeight: this.font.weight,
-        fontSize: this.font.size,
-        lineHeight: this.font.lineHeight,
-      };
-
-      const data = [];
-      for (let i = 0; i < this.level; i++) {
-        data.push({
-          value,
-          label: { normal: { textStyle: style, insideColor: this.cover } },
-        });
-      }
-
-      if (this.bg == '') {
-        this.bg = '#ffffff00';
-      }
-      this.chartOption = {
-        series: [
-          {
-            type: 'liquidFill',
-            data,
-            radius: '80%',
-            shape: this.shape,
-            waveAnimation: this.waveAnimation,
-            backgroundStyle: {
-              borderColor: this.border,
-              color: this.bg,
-            },
-            color: this.seriesColor,
-            outline: {
-              show: false,
-            },
-          },
-        ],
-      };
-    }
-  }
-  ngOnInit() {}
-}

package/src/lib/liquid-fill/liquid-fill.module.ts

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

package/src/lib/marquee/marquee.component.html

@@ -1,5 +0,0 @@
-<marquee *ngIf="display" [ngStyle]="style" [behavior]="behavior" [direction]="direction" align="middle" [attr.scrollamount]="scrollamount">
-  <p *ngFor="let row of data" [innerHTML]="row?.value">
-    <!-- {{ row?.value }} -->
-  </p>
-</marquee>

package/src/lib/marquee/marquee.component.less

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

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

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

package/src/lib/marquee/marquee.component.ts

@@ -1,84 +0,0 @@
-import { Component, ElementRef, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
-import { Property, Widget, Data } from 'bbj-widget-base';
-
-@Component({
-  selector: 'sc-marquee',
-  templateUrl: './marquee.component.html',
-  styleUrls: ['./marquee.component.less'],
-})
-@Widget('跑马灯', { group: 'scrollText', icon: 'iconwenzi' })
-export class MarqueeComponent implements OnInit, OnChanges {
-  @Property('背景', {
-    ui: {
-      widget: 'myColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
-    },
-  })
-  background: string;
-  @Property('字体', { ui: { widget: 'myFont' } })
-  font: any = { family: '', color: '#ffffff', weight: 'normal', size: 12, space: 0, lineHeight: '' };
-  @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('动画', {
-    enum: [
-      { label: '从下向上滚动', value: 'up' },
-      { label: '从上向下滚动', value: 'down' },
-      { label: '从左向右滚动', value: 'right' },
-      { label: '从右向左滚动', value: 'left' },
-    ],
-    ui: { widget: 'select' },
-  })
-  direction = 'left';
-  @Property('速度', { ui: { widget: 'myRange', min: 0, max: 20, step: 1 } })
-  scrollamount = 2;
-  @Property('轨迹', {
-    enum: [
-      { label: '循环绕行', value: 'scroll' },
-      { label: '播放一次', value: 'slide' },
-      { label: '来回往复运动', value: 'alternate' },
-    ],
-    ui: { widget: 'select' },
-  })
-  behavior = 'scroll';
-
-  @Data({
-    properties: {
-      value: { type: 'string', title: '值' },
-    },
-  })
-  data: any[] = [{ value: '跑马灯' }];
-  style: any;
-  display = true;
-
-  constructor() {}
-
-  ngOnInit() {
-    this.style = {
-      backgroundColor: this.background,
-      fontSize: this.font.size + 'px',
-      fontFamily: this.font.family,
-      color: this.font.color,
-      fontWeight: this.font.weight,
-      letterSpacing: this.font.space + 'px',
-      lineHeight: this.font.lineHeight + 'px',
-      opacity: this.opacity,
-      boxShadow: this.shadow.color + ' ' + this.shadow.X + 'px ' + this.shadow.Y + 'px ' + this.shadow.Z + 'px',
-    };
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.data) {
-      this.reset();
-    }
-  }
-
-  /**
-   * 数据改变之后重置跑马灯
-   */
-  reset() {
-    this.display = false;
-    setTimeout(() => (this.display = true));
-  }
-}

package/src/lib/marquee/marquee.module.ts

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

package/src/lib/mip-anim/mip-anim.component.html

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

package/src/lib/mip-anim/mip-anim.component.less

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

package/src/lib/mip-anim/mip-anim.component.spec.ts

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