bbj-screen-widget 2.4.60 → 2.4.62

package/src/lib/gantt/gantt.component.ts

@@ -0,0 +1,213 @@
+import {
+  Component,
+  ElementRef,
+  EmbeddedViewRef,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import { Data, Property, Widget } from 'bbj-widget-base';
+
+import { isDate, format, min, parseISO } from 'date-fns';
+import { getUUID } from '../shared/util/base.util';
+
+@Component({
+  selector: 'sc-gantt',
+  templateUrl: './gantt.component.html',
+  styleUrls: ['./gantt.component.less'],
+})
+@Widget('甘特图', { group: 'component', image: 'assets/img/screen/gantt.png', icon: 'iconmokuai' })
+export class GanttComponent implements OnInit, OnChanges {
+  @ViewChild('fcEventContent', { static: true }) eventContent: TemplateRef<any>;
+  private readonly contentRenderers = new Map<string, EmbeddedViewRef<any>>();
+  @Property('头部名称', { type: 'string' })
+  headerContent = '项目';
+  @Property('项目字体', { ui: { widget: 'myFont' } })
+  contentFont: any = { family: '', color: '', weight: 'normal', size: 12, space: 0, lineHeight: 40 };
+  @Property('系列颜色', {
+    ui: {
+      widget: 'seriesColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  lineColor = ['rgba(50,133,255,1)', 'rgba(123,113,192,1' + ')'];
+  @Property('进度透明', { type: 'number', max: 1 })
+  progressTransparency = 0.8;
+  @Property('区域占比', { type: 'number' })
+  areaRate = 20;
+  @Property('进度条高度', { type: 'number' })
+  progressHeight = 32;
+  @Data({
+    properties: {
+      start: { type: 'string', title: '开始日期' },
+      end: { type: 'string', title: '结束日期' },
+      title: { type: 'string', title: '待办事项' },
+      project: { type: 'string', title: '所属项目' },
+      progress: { type: 'string', title: '进度' },
+    },
+  })
+  data: any[] = [
+    { start: '2020-11-10', end: '2020-11-15', title: '代办事件1', project: 'benbenjun', progress: '0.4' },
+    { start: '2020-10-10', end: '2020-11-11', title: '代办事件2', project: 'benbenjun2', progress: '0.6' },
+    { start: '2020-10-11', end: '2020-11-19', title: '代办事件3', project: 'benbenjun3', progress: '0.9' },
+  ];
+  calendarOptions: any;
+  resources: any = [];
+  events: any = [];
+
+  initDate: any;
+
+  constructor(private ele: ElementRef) {}
+
+  ngOnInit(): void {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.init();
+  }
+
+  init() {
+    if (this.contentFont) {
+      this.ele.nativeElement.style.setProperty('--fontSize', this.contentFont.size + 'px');
+      this.ele.nativeElement.style.setProperty('--color', this.contentFont.color);
+      this.ele.nativeElement.style.setProperty('--weight', this.contentFont.weight);
+      this.ele.nativeElement.style.setProperty('--family', this.contentFont.weight);
+      this.ele.nativeElement.style.setProperty('--lineHeight', this.contentFont.lineHeight + 'px');
+      this.ele.nativeElement.style.setProperty('--height', this.progressHeight + 'px');
+    }
+
+    // if (changes.data) {
+    if (this.data == null || this.data.length < 1) {
+      return;
+    }
+    const dateArr = [];
+    let arrIndex = 0;
+    this.data.forEach((d) => {
+      let color = '';
+      if (this.lineColor !== null && this.lineColor.length > 0) {
+        if (arrIndex >= this.lineColor.length) {
+          arrIndex = 0;
+        }
+        color = this.lineColor[arrIndex];
+      }
+      dateArr.push(parseISO(d.start));
+      this.resources.push({ id: d.project, title: d.project, eventColor: 'rgb(0,210,253,0)' });
+      this.events.push({
+        id: getUUID(),
+        resourceId: d.project,
+        start: d.start,
+        end: d.end,
+        title: d.title,
+        backColor: color,
+        progress: d.progress,
+      });
+      arrIndex++;
+    });
+    this.calendarOptions = {
+      timeZone: 'UTC',
+      headerToolbar: {
+        left: 'today prev,next',
+        center: 'title',
+        right: 'resourceTimelineDay,resourceTimelineTenDay,resourceTimelineMonth,resourceTimelineYear',
+      },
+      initialView: 'resourceTimelineMonth',
+      scrollTime: '08:00',
+      aspectRatio: 1.5,
+      initialDate: this.initDate ? format(this.initDate, 'yyyy-MM-dd') : format(min(dateArr), 'yyyy-MM-dd'),
+      views: {
+        resourceTimelineDay: {
+          buttonText: '小时',
+          slotDuration: '00:15',
+        },
+        resourceTimelineTenDay: {
+          type: 'resourceTimeline',
+          duration: { days: 10 },
+          buttonText: '未来10天',
+        },
+        resourceTimelineMonth: {
+          buttonText: '月',
+          // dayHeaders:false,
+          // // columnFormat: 'dddd',
+          // dayNames: ['1', '2', '3', '4', '5', '6', '7'],
+          // dayNamesShort: ['1', '2', '3', '4', '5', '6', '7'],
+          // dayHeaderFormat:{weekday:'long'},
+          // dayHeaderContent: (data) => {
+          //   console.log(data);
+          // },
+          slotLabelFormat: [{ day: 'numeric' }, { weekday: 'long' }],
+        },
+        resourceTimelineYear: {
+          buttonText: '年',
+          slotLabelFormat: [{ month: 'long' }],
+          // slotDuration: '48:00:00',
+          slotLabelInterval: { month: 1 },
+        },
+      },
+      buttonText: {
+        today: '今日',
+      },
+      editable: false,
+      resourceAreaHeaderContent: this.headerContent,
+      locale: 'zh-cn',
+      // dayHeaderFormat: {weekday: 'long'},
+      resourceAreaWidth: this.areaRate + '%',
+      resources: [],
+      // visibleRange: {
+      //   start: '2020-03-22',
+      //   end: '2020-03-25'
+      // },
+      events: [],
+      columnFormat: 'dddd',
+      eventContent: (arg) => this.renderEventContent(arg),
+      eventWillUnmount: (arg) => this.unrenderEvent(arg),
+    };
+    this.calendarOptions.resources = this.resources;
+    this.calendarOptions.events = this.events;
+    // }
+  }
+
+  renderEventContent(args) {
+    let renderer = this.contentRenderers.get(args.event.id);
+    const proColor =
+      args.event.extendedProps.backColor.substr(0, args.event.extendedProps.backColor.lastIndexOf(',') + 1) +
+      this.progressTransparency +
+      ')';
+    const data = {
+      barStyle: {
+        width: args.event.extendedProps.progress * 100 + '%',
+        backgroundColor: args.event.extendedProps.backColor,
+      },
+      progressStyle: {
+        backgroundColor: proColor,
+      },
+      title: args.event.title,
+      progress: Number(args.event.extendedProps.progress) * 100 + '%',
+      start: format(args.event.start, 'yyyy-MM-dd'),
+      end: format(args.event.end, 'yyyy-MM-dd'),
+    };
+    // if (!renderer) {
+    // Make a new renderer and save it so that we can destroy when the event is unmounted.
+    renderer = this.eventContent.createEmbeddedView({ data });
+    this.contentRenderers.set(args.event.id, renderer);
+    // } else {
+    //   // Just update the existing renderer.
+    //   renderer.context.data = data;
+    //   renderer.markForCheck();
+    // }
+    renderer.detectChanges();
+    return { domNodes: renderer.rootNodes };
+  }
+
+  unrenderEvent(arg) {
+    const renderer = this.contentRenderers.get(arg.event.id);
+    if (renderer) {
+      renderer.destroy();
+    }
+  }
+
+  // onChange(events) {
+  //
+  // }
+}

package/src/lib/gantt/gantt.module.ts

@@ -0,0 +1,37 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {GanttComponent} from './gantt.component';
+import {WidgetBaseModule, WidgetService} from 'bbj-widget-base';
+import {FullCalendarModule} from '@fullcalendar/angular';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
+import {NzToolTipModule} from 'ng-zorro-antd/tooltip';
+// import {FormsModule} from '@angular/forms';
+// import {NzDatePickerModule} from 'ng-zorro-antd/date-picker';
+
+
+@NgModule({
+  declarations: [GanttComponent],
+  imports: [
+    CommonModule,
+    WidgetBaseModule,
+    FullCalendarModule,
+    NzToolTipModule,
+    // FormsModule,
+    // NzDatePickerModule,
+    ],
+})
+export class GanttModule {
+  constructor(widgetService: WidgetService) {
+    FullCalendarModule.registerPlugins([
+      // register FullCalendar plugins
+      dayGridPlugin,
+      timeGridPlugin,
+      interactionPlugin,
+      resourceTimelinePlugin,
+    ]);
+    widgetService.register(GanttComponent);
+  }
+}

package/src/lib/gauge/gauge.component.html

@@ -0,0 +1 @@
+<div echarts [options]="chartOption" class="demo-chart" [initOpts]="{ renderer: 'svg' }"></div>

package/src/lib/gauge/gauge.component.less

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

package/src/lib/gauge/gauge.component.spec.ts

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

package/src/lib/gauge/gauge.component.ts

@@ -0,0 +1,268 @@
+import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Property, Widget, Data } from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-gauge',
+  templateUrl: './gauge.component.html',
+  styleUrls: ['./gauge.component.less'],
+})
+@Widget('仪表盘', {
+  group: 'otherChart',
+  image: 'assets/img/screen/gauge.png',
+  icon: 'icontubiao',
+})
+export class GaugeComponent implements OnInit, OnChanges {
+
+  @Property('表盘颜色', {
+    ui: {
+      widget: 'seriesColor',
+      type: 'gradual',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  seriesColor = { gradient: true, value: [['#2841E8', '#00CAFA']] };
+
+  @Property('指针颜色', {
+    ui: {
+      widget: 'myColor',
+      example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null]
+    },
+  })
+  pointerColor = 'auto';
+  @Property('指针阴影', {
+    ui: {
+      widget: 'myColor',
+      example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null]
+    },
+  })
+  pointerShadow = 'rgba(0,138,255,0.45)';
+
+  @Property('表盘宽度', {
+    ui: { widget: 'myRange', min: 0, max: 100, step: 1 },
+  })
+  width = 10;
+  @Property('起始角度', {
+    ui: { widget: 'myRange', min: 90, max: 360, step: 1 },
+  })
+  startAngle = 225;
+  @Property('结束角度', {
+    ui: { widget: 'myRange', min: -90, max: 90, step: 1 },
+  })
+  endAngle = -45;
+
+
+
+  @Property('显示标题', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  label = false;
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = {
+    family: '',
+    color: '#FFFFFF',
+    weight: 'normal',
+    size: 12,
+    space: 0,
+    lineHeight: 12,
+  };
+
+  @Property('标题位移', {
+    ui: { widget: 'number' },
+  })
+  labelOffset = 50;
+  @Property('标题宽度', {
+    ui: { widget: 'number' },
+  })
+  labelWidth = null;
+
+  @Property('显示数值', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  labelVal = true;
+
+  @Property('数值字体', { ui: { widget: 'myFont' } })
+  numFont: any = {
+    family: '',
+    color: '#FFFFFF',
+    weight: 'normal',
+    size: 38,
+    space: 0,
+    lineHeight: 38,
+  };
+
+  @Property('百分号', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  percent = false;
+
+  @Property('数值位移', {
+    ui: { widget: 'number' },
+  })
+  labelValOffset = -10;
+
+  @Property('最大值', {
+    ui: { widget: 'number' },
+  })
+  max = 100;
+  @Property('最小值', {
+    ui: { widget: 'number' },
+  })
+  min = 0;
+
+  // 显示分隔线
+  @Property('分隔线', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  splitLine = false;
+
+  // 显示刻度
+  @Property('刻度', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  axisTick = true;
+
+  @Property('刻度数值', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  axisLabel = true;
+
+  @Property('刻度长度', {
+    ui: { widget: 'number' },
+  })
+  axisTickLen = 10;
+
+  @Property('刻度宽度', {
+    ui: { widget: 'number' },
+  })
+  axisTickWidth = 1;
+
+  @Property('刻度颜色', {
+    ui: {
+      widget: 'myColor',
+      example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null]
+    },
+  })
+  axisTickColor = 'auto';
+
+
+  image: string;
+  constructor() { }
+  chartOption: any = {};
+  @Data({
+    properties: {
+      name: { type: 'string', title: '文字' },
+      value: { type: 'number', title: '值' },
+    },
+  })
+  _data = [{ name: '速度', value: 48 }];
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes._data) {
+      const style = {
+        show: this.axisLabel,
+        color: this.font.color,
+        fontFamily: this.font.family,
+        fontWeight: this.font.weight,
+        fontSize: this.font.size,
+        lineHeight: this.font.lineHeight,
+      };
+      const color = [];
+      const color1 = [];
+      let seriesColor;
+      if (this.seriesColor && this.seriesColor.value) {
+        seriesColor = this.seriesColor.value;
+      } else {
+        seriesColor = this.seriesColor;
+      }
+      for (let i = 0; i < seriesColor.length; i++) {
+        color.push({
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          global: false,
+          colorStops: [
+            { offset: 0, color: seriesColor[i][0] },
+            { offset: 1, color: seriesColor[i][1] },
+          ],
+        });
+      }
+      let count = 1;
+      if (seriesColor.length > 1) {
+        count = 1 / seriesColor.length;
+        for (let i = 0; i < seriesColor.length; i++) {
+          color1.push([count * (i + 1), color[i]]);
+        }
+      }
+      this.chartOption = {
+        series: [
+          {
+            // name: this.title,
+            type: 'gauge',
+            detail: {
+              show: this.labelVal,
+              formatter: this.percent ? '' + ((this._data[0].value / this.max) * 100).toFixed(2) + '%' : '{value}',
+              color: this.numFont.color,
+              fontFamily: this.numFont.family,
+              fontWeight: this.numFont.weight,
+              fontSize: this.numFont.size,
+              lineHeight: this.numFont.lineHeight,
+              offsetCenter: [0, `${this.labelValOffset}%`],
+            },
+            data: this._data,
+            startAngle: this.startAngle,
+            endAngle: this.endAngle,
+            title: {
+              show: this.label,
+              color: this.font.color,
+              fontFamily: this.font.family,
+              fontWeight: this.font.weight,
+              fontSize: this.font.size,
+              lineHeight: this.font.lineHeight,
+              offsetCenter: [0, `${this.labelOffset}%`],
+              overflow: 'breakAll',
+              width: this.labelWidth
+            },
+            axisLine: {
+              lineStyle: {
+                width: this.width,
+                color: count < 1 ? color1 : [[1, color[0]]],
+              },
+            },
+            axisLabel: style,
+            max: this.max,
+            min: this.min,
+            splitLine: {
+              show: this.splitLine,
+              distance: 0,
+              length: 10
+            },
+            axisTick: {
+              show: this.axisTick,
+              length: this.axisTickLen,
+              lineStyle: {
+                width: this.axisTickWidth,
+                color: this.axisTickColor
+              }
+            },
+            pointer: {
+              width: 6,
+              length: '70%',
+              itemStyle: {
+                color: this.pointerColor,
+                shadowColor: this.pointerShadow,
+                shadowBlur: 10,
+                shadowOffsetX: 2,
+                shadowOffsetY: 2
+              }
+            },
+
+          },
+        ],
+      };
+      // console.log(JSON.stringify(this.chartOption));
+    }
+  }
+  ngOnInit() { }
+}

package/src/lib/gauge/gauge.module.ts

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

package/src/lib/gauge-progress/gauge-progress.component.html

@@ -0,0 +1,29 @@
+
+<swiper-container
+  #swiper
+  [slidesPerView]="slidesPerView"
+  [spaceBetween]="spaceBetween"
+  [navigation]="navigation && navigationLeftIcon && navigationRightIcon ? navigationBtnConfig : navigation"
+  class="swiper-no-swiping"
+  [noSwiping]="true"
+>
+  <swiper-slide *ngFor="let item of data">
+    <!-- <div class="item-img">
+      <div class="item-val" [ngStyle]="numfont">{{ item.value }}</div>
+      <img [src]="cardBgImg" alt="" />
+    </div>
+    <div [ngStyle]="font">{{ item.label }}</div> -->
+    <div echarts [options]="item" class="demo-chart" [initOpts]="{ renderer: 'svg' }"></div>
+  </swiper-slide>
+</swiper-container>
+<ng-container *ngIf="navigation && navigationLeftIcon && navigationRightIcon">
+  <div class="navigationbtn swiper-navigation-prev" [style]="{ left: (navigationMoveVal || '-60') + 'px' }">
+    <img [src]="navigationLeftIcon" alt="" />
+  </div>
+  <div class="navigationbtn swiper-navigation-next" [style]="{ right: (navigationMoveVal || '-60') + 'px' }">
+    <img [src]="navigationRightIcon" alt="" />
+  </div>
+</ng-container>
+
+
+

package/src/lib/gauge-progress/gauge-progress.component.less

@@ -0,0 +1,51 @@
+:host {
+  display: block;
+  height: 100%;
+  width: 100%;
+  ::ng-deep {
+    swiper-container {
+      width: 100%;
+      height: 100%;
+    }
+  
+    swiper-slide {
+      text-align: center;
+      position: relative;
+    }
+    .item-img{
+      position:relative;
+      img{
+        display: block;
+        width: 100%;
+      }
+    }
+    .item-val{
+      position:absolute;
+      text-align: center;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      z-index: 99;
+    }
+    .navigationbtn{
+      cursor: pointer;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      outline: none;
+    }
+    .swiper-navigation-prev{
+      left: -60px;
+    }
+    .swiper-navigation-next{
+      right: -60px;
+    }
+  
+  }
+}
+.demo-chart {
+  height: 100%;
+}