bbj-screen-widget 2.4.60 → 2.4.62

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

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

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

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

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

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

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

@@ -0,0 +1,211 @@
+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();
+      }
+    }
+  }
+}