bbj-screen-widget 2.4.60 → 2.4.62

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

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

package/src/lib/iconfont/iconfont.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit, ElementRef } from '@angular/core';
+import { Property, Widget } from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-iconfont',
+  templateUrl: './iconfont.component.html',
+  styleUrls: ['./iconfont.component.less'],
+})
+@Widget('图标', { group: 'iconfont', icon: 'icontupian' })
+export class IconfontComponent implements OnInit {
+
+  @Property('图标', { ui: { hidden: true } })
+  type = 'iconfont';
+  @Property('图标名称', { ui: { hidden: true } })
+  icon: string;
+  // @Property('图标大小',{ui:{widget: 'myRange',min: 12, max: 150, step: 2}})
+  // fontSize: number = 40;
+  @Property('图标颜色', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  background = '#3285FF';
+  style: any;
+  hideHead: boolean;
+  constructor(private element: ElementRef) {}
+
+  ngOnInit() {
+    this.style = {
+      fontSize:
+        this.element.nativeElement.offsetWidth > this.element.nativeElement.offsetHeight
+          ? this.element.nativeElement.offsetHeight + 'px'
+          : this.element.nativeElement.offsetWidth + 'px',
+      lineHeight:
+        this.element.nativeElement.offsetWidth > this.element.nativeElement.offsetHeight
+          ? this.element.nativeElement.offsetHeight + 'px'
+          : this.element.nativeElement.offsetWidth + 'px',
+      color: this.background,
+    };
+  }
+}

package/src/lib/iconfont/iconfont.module.ts

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

package/src/lib/iframe/iframe.component.html

@@ -0,0 +1 @@
+<iframe *ngIf="url" [class.edit]="edit" [src]="url | nzSanitizer: 'resourceUrl'"> </iframe>

package/src/lib/iframe/iframe.component.less

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  &.edit {
+    pointer-events: none;
+  }
+}

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

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

package/src/lib/iframe/iframe.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Data, Method, Param, Property, Widget } from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-iframe',
+  templateUrl: './iframe.component.html',
+  styleUrls: ['./iframe.component.less'],
+})
+@Widget('iframe', { group: 'component', image: 'assets/img/screen/iframe.png', icon: 'iconmokuai' })
+export class IframeComponent implements OnInit, OnChanges {
+  @Property('url')
+  url: string;
+
+  @Data({ properties: { url: { type: 'string', title: 'url' } } })
+  data: any[];
+  edit: boolean;
+
+  constructor() {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.data) {
+      if (this.data.length && this.data[0].url) {
+        this.url = this.data[0].url;
+      }
+    }
+  }
+
+  ngOnInit(): void {}
+
+  @Method('设置url')
+  setUrl(@Param('url') url: string) {
+    this.url = url;
+  }
+}

package/src/lib/iframe/iframe.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IframeComponent } from './iframe.component';
+import { NzPipesModule } from 'ng-zorro-antd/pipes';
+import { WidgetService } from 'bbj-widget-base';
+
+@NgModule({
+  declarations: [IframeComponent],
+  imports: [CommonModule, NzPipesModule],
+})
+export class IframeModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(IframeComponent);
+  }
+}

package/src/lib/image/image.component.html

@@ -0,0 +1,2 @@
+<!-- <img [src]="image" alt="" [ngStyle]="style"> -->
+<!-- <div class="image {{ layout || 'auto' }}" [ngStyle]="style"></div> -->

package/src/lib/image/image.component.less

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+
+  &.auto {
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+  &.stretch {
+    background-size: 100% 100%;
+  }
+}

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

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

package/src/lib/image/image.component.ts

@@ -0,0 +1,79 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  OnChanges,
+  OnInit,
+  Renderer2,
+  SimpleChanges,
+} from '@angular/core';
+import { Data, Property, Widget, WidgetRef } from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-picture',
+  templateUrl: './image.component.html',
+  styleUrls: ['./image.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+@Widget('图片', { group: 'picture', icon: 'icontupian' })
+export class ImageComponent implements OnInit, OnChanges {
+  @Property('', { min: 1, ui: { widget: 'myUpload', spanLabel: 0, spanControl: 24 } })
+  image: string;
+
+  @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 };
+  style: any = {};
+  hideHead: boolean;
+  @Property('布局', {
+    enum: [
+      { label: '自适应', value: 'auto' },
+      { label: '拉伸', value: 'stretch' },
+      { label: '重复', value: 'repeat' },
+    ],
+  })
+  layout = 'auto';
+  @Data({
+    properties: {
+      image: { type: 'string', title: '路径' },
+    },
+  })
+  _data: any[] = [];
+  backgroundImage: string;
+  constructor(
+    private cd: ChangeDetectorRef,
+    private renderer: Renderer2,
+    private elementRef: ElementRef,
+    private widgetRef: WidgetRef,
+  ) {}
+  ngOnChanges(changes: SimpleChanges): void {
+    let image: string;
+    if (this._data && this._data[0]?.image) {
+      image = this._data[0].image;
+    } else {
+      image = this.image;
+    }
+    this.setStyle('backgroundImage', image ? `url(${image})` : null);
+    this.cd.markForCheck();
+  }
+
+  ngOnInit() {
+    this.renderer.addClass(this.element, this.layout || 'auto');
+    this.setStyle('opacity', this.opacity === 1 ? null : this.opacity);
+    const { color, X, Y, Z } = this.shadow;
+    this.setStyle('boxShadow', color ? `${color} ${X}px ${Y}px ${Z}px` : null);
+    const widget: any = this.widgetRef.widget as any;
+    if (widget.link?.enabled || widget.outputs?.enabled) {
+      this.setStyle('cursor', 'pointer');
+    }
+  }
+
+  get element(): HTMLElement {
+    return this.elementRef.nativeElement;
+  }
+  setStyle(style: string, value: any) {
+    this.renderer.setStyle(this.element, style, value);
+  }
+}

