bbj-screen-widget 2.4.61 → 2.4.62

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

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { Widget, Property } from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-mip-anim',
+  templateUrl: './mip-anim.component.html',
+  styleUrls: ['./mip-anim.component.less']
+})
+@Widget('动态图', { group: 'mipAnim', icon: 'icontupian' })
+export class MipAnimComponent implements OnInit {
+  @Property('图片', { ui: { widget: 'myPicture' } })
+  image: string;
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/mip-anim/mip-anim.module.ts

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

package/src/lib/multi-title-gauge/multi-title-gauge.component.html

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

package/src/lib/multi-title-gauge/multi-title-gauge.component.less

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

package/src/lib/multi-title-gauge/multi-title-gauge.component.spec.ts

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

package/src/lib/multi-title-gauge/multi-title-gauge.component.ts

@@ -0,0 +1,231 @@
+import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Data, Property, Widget } from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-multi-title-gauge',
+  templateUrl: './multi-title-gauge.component.html',
+  styleUrls: ['./multi-title-gauge.component.less']
+})
+@Widget('多标题仪表盘', {
+  group: 'otherChart',
+  image: 'assets/img/screen/multiTitleGauge.png', 
+  icon: 'icontubiao',
+})
+export class MultiTitleGaugeComponent implements OnInit, OnChanges {
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = {
+    family: '',
+    color: '#FFFFFF',
+    weight: 'normal',
+    size: 12,
+    space: 0,
+    lineHeight: 12,
+  };
+
+  @Property('字体', { ui: { widget: 'myFont' } })
+  detailFont: any = {
+    family: '',
+    color: '#FFFFFF',
+    weight: 'normal',
+    size: 14,
+    space: 0,
+    lineHeight: 12,
+  };
+  @Property('百分号', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  percent = false;
+  @Property('类别颜色', {
+    ui: {
+      widget: 'seriesColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+      visibleIf: { colorSwitch: [true] }
+    },
+  })
+  colors = ['#058DC7', '#50B432', '#ED561B', '#DDDF00',
+    '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'];
+  @Property('起始角度', {
+    ui: { widget: 'myRange', min: 90, max: 360, step: 1 },
+  })
+  startAngle = 225;
+  @Property('结束角度', {
+    ui: { widget: 'myRange', min: -90, max: 90, step: 1 },
+  })
+  endAngle = -45;
+  @Property('标签', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  label = false;
+  @Property('最大值', {
+    ui: { widget: 'number' },
+  })
+  max = 100;
+  @Property('最小值', {
+    ui: { widget: 'number' },
+  })
+  min = 0;
+  @Property('指针长度', {
+    ui: { widget: 'number' },
+  })
+  pointerLength = 80;
+  @Property('环宽', {
+    ui: { widget: 'number' },
+  })
+  width = 12;
+  @Property('显示指针', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  showPointer = true;
+  @Property('显示刻度', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  showScale = true;
+  image: string;
+  chartOption: any = {};
+  @Data({
+    properties: {
+      name: { type: 'string', title: '文字' },
+      value: { type: 'number', title: '值' },
+    },
+  })
+  _data = [
+    { name: '速度', value: 48 },
+    { name: '温度', value: 20 }
+  ];
+
+  constructor() { }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes._data) {
+      const style = {
+        color: this.font.color,
+        fontFamily: this.font.family,
+        fontWeight: this.font.weight,
+        fontSize: this.font.size,
+        lineHeight: this.font.lineHeight,
+      };
+
+      // const color = [];
+      // const color1 = [];
+      // let seriesColor;
+      // if (this.seriesColor && this.seriesColor.value) {
+      //   seriesColor = this.seriesColor.value;
+      // } else {
+      //   seriesColor = this.seriesColor;
+      // }
+      // for (let i = 0; i < seriesColor.length; i++) {
+      //   color.push({
+      //     type: 'linear',
+      //     x: 0,
+      //     y: 0,
+      //     x2: 1,
+      //     y2: 0,
+      //     global: false,
+      //     colorStops: [
+      //       { offset: 0, color: seriesColor[i][0] },
+      //       { offset: 1, color: seriesColor[i][1] },
+      //     ],
+      //   });
+      // }
+      // let count = 1;
+      // if (seriesColor.length > 1) {
+      //   count = 1 / seriesColor.length;
+      //   for (let i = 0; i < seriesColor.length; i++) {
+      //     color1.push([count * (i + 1), color[i]]);
+      //   }
+      // }
+      if(!this.showPointer){
+        this.pointerLength=0;
+      }
+      this.chartOption = {
+        series: [{
+          type: 'gauge',
+          anchor: {
+            show: this.showPointer,
+            showAbove: true,
+            size: 18,
+            itemStyle: {
+              color: '#FAC858'
+            }
+          },
+          pointer: {
+            icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+            width: 8,
+            length: this.pointerLength + '%',
+            offsetCenter: [0, '8%']
+          },
+          progress: {
+            show: true,
+            overlap: true,
+            roundCap: true,
+            width:this.width,
+          },
+          axisLine: {
+            roundCap: true,
+            lineStyle: {
+              width: this.width,
+            }
+          },
+          startAngle: this.startAngle,
+          endAngle: this.endAngle,
+          splitLine: {
+            show: this.showScale,
+          },
+          axisTick: {
+            show: this.showScale,
+          },
+          axisLabel: {
+            show: this.showScale,
+            color: '#fff'
+            // distance: 50
+          },
+          data: [],
+          color: this.colors,
+          title: {
+            show: this.label,
+            fontSize: this.font.size,
+            color: this.font.color,
+          },
+          detail: {
+            formatter: this.percent ? '' + '{value}' + '%' : '{value}',
+            width: 40,
+            height: this.detailFont.size,
+            fontSize: this.detailFont.size,
+            color: this.detailFont.color,
+            backgroundColor: 'auto',
+            borderRadius: 3,
+            show:this.label
+          },
+          max: this.max,
+          min: this.min,
+        }]
+      };
+      // console.log(JSON.stringify(this.chartOption));
+    }
+    this.reloadData();
+  }
+
+  ngOnInit(): void {
+  }
+  reloadData() {
+    let datas = [];
+    if (this._data) {
+      let count = this._data.length + 1;
+      let numa = 200 / count;
+      let numb = numa - 100;
+      this._data.forEach((a, index) => {
+        let obj = {
+          value: a.value,
+          name: a.name,
+          title: {
+            offsetCenter: [(numb + (index * numa)) + '%', '30%']
+          },
+          detail: {
+            offsetCenter: [(numb + (index * numa)) + '%', '50%']
+          }
+        }
+        datas.push(obj);
+      })
+    }
+    this.chartOption.series[0].data = datas;
+  }
+}

package/src/lib/multi-title-gauge/multi-title-gauge.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MultiTitleGaugeComponent } from './multi-title-gauge.component';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+import { NgxEchartsModule } from 'ngx-echarts';
+
+
+
+@NgModule({
+  declarations: [MultiTitleGaugeComponent],
+  imports: [
+    CommonModule, WidgetBaseModule, NgxEchartsModule
+  ]
+})
+export class MultiTitleGaugeModule { 
+  constructor(widgetService: WidgetService) {
+    widgetService.register(MultiTitleGaugeComponent);
+  }
+}

package/src/lib/number-flop/number-flop.component.html

@@ -0,0 +1,31 @@
+<div>
+  <div class="dowebok flipTimer" [ngStyle]="headlineStyle">
+    <span [ngStyle]="prefixStyle">{{prefixContent}}</span>
+    <div class="seconds" *ngFor="let num of numberdate" [ngStyle]="tableBar">
+      <div class="digit-set" *ngIf="num!='.'">
+        <div class="digit previous">
+          <div class="digit-top" [style.backgroundColor]="background">
+            <span [ngStyle]="textStyle" class="digit-wrap">0</span>
+          </div>
+          <div class="shadow-top" [ngStyle]="tableBar"></div>
+          <div class="digit-bottom" [style.backgroundColor]="background">
+            <span [ngStyle]="textStyle" class="digit-wrap">0</span>
+          </div>
+          <div class="shadow-bottom" [ngStyle]="tableBar"></div>
+        </div>
+        <div class="digit active">
+          <div class="digit-top" [style.backgroundColor]="background">
+            <span [ngStyle]="textStyle" class="digit-wrap">{{num}}</span>
+          </div>
+          <div class="shadow-top" [ngStyle]="tableBar"></div>
+          <div class="digit-bottom" [style.backgroundColor]="background">
+            <span [ngStyle]="textStyle" class="digit-wrap">{{num}}</span>
+          </div>
+          <div class="shadow-bottom" [ngStyle]="tableBar"></div>
+        </div>
+      </div>
+      <span *ngIf="num=='.'" style="width:45px;" class="digit-wrap">{{num}}</span>
+    </div>
+    <span [ngStyle]="suffixStyle" style="margin-left:15px">{{suffixContent}}</span>
+  </div>
+</div>

package/src/lib/number-flop/number-flop.component.less

@@ -0,0 +1,155 @@
+/* 数字翻牌器*/
+
+@keyframes flipTop {
+  0% {
+    transform: perspective(400px) rotateX(0deg);
+  }
+
+  100% {
+    transform: perspective(400px) rotateX(-90deg);
+  }
+}
+
+@keyframes flipBottom {
+  0% {
+    transform: perspective(400px) rotateX(90deg);
+  }
+
+  100% {
+    transform: perspective(400px) rotateX(0deg);
+  }
+}
+
+.flipTimer {
+  color: #FFF;
+  // font-family: Arial;
+  // font-size: 54px;
+  font-weight: bold;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.flipTimer .seperator {
+  vertical-align: top;
+  margin: 0 -20px;
+  display: inline;
+}
+
+.flipTimer .seconds,
+.flipTimer .minutes,
+.flipTimer .hours,
+.flipTimer .days {
+  height: 100%;
+  display: inline-block;
+}
+
+.flipTimer .digit-set {
+  border-radius: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
+  width: 44px;
+  height: 100%;
+  display: inline-block;
+  position: relative;
+  margin: 0 1px;
+}
+
+.flipTimer .digit {
+  position: absolute;
+  height: 100%;
+}
+
+.flipTimer .digit>div {
+  position: absolute;
+  left: 0;
+  overflow: hidden;
+  height: 50%;
+  padding: 0 10px;
+}
+
+.flipTimer .digit>div.digit-top,
+.flipTimer .digit>div.shadow-top {
+  border-bottom: 1px solid #01A4F9;
+  box-sizing: border-box;
+  top: 0;
+  z-index: 0;
+  border-radius: 10px 10px 0 0;
+}
+
+.flipTimer .digit>div.digit-top:before,
+.flipTimer .digit>div.shadow-top:before {
+  content: "";
+  box-shadow: inset 0 10px 25px rgba(0, 0, 0, 0.3);
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.flipTimer .digit>div.shadow-top {
+  background: gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0)), to(black));
+  width: 45px;
+  opacity: 0;
+  transition: opacity 0.3s ease-in;
+}
+
+.flipTimer .digit>div.digit-bottom,
+.flipTimer .digit>div.shadow-bottom {
+  bottom: 0;
+  z-index: 0;
+  border-radius: 0 0 10px 10px;
+}
+
+.flipTimer .digit>div.digit-bottom .digit-wrap,
+.flipTimer .digit>div.shadow-bottom .digit-wrap {
+  display: block;
+  margin-top: -100%;
+}
+
+.flipTimer .digit>div.digit-bottom:before,
+.flipTimer .digit>div.shadow-bottom:before {
+  content: "";
+  box-shadow: inset 0 10px 25px rgba(0, 0, 0, 0.2);
+  border-radius: 0 0 10px 10px;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.flipTimer .digit>div.shadow-bottom {
+  background: gradient(linear, 0% 0%, 0% 100%, from(black), to(rgba(0, 0, 0, 0)));
+  width: 25px;
+  opacity: 0;
+  transition: opacity 0.3s ease-in;
+}
+
+.flipTimer .digit.previous .digit-top,
+.flipTimer .digit.previous .shadow-top {
+  opacity: 1;
+  z-index: 2;
+  transform-origin: 50% 100%;
+  animation: flipTop 0.3s ease-in both;
+}
+
+.flipTimer .digit.previous .digit-bottom,
+.flipTimer .digit.previous .shadow-bottom {
+  z-index: 1;
+  opacity: 1;
+}
+
+.flipTimer .digit.active .digit-top {
+  z-index: 1;
+}
+
+.flipTimer .digit.active .digit-bottom {
+  z-index: 2;
+  transform-origin: 50% 0%;
+  animation: flipBottom 0.3s 0.3s ease-out both;
+}
+.seconds {
+  margin-right: 12px;
+}

package/src/lib/number-flop/number-flop.component.spec.ts

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

package/src/lib/number-flop/number-flop.component.ts

@@ -0,0 +1,96 @@
+import { Component, OnInit, OnChanges } from '@angular/core';
+import { Property, Widget, Data } from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-number-flop',
+  templateUrl: './number-flop.component.html',
+  styleUrls: ['./number-flop.component.less'],
+})
+@Widget('数字翻牌器', { group: 'component', image: 'assets/img/screen/number-flop.png', icon: 'iconmokuai' })
+export class NumberFlopComponent implements OnInit, OnChanges {
+  // @Property('静态值')
+  // number: number = 1024;
+  @Property('前缀内容')
+  prefixContent = '';
+  @Property('前缀字体', { ui: { widget: 'myFont', hideProperty: { lineHeight: true } } })
+  prefixFont: any = { family: '', color: '#ffffff', weight: 'normal', size: 12, space: 0, lineHeight: '' };
+  @Property('数字字体', { ui: { widget: 'myFont' , hideProperty: { lineHeight: true } } })
+  numberFont: any = { family: '', color: '#ffffff', weight: 'normal', size: 90, space: 0, lineHeight: '' };
+  @Property('填充', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  background = '#01A4F9';
+  @Property('小数点位数', { ui: { widget: 'myRange', min: 0, max: 10, step: 1 } })
+  point = 0;
+  @Property('后缀内容')
+  suffixContent = '';
+  @Property('后缀字体', { ui: { widget: 'myFont' } })
+  suffixFont: any = { family: '', color: '#ffffff', weight: 'normal', size: 12, space: 0, lineHeight: '' };
+  @Property('数字位数')
+  numDigit:number = 0;
+  headlineStyle: any;
+  prefixStyle: any;
+  suffixStyle: any;
+  numberdate: any;
+  textStyle: any;
+  serial: any = {};
+  tableBar: any = {};
+  @Data({
+    properties: {
+      value: { type: 'number', title: '数值' },
+    },
+  })
+  number: any[] = [{ value: 1024 }];
+
+  constructor() {}
+  ngOnChanges() {
+    this.headlineStyle = {
+      height: this.numberFont.size + 'px',
+      lineHeight: this.numberFont.size + 'px',
+    };
+    this.prefixStyle = {
+      fontSize: this.prefixFont.size + 'px',
+      fontFamily: this.prefixFont.family,
+      color: this.prefixFont.color,
+      fontWeight: this.prefixFont.weight,
+      letterSpacing: this.prefixFont.space + 'px',
+      lineHeight: this.prefixFont.lineHeight + 'px',
+    };
+    this.suffixStyle = {
+      fontSize: this.suffixFont.size + 'px',
+      fontFamily: this.suffixFont.family,
+      color: this.suffixFont.color,
+      fontWeight: this.suffixFont.weight,
+      letterSpacing: this.suffixFont.space + 'px',
+      lineHeight: this.suffixFont.lineHeight + 'px',
+    };
+    this.textStyle = {
+      fontSize: this.numberFont.size + 'px',
+      fontFamily: this.numberFont.family,
+      color: this.numberFont.color,
+      fontWeight: this.numberFont.weight,
+      letterSpacing: this.numberFont.space + 'px',
+      // lineHeight: this.numberFont.lineHeight + 'px',
+    };
+    this.serial.width = this.numberFont.size * 0.58 + 'px';
+    this.tableBar.width = this.numberFont.size * 0.7 + 'px';
+    this.numberdate = Number(this.number && this.number[0] ? this.number[0].value : 0);
+    let digits=0;
+    if(this.numDigit>0 && this.numberdate.toString().length<this.numDigit){
+      digits=this.numDigit-this.numberdate.toString().length;
+    }
+    this.numberdate=this.numberdate.toFixed(this.point)
+      .toString();
+    if(digits>0){
+      for (let index = 0; index < digits; index++) {
+        this.numberdate='0'+this.numberdate;
+      }
+    }
+    this.numberdate= this.numberdate.split('');
+  }
+
+  ngOnInit() {}
+}

package/src/lib/number-flop/number-flop.module.ts

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

package/src/lib/parent-container/parent-container.component.spec.ts

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