bbj-screen-widget 2.4.62 → 2.4.63

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

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

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

@@ -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,219 +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('标签', { 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

@@ -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();
-  });
-});