bbj-screen-widget 2.4.61 → 2.4.62

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,274 @@
+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

@@ -0,0 +1,21 @@
+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

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

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

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

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,127 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,5 @@
+<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

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

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,84 @@
+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

@@ -0,0 +1,14 @@
+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

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

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

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

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

@@ -0,0 +1,25 @@
+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();
+  });
+});