bbj-screen-widget 2.4.45 → 2.4.46

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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