bbj-screen-widget 2.4.62 → 2.4.63

package/src/lib/radio/radio.component.ts

@@ -1,116 +0,0 @@
-import { Component, ElementRef, OnInit, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
-import { Property, Widget, DataOutput, Data } from 'bbj-widget-base';
-import {SFNumberWidgetSchema} from '@delon/form';
-
-@Component({
-  selector: 'sc-radio',
-  templateUrl: './radio.component.html',
-  styleUrls: ['./radio.component.less'],
-})
-@Widget('单选', { group: 'component', image: 'assets/img/screen/radio.png', icon: 'iconmokuai' })
-export class RadioComponent implements OnInit, OnChanges {
-
-  @Property('颜色', {
-    ui: {
-      widget: 'myColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
-    },
-  })
-  radioColor = '#3285FF';
-  @Property('样式类型', {
-    ui: { widget: 'select' },
-    enum: [
-      { label: '圆点', value: 'circle' },
-      { label: '按钮', value: 'button' },
-    ],
-  })
-  styleType = 'circle';
-  @Property('字体', { ui: { widget: 'myFont' } })
-  font: any = { family: '', color: '#ffffff', weight: 'normal', size: 12, space: 0, lineHeight: 26 };
-  radioValue: any;
-  ngStyle: any;
-  @Property('选中图片',{
-    type: 'string',
-    ui: {
-      widget: 'myUpload',
-    },
-  })
-  selectImage='';
-  @Property('未选图片',{
-    type: 'string',
-    ui: {
-      widget: 'myUpload',
-    }
-  })
-  notSelectImage='';
-  @Property('自定义宽',{type:'number'})
-  width=150;
-  @Property('自定义高',{type:'number'})
-  height=50;
-  isCustom=false;
-  @Data({
-    properties: {
-      label: { title: '标签', type: 'string' },
-      value: { title: '值', type: 'string' },
-      checked: { title: '是否选中', type: 'boolean' },
-    },
-  })
-  options:any[]=[
-    { label: '是', value: '1', checked: true },
-    { label: '否', value: '0' },
-  ]
-  @DataOutput('值')
-  valueChange = new EventEmitter<any>();
-  constructor(private ele: ElementRef) {}
-
-  ngOnInit() {
-    this.ele.nativeElement.style.setProperty('--radioColor', this.radioColor);
-    this.ele.nativeElement.style.setProperty('--outerSize', this.font.size+'px');
-    this.ele.nativeElement.style.setProperty('--innerSize', this.font.size/2+'px');
-    this.ele.nativeElement.style.setProperty('--width', this.width+'px');
-    this.ele.nativeElement.style.setProperty('--height', this.height+'px');
-    this.ele.nativeElement.style.setProperty('--color', this.font.color );
-    this.ele.nativeElement.style.setProperty('--weight', this.font.weight );
-    this.ele.nativeElement.style.setProperty('--family', this.font.weight );
-    this.ele.nativeElement.style.setProperty('--select', 'url('+this.selectImage+')' );
-    this.ele.nativeElement.style.setProperty('--notSelect', 'url('+this.notSelectImage+')');
-    this.ngStyle = {
-      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',
-    };
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if(this.selectImage&&this.notSelectImage&&this.selectImage!=''&&this.notSelectImage!=''){
-      this.isCustom=true;
-    }
-    if (changes.options) {
-      if (this.options) {
-        const selectRadio = this.options.find((s) => s.checked);
-        if (selectRadio) {
-          this.radioValue = selectRadio.value;
-          this.valueChange.emit(this.radioValue);
-        }
-      }
-    }
-  }
-
-  checked(option){
-    this.options.forEach((o)=>{
-      if(o.value===option.value){
-          o.checked=true;
-          this.valueChange.emit(o.value);
-      }else{
-        o.checked=false;
-      }
-    })
-  }
-
-  radioChange(event) {
-    this.valueChange.emit(event);
-  }
-}

package/src/lib/radio/radio.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RadioComponent } from './radio.component';
-import { FormsModule } from '@angular/forms';
-import { NzRadioModule } from 'ng-zorro-antd/radio';
-import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
-
-@NgModule({
-  declarations: [RadioComponent],
-  imports: [CommonModule, WidgetBaseModule, NzRadioModule, FormsModule],
-})
-export class RadioModule {
-  constructor(widgetService: WidgetService) {
-    widgetService.register(RadioComponent);
-  }
-}

package/src/lib/rate/rate.component.html

