bbj-screen-widget 2.4.62 → 2.4.63

package/src/lib/shuffling-list/shuffling-list.component.less

@@ -1,55 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-}
-
-.head {
-  flex: none;
-  display: flex;
-}
-.cell {
-  text-align: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  > .clickable {
-    cursor: pointer;
-    color: #ffff00;
-    text-decoration: underline;
-    &:hover {
-      color: #4e87ad;
-    }
-  }
-}
-
-.body {
-  flex: 1;
-  overflow: auto;
-  &.carousel {
-    overflow: hidden;
-  }
-}
-
-.row {
-  display: flex;
-}
-
-.index-col {
-  width: 30px;
-  text-align: left;
-}
-
-::-webkit-scrollbar {
-  width: 0;
-}
-
-@keyframes carousel {
-  0% {
-    transform: translateY(0%);
-  }
-  100% {
-    transform: translateY(-50%);
-  }
-}

package/src/lib/shuffling-list/shuffling-list.component.spec.ts

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

package/src/lib/shuffling-list/shuffling-list.component.ts

@@ -1,534 +0,0 @@
-import {
-  Component,
-  ElementRef,
-  OnInit,
-  SimpleChanges,
-  OnChanges,
-  EventEmitter,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  ViewChild,
-  HostBinding,
-  Renderer2,
-  OnDestroy,
-} from '@angular/core';
-import { Widget, Data, Property, DataSchema, DataOutput, WidgetRef, CustomExport } from 'bbj-widget-base';
-import { SFArrayWidgetSchema, SFSchema } from '@delon/form';
-import { deepCopy } from '@delon/util';
-import { getFontStyle } from '../shared/util/style.util';
-
-@Component({
-  selector: 'sc-shuffling-list',
-  templateUrl: './shuffling-list.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  styleUrls: ['./shuffling-list.component.less'],
-})
-@Widget('滚动表格', { group: 'table', icon: 'icontubiao', image: '/assets/img/screen/shuffling.png' })
-export class ShufflingListComponent implements OnInit, OnChanges, OnDestroy, CustomExport {
-  @Property('轮播', { type: 'boolean' })
-  carousel = true;
-  _carousel: boolean;
-  @Property('自动换行', { type: 'boolean' })
-  lineWrap = true;
-  @Property('轮播间隔', { ui: { widget: 'myRange', min: 1, max: 20, step: 1 } })
-  time = 1;
-  @Property('序列号显示', { type: 'boolean' })
-  serialNumberDisplay = true;
-  @Property('表头显示', { type: 'boolean' })
-  headDisplay = true;
-  @Property('表头背景', {
-    ui: {
-      widget: 'myColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#ffffff'],
-    },
-  })
-  headBackground = '';
-  @Property('表头字体', { ui: { widget: 'myFont' } })
-  headFont: any = { family: '', color: '#ffffff', weight: 'normal', size: 20, space: 0, lineHeight: 40 };
-  @Property('字体发光', { type: 'boolean' })
-  fontBling = false;
-  @Property('字段颜色', {
-    type: 'array',
-    maxItems: 99,
-    items: {
-      type: 'object',
-      properties: {
-        key: {
-          type: 'string',
-          title: '字段',
-        },
-        value: {
-          type: 'string',
-          title: '值',
-        },
-        color: {
-          type: 'string',
-          title: '颜色',
-          ui: {
-            widget: 'myColor',
-          },
-        },
-      },
-      required: [],
-    },
-    ui: { grid: { arraySpan: 24 }, spanControl: 24 } as SFArrayWidgetSchema,
-  })
-  bindColor = [];
-  @Property('发光颜色', {
-    ui: {
-      widget: 'myColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#ffffff'],
-    },
-  })
-  blingColor = '';
-  @Property('边框颜色', {
-    ui: {
-      widget: 'myColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#ffffff'],
-    },
-  })
-  borderColor = '';
-  @Property('边框发光', {
-    ui: {
-      widget: 'myColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#ffffff'],
-    },
-  })
-  borderBlingColor = '';
-  @Property('边框粗细', {
-    ui: { widget: 'myRange', min: 0, max: 40, step: 1 },
-  })
-  borderSize = 0;
-
-  @Property('点击触发方式', {
-    enum: [
-      { label: '行', value: 'row' },
-      { label: '单元格', value: 'cell' },
-    ],
-  })
-  clickTarget = 'row';
-  @Property('表头设置', {
-    type: 'array',
-    maxItems: 99,
-    items: {
-      type: 'object',
-      properties: {
-        key: {
-          type: 'string',
-          title: 'key',
-        },
-        width: {
-          type: 'number',
-          title: '宽度',
-        },
-        align: {
-          type: 'string',
-          ui: { widget: 'select' },
-          enum: [
-            { label: '居左', value: 'left' },
-            { label: '居中', value: 'center' },
-            { label: '居右', value: 'right' },
-          ],
-        },
-        show: {
-          type: 'boolean',
-          title: '是否显示',
-          default: true,
-        },
-        clickable: {
-          type: 'boolean',
-          title: '是否可点击',
-          ui: { visibleIf: { '/clickTarget': ['cell'] } },
-        },
-      },
-      required: [],
-    },
-    ui: { grid: { arraySpan: 24 }, spanControl: 24 } as SFArrayWidgetSchema,
-  })
-  titleStyle = [];
-  @Property('发光程度', { ui: { widget: 'myRange', min: 1, max: 10, step: 1 } })
-  blingNum = 3;
-  @Property('奇行背景', {
-    ui: {
-      widget: 'myColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#ffffff'],
-    },
-  })
-  oddBackground = '';
-  @Property('偶行背景', {
-    ui: {
-      widget: 'myColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#ffffff'],
-    },
-  })
-  evenBackground = '';
-  @Property('内容字体', { ui: { widget: 'myFont' } })
-  contentFont: any = { family: '', color: '#ffffff', weight: 'normal', size: 12, space: 0, lineHeight: 40 };
-  @Property('字体发光', { type: 'boolean' })
-  contentFontBling = false;
-  @Property('发光颜色', {
-    ui: {
-      widget: 'myColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#ffffff'],
-    },
-  })
-  contentBlingColor = '';
-  @Property('发光程度', { ui: { widget: 'myRange', min: 1, max: 10, step: 1 } })
-  contentBlingNum = 3;
-  @Property('左内边距', { ui: { widget: 'myRange', min: 1, max: 100, step: 1 } })
-  paddingLeft = 0;
-  @Property('右内边距', { ui: { widget: 'myRange', min: 1, max: 100, step: 1 } })
-  paddingRight = 0;
-  @Data({})
-  data: any = [
-    {
-      地区: '温州',
-      流量: '123',
-      行为: 'xxxx',
-    },
-    {
-      地区: '杭州',
-      流量: '1235',
-      行为: 'xxxx',
-    },
-    {
-      地区: '上海',
-      流量: '1234',
-      行为: 'xxxx',
-    },
-    {
-      地区: '北京',
-      流量: '12367',
-      行为: 'xxxx',
-    },
-    {
-      地区: '温州1',
-      流量: '123835',
-      行为: 'xxxx',
-    },
-    {
-      地区: '温州2',
-      流量: '123835',
-      行为: 'xxxx',
-    },
-    {
-      地区: '温州3',
-      流量: '123835',
-      行为: 'xxxx',
-    },
-    {
-      地区: '温州4',
-      流量: '123835',
-      行为: 'xxxx',
-    },
-  ];
-  @DataSchema('data')
-  schema: SFSchema;
-  tableStyle: any = {};
-
-  animationDelay = 0;
-  @DataOutput('行数据')
-  dateChange = new EventEmitter<any>();
-  @DataOutput('单元格')
-  cellClick = new EventEmitter<any>();
-  @DataOutput('列')
-  columnClick = new EventEmitter<any>();
-  columns: any[];
-  headStyle: any = {};
-  bodyStyle: any = {};
-  rowStyle: any = {};
-  content: any[];
-  placeholder: any;
-  paged: boolean;
-  total: number;
-  runtime: number; //已滚动时间
-  lastTime: number; //上一次计时时间
-  @DataOutput('翻页')
-  pageChange = new EventEmitter<any>();
-  nextPageTimeout: any;
-  parentHeight: number;
-  headerHeight: any;
-  rowHeight: any;
-  paused: boolean;
-  constructor(
-    private ele: ElementRef,
-    private cd: ChangeDetectorRef,
-    private widgetRef: WidgetRef,
-    private renderer: Renderer2,
-  ) {}
-  ngOnInit() {
-    const widget: any = this.widgetRef.widget as any;
-    if (this.clickTarget !== 'cell' && (widget.link?.enabled || widget.outputs?.enabled)) {
-      this.tableStyle.cursor = 'pointer';
-    }
-    this.headStyle = getFontStyle(this.headFont);
-    this.headStyle.backgroundColor = this.headBackground;
-    if (this.paddingLeft) {
-      this.headStyle.paddingLeft = this.rowStyle.paddingLeft = this.paddingLeft + 'px';
-    }
-    if (this.paddingRight) {
-      this.headStyle.paddingRight = this.rowStyle.paddingRight = this.paddingRight + 'px';
-    }
-
-    Object.assign(this.tableStyle, getFontStyle(this.contentFont));
-
-    if (this.borderSize && this.borderColor) {
-      const element = this.ele.nativeElement;
-      const border = `${this.borderSize}px solid ${this.borderColor || '#fff'}`;
-      this.rowStyle.borderBottom = this.headStyle.borderBottom = border;
-      this.renderer.setStyle(element, 'border', border);
-      if (this.borderBlingColor) {
-        const filter = `drop-shadow(0 0 8px ${this.borderBlingColor})`;
-        this.renderer.setStyle(element, 'filter', filter);
-      }
-    }
-
-    if (this.fontBling) {
-      // 发光
-      let color = this.blingColor || this.headFont.color || '#ffffff';
-      let num = this.blingNum || 3;
-      this.headStyle.textShadow = this.getBlingStyle(color, num);
-    }
-    if (this.contentFontBling) {
-      // 发光
-      let color = this.contentBlingColor || this.contentFont.color || '#ffffff';
-      let num = this.blingNum || 3;
-      this.tableStyle.textShadow = this.getBlingStyle(color, num);
-    }
-    if (this.lineWrap) {
-      this.tableStyle.wordBreak = 'break-all';
-    } else {
-      this.tableStyle.whiteSpace = 'nowrap';
-    }
-    this.cd.markForCheck();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if ((changes.data || changes.schema) && this.data) {
-      if (this.data.totalElements != null) {
-        this.paged = true;
-        const start = this.data.number * this.data.size;
-        if (this.content == null) {
-          this.content = [];
-        }
-        if (this.content.length > start) {
-          this.content.splice(start, this.content.length - start);
-        } else if (this.content.length < start) {
-          this.pageChange.emit(Math.ceil(this.content.length / this.data.size));
-          return;
-        }
-        this.content.push(...this.data.content);
-        this.total = this.data.totalElements;
-      } else {
-        this.paged = false;
-        this.content = this.data;
-        this.total = this.data.length;
-      }
-      if (!this.paged || this.data.number === 0) {
-        this.updateColumns();
-      }
-      const element: HTMLElement = this.ele.nativeElement;
-      this.parentHeight = Number(element.parentElement.style.height.replace('px', ''));
-      this.headerHeight = this.headFont.lineHeight || 40;
-      this.rowHeight = this.contentFont.linHeight || 40;
-      if (this.borderSize && this.borderColor) {
-        this.headerHeight += this.borderSize;
-        this.rowHeight += this.borderSize;
-      }
-      if (!this.headDisplay) {
-        this.headerHeight = 0;
-      }
-      const carousel = this.carousel && this.total * this.rowHeight + this.headerHeight > this.parentHeight;
-      if (!this._carousel && carousel) {
-        this.runtime = 0;
-      }
-      this._carousel = carousel;
-      this.placeholder = null;
-      if (this._carousel) {
-        const time = this.total * this.time;
-        this.tableStyle.animation = 'carousel ' + time + 's linear infinite';
-        if (this.paged && this.total > this.content.length) {
-          this.placeholder = this.rowHeight * (this.total - this.content.length);
-        }
-        if (!this.paused) {
-          this.updateRuntime();
-          this.loadNextPage();
-        }
-      } else {
-        this.tableStyle.animation = null;
-      }
-    }
-    this.cd.markForCheck();
-  }
-
-  ngOnDestroy(): void {
-    this.stopLoadNext();
-  }
-
-  getBlingStyle(color: string, num: number) {
-    let str = '';
-    for (let i = 0; i < num; i++) {
-      str += '0 0 20px ' + color + ',';
-    }
-    return str.substr(0, str.length - 1);
-  }
-
-  /**
-   * 更新已滚动时间
-   */
-  updateRuntime() {
-    const now = new Date().getTime();
-    if (this.lastTime) {
-      this.runtime += now - this.lastTime;
-    }
-    this.lastTime = now;
-  }
-
-  stopLoadNext() {
-    if (this.nextPageTimeout != null) {
-      clearTimeout(this.nextPageTimeout);
-    }
-  }
-
-  getNextLoadTime() {
-    const contentHeight = this.headerHeight + this.rowHeight * this.content.length; // 已加载内容的高度
-    let nextLoadTime =
-      ((contentHeight - this.parentHeight) / this.rowHeight) * this.time * 1000 - this.runtime + this.animationDelay;
-    return nextLoadTime;
-  }
-
-  loadNextPage() {
-    this.stopLoadNext();
-    if (this.paged && this.total > this.content.length) {
-      let nextLoadTime = this.getNextLoadTime();
-      if (nextLoadTime < 0) {
-        nextLoadTime = 0;
-      }
-      this.nextPageTimeout = setTimeout(() => {
-        this.pageChange.next(this.data.number + 1);
-      }, nextLoadTime);
-    }
-  }
-
-  updateColumns() {
-    this.columns = [];
-    let keys: string[];
-    if (this.schema && this.schema.properties) {
-      keys = Object.keys(this.schema.properties);
-    } else if (this.content && this.content[0]) {
-      keys = Object.keys(this.content[0]);
-    }
-    const titleStyleMap = {};
-    if (this.titleStyle && this.titleStyle.length > 0) {
-      this.titleStyle.forEach((titleStyle) => {
-        if (titleStyle.key) {
-          titleStyleMap[titleStyle.key] = titleStyle;
-        }
-      });
-    }
-    if (keys) {
-      for (const key of keys) {
-        let title = key;
-        if (this.schema && this.schema.properties) {
-          const property = this.schema.properties[key];
-          if (property && property.title) {
-            title = property.title;
-          }
-        }
-        const headStyle: any = {};
-        const cellStyle: any = {};
-        const column: any = { index: key, title, headStyle, cellStyle };
-        const titleStyle = titleStyleMap[key];
-        if (this.titleStyle?.length && (titleStyle == null || !titleStyle.show)) {
-          continue;
-        }
-        let width: number;
-        if (titleStyle) {
-          width = titleStyle.width;
-          if (titleStyle.align) {
-            cellStyle.textAlign = titleStyle.align;
-          }
-          if (this.clickTarget === 'cell' && titleStyle.clickable) {
-            column.clickable = true;
-          }
-        }
-        if (width) {
-          headStyle.width = cellStyle.width = width + 'px';
-        } else {
-          headStyle.flex = cellStyle.flex = 1;
-        }
-
-        this.columns.push(column);
-      }
-    }
-  }
-
-  onClick(value) {
-    if (this.clickTarget !== 'cell') {
-      this.dateChange.emit(value);
-    }
-  }
-  mouseover() {
-    // this._carousel=false;
-    if (this._carousel) {
-      this.paused = true;
-      this.tableStyle.animationPlayState = 'paused';
-      this.updateRuntime();
-      this.stopLoadNext();
-    }
-  }
-  mouseout() {
-    if (this._carousel) {
-      this.paused = false;
-      this.lastTime = new Date().getTime();
-      this.tableStyle.animationPlayState = 'running';
-      if (this.paged) {
-        this.loadNextPage();
-      }
-    }
-  }
-  onMousewheel(event: WheelEvent) {
-    if (this._carousel) {
-      this.animationDelay -= event.deltaY * 2;
-      if (this.animationDelay > this.runtime) {
-        this.animationDelay = this.runtime;
-      }
-      this.tableStyle.animationDelay = this.animationDelay / 1000 + 's';
-      if (this.paged && this.total > this.content.length && this.getNextLoadTime() < 0) {
-        this.pageChange.emit(this.data.number + 1);
-      }
-      event.stopPropagation();
-      event.preventDefault();
-    }
-  }
-
-  onCellClick(column: any, row: any, event: MouseEvent) {
-    if (this.clickTarget !== 'cell' || column.clickable) {
-      event.stopPropagation();
-      this.cellClick.emit(row[column.index]);
-      this.columnClick.emit(column.index);
-      this.dateChange.emit(row);
-    }
-  }
-
-  exportWord() {
-    let html = '<table>';
-    if (this.headDisplay) {
-      html += '<thead><tr>';
-      this.columns.forEach((column) => {
-        html += `<th>${column.title}</th>`;
-      });
-      html += '</tr></thead>';
-    }
-    html += '<tbody>';
-    this.content.forEach((row) => {
-      html += '<tr>';
-      this.columns.forEach((column) => {
-        html += `<td>${row[column.index]}</td>`;
-      });
-      html += '</tr>';
-    });
-    html += '</tbody></table><br/>';
-    return html;
-  }
-}

package/src/lib/shuffling-list/shuffling-list.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ShufflingListComponent } from './shuffling-list.component';
-import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
-import { NzPipesModule } from 'ng-zorro-antd/pipes';
-import { ColorPipe } from './color.pipe';
-import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
-
-@NgModule({
-  declarations: [ShufflingListComponent, ColorPipe],
-  imports: [CommonModule, WidgetBaseModule, NzPipesModule, NzToolTipModule],
-})
-export class ShufflingListModule {
-  constructor(widgetService: WidgetService) {
-    widgetService.register(ShufflingListComponent);
-  }
-}