bbj-screen-widget 2.4.60 → 2.4.62

package/src/lib/tabs/tabs.component.less

@@ -0,0 +1,40 @@
+:host {
+  display: block;
+  height: 100%;
+  // padding: 0 10px;
+}
+
+.ant-tabs {
+  height: 100%;
+  ::ng-deep {
+    >.ant-tabs-nav{
+      margin: 0;
+    }
+    .ant-tabs-content {
+      height: 100%;
+      .ant-tabs-tabpane{
+        overflow: auto;
+      }
+    }
+  }
+}
+
+// TODO angular升到10后删除
+.ant-tabs {
+  display: flex;
+  ::ng-deep {
+    .ant-tabs-content {
+      flex: 1;
+    }
+    &.ant-tabs-top,
+    &.ant-tabs-bottom {
+      flex-direction: column;
+    }
+    &.ant-tabs-right,
+    &.ant-tabs-bottom {
+      ::ng-deep > .ant-tabs-bar {
+        order: 1;
+      }
+    }
+  }
+}

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

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

package/src/lib/tabs/tabs.component.ts

@@ -0,0 +1,68 @@
+import { Component, OnInit } from '@angular/core';
+import { Property, Widget } from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-tabs',
+  templateUrl: './tabs.component.html',
+  styleUrls: ['./tabs.component.less'],
+})
+@Widget('标签页', {
+  group: 'component', image: 'assets/img/screen/tabs.png', icon: 'iconmokuai',
+  children: [
+    {
+      title: '选项卡1',
+      type: 'sc-tab',
+      option: { title: 'Tab 1' },
+      hidden: true,
+      hideChild: true,
+    },
+  ],
+  childTypes: ['sc-tab'],
+})
+export class TabsComponent implements OnInit {
+  @Property('页签样式', {
+    enum: [
+      { label: '线条', value: 'line' },
+      { label: '卡片', value: 'card' },
+    ],
+  })
+  type = 'line';
+  @Property('尺寸', {
+    enum: [
+      { label: '大', value: 'large' },
+      { label: '中', value: 'default' },
+      { label: '小', value: 'small' },
+    ],
+  })
+  size = 'default';
+  @Property('页签位置', {
+    enum: [
+      { label: '上', value: 'top' },
+      { label: '右', value: 'right' },
+      { label: '下', value: 'bottom' },
+      { label: '左', value: 'left' },
+    ],
+  })
+  tabPosition = 'top';
+  @Property('切换动画', { type: 'boolean', ui: { visibleIf: { tabPosition: ['top', 'bottom'] } } })
+  animated = true;
+  @Property('间隙')
+  tabBarGutter: number;
+
+  selectedIndex = 0;
+
+  children: any[];
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  getContainer() {
+    if (this.children) {
+      const selectedChild = this.children[this.selectedIndex];
+      if (selectedChild) {
+        return selectedChild.id;
+      }
+    }
+  }
+}

package/src/lib/tabs/tabs.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TabsComponent } from './tabs.component';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+import { NzTabsModule } from 'ng-zorro-antd/tabs';
+import { TabComponent } from './tab/tab.component';
+
+@NgModule({
+  declarations: [TabsComponent, TabComponent],
+  imports: [CommonModule, WidgetBaseModule, NzTabsModule],
+})
+export class TabsModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(TabsComponent);
+    widgetService.register(TabComponent);
+  }
+}

package/src/lib/temporary-data/temporary-data.component.html

@@ -0,0 +1 @@
+<i nz-icon nzType="database" nzTheme="outline"></i>

package/src/lib/temporary-data/temporary-data.component.less

@@ -0,0 +1,4 @@
+:host {
+  font-size: 40px;
+  color: #1890ff;
+}

package/src/lib/temporary-data/temporary-data.component.spec.ts

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

package/src/lib/temporary-data/temporary-data.component.ts

@@ -0,0 +1,46 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Inject,
+  OnChanges,
+  OnInit,
+  Optional,
+  Renderer2,
+  SimpleChanges,
+} from '@angular/core';
+import { CustomExport, Data, DataOutput, Widget, WIDGET_CONFIG } from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-temporary-data',
+  templateUrl: './temporary-data.component.html',
+  styleUrls: ['./temporary-data.component.less'],
+})
+@Widget('临时数据', { group: 'component', image: 'assets/img/screen/temporary-data.png', icon: 'iconmokuai' })
+export class TemporaryDataComponent implements OnInit, OnChanges, CustomExport {
+  @Data({})
+  data: any[] = [];
+
+  @DataOutput('数据')
+  dataChange = new EventEmitter<any>();
+
+  edit: boolean;
+
+  constructor(private renderer: Renderer2, private elementRef: ElementRef) {}
+
+  ngOnInit(): void {
+    if (!this.edit) {
+      this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'none');
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.data) {
+      this.dataChange.emit(this.data);
+    }
+  }
+
+  exportWord() {
+    return null;
+  }
+}