@@ -1,16 +0,0 @@
-<ng-container *ngIf="type === 'rate'">
-  <nz-rate [ngModel]="rateValue" nzAllowHalf [style.color]="radioColor"></nz-rate>
-  <span *ngIf="rateValue" [ngStyle]="style" class="ant-rate-text">{{rateValue}}星</span>
-</ng-container>
-<nz-radio-group [ngStyle]="style" class="radio-rate" [(ngModel)]="radioValue" *ngIf="type === 'radio'">
-  <label nz-radio [ngStyle]="style" nzValue="great">非常满意</label>
-  <label nz-radio [ngStyle]="style" nzValue="satisfaction">满意</label>
-  <label nz-radio [ngStyle]="style" nzValue="ordinary">一般</label>
-  <label nz-radio [ngStyle]="style" nzValue="yawp">不满意</label>
-  <label nz-radio [ngStyle]="style" nzValue="bad">差</label>
-</nz-radio-group>
-<div class="slider-rate" [ngStyle]="style" *ngIf="type === 'slider'">
-  <span>评分</span>
-  <nz-slider class="slider" [(ngModel)]="sliderValue" [nzMin]="0" [nzMax]="10"></nz-slider>
-  <span *ngIf="sliderValue">{{sliderValue}}分</span>
-</div>

package/src/lib/rate/rate.component.less

@@ -1,39 +0,0 @@
-:host ::ng-deep {
-  .slider-rate {
-    display: flex;
-    span {
-      white-space: nowrap;
-      display: flex;
-      justify-content: center;
-      flex-direction: column;
-    }
-    .slider {
-      display: inline-block;
-      width: 100%;
-      margin: 2px 8px 0;
-    }
-  }
-  .ant-rate-text {
-    margin-left: 8px;
-  }
-  .ant-rate {
-    color: inherit;
-  }
-  .ant-slider-track, .ant-slider:hover .ant-slider-track {
-    background-color: var(--backgroundColor);
-  }
-  .ant-slider-handle, .ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open) {
-    border-color: var(--backgroundColor);
-  }
-  .ant-radio-checked .ant-radio-inner, .ant-radio-inner{
-    border-color: var(--backgroundColor);
-  }
-  .ant-radio-inner::after {
-    background-color: var(--backgroundColor);
-  }
-  .ant-radio, .ant-radio-group, .ant-radio-wrapper {
-    color: inherit;
-    font-size: inherit;
-    line-height: inherit;
-  }
-}

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

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

package/src/lib/rate/rate.component.ts

@@ -1,40 +0,0 @@
-import {Component, ElementRef, OnInit} from '@angular/core';
-import {Property, Widget} from 'bbj-widget-base';
-
-@Component({
-  selector: 'sc-rate',
-  templateUrl: './rate.component.html',
-  styleUrls: ['./rate.component.less']
-})
-@Widget('评分',{group: 'component',image: 'assets/img/screen/rate.png',icon:'iconmokuai'})
-export class RateComponent implements OnInit {
-
-  @Property('类型', {enum: [
-    { label: '分数', value: 'slider' },
-    { label: '星级', value: 'rate' },
-    { label: '满意度', value: 'radio' },
-  ],ui: {widget: 'select'}})
-  type = 'rate';
-  @Property('颜色',{ui:{widget: 'myColor', example:['#D0021B','#F5A623','#F8E71C','#50E3C2','#3285FF','#B45FFF','#9B9B9B','#333333']}})
-  radioColor = '#3285FF';
-  @Property('字体',{ui:{widget: 'myFont'}})
-  font: any = {family: '', color: '#ffffff', weight: 'normal', size: 12, space: 0, lineHeight: 26};
-  rateValue = 3.5;
-  radioValue = 'great';
-  sliderValue = 8;
-  style: any;
-  constructor(private ele: ElementRef) { }
-
-  ngOnInit() {
-    this.ele.nativeElement.style.setProperty('--backgroundColor', this.radioColor);
-    this.style = {
-      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',
-    }
-  }
-
-}

package/src/lib/rate/rate.module.ts

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { NzRateModule } from 'ng-zorro-antd/rate';
-import { NzRadioModule } from 'ng-zorro-antd/radio';
-import { NzSliderModule } from 'ng-zorro-antd/slider';
-import { RateComponent } from './rate.component';
-import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
-
-@NgModule({
-  declarations: [RateComponent],
-  imports: [CommonModule, WidgetBaseModule, NzRateModule, FormsModule, NzRadioModule, NzSliderModule],
-})
-export class RateModule {
-  constructor(widgetService: WidgetService) {
-    widgetService.register(RateComponent);
-  }
-}

package/src/lib/scatter3d/scatter3d.component.html

@@ -1 +0,0 @@
-<div echarts [options]="options" class="demo-chart" (chartClick)="onChartClick($event)"></div>

package/src/lib/scatter3d/scatter3d.component.less

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

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

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

package/src/lib/scatter3d/scatter3d.component.ts

@@ -1,129 +0,0 @@
-import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { Widget, Data, Property } from 'bbj-widget-base';
-
-@Component({
-  selector: 'sc-scatter3d',
-  templateUrl: './scatter3d.component.html',
-  styleUrls: ['./scatter3d.component.less'],
-})
-@Widget('3D散点图', {
-  group: 'otherChart',
-  image: 'assets/img/screen/bubble.png',
-  icon: 'icontubiao',
-})
-export class Scatter3dComponent implements OnInit, OnChanges {
-  @Property('最小值', { type: 'number' })
-  min = 0;
-  @Property('最大值', { type: 'number' })
-  max = 10;
-  @Property('最小尺寸', { type: 'number' })
-  symbolSizeMin = 10;
-  @Property('最大尺寸', { type: 'number' })
-  symbolSizeMax = 20;
-  @Property('颜色', {
-    ui: {
-      widget: 'seriesColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
-    },
-  })
-  visualMapColor = [
-    '#313695',
-    '#4575b4',
-    '#74add1',
-    '#abd9e9',
-    '#e0f3f8',
-    '#ffffbf',
-    '#fee090',
-    '#fdae61',
-    '#f46d43',
-    '#d73027',
-    '#a50026',
-  ];
-  @Property('最小不透明度', { type: 'number', minimum: 0, maximum: 1 })
-  colorAlphaMin = 0.5;
-  @Property('最大不透明度', { type: 'number', minimum: 0, maximum: 1 })
-  colorAlphaMax = 1;
-  @Property('高度', { type: 'number' })
-  boxHeight = 100;
-  @Property('宽度', { type: 'number' })
-  boxWidth = 100;
-  @Property('深度', { type: 'number' })
-  boxDepth = 100;
-
-  @Data({
-    properties: {
-      x: { type: 'number', title: 'x' },
-      y: { type: 'number', title: 'y' },
-      z: { type: 'number', title: 'z' },
-      value: { type: 'number', title: '值' },
-    },
-  })
-  data = [
-    { x: 0, y: 0, z: 0, value: 1 },
-    { x: 0, y: 0, z: 1, value: 2 },
-    { x: 0, y: 1, z: 0, value: 3 },
-    { x: 0, y: 1, z: 1, value: 4 },
-    { x: 1, y: 0, z: 0, value: 5 },
-    { x: 1, y: 0, z: 1, value: 6 },
-    { x: 1, y: 1, z: 0, value: 7 },
-    { x: 1, y: 1, z: 1, value: 8 },
-  ];
-  options: any;
-  constructor() {}
-
-  ngOnInit(): void {
-    this.reset();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    this.reset();
-  }
-
-  reset() {
-    const data = this.data ? this.data.map((item) => [item.x, item.y, item.z, item.value]) : [];
-    this.options = {
-      visualMap: {
-        show: false,
-        min: this.min,
-        max: this.max,
-        inRange: {
-          symbolSize: [this.symbolSizeMin, this.symbolSizeMax],
-          color: this.visualMapColor,
-          colorAlpha: [this.colorAlphaMin, this.colorAlphaMax],
-        },
-      },
-      xAxis3D: {
-        type: 'value',
-      },
-      yAxis3D: {
-        type: 'value',
-      },
-      zAxis3D: {
-        type: 'value',
-      },
-      grid3D: {
-        axisLine: {
-          lineStyle: { color: '#fff' },
-        },
-        axisPointer: {
-          lineStyle: { color: '#fff' },
-        },
-        viewControl: {
-          // autoRotate: true
-        },
-        boxHeight: this.boxHeight ?? 100,
-        boxWidth: this.boxWidth ?? 100,
-        boxDepth: this.boxDepth ?? 100,
-      },
-      series: [
-        {
-          type: 'scatter3D',
-          data,
-        },
-      ],
-    };
-    console.log(this.options);
-  }
-
-  onChartClick(event) {}
-}

package/src/lib/scatter3d/scatter3d.module.ts

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