bbj-screen-widget 2.4.62 → 2.4.63

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

@@ -1,439 +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-basic-pie-chart',
-  templateUrl: './basic-pie-chart.component.html',
-  styleUrls: ['./basic-pie-chart.component.less'],
-})
-@Widget('饼图', {
-  group: 'pieChart',
-  image: 'assets/img/screen/pie.png',
-  icon: 'icontubiao',
-})
-export class BasicPieChartComponent extends BasicLineChartComponent implements OnInit, OnChanges {
-  @Property('类型', { ui: { hidden: true } })
-  type = 'basic';
-  @Property('图表样式', {
-    ui: {
-      widget: 'myImageExample',
-      spanLabel: 24,
-      spanControl: 24,
-      reset: ['pieColor'],
-      class: 'pie',
-      example: [
-        {
-          background: 'assets/img/screen/pie1.png',
-          data: {
-            pieColor: {
-              gradient: true,
-              value: [
-                ['#FFB82E', '#FFB82E'],
-                ['#FF7C24', '#FF7C24'],
-                ['#FF610F', '#FF610F'],
-                ['#EE2100', '#EE2100'],
-                ['#A52501', '#A52501'],
-                ['#7B2C04', '#7B2C04'],
-              ],
-            },
-          },
-        },
-        {
-          background: 'assets/img/screen/pie2.png',
-          data: {
-            pieColor: {
-              gradient: true,
-              value: [
-                ['#00FEC3', '#00FEC3'],
-                ['#00F4A8', '#00F4A8'],
-                ['#00D59B', '#00D59B'],
-                ['#00B880', '#00B880'],
-                ['#00896E', '#00896E'],
-                ['#006A60', '#006A60'],
-              ],
-            },
-          },
-        },
-        {
-          background: 'assets/img/screen/pie3.png',
-          data: {
-            pieColor: {
-              gradient: true,
-              value: [
-                ['#45C1FC', '#45C1FC'],
-                ['#00A1FB', '#00A1FB'],
-                ['#0076B7', '#0076B7'],
-                ['#004D7E', '#004D7E'],
-                ['#003560', '#003560'],
-                ['#001736', '#001736'],
-              ],
-            },
-          },
-        },
-        {
-          background: 'assets/img/screen/pie4.png',
-          data: {
-            pieColor: {
-              gradient: true,
-              value: [
-                ['#BF91FA', '#BF91FA'],
-                ['#9B35F8', '#9B35F8'],
-                ['#9813D9', '#9813D9'],
-                ['#790588', '#790588'],
-                ['#B30B9A', '#B30B9A'],
-                ['#DC1098', '#DC1098'],
-              ],
-            },
-          },
-        },
-      ],
-    },
-  })
-  example: any;
-  @Property('填充', {
-    ui: {
-      widget: 'seriesColor',
-      type: 'gradual',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
-    },
-  })
-  pieColor = {
-    gradient: true,
-    value: [
-      ['#45C1FC', '#45C1FC'],
-      ['#00A1FB', '#00A1FB'],
-      ['#0076B7', '#0076B7'],
-      ['#004D7E', '#004D7E'],
-      ['#003560', '#003560'],
-      ['#001736', '#001736'],
-    ],
-  };
-  @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: 'center' },
-      { label: '纵向居左', value: 'left' },
-      { label: '纵向居右', value: 'right' },
-    ],
-  })
-  align = 'none';
-  @Property('图例呈现', {
-    ui: { widget: 'select' },
-    enum: [
-      { label: '数据', value: 'data' },
-      { label: '百分比', value: 'percent' },
-      { label: '数据-百分比', value: 'both' },
-    ],
-  })
-  legentData = 'data';
-  @Property('线标', {
-    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
-  })
-  lineMark = false;
-  @Property('浮标', {
-    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
-  })
-  buoy = false;
-  @Property('缩放', { type: 'number' })
-  radius = 1;
-  @Property('边距', { ui: { widget: 'myGrid', type: 'pie' } })
-  grid: any = {
-    top: 50,
-    left: 50,
-  };
-
-  @Property('环宽', { type: 'number' })
-  roundWidth = 15;
-
-  @Property('增加隔断', {
-    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
-  })
-  addSplit = false;
-
-  @Property('单位')
-  unit: string;
-
-  seriesDataPie = [];
-  xData = [];
-  radiusPie = ['0%', '75%'];
-  chartOption: any = {};
-  roseType = 'false';
-  @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 },
-  ];
-  @Drill()
-  @DataOutput(['x'])
-  dataClick = new EventEmitter<any>();
-  // 隔断样式
-  splitWidth = 0;
-  splitItem = {
-    value: this.splitWidth,
-    name: 'split',
-    itemStyle: {
-      normal: {
-        label: {
-          show: false,
-        },
-        labelLine: {
-          show: false,
-        },
-        color: 'rgba(0, 0, 0, 0)',
-        borderColor: 'rgba(0, 0, 0, 0)',
-        borderWidth: 0,
-      },
-    },
-  };
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes._data) {
-      if (this._data == null) {
-        this._data = [];
-      }
-      this.getPieData();
-      if (this.addSplit) {
-        // 计算隔断层的宽度 取1%作为隔断
-        const splitWidth = this._data.reduce((a, b) => a + Number(b.y), 0) / 100;
-        this.splitItem.value = splitWidth;
-      }
-      if (this.type === 'ring' || this.type === 'roseRing') {
-        const min = 75 - (Math.abs(Number(this.roundWidth)) || 75); // 获取最小的宽度 最大宽固定是75
-        this.radiusPie = [`${min}%`, '75%'];
-      } else {
-        this.radiusPie = ['0%', '75%'];
-      }
-      if (this.radius != null) {
-        this.radiusPie[0] = parseInt(this.radiusPie[0], 10) * this.radius + '%';
-        this.radiusPie[1] = parseInt(this.radiusPie[1], 10) * this.radius + '%';
-      }
-      if (this.type === 'rose' || this.type === 'roseRing') {
-        this.roseType = 'radius';
-      }
-      const objData = this.array2obj(this.seriesDataPie, 'name');
-      const color = [];
-      const textStyle = {
-        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;
-      }
-      for (let i = 0; i < pieColor.length; i++) {
-        color.push(pieColor[i][0]);
-      }
-      this.chartOption = {
-        tooltip: {
-          show: this.buoy,
-          textStyle: {
-            fontFamily: this.font.family,
-            fontWeight: this.font.weight,
-            fontSize: this.font.size,
-            lineHeight: this.font.lineHeight,
-          },
-          trigger: 'item',
-          //   formatter: '{b} : {c} ({d}%)',
-          formatter: (item) => {
-            return item.name === 'split' ? '' : `${item.name}: ${this.addUnit(item.value)}(${item.percent}%)`;
-          },
-        },
-        legend: {
-          type: 'scroll',
-          orient: 'vertical',
-          data: this.xData,
-          x: this.align,
-          show: this.align !== 'none',
-          // formatter: function (name) {
-          //   return name + '（' + objData[name].value + '）';
-          // },
-          textStyle,
-        },
-        color,
-        series: [
-          {
-            name: 'pie',
-            type: 'pie',
-            roseType: this.roseType === 'radius' ? 'radius' : false,
-            label: {
-              normal: {
-                show: this.lineMark,
-                formatter: (item) => {
-                  return item.name === 'split' ? '' : this.addUnit(item.value);
-                },
-                textStyle,
-              },
-            },
-            center: [this.grid.left + '%', this.grid.top + '%'],
-            radius: this.radiusPie,
-            labelLine: {
-              normal: {
-                show: this.lineMark,
-              },
-            },
-            textStyle,
-            data: [],
-            // ,
-            // data: this.seriesDataPie
-            /* .sort(function(a, b) {
-              return a.value - b.value;
-            }),*/
-          },
-        ],
-        // dataset: {
-        //   // 用 dimensions 指定了维度的顺序。直角坐标系中，
-        //   // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
-        //   // 如果不指定 dimensions，也可以通过指定 series.encode
-        //   // 完成映射，参见后文。
-        //   // dimensions: [],
-        //   source: [],
-        // },
-      };
-      this.reloadData();
-      // console.log(this.chartOption);
-      if (this.legentData === 'percent') {
-        this.chartOption.legend.formatter = (name: string) => {
-          let total = 0;
-          Object.keys(objData).forEach((key) => {
-            for (const a of objData[key]) {
-              total += parseInt(a.value, 10);
-            }
-          });
-          let b = 0;
-          for (const a of objData[name]) {
-            b += Number(a.value);
-          }
-          const p = ((b / total) * 100).toFixed(0);
-          return name + '（' + p + '%）';
-        };
-      }
-      if (this.legentData === 'both') {
-        this.chartOption.legend.formatter = (name) => {
-          let total = 0;
-          Object.keys(objData).forEach((key) => {
-            // console.log(key);
-            for (const a of objData[key]) {
-              total += parseInt(a.value, 10);
-            }
-          });
-          let b = 0;
-          for (const a of objData[name]) {
-            b += Number(a.value);
-          }
-          const p = ((b / total) * 100).toFixed(0);
-          return name + '（' + this.addUnit(b) + '-' + p + '%）';
-        };
-      }
-      if (this.legentData === 'data') {
-        this.chartOption.legend.formatter = (name) => {
-          let total = 0;
-          // for (let key of Object.keys(objData)) {
-          for (const a of objData[name]) {
-            total += Number(a.value);
-          }
-          // total += Number(objData[key].value);
-          // }
-          // let p = ((objData[name].value / total) * 100).toFixed(0);
-          return name + '（' + this.addUnit(total) + '）';
-        };
-      }
-    }
-  }
-
-  addUnit(value: any) {
-    if (this.unit && value != null && value !== '') {
-      value += this.unit;
-    }
-    return value;
-  }
-
-  reloadData() {
-    const source = [];
-    const addSplit = this.addSplit && this._data.filter((item) => item.y).length > 1;
-    this._data.forEach((record) => {
-      // const x=record.x;
-      // const s=record.s;
-      // const y=record.y;
-      const { x, y } = record;
-      const arr = {
-        name: x,
-        value: Number(y),
-      };
-      // arr.push(x, Number(y));
-      source.push(arr);
-      if (addSplit) {
-        source.push(this.splitItem);
-      }
-    });
-    this.chartOption.series[0].data = source;
-    // this.chartOption.dataset.source = source;
-    this._data.forEach((a) => {
-      const x = { name: a.x };
-      this.xData.push(x);
-    });
-    this.uniqueData(this.xData);
-  }
-
-  ngOnInit() {}
-
-  getPieData() {
-    this.seriesDataPie = [];
-    let total = 0;
-    if (this.addSplit) {
-      this._data.forEach((t) => {
-        total += t.y;
-      });
-    }
-    for (let i = 0; i < this._data.length; i++) {
-      // if (total > 0 && this._data[i].y / total >= 1) {
-      //   this.addSplit = false;
-      // }
-      this.seriesDataPie.push({
-        value: this._data[i].y,
-        name: this._data[i].x,
-      });
-    }
-  }
-
-  array2obj(array, key) {
-    const resObj = {};
-    for (let i = 0; i < array.length; i++) {
-      if (!resObj[array[i][key]]) {
-        resObj[array[i][key]] = [];
-      }
-      resObj[array[i][key]].push(array[i]);
-    }
-    return resObj;
-  }
-
-  getLegentData(name) {}
-
-  onChartClick(event) {
-    this.dataClick.emit({ x: event.name, s: event.seriesName });
-  }
-}

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

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