package/src/lib/temporary-data/temporary-data.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TemporaryDataComponent } from './temporary-data.component';
+import { WidgetService } from 'bbj-widget-base';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+
+@NgModule({
+  declarations: [TemporaryDataComponent],
+  imports: [CommonModule, NzIconModule],
+})
+export class TemporaryDataModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(TemporaryDataComponent);
+  }
+}

package/src/lib/text/text.component.html

@@ -0,0 +1,3 @@
+<p>
+  text works!
+</p>

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

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

package/src/lib/text/text.component.ts

@@ -0,0 +1,22 @@
+import {Component, OnInit} from '@angular/core';
+import {Color, Property, Widget} from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-text',
+  templateUrl: './text.component.html',
+  styleUrls: ['./text.component.css']
+})
+@Widget('文本')
+export class TextComponent implements OnInit {
+
+  @Property('字体颜色')
+  color: Color = '#000000';
+
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}

package/src/lib/text/text.module.ts

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

package/src/lib/time-picker/time-picker.component.html

@@ -0,0 +1 @@
+<nz-time-picker [(ngModel)]="time" (ngModelChange)="onChange(time)" [nzFormat]="timeFormat" [nzDefaultOpenValue]="defaultOpenValue"  [nzPlaceHolder]="alert" class="time-picker" [ngStyle]="timePickerStyle" ></nz-time-picker>

package/src/lib/time-picker/time-picker.component.less

@@ -0,0 +1,14 @@
+:host ::ng-deep {
+  .time-picker {
+    background-color: unset;
+    height: 32px;
+    width: 100%;
+    color: inherit;
+  }
+  .ant-picker-input>input{
+    color: inherit;
+  }
+  .ant-picker-suffix{
+    color: inherit;
+  }
+}

package/src/lib/time-picker/time-picker.component.spec.ts

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

package/src/lib/time-picker/time-picker.component.ts

