bbj-screen-widget 2.4.62 → 2.4.63

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

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

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

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

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

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

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

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

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

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

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

@@ -1,51 +0,0 @@
-: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%;
-}