package/src/lib/image/image.module.ts

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

package/src/lib/item-swiper/item-swiper.component.html

@@ -0,0 +1,48 @@
+<swiper-container appSwiper
+  #swiper
+  [attr.slides-per-view]="slidesPerView"
+  [attr.space-between]="spaceBetween"
+  [attr.navigation]="navigation && navigationLeftIcon && navigationRightIcon ? navigationBtnConfig : navigation"
+  class="swiper-no-swiping"
+  [attr.no-swiping]="true"
+>
+  <swiper-slide *ngFor="let item of data">
+    <ng-container *ngIf="!isgroup">
+      <div class="item-img">
+        <div class="item-val" [ngStyle]="numfont">{{ item.value }}</div>
+        <img [src]="item.img" alt="" [ngStyle]="item.imgstyle" />
+      </div>
+      <div [ngStyle]="font">{{ item.label }}</div>
+    </ng-container>
+    <!-- <ng-container *ngFor="let i of item"> -->
+    <ng-container *ngIf="isgroup">
+      <div class="content" [style.height]="selectHeight + 'px'">
+        <div [ngStyle]="groupfont" class="title">{{ item.group }}</div>
+        <div class="item-img">
+          <!-- <ng-container *ngIf="item.img"> -->
+          <img [src]="item.img" alt="" [ngStyle]="item.imgstyle" />
+          <!-- </ng-container> -->
+        </div>
+        <div class="kvbox" [style.bottom]="valueBottom + 'px'">
+          <div style="display: inline-flex">
+            <ng-container *ngFor="let a of item.field">
+              <span style="flex: 1; left: 0px" class="label">
+                <div [ngStyle]="font">{{ a.label }}</div>
+                <div [ngStyle]="numfont">{{ a.value }}</div>
+              </span>
+            </ng-container>
+          </div>
+        </div>
+      </div>
+    </ng-container>
+    <!-- </ng-container> -->
+  </swiper-slide>
+</swiper-container>
+<ng-container *ngIf="navigationLeftIcon && navigationRightIcon">
+  <div class="navigationbtn swiper-navigation-prev" [style.left.px]="navigationMoveVal || -60" [class.hidden]="!showNavigation">
+    <img [src]="navigationLeftIcon" alt="" />
+  </div>
+  <div class="navigationbtn swiper-navigation-next" [style.right.px]="navigationMoveVal || -60" [class.hidden]="!showNavigation">
+    <img [src]="navigationRightIcon" alt="" />
+  </div>
+</ng-container>

package/src/lib/item-swiper/item-swiper.component.less

@@ -0,0 +1,75 @@
+:host {
+  position: relative;
+  display: block;
+
+  ::ng-deep {
+    swiper-container {
+      width: 100%;
+    }
+    .title {
+      z-index: 100;
+      position: absolute;
+      left: 0;
+      width: 100%;
+      text-align: center;
+    }
+    swiper-slide {
+      text-align: center;
+      position: relative;
+      overflow: visible;
+      padding-top: 30px;
+    }
+    .content {
+      position: relative;
+      height: 100%;
+      width: 100%;
+    }
+    .item-img {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      img {
+        display: block;
+        margin: auto;
+      }
+    }
+    .item-val {
+      position: absolute;
+      text-align: center;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      z-index: 99;
+      overflow: visible;
+    }
+    .navigationbtn {
+      cursor: pointer;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      outline: none;
+      &.hidden {
+        display: none;
+      }
+    }
+    .swiper-navigation-prev {
+      left: -60px;
+    }
+    .swiper-navigation-next {
+      right: -60px;
+    }
+    .label {
+      margin: 0 8px;
+    }
+    .kvbox {
+      position: absolute;
+      text-align: center;
+      left: 0;
+      width: 100%;
+      z-index: 99;
+    }
+  }
+}

package/src/lib/item-swiper/item-swiper.component.spec.ts

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