package/src/lib/basic-planimetric-map/basic-planimetric-map.component.html

@@ -1,2 +0,0 @@
-<ng-template *ngFor="let child of children" widget-host [widget]="child"></ng-template>
-<div echarts *ngIf="hasMap" [options]="chartOption" class="demo-chart"></div>

package/src/lib/basic-planimetric-map/basic-planimetric-map.component.less

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

package/src/lib/basic-planimetric-map/basic-planimetric-map.component.spec.ts

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

package/src/lib/basic-planimetric-map/basic-planimetric-map.component.ts

@@ -1,211 +0,0 @@
-import { Component, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
-import { Widget, Property } from 'bbj-widget-base';
-// import 'echarts/dist/extension/bmap.js';
-import { ParentContainerComponent } from '../parent-container/parent-container.component';
-import { BaiduMapService } from 'bbj-screen-widget/core';
-
-@Component({
-  selector: 'sc-basic-planimetric-map',
-  templateUrl: './basic-planimetric-map.component.html',
-  styleUrls: ['./basic-planimetric-map.component.less'],
-  providers: [{ provide: ParentContainerComponent, useExisting: forwardRef(() => BasicPlanimetricMapComponent) }],
-})
-@Widget('基础平面地图',{group: 'component',image: 'assets/img/screen/basicMap.png',icon: 'iconmokuai', children:[
-{
-      title: '呼吸气泡层',
-      type: 'sc-breathing-bubble-layer',
-      option: {
-      },
-      hidden: true,
-      hideChild: true
-    },],
-  childTypes:['sc-breathing-bubble-layer'],
-  description: 'hasChildItem'})
-export class BasicPlanimetricMapComponent extends ParentContainerComponent implements OnInit, OnChanges {
-
-  @Property('地图缩放', {
-    ui: { widget: 'myRange', min: 1, max: 40, step: 1 },
-  })
-  zoom = 5;
-  @Property('中心经度', {
-    ui: { widget: 'myRange', min: -180, max: 180, step: 1 },
-  })
-  centerLng = 104;
-  @Property('中心纬度', {
-    ui: { widget: 'myRange', min: -90, max: 90, step: 1 },
-  })
-  centerLat = 36;
-  chartOption: any;
-  hasMap = false;
-  _children: any = [];
-  constructor(public baiduMapService: BaiduMapService) {
-      super();
-  }
-    ngOnChanges(changes: SimpleChanges): void {
-    }
-
-  async ngOnInit() {
-    await this.baiduMapService.loadMap();
-    await import('echarts/extension/bmap/bmap.js');
-    this.hasMap = true;
-    this.chartInit();
-  }
-  chartInit() {
-    let series = [];
-    this._children.forEach(child => {
-        if (Array.isArray(child.item)) {
-            series = [...series, ...child.item];
-        } else {
-            series = [...series, child.item];
-        }
-    });
-    this.chartOption = {
-        title: {
-            text: '基础平面地图'
-        },
-        tooltip : {
-            trigger: 'item'
-        },
-        bmap: {
-          label: {
-            emphasis: {
-              show: false
-            }
-          },
-          itemStyle: {
-            normal: {
-              areaColor: '#323c48',
-              borderColor: '#404a59',
-              opacity:1
-            },
-            emphasis: {
-              areaColor: '#2a333d'
-            }
-          },
-            center: [this.centerLng, this.centerLat],
-            zoom: this.zoom,
-            roam: true,
-            mapStyle: {
-                styleJson: [{
-                  featureType: 'water',
-                  elementType: 'all',
-                  stylers: {
-                      color: '#d1d1d1'
-                  }
-              }, {
-                  featureType: 'land',
-                  elementType: 'all',
-                  stylers: {
-                      color: '#f3f3f3'
-                  }
-              }, {
-                  featureType: 'railway',
-                  elementType: 'all',
-                  stylers: {
-                      visibility: 'off'
-                  }
-              }, {
-                  featureType: 'highway',
-                  elementType: 'all',
-                  stylers: {
-                      color: '#fdfdfd'
-                  }
-              }, {
-                  featureType: 'highway',
-                  elementType: 'labels',
-                  stylers: {
-                      visibility: 'off'
-                  }
-              }, {
-                  featureType: 'arterial',
-                  elementType: 'geometry',
-                  stylers: {
-                      color: '#fefefe'
-                  }
-              }, {
-                  featureType: 'arterial',
-                  elementType: 'geometry.fill',
-                  stylers: {
-                      color: '#fefefe'
-                  }
-              }, {
-                  featureType: 'poi',
-                  elementType: 'all',
-                  stylers: {
-                      visibility: 'off'
-                  }
-              }, {
-                  featureType: 'green',
-                  elementType: 'all',
-                  stylers: {
-                      visibility: 'off'
-                  }
-              }, {
-                  featureType: 'subway',
-                  elementType: 'all',
-                  stylers: {
-                      visibility: 'off'
-                  }
-              }, {
-                  featureType: 'manmade',
-                  elementType: 'all',
-                  stylers: {
-                      color: '#d1d1d1'
-                  }
-              }, {
-                  featureType: 'local',
-                  elementType: 'all',
-                  stylers: {
-                      color: '#d1d1d1'
-                  }
-              }, {
-                  featureType: 'arterial',
-                  elementType: 'labels',
-                  stylers: {
-                      visibility: 'off'
-                  }
-              }, {
-                  featureType: 'boundary',
-                  elementType: 'all',
-                  stylers: {
-                      color: '#fefefe'
-                  }
-              }, {
-                  featureType: 'building',
-                  elementType: 'all',
-                  stylers: {
-                      color: '#d1d1d1'
-                  }
-              }, {
-                  featureType: 'label',
-                  elementType: 'labels.text.fill',
-                  stylers: {
-                      color: '#999999'
-                  }
-              }]
-            }
-        },
-        series
-    };
-  }
-  childInit(child: any) {
-    if (child.id) {
-        const childIndex = this._children.findIndex(s => s.id === child.id);
-        if (childIndex > -1) {
-            this._children[childIndex] = child;
-        } else {
-            this._children.push(child);
-        }
-        this.chartInit();
-    }
-  }
-  deleteChild(childId: string) {
-    if (childId) {
-      const childIndex = this._children.findIndex((s) => s.id === childId);
-      if (childIndex > -1) {
-        this._children.splice(childIndex, 1);
-        this.chartInit();
-      }
-    }
-  }
-}