@@ -0,0 +1,86 @@
+import { Component, EventEmitter, OnInit } from '@angular/core';
+import { DataOutput, Property, Widget } from 'bbj-widget-base';
+import { SFStringWidgetSchema } from '@delon/form';
+import { format } from 'date-fns';
+import { backgroundImage } from 'html2canvas/dist/types/css/property-descriptors/background-image';
+
+@Component({
+  selector: 'sc-time-picker',
+  templateUrl: './time-picker.component.html',
+  styleUrls: ['./time-picker.component.less'],
+})
+@Widget('时间选择器', {
+  group: 'component',
+  image: 'assets/img/screen/time-picker.png',
+  icon: 'icontubiao',
+})
+export class TimePickerComponent implements OnInit {
+  @Property('边框', {
+    ui: {
+      widget: 'myColor',
+      example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  borderColor = '#3285ff';
+  @Property('背景图片', {
+    type: 'string',
+    ui: {
+      widget: 'myUpload',
+    }
+  })
+  backImage = null;
+  @Property('高度')
+  height: number = 30;
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = { family: '', color: '#3285ff', weight: 'normal', size: 12, space: 0, lineHeight: '' };
+  @Property('填充', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  background = 'rgba(50,133,255,0.2)';
+  @Property('时间格式', {
+    timeFormat: {
+      type: 'string',
+      title: 'max',
+      ui: {} as SFStringWidgetSchema,
+    },
+    required: ['timeFormat'],
+  })
+  timeFormat = 'HH:mm:ss';
+  @Property('提示语')
+  alert = '请选择时间';
+  @DataOutput('值')
+  timeChange = new EventEmitter<any>();
+  time: Date | null = null;
+  timePickerStyle: any;
+
+  defaultOpenValue = new Date(0, 0, 0, 0, 0, 0);
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.timePickerStyle = {
+      borderColor: this.borderColor,
+      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',
+      height: this.height + 'px',
+      backgroundImage: 'url('+this.backImage+')',
+      backgroundSize:'100% 100%'
+    };
+  }
+
+  onChange(result: Date) {
+    let date = '';
+    if (result !== null) {
+      date = format(result, this.timeFormat);
+    }
+    this.timeChange.emit(date);
+  }
+}

package/src/lib/time-picker/time-picker.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TimePickerComponent } from './time-picker.component';
+import {WidgetBaseModule, WidgetService} from 'bbj-widget-base';
+import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
+import {FormsModule} from '@angular/forms';
+
+
+
+
+@NgModule({
+  declarations: [TimePickerComponent],
+  imports: [CommonModule, WidgetBaseModule, NzTimePickerModule,FormsModule],
+})
+export class TimePickerModule {
+  constructor(widgetService: WidgetService){
+    widgetService.register(TimePickerComponent);
+  }
+}

package/src/lib/timer/timer.component.html

@@ -0,0 +1,7 @@
+<div class="container">
+  <div class="timer-show">
+    <i nz-icon *ngIf="iconShow" [ngStyle]="iconStyle" nzType="clock-circle" nzTheme="outline"></i>
+    <span [ngStyle]="textStyle">{{data | date:format}}&nbsp;&nbsp;</span>
+    <span [ngStyle]="textStyle" *ngIf="weekShow">{{week}}</span>
+  </div>
+</div>

package/src/lib/timer/timer.component.less

@@ -0,0 +1,24 @@
+.container{
+  width:100%;
+  height:100%;
+}
+.timer-show{
+  width:100%;
+  height:100%;
+  font-size: 20px;
+  color: rgb(255, 255, 255);
+  font-weight: normal;
+  font-family: "Microsoft Yahei";
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  vertical-align: middle;
+  justify-content: center;
+}
+@keyframes dash{
+  to{
+    stroke-dashoffset: 0;
+  }
+}

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

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

package/src/lib/timer/timer.component.ts

@@ -0,0 +1,74 @@
+import { Component, OnInit } from '@angular/core';
+import {Property, Widget} from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-timer',
+  templateUrl: './timer.component.html',
+  styleUrls: ['./timer.component.less']
+})
+  @Widget('时间',{group: 'component',image: 'assets/img/screen/timer.png',icon: 'iconmokuai'})
+export class TimerComponent implements OnInit {
+
+  @Property('图标显示',{ui:{widget: 'checkbox'}})
+  iconShow = true;
+  @Property('星期显示',{ui:{widget: 'checkbox'}})
+  weekShow = true;
+  @Property('图标大小',{ui:{widget: 'myRange',min: 0, max: 100, step: 1}})
+  iconFontSize = 20;
+  @Property('图标右边距',{ui:{widget: 'myRange',min: 0, max: 100, step: 1}})
+  iconMarginRight = 10;
+  @Property('图标颜色',{ui:{widget: 'myColor', example:['#D0021B','#F5A623','#F8E71C','#50E3C2','#3285FF','#B45FFF','#9B9B9B','#ffffff']}})
+  iconColor = '#5DF5F4';
+  @Property('字体',{ui:{widget: 'myFont'}})
+  font: any = {family: '', color: '#ffffff', weight: 'normal', size: 12, space: 0, lineHeight: ''};
+  @Property('字体发光',{ui:{widget: 'checkbox'}})
+  fontGlow = false;
+  @Property('发光颜色',{ui:{widget: 'myColor', example:['#D0021B','#F5A623','#F8E71C','#50E3C2','#3285FF','#B45FFF','#9B9B9B','#ffffff']}})
+  flowColor = '#ffffff';
+  @Property('发光程度',{ui:{widget: 'myRange',min: 1, max: 10, step: 1}})
+  flowSize = 3;
+  @Property('格式')
+  format = 'yyyy-MM-dd HH:mm:ss';
+  iconStyle: any;
+  textStyle: any;
+  data: any;
+  timer: any;
+  week='';
+  constructor() { }
+
+  ngOnInit() {
+    this.getTime();
+    this.iconStyle = {
+      fontSize: this.iconFontSize + 'px',
+      marginRight: this.iconMarginRight + 'px',
+      color: this.iconColor
+    }
+    this.textStyle = {
+      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',
+    }
+    if (this.fontGlow) {// 发光
+      let str = '';
+      for (let i = 0; i < this.flowSize; i++) {
+        str += '0 0 20px ' + this.flowColor + ',';
+      }
+      str = str.substr(0, str.length - 1);
+      this.textStyle['text-shadow'] = str;
+    } else {
+      this.textStyle['text-shadow'] = '';
+    }
+    clearInterval(this.timer);
+    this.timer = setInterval(() => {
+      this.getTime();// 检测变化
+    }, 1000);
+  }
+  getTime() {
+    const show_day=new Array('星期天','星期一','星期二','星期三','星期四','星期五','星期六');
+    this.data = new Date();
+    this.week=show_day[this.data.getDay()];
+  }
+}

package/src/lib/timer/timer.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TimerComponent } from './timer.component';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+
+@NgModule({
+  declarations: [TimerComponent],
+  imports: [CommonModule, WidgetBaseModule, NzIconModule],
+})
+export class TimerModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(TimerComponent);
+  }
+}