bbj-screen-widget 2.4.61 → 2.4.62

package/src/lib/parent-container/parent-container.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'sc-parent-container',
+  templateUrl: './parent-container.component.html',
+  styleUrls: ['./parent-container.component.less']
+})
+export class ParentContainerComponent implements OnInit {
+  children: any;
+  childId: string;
+  constructor() { }
+
+  ngOnInit() {
+  }
+  childInit(child: any) {
+    // this.children = child;
+  }
+  deleteChild(childId: string) {
+    // this.childId = childId
+  }
+}

package/src/lib/parent-container/parent-container.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ParentContainerComponent } from './parent-container.component';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+
+@NgModule({
+  declarations: [ParentContainerComponent],
+  imports: [CommonModule, WidgetBaseModule],
+})
+export class ParentContainerModule {
+  constructor(widgetService: WidgetService) {
+    // widgetService.register(ParentContainerComponent);
+  }
+}

package/src/lib/percent-pie-chart/percent-pie-chart.component.html

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

package/src/lib/percent-pie-chart/percent-pie-chart.component.less

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

package/src/lib/percent-pie-chart/percent-pie-chart.component.spec.ts

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

package/src/lib/percent-pie-chart/percent-pie-chart.component.ts

@@ -0,0 +1,213 @@
+import { Component, OnChanges, OnInit, SimpleChanges, EventEmitter } from '@angular/core';
+import { Property, Widget, Data, Drill, DataOutput } from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-percent-pie-chart',
+  templateUrl: './percent-pie-chart.component.html',
+  styleUrls: ['./percent-pie-chart.component.less'],
+})
+@Widget('占比饼图', {
+  group: 'pieChart',
+  image: 'assets/img/screen/percent_pie.png',
+  icon: 'icontubiao',
+})
+export class PercentPieChartComponent implements OnInit, OnChanges {
+  @Property('图表样式', {
+    ui: {
+      widget: 'myImageExample',
+      spanLabel: 24,
+      spanControl: 24,
+      class: 'percentPie',
+      reset: ['pieColor'],
+      example: [
+        {
+          background: 'assets/img/screen/percent_pie1.png',
+          data: { pieColor: { gradient: true, value: [['#FF7C24', '#50536E']] } },
+        },
+        {
+          background: 'assets/img/screen/percent_pie2.png',
+          data: { pieColor: { gradient: true, value: [['#00FEC3', '#50536E']] } },
+        },
+        {
+          background: 'assets/img/screen/percent_pie3.png',
+          data: { pieColor: { gradient: true, value: [['#00D2FD', '#50536E']] } },
+        },
+        {
+          background: 'assets/img/screen/percent_pie4.png',
+          data: { pieColor: { gradient: true, value: [['#BF91FA', '#50536E']] } },
+        },
+      ],
+    },
+  })
+  example: any;
+  @Property('颜色', {
+    ui: {
+      widget: 'seriesColor',
+      type: 'gradual',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  pieColor = {
+    gradient: true,
+    value: [
+      ['#00A2FD', '#50536E'],
+      ['black', 'black'],
+    ],
+  };
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = {
+    family: '',
+    color: '#AFB2BF',
+    weight: 'normal',
+    size: 20,
+    space: 0,
+    lineHeight: '',
+  };
+  @Property('环宽', { type: 'number' })
+  width = 20;
+  @Property('圆角', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  fillet = false;
+  @Property('顺时针', {
+    ui: { widget: 'boolean', checkedChildren: '顺', unCheckedChildren: '逆' },
+  })
+  clockwise = true;
+  @Property('百分值', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  percent = true;
+  image: string;
+  constructor() {}
+
+  chartOption: any = {};
+  @Data({
+    properties: {
+      value: { type: 'number', title: '值' },
+      max: { type: 'number', title: '最大值' },
+    },
+  })
+  _data = [{ value: 80, max: 100 }];
+  @Drill()
+  @DataOutput(['value', 'max'])
+  dataClick = new EventEmitter<any>();
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes._data) {
+      const value = this._data[0].value;
+      const value_per = (this._data[0].value / this._data[0].max) * 100;
+      const style = {
+        color: this.font.color,
+        fontFamily: this.font.family,
+        fontWeight: this.font.weight,
+        fontSize: this.font.size,
+        lineHeight: this.font.lineHeight,
+      };
+      let pieColor;
+      if (this.pieColor && this.pieColor.value) {
+        pieColor = this.pieColor.value;
+      } else {
+        pieColor = this.pieColor;
+      }
+      const color = {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        global: false,
+        colorStops: [
+          { offset: 0, color: pieColor[0][0] },
+          { offset: 1, color: pieColor[0][1] },
+        ],
+      };
+
+      this.chartOption = {
+        title: {
+          text: this.percent ? parseInt(value_per.toString()) + '%' : parseInt(value.toString()),
+          textStyle: style,
+          left: 'center',
+          top: 'center',
+        },
+        angleAxis: {
+          max: this._data[0].max, // 满分
+          clockwise: this.clockwise, // 逆时针
+          // 隐藏刻度线
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        radiusAxis: {
+          type: 'category',
+          // 隐藏刻度线
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        polar: {
+          center: ['50%', '50%'],
+          radius: '100%', // 图形大小
+        },
+        series: [
+          {
+            type: 'bar',
+            label: {
+              show: false,
+            },
+            data: [
+              {
+                value,
+                itemStyle: {
+                  // 颜色渐变
+                  color,
+                },
+              },
+            ],
+            coordinateSystem: 'polar',
+            roundCap: this.fillet,
+            barWidth: this.width,
+            barGap: '-100%', // 两环重叠
+            z: 2,
+          },
+          {
+            // 灰色环
+            type: 'bar',
+            data: [
+              {
+                value: this._data[0].max,
+                itemStyle: {
+                  color: pieColor[pieColor.length - 1][0],
+                },
+              },
+            ],
+            coordinateSystem: 'polar',
+            roundCap: this.fillet,
+            barWidth: this.width,
+            barGap: '-100%', // 两环重叠
+            z: 1,
+          },
+        ],
+      };
+    }
+    console.log(this.chartOption);
+  }
+  ngOnInit() {}
+  onChartClick(event) {
+    this.dataClick.emit({ x: event.name, s: event.seriesName });
+  }
+}

package/src/lib/percent-pie-chart/percent-pie-chart.module.ts

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

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

@@ -0,0 +1 @@
+<div #container style="height: 100%"></div>

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

@@ -0,0 +1,9 @@
+:host::ng-deep {
+    .highcharts-background{
+        display: none;
+    
+    }
+    .highcharts-credits{
+        display: none;
+    }
+}

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

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

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

@@ -0,0 +1,278 @@
+import { Component, ElementRef, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
+import { LazyService } from '@delon/util';
+import { FindValueSubscriber } from 'rxjs/internal/operators/find';
+import { Data, Property, Widget } from 'bbj-widget-base';
+import { HighChartsService } from '../shared/service/highcharts.service';
+import { getFontStyle } from '../shared/util/style.util';
+declare var Highcharts: any;
+@Component({
+  selector: 'sc-pie3d-chart',
+  templateUrl: './pie3d-chart.component.html',
+  styleUrls: ['./pie3d-chart.component.less'],
+})
+@Widget('3D饼图', {
+  group: 'pieChart',
+  image: 'assets/img/screen/pie3d.png',
+  icon: 'icontubiao',
+})
+export class Pie3dChartComponent implements OnInit, OnChanges {
+  static initPluginPromise = null;
+
+  @ViewChild('container', { static: true })
+  container: ElementRef;
+  @Property('标题', { type: 'string' })
+  title = '';
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = {
+    family: '',
+    color: '#FFFFFF',
+    weight: 'normal',
+    size: 12,
+    space: 0,
+    lineHeight: '',
+  };
+  @Property('浮标', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  buoy = false;
+  @Property('填充', {
+    ui: {
+      widget: 'seriesColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  colors = ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'];
+  @Property('饼图厚度', { type: 'number' })
+  thickness = 45;
+  @Property('倾斜角度', { type: 'number' })
+  angle = 60;
+  @Property('图例开关', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  showLegend = true;
+  @Property('图例间距', { type: 'number' })
+  itemDistance = 80;
+  @Property('高度系数', { type: 'number' })
+  coefficient = 1;
+  @Property('开始角度', { type: 'number' })
+  startAngle = 90;
+  @Property('图例水平', {
+    ui: { widget: 'select' },
+    enum: [
+      { label: '居中', value: 'center' },
+      { label: '居左', value: 'left' },
+      { label: '居右', value: 'right' },
+    ],
+  })
+  alignType = 'center';
+  @Property('图例垂直', {
+    ui: { widget: 'select' },
+    enum: [
+      { label: '居上', value: 'top' },
+      { label: '居下', value: 'bottom' },
+      { label: '居中', value: 'middle' },
+    ],
+  })
+  verticalAlign = 'bottom';
+  @Property('提示框字体', { ui: { widget: 'myFont' } })
+  tooltipFont: any;
+  @Data({
+    properties: {
+      x: { type: 'string', title: '类目' },
+      y: { type: 'number', title: '值' },
+    },
+  })
+  _data = [
+    { x: '一月', y: 33 },
+    { x: '二月', y: 31 },
+    { x: '三月', y: 11 },
+    { x: '四月', y: 11 },
+    { x: '五月', y: 7 },
+    { x: '六月', y: 20 },
+  ];
+  data: any[] = [];
+
+  constructor(private highChartsService: HighChartsService) {}
+
+  ngOnInit(): void {}
+
+  async ngOnChanges(changes: SimpleChanges) {
+    await this.initPlugin();
+    this.reloadData();
+    let each = Highcharts.each,
+      round = Math.round,
+      cos = Math.cos,
+      sin = Math.sin,
+      deg2rad = Math.PI / 180;
+    Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'translate', function (proceed) {
+      proceed.apply(this, [].slice.call(arguments, 1));
+      // Do not do this if the chart is not 3D
+      if (!this.chart.is3d()) {
+        return;
+      }
+      var series = this,
+        chart = series.chart,
+        options = chart.options,
+        seriesOptions = series.options,
+        depth = seriesOptions.depth || 0,
+        options3d = options.chart.options3d,
+        alpha = options3d.alpha,
+        beta = options3d.beta,
+        z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth;
+      z += depth / 2;
+      if (seriesOptions.grouping !== false) {
+        z = 0;
+      }
+      each(series.data, function (point) {
+        var shapeArgs = point.shapeArgs,
+          angle;
+        point.shapeType = 'arc3d';
+        var ran = point.options.h;
+        shapeArgs.z = z;
+        shapeArgs.depth = depth * 0.75 + ran;
+        shapeArgs.alpha = alpha;
+        shapeArgs.beta = beta;
+        shapeArgs.center = series.center;
+        shapeArgs.ran = ran;
+        angle = (shapeArgs.end + shapeArgs.start) / 2;
+        point.slicedTranslation = {
+          translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
+          translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
+        };
+      });
+    });
+    (function (H) {
+      H.wrap(Highcharts.SVGRenderer.prototype, 'arc3dPath', function (proceed) {
+        // Run original proceed method
+        var ret = proceed.apply(this, [].slice.call(arguments, 1));
+        ret.zTop = (ret.zOut + 0.5) / 100;
+        return ret;
+      });
+    })(Highcharts);
+
+    let sum = this._data.reduce((sum, data) => sum + Number(data.y), 0);
+    this._data.sort((a, b) => {
+      return b.y - a.y;
+    });
+    const data = [];
+    this._data.forEach((record) => {
+      // const x=record.x;
+      // const s=record.s;
+      // const y=record.y;
+      const { x, y } = record;
+      let obj: any;
+      if (sum === 0) {
+        obj = { name: x, y: 1, h: (100 / this._data.length) * (this.coefficient || 1) };
+      } else {
+        obj = { name: x, y: Number(y), h: (Number(y) / sum) * 100 * (this.coefficient || 1) };
+      }
+
+      data.push(obj);
+    });
+    let pointFormat = '{series.name}: <b>{point.percentage:.1f}%</b>';
+    let labelFormat = '<span style="{color}">{name} :{y}</span>';
+    let format = '<span style="color:{point.color}">{point.y}<br/>{point.name}';
+    if (sum === 0) {
+      pointFormat = '{series.name}: <b>0%</b>';
+      labelFormat = '<span style="{color}">{name} :0</span>';
+      format = '<span style="color:{point.color}">0<br/>{point.name}';
+    }
+    const options = {
+      legend: {
+        itemStyle: {
+          color: this.font.color,
+          fontSize: this.font.size + 'px',
+          fontWeight: this.font.weight,
+          fontFamily: this.font.family,
+        },
+        verticalAlign: this.verticalAlign,
+        align: this.alignType,
+        itemDistance: this.itemDistance,
+        labelFormat,
+      },
+      chart: {
+        type: 'pie',
+        animation: false,
+        events: {
+          load: function () {
+            var each = Highcharts.each,
+              points = this.series[0].points;
+            each(points, function (p, i) {
+              p.graphic.attr({
+                translateY: -p.shapeArgs.ran,
+              });
+              p.graphic.side1.attr({
+                translateY: -p.shapeArgs.ran,
+              });
+              p.graphic.side2.attr({
+                translateY: -p.shapeArgs.ran,
+              });
+            });
+          },
+        },
+        options3d: {
+          enabled: true,
+          alpha: this.angle,
+          beta: 0,
+        },
+      },
+      title: {
+        text: this.title,
+        style: {
+          color: this.font.color,
+          fontSize: this.font.size + 'px',
+          fontWeight: this.font.weight,
+          fontFamily: this.font.family,
+        },
+      },
+      tooltip: {
+        pointFormat,
+        style: getFontStyle(this.tooltipFont),
+      },
+      plotOptions: {
+        pie: {
+          showInLegend: this.showLegend,
+          allowPointSelect: false,
+          cursor: 'pointer',
+          depth: this.thickness,
+          point: {
+            events: {
+              legendItemClick: function () {
+                return false;
+              },
+            },
+          },
+          dataLabels: {
+            style: getFontStyle(this.font),
+            enabled: this.buoy,
+            format,
+            // formatter,
+          },
+        },
+      },
+      colors: this.colors,
+      series: [
+        {
+          type: 'pie',
+          name: this.title,
+          startAngle: this.startAngle,
+          data,
+        },
+      ],
+    };
+    let chart = Highcharts.chart(this.container.nativeElement, options);
+  }
+  reloadData() {}
+
+  initPlugin() {
+    return this.highChartsService.load3D();
+  }
+
+  // async _initPlugin() {
+  //   await this.lazy.loadScript('assets/js/highcharts/highcharts.js');
+  //   await this.lazy.loadScript('assets/js/highcharts/highcharts-3d.js');
+  //   // await this.lazy.loadScript('https://code.highcharts.com.cn/highcharts/modules/exporting.js');
+  //   // await this.lazy.loadScript('https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js');
+  //   // await this.lazy.loadScript('https://code.highcharts.com.cn/highcharts/themes/dark-unica.js');
+  // }
+}

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

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Pie3dChartComponent } from './pie3d-chart.component';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+
+
+
+@NgModule({
+  declarations: [Pie3dChartComponent],
+  imports: [CommonModule, WidgetBaseModule],
+})
+export class Pie3dChartModule { 
+  constructor(widgetService: WidgetService) {
+    widgetService.register(Pie3dChartComponent);
+  }
+}

package/src/lib/planimetric-map2d/fly-line-layer/fly-line-layer.component.spec.ts

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