bbj-screen-widget 2.4.61 → 2.4.62

package/src/lib/planimetric-map3d/planimetric-map3d.component.ts

@@ -0,0 +1,227 @@
+import {
+  Component,
+  OnInit,
+  forwardRef,
+  ViewChild,
+  ElementRef,
+  OnDestroy,
+  OnChanges,
+  SimpleChanges,
+  EventEmitter,
+} from '@angular/core';
+import { Widget, Property, Data, DataOutput, Event } from 'bbj-widget-base';
+import { ParentContainerComponent } from '../parent-container/parent-container.component';
+import { HttpClient } from '@angular/common/http';
+import * as echarts from 'echarts';
+import { NgxEchartsDirective } from 'ngx-echarts';
+import { PlanimetricMap2dComponent } from '../planimetric-map2d/planimetric-map2d.component';
+import { getEchartsTextStyle } from '../shared/util/echarts.util';
+
+const buttonEnum = [
+  { label: '鼠标左键', value: 'left' },
+  { label: '鼠标中键', value: 'middle' },
+  { label: '鼠标右键', value: 'right' },
+];
+
+@Component({
+  selector: 'sc-planimetric-map3d',
+  templateUrl: './planimetric-map3d.component.html',
+  styleUrls: ['./planimetric-map3d.component.less'],
+  providers: [{ provide: ParentContainerComponent, useExisting: forwardRef(() => PlanimetricMap3dComponent) }],
+})
+@Widget('3D平面地图', {
+  group: 'component',
+  image: 'assets/img/screen/3dmap.png',
+  icon: 'iconmokuai',
+  children: [
+    {
+      title: '散点图',
+      type: 'sc-map3d-mark-layer',
+      option: {},
+      hidden: true,
+      hideChild: true,
+    },
+  ],
+  childTypes: ['sc-map3d-mark-layer', 'sc-map3d-line-layer'],
+  description: 'hasChildItem',
+})
+export class PlanimetricMap3dComponent extends PlanimetricMap2dComponent implements OnInit, OnDestroy, OnChanges {
+  @Property('地图样式', {
+    ui: {
+      widget: 'myUrlSelect',
+      url: '/assets/mapListItem.json',
+    },
+  })
+  mapStyle = 'china';
+  @Property('区域背景', {
+    ui: {
+      widget: 'myColor',
+    },
+  })
+  areaColor = '#323c48';
+  @Property('区域描边', {
+    ui: {
+      widget: 'myColor',
+    },
+  })
+  borderColor = '#404a59';
+  @Property('移动高亮', {
+    ui: {
+      widget: 'myColor',
+    },
+  })
+  _areaColor = '#2a333d';
+  @Property('地区字体', { ui: { widget: 'myFont' } })
+  areaNamefont: any = {
+    family: '',
+    color: '#FFFFFF',
+    weight: 'normal',
+    size: 12,
+    space: 0,
+    lineHeight: 12,
+  };
+  @Property('显示地名', {
+    type: 'boolean',
+  })
+  showAreaName = true;
+  @Property('阴影颜色', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  shadowColor = '#2a333d';
+  @Property('边框粗细', {
+    type: 'number',
+  })
+  boderWidth = 2;
+  @Property('模型高度', { type: 'number' })
+  regionHeight = 3;
+  @Property('投影方式', {
+    enum: [
+      { label: '透视投影', value: 'perspective' },
+      { label: '正交投影', value: 'orthographic' },
+    ],
+  })
+  projection = 'perspective';
+  @Property('视角距离', { type: 'number', ui: { visibleIf: { projection: ['perspective'] } } })
+  distance = 100;
+  @Property('正交大小', { type: 'number', ui: { visibleIf: { projection: ['orthographic'] } } })
+  orthographicSize = 100;
+  @Property('alpha角', { type: 'number' })
+  alpha = 40;
+  @Property('beta角', { type: 'number' })
+  beta = 0;
+  @Property('平移操作', { enum: buttonEnum })
+  panMouseButton = 'middle';
+  @Property('旋转操作', { enum: buttonEnum })
+  rotateMouseButton = 'left';
+  @Property('开启光晕', { type: 'boolean' })
+  bloomEnable: boolean;
+  @Property('光晕强度', { type: 'number', ui: { visibleIf: { bloomEnable: [true] } } })
+  bloomIntensity = 0.1;
+
+  chartOption: any;
+  hasMap = false;
+  @Data({
+    properties: {
+      name: { type: 'string', title: '地名' },
+      lng: { type: 'number', title: '经度' },
+      lat: { type: 'string', title: '纬度' },
+    },
+  })
+  data: any[] = [];
+  @DataOutput(['name', 'lng', 'lat'])
+  @Event('选中', {
+    params: {
+      properties: {
+        name: { type: 'string', title: '值' },
+        lng: { type: 'number', title: '经度' },
+        lat: { type: 'string', title: '纬度' },
+      },
+    },
+  })
+  areaClick = new EventEmitter();
+
+  constructor(http: HttpClient) {
+    super(http);
+  }
+
+  chartInit() {
+    // this.loadMap(this.mapStyle).then((data) => {
+
+    const textStyle = getEchartsTextStyle(this.areaNamefont);
+    const geo3D = {
+      type: 'map3D',
+      boxHeight: 7,
+      regionHeight: this.regionHeight,
+      label: {
+        //静态的时候展示样式
+        show: this.showAreaName, //是否显示地图省份得名称
+        distance: 0,
+        ...textStyle,
+      },
+      selectedMode: this.selectedMode,
+      itemStyle: {
+        color: this.areaColor,
+        borderColor: this.borderColor,
+        borderWidth: this.boderWidth,
+      },
+      emphasis: {
+        label: {
+          show: this.showAreaName,
+          ...textStyle,
+        },
+        itemStyle: {
+          color: this._areaColor,
+        },
+      },
+      map: this.mapStyle,
+      roam: this.zoomSwitch,
+      nameMap: this.nameMap,
+      zoom: this.zoom,
+      // silent: false,
+      // regions,
+      viewControl: {
+        projection: this.projection,
+        distance: this.distance,
+        orthographicSize: this.orthographicSize,
+        alpha: this.alpha,
+        beta: this.beta,
+        panMouseButton: this.panMouseButton,
+        rotateMouseButton: this.rotateMouseButton,
+      },
+      postEffect: {
+        enable: this.bloomEnable,
+        bloom: {
+          enable: this.bloomEnable,
+          bloomIntensity: this.bloomIntensity,
+        },
+      },
+    };
+    let series = [];
+    this._children.forEach((child) => {
+      if (Array.isArray(child.item)) {
+        series.push(...child.item);
+      } else {
+        series.push(child.item);
+      }
+    });
+    // series.push(geo3D);
+    this.chartOption = {
+      geo3D,
+      tooltip: {},
+      series,
+    };
+    // });
+  }
+
+  // loadMap(name: string) {
+  //   let loadMapPromise = this.loadedMap[name];
+  //   if (!loadMapPromise) {
+  //     loadMapPromise = this.http.get('assets/echarts/map/json/' + name + '.json').toPromise();
+  //     this.loadedMap[name] = loadMapPromise;
+  //   }
+  //   return loadMapPromise;
+  // }
+}

package/src/lib/planimetric-map3d/planimetric-map3d.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PlanimetricMap3dComponent } from './planimetric-map3d.component';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+import { NgxEchartsModule } from 'ngx-echarts';
+import { Map3dMarkLayerModule } from './map3d-mark-layer/map3d-mark-layer.module';
+import { Map3dLineLayerModule } from './map3d-line-layer/map3d-line-layer.module';
+
+@NgModule({
+  declarations: [PlanimetricMap3dComponent],
+  imports: [CommonModule, WidgetBaseModule, NgxEchartsModule, Map3dMarkLayerModule,Map3dLineLayerModule],
+})
+export class PlanimetricMap3dModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(PlanimetricMap3dComponent);
+  }
+}

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,219 @@
+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('标签', { type: 'boolean' })
+  label = false;
+  @Property('形状', {
+    ui: { widget: 'select' },
+    enum: [
+      { label: '多边形', value: 'polygon' },
+      { label: '圆形', value: 'circle' },
+    ],
+  })
+  shape = 'polygon';
+  @Property('区域', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  area = false;
+  @Property('边距', { ui: { widget: 'myGrid' } })
+  grid: any = {
+    top: 30,
+    right: 30,
+    bottom: 40,
+    left: 36,
+  };
+  // @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,
+        grid: this.grid,
+        series: [
+          {
+            label: {
+              show: this.label,
+              textStyle: this.getTextStyle(this.font),
+              formatter: function (params) {
+                return params.value;
+              },
+            },
+            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();
+  });
+});