bbj-screen-widget 2.4.46 → 2.4.48

package/src/lib/radar-chart/radar-chart.component.html

@@ -1,7 +0,0 @@
-<div
-  echarts
-  [options]="chartOption"
-  class="demo-chart"
-  (chartClick)="onChartClick($event)"
-  [initOpts]="{ renderer: 'svg' }"
-></div>

package/src/lib/radar-chart/radar-chart.component.less

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

package/src/lib/radar-chart/radar-chart.component.spec.ts

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

package/src/lib/radar-chart/radar-chart.component.ts

@@ -1,203 +0,0 @@
-import { Component, OnChanges, OnInit, SimpleChanges, EventEmitter } from '@angular/core';
-import { Property, Widget, Data, Drill, DataOutput } from 'bbj-widget-base';
-import { BasicLineChartComponent } from '../basic-line-chart/basic-line-chart.component';
-
-@Component({
-  selector: 'sc-radar-chart',
-  templateUrl: './radar-chart.component.html',
-  styleUrls: ['./radar-chart.component.less'],
-})
-@Widget('雷达图', {
-  group: 'otherChart',
-  image: 'assets/img/screen/radar.png',
-  icon: 'icontubiao',
-})
-export class RadarChartComponent extends BasicLineChartComponent implements OnInit, OnChanges {
-
-  @Property('系列颜色', {
-    ui: {
-      widget: 'seriesColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
-    },
-  })
-  lineColor = ['#3285FF', '#00D2FD'];
-  @Property('字体', { ui: { widget: 'myFont' } })
-  font: any = {
-    family: '',
-    color: '#FFFFFF',
-    weight: 'normal',
-    size: 12,
-    space: 0,
-    lineHeight: '',
-  };
-  @Property('图例', {
-    ui: { widget: 'select' },
-    enum: [
-      { label: '无', value: 'none' },
-      { label: '自动', value: 'auto' },
-      { label: '左对齐', value: 'left' },
-      { label: '右对齐', value: 'right' },
-    ],
-  })
-  align = 'auto';
-  @Property('形状', {
-    ui: { widget: 'select' },
-    enum: [
-      { label: '多边形', value: 'polygon' },
-      { label: '圆形', value: 'circle' },
-    ],
-  })
-  shape = 'polygon';
-  @Property('区域', {
-    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
-  })
-  area = false;
-  @Property('缩放', { type: 'number' })
-  radius = 100;
-  chartOption: any = {};
-  @Data({
-    properties: {
-      x: { type: 'string', title: '类目' },
-      y: { type: 'number', title: '值' },
-      m: { type: 'number', title: '最大值' },
-      s: { type: 'string', title: '系列' },
-    },
-  })
-  _data = [
-    { x: '销售', y: 10, m: 37, s: '预算' },
-    { x: '管理', y: 20, m: 56, s: '预算' },
-    { x: '信息技术', y: 25, m: 65, s: '预算' },
-    { x: '客服', y: 35, m: 67, s: '预算' },
-    { x: '研发', y: 27, m: 76, s: '预算' },
-    { x: '市场', y: 28, m: 35, s: '预算' },
-    { x: '销售', y: 18, m: 76, s: '实际' },
-    { x: '管理', y: 28, m: 53, s: '实际' },
-    { x: '信息技术', y: 32, m: 76, s: '实际' },
-    { x: '客服', y: 48, m: 57, s: '实际' },
-    // { x: "研发", y: 20, m: 57, s: "实际" },
-    { x: '市场', y: 17, m: 56, s: '实际' },
-  ];
-  @Drill()
-  @DataOutput(['x', 's'])
-  dataClick = new EventEmitter<any>();
-  series = [];
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes._data) {
-      this.reloadData();
-      const style = {
-        color: this.font.color,
-        fontFamily: this.font.family,
-        fontWeight: this.font.weight,
-        fontSize: this.font.size,
-        lineHeight: this.font.lineHeight,
-      };
-
-      this.chartOption = {
-        legend: {
-          data: this.series,
-          align: this.align,
-          show: this.align !== 'none',
-          textStyle: style,
-        },
-        radar: {
-          shape: this.shape,
-          name: {
-            textStyle: style,
-          },
-          indicator: [],
-          radius: this.radius,
-        },
-        color: this.lineColor,
-        series: [
-          {
-            type: 'radar',
-            areaStyle: { opacity: this.area ? 0.3 : 0 },
-            data: [],
-          },
-        ],
-      };
-      for (let i = 0; i < this.xData.length; i++) {
-        this._data
-          .filter((els) => els.x === this.xData[i])
-          .forEach((el) => {
-            if (this.series.length > 1) {
-              if (this.chartOption.radar.indicator[i] && this.chartOption.radar.indicator[i].max) {
-                const ext = this.chartOption.radar.indicator[i].max;
-                this.chartOption.radar.indicator[i].max = Math.max(ext, el.m);
-              } else {
-                this.chartOption.radar.indicator.push({
-                  name: this.xData[i],
-                  max: el.m,
-                });
-              }
-            } else {
-              this.chartOption.radar.indicator.push({
-                name: this.xData[i],
-                max: el.m,
-              });
-            }
-          });
-      }
-      for (let i = 0; i < this.series.length; i++) {
-        this.chartOption.series[0].data.push({
-          value: [],
-          name: this.series[i],
-        });
-        const temp = [];
-        for (let j = 0; j < this._data.length; j++) {
-          if (this.series[i] === this._data[j].s||' ') {
-            temp.push(this._data[j]);
-          }
-        }
-        for (let j = 0; j < this.xData.length; j++) {
-          let count = 0;
-          for (let k = 0; k < temp.length; k++) {
-            if (temp[k].x == this.xData[j]) {
-              count++;
-            }
-          }
-          if (count == 0) {
-            this._data.push({
-              x: this.xData[j],
-              y: null,
-              m: null,
-              s: this.series[i],
-            });
-          }
-        }
-        this._data.sort((prev, next) => {
-          return this.xData.indexOf(prev.x) - this.xData.indexOf(next.x);
-        });
-        this._data
-          .filter((els) => els.s === this.series[i])
-          .forEach((el) => {
-            for (let j = 0; j < this.xData.length; j++) {
-              if (this.xData[j] === el.x) {
-                this.chartOption.series[0].data[i].value.push(el.y);
-              }
-            }
-          });
-      }
-    }
-  }
-  reloadData() {
-    if (this._data[0]) {
-      for (let i = 0; i < this._data.length; i++) {
-        if(!this._data[i].s){
-          this.align='none';
-        }
-        this._data[i].s=this._data[i].s||' ';
-        this.series[i] =  this._data[i].s;
-      }
-      this.uniqueData(this.series);
-    }
-    for (let i = 0; i < this._data.length; i++) {
-      this.xData[i] = this._data[i].x;
-    }
-    this.uniqueData(this.xData);
-  }
-  ngOnInit() {}
-  onChartClick(event) {
-    this.dataClick.emit({ x: event.name, s: event.seriesName });
-  }
-}

package/src/lib/radar-chart/radar-chart.module.ts

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

package/src/lib/radio/radio.component.html

@@ -1,18 +0,0 @@
-<ng-container *ngIf="!isCustom">
-  <ng-container *ngIf="styleType!='button'">
-    <nz-radio-group [(ngModel)]="radioValue" (ngModelChange)="radioChange($event)" [ngStyle]="ngStyle">
-      <label nz-radio *ngFor="let option of options" [nzValue]="option.value">{{option.label}}</label>
-    </nz-radio-group>
-  </ng-container>
-  <ng-container *ngIf="styleType=='button'">
-    <nz-radio-group [(ngModel)]="radioValue" (ngModelChange)="radioChange($event)" [ngStyle]="ngStyle"
-      nzButtonStyle="solid">
-      <label nz-radio-button *ngFor="let option of options"  [nzValue]="option.value">{{option.label}}</label>
-    </nz-radio-group>
-  </ng-container>
-</ng-container>
-<ng-container *ngIf="isCustom">
-  <div class="content">
-    <label class="customRadio" *ngFor="let option of options"  (click)="checked(option)"><input type="radio" [value]="option.value" [checked]="option.checked" /><span>{{option.label}}</span></label>
-  </div>
-</ng-container>

package/src/lib/radio/radio.component.less

@@ -1,61 +0,0 @@
-:host ::ng-deep {
-  .ant-radio-checked .ant-radio-inner, .ant-radio-inner{
-    border-color: var(--radioColor);
-    width: var(--outerSize);
-    height: var(--outerSize);
-    position:relative;
-  }
-  .ant-radio-inner::after {
-    background-color: var(--radioColor);
-    width: var(--innerSize);
-    height: var(--innerSize);
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    max-width: 50%;
-    text-align: center;
-  }
-  .ant-radio, .ant-radio-group, .ant-radio-wrapper, .ng-star-inserted {
-    color: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    // top:-1px;
-  }
-  .ant-radio-button-checked{
-    background-color: var(--radioColor);
-  }
-  .content{
-    display: flex;
-    .customRadio{
-      cursor: pointer;
-      flex: 1;
-    }
-  }
-  .customRadio input[type="radio"] {
-    display: none;
-  }
-  .customRadio input[type="radio"]+span {
-    display: inline-block;
-    width: var(--width);
-    height: var(--height);;
-    font-size: var(--outerSize);
-    line-height:var(--height);
-    color: var(--color);
-    font-weight: var(--weight);
-    font-family: var(--family);
-    text-align: center;
-    // border: 1px solid #999;
-    // background-color: #fff;
-    background-image: var(--notSelect);
-    background-repeat: no-repeat;
-    background-size: cover;
-}
-.customRadio input[type="radio"]:checked+span {
-    // border: 1px solid #090;
-    // background-color: rgb(182, 71, 37);
-    background-image: var(--select);
-    background-repeat: no-repeat;
-    background-size: cover;
-}
-}

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

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

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%;
-}