bbj-screen-widget 2.4.62 → 2.4.63

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

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

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

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

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

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

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

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

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

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

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

@@ -1,155 +0,0 @@
-/* 数字翻牌器*/
-
-@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

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

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

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

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