bbj-screen-widget 2.4.61 → 2.4.62

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

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

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

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

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