bbj-screen-widget 2.4.62 → 2.4.63

package/src/lib/tree-ring-chart/tree-ring-chart.component.ts

@@ -1,192 +0,0 @@
-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-tree-ring-chart',
-  templateUrl: './tree-ring-chart.component.html',
-  styleUrls: ['./tree-ring-chart.component.less'],
-})
-@Widget('年轮图', {
-  group: 'pieChart',
-  image: 'assets/img/screen/ringTree.png',
-  icon: 'icontubiao',
-})
-export class TreeRingChartComponent extends BasicLineChartComponent implements OnInit, OnChanges {
-
-  @Property('系列颜色', {
-    ui: {
-      widget: 'seriesColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
-    },
-  })
-  color = ['#3285FF', '#00D2FD'];
-  @Property('字体', { ui: { widget: 'myFont' } })
-  font: any = {
-    family: '',
-    color: '#FFFFFF',
-    weight: 'normal',
-    size: 12,
-    space: 0,
-    lineHeight: 12,
-  };
-  @Property('顺时针', {
-    ui: { widget: 'boolean', checkedChildren: '顺', unCheckedChildren: '逆' },
-  })
-  clockwise = false;
-  @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: 'myGrid', type: 'pie' } })
-  grid: any = {
-    top: 45,
-    left: 50,
-  };
-
-  chartOption: any = {};
-  @Data({
-    properties: {
-      name: { type: 'string', title: '类目' },
-      value: { type: 'number', title: '值' },
-    },
-  })
-  _data = [
-    { name: '短信', value: 1419 },
-    { name: '客服', value: 1776 },
-    { name: '外呼', value: 1895 },
-    { name: '网厅', value: 1576 },
-    { name: '手厅', value: 2077 },
-  ];
-  @Drill()
-  @DataOutput(['value'])
-  dataClick = new EventEmitter<any>();
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes._data) {
-      const data = this._data.sort(function (a, b) {
-        return b.value - a.value;
-      });
-      const objData = this.array2obj(data, 'name');
-      const textStyle = {
-        color: this.font.color,
-        fontFamily: this.font.family,
-        fontWeight: this.font.weight,
-        fontSize: this.font.size,
-        lineHeight: this.font.lineHeight,
-      };
-
-      this.chartOption = {
-        legend: {
-          type: 'scroll',
-          orient: 'vertical',
-          data,
-          x: this.align,
-          show: this.align !== 'none',
-          formatter (name) {
-            return name + '(' + objData[name].value + ')';
-          },
-          textStyle,
-        },
-        color: this.color,
-        yAxis: [
-          {
-            type: 'category',
-            inverse: true,
-            axisLine: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            axisLabel: {
-              show: false,
-            },
-            data: this.getData(data).yAxis,
-          },
-        ],
-        xAxis: [
-          {
-            show: false,
-          },
-        ],
-        series: this.getData(data).series,
-      };
-    }
-  }
-  ngOnInit() {}
-
-  getMax(data) {
-    const a = Math.max(...data.map((item) => item.value));
-    const b = a.toString().length;
-    const c = Math.pow(10, b - 1);
-    const max = Number(c) + Number(a);
-    return max;
-  }
-
-  getData(data) {
-    const res = {
-      series: [],
-      yAxis: [],
-    };
-    for (let i = 0; i < data.length; i++) {
-      res.series.push({
-        name: i,
-        type: 'pie',
-        clockWise: this.clockwise,
-        hoverAnimation: false,
-        radius: [63 - i * 8 + '%', 58 - i * 8 + '%'],
-        center: [this.grid.left + '%', this.grid.top + '%'],
-        label: {
-          show: false,
-        },
-        itemStyle: {
-          label: {
-            show: false,
-          },
-          labelLine: {
-            show: false,
-          },
-          borderWidth: 5,
-        },
-        data: [
-          {
-            value: this.getMax(data) - data[i].value,
-            name: '',
-            itemStyle: {
-              color: '#ffffff00',
-              borderWidth: 0,
-            },
-            tooltip: {
-              show: false,
-            },
-            hoverAnimation: false,
-          },
-          {
-            value: data[i].value,
-            name: data[i].name,
-          },
-        ],
-      });
-    }
-    return res;
-  }
-
-  array2obj(array, key) {
-    const resObj = {};
-    for (let i = 0; i < array.length; i++) {
-      resObj[array[i][key]] = array[i];
-    }
-    return resObj;
-  }
-  onChartClick(event) {
-    this.dataClick.emit({ x: event.name, s: event.seriesName });
-  }
-}

package/src/lib/tree-ring-chart/tree-ring-chart.module.ts

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

package/src/lib/upload/upload.component.html

@@ -1,32 +0,0 @@
-<div class="content">
-  <nz-upload
-    nzAction="/api/screen/fileUpload"
-    [nzHeaders]="{ authorization: 'authorization-text' }"
-    (nzChange)="handleChange($event)"
-    [nzLimit]="1"
-    [ngClass]="class"
-    [nzListType]="listType"
-    [nzShowUploadList]="showUploadList"
-    [nzMultiple]="true"
-    [nzBeforeUpload]="beforeUpload"
-    nzType="{{type}}"
-
-
-  >
-    <button nz-button *ngIf="style === 'classics'"><i nz-icon nzType="upload"></i>点击上传</button>
-    <ng-container *ngIf="style === 'portrait'">
-      <ng-container *ngIf="!avatarUrl">
-        <i class="upload-icon" nz-icon [nzType]="loading ? 'loading' : 'plus'"></i>
-        <div class="ant-upload-text">Upload</div>
-      </ng-container>
-      <img *ngIf="avatarUrl" [src]="avatarUrl" style="width: 100%"/>
-    </ng-container>
-    <ng-container *ngIf="style==='drag'">
-      <p class="ant-upload-drag-icon">
-        <i nz-icon nzType="inbox"></i>
-      </p>
-      <p class="ant-upload-text">点击或者拖拽上传</p>
-      <p class="ant-upload-hint"></p>
-    </ng-container>
-  </nz-upload>
-</div>

package/src/lib/upload/upload.component.less

@@ -1,14 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  width: 100%;
-  text-align: center;
-}
-
-div.content {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}

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

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

package/src/lib/upload/upload.component.ts

@@ -1,109 +0,0 @@
-import { Component, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { DataOutput, Property, Widget } from 'bbj-widget-base';
-import { NzMessageService } from 'ng-zorro-antd/message';
-import { Observable, Observer } from 'rxjs';
-import { NzUploadChangeParam, NzUploadFile } from 'ng-zorro-antd/upload';
-
-@Component({
-  selector: 'sc-upload',
-  templateUrl: './upload.component.html',
-  styleUrls: ['./upload.component.less'],
-})
-@Widget('文件上传', {
-  group: 'component',
-  image: 'assets/img/screen/file-upload.png',
-  icon: 'icontubiao',
-})
-export class UploadComponent implements OnInit, OnChanges {
-  @Property('上传样式', {
-    type: 'string',
-    ui: {
-      widget: 'select',
-    },
-    enum: [
-      { label: '经典', value: 'classics' },
-      { label: '头像', value: 'portrait' },
-      { label: '拖拽', value: 'drag' },
-    ],
-  })
-  style = 'classics';
-  listType = '';
-  class: any = {};
-  showUploadList = true;
-  loading = false;
-  avatarUrl?: string;
-  type = '';
-  @DataOutput('值')
-  valueChange = new EventEmitter<any>();
-  constructor(private msg: NzMessageService) {}
-  handleChange(info: NzUploadChangeParam) {
-    const status = info.file.status;
-    if (status === 'done') {
-      this.msg.success(`${info.file.name} 上传成功`);
-      this.valueChange.emit(info.file.response);
-      if (this.style === 'portrait') {
-        this.getBase64(info.file.originFileObj, (img: string) => {
-          this.loading = false;
-          this.avatarUrl = img;
-        });
-      }
-    } else if (status === 'error') {
-      this.msg.error(`${info.file.name} 上传失败`);
-      this.loading = false;
-    } else if (status === 'uploading') {
-      this.loading = true;
-    }
-  }
-  private getBase64(img: File, callback: (img: string) => void): void {
-    const reader = new FileReader();
-    reader.addEventListener('load', () => callback(reader.result.toString()));
-    reader.readAsDataURL(img);
-  }
-  ngOnInit(): void {}
-  ngOnChanges(changes: SimpleChanges): void {
-    switch (this.style) {
-      case 'portrait':
-        this.listType = 'picture-card';
-        this.showUploadList = false;
-        this.class.width = '128px';
-        this.class.height = '128px';
-        this.type = '';
-        break;
-      case 'drag':
-        this.type = 'drag';
-        this.listType = '';
-        this.showUploadList = true;
-        this.class.width = '';
-        this.class.height = '';
-        break;
-      default:
-        this.type = '';
-        this.listType = 'text';
-        this.showUploadList = true;
-        this.class.width = '';
-        this.class.height = '';
-        break;
-    }
-  }
-  beforeUpload = (file: NzUploadFile, _fileList: NzUploadFile[]) => {
-    if (this.style !== 'portrait') {
-      return null;
-    }
-    return new Observable((observer: Observer<boolean>) => {
-      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-      if (!isJpgOrPng) {
-        this.msg.error('只能上传图片');
-        observer.complete();
-        return;
-      }
-      const isLt2M = file.size / 1024 / 1024 < 2;
-      if (!isLt2M) {
-        this.msg.error('图片要小于2M');
-        observer.complete();
-        return;
-      }
-      observer.next(isJpgOrPng && isLt2M);
-      observer.complete();
-    });
-  };
-}

package/src/lib/upload/upload.module.ts

@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { UploadComponent } from './upload.component';
-import {WidgetBaseModule, WidgetService} from 'bbj-widget-base';
-import { NzIconModule } from 'ng-zorro-antd/icon';
-import { NzUploadModule } from 'ng-zorro-antd/upload';
-import { NzButtonModule } from 'ng-zorro-antd/button';
-
-
-
-@NgModule({
-  declarations: [UploadComponent],
-  imports: [CommonModule, WidgetBaseModule,NzIconModule,NzUploadModule,NzButtonModule],
-})
-export class UploadModule {
-  constructor(widgetService: WidgetService) {
-    widgetService.register(UploadComponent);
-  }
-}

package/src/lib/video-grid/video-grid.component.html

@@ -1,33 +0,0 @@
-<!-- <div nz-row style="height: 100%" [nzGutter]="[gutter, gutter]">
- 
-</div> -->
-<div *ngIf="showToggle" class="grid-top">
-  <div class="toggle-btn" (click)="toggle()">
-    <img src="/assets/img/screen/grid.png" />
-    <span>切换</span>
-  </div>
-</div>
-<div class="video-grid">
-  <div class="video-grid-inner" [style.margin.px]="margin" [style.height]="height">
-    <div
-      *ngFor="let video of videos; let i = index"
-      class="grid-cell"
-      [style.width]="cellSize"
-      [style.height]="cellSize"
-      [style.padding.px]="gutter"
-    >
-      <div class="video-container" [class.selected]="i === selectedIndex" (click)="selectedIndex = i">
-        <sc-video-player [type]="type" [src]="video.src" [hasAudio]="hasAudio"></sc-video-player>
-        <div *ngIf="video.src" class="video-top">
-          <i
-            class="close"
-            nz-icon
-            nzType="close"
-            nzTheme="outline"
-            (click)="$event.stopPropagation(); video.src = null"
-          ></i>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

package/src/lib/video-grid/video-grid.component.less

@@ -1,68 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-}
-.grid-top {
-  flex: none;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 10px 0;
-}
-.toggle-btn {
-  cursor: pointer;
-  color: #fff;
-  display: flex;
-  align-items: center;
-  img {
-    width: 14px;
-    height: 14px;
-    margin-right: 4px;
-  }
-}
-.video-grid {
-  flex: 1;
-  width: 100%;
-  height: 100%;
-}
-.video-grid-inner {
-  display: flex;
-  height: 100%;
-  flex-wrap: wrap;
-  pointer-events: none;
-}
-
-.video-container {
-  position: relative;
-  pointer-events: auto;
-  height: 100%;
-  &:not(:hover) > .video-top {
-    display: none;
-  }
-}
-
-.video-top {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 0 4px;
-}
-
-.close {
-  cursor: pointer;
-  color: #fff;
-  width: 16px;
-  height: 16px;
-}
-
-.selected {
-  outline: 2px solid #ff0000;
-}

package/src/lib/video-grid/video-grid.component.spec.ts

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

package/src/lib/video-grid/video-grid.component.ts

@@ -1,115 +0,0 @@
-import { Component, HostBinding, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { DataInput, Property, Widget, Data, Method, Param } from 'bbj-widget-base';
-
-@Component({
-  selector: 'sc-video-grid',
-  templateUrl: './video-grid.component.html',
-  styleUrls: ['./video-grid.component.less'],
-})
-@Widget('视频宫格', { group: 'component', image: 'assets/img/screen/video-grid.png', icon: 'iconmokuai' })
-export class VideoGridComponent implements OnInit, OnChanges {
-  @Property('宫格数', {
-    enum: [
-      { label: '四宫格', value: 4 },
-      { label: '九宫格', value: 9 },
-    ],
-  })
-  size = 4;
-  @Property('间隔', { type: 'number' })
-  gutter = 4;
-  @Property('切换按钮')
-  showToggle: boolean;
-  @Property('视频类型', { enum: ['flv', 'hls', 'iframe'] })
-  type = 'flv';
-  @Property('是否有声音')
-  hasAudio: boolean;
-  @DataInput('视频地址')
-  src: string;
-  @Data({
-    properties: {
-      src: { title: '视频地址', type: 'string' },
-    },
-  })
-  data: any = [];
-  height: string;
-  cellSize: string;
-  videos = [];
-  margin: number;
-  selectedIndex = 0;
-
-  constructor() {}
-
-  ngOnInit(): void {
-    this.updateSize();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.size) {
-      this.updateSize();
-    }
-    if (changes.gutter) {
-      this.updateGutter();
-    }
-    if (changes.src) {
-      this.addSrc(this.src);
-    }
-    if (changes.data) {
-      if (this.data?.length) {
-        this.data.forEach((r, i) => {
-          const video = this.videos[i];
-          if (video) {
-            video.src = r.src;
-          }
-        });
-      }
-    }
-  }
-
-  updateSize() {
-    if (this.size !== this.videos.length) {
-      if (this.size > this.videos.length) {
-        for (let i = this.videos.length; i < this.size; i++) {
-          this.videos.push({});
-        }
-      } else {
-        this.videos = this.videos.slice(0, this.size);
-      }
-      if (this.size === 9) {
-        this.cellSize = '33.33%';
-      } else {
-        this.cellSize = '50%';
-      }
-      this.validIndex();
-    }
-  }
-
-  updateGutter() {
-    if (this.gutter) {
-      this.margin = -this.gutter;
-      this.height = `calc(100% + ${this.gutter * 2}px)`;
-    }
-  }
-
-  validIndex() {
-    if (this.selectedIndex >= this.videos.length) {
-      this.selectedIndex = 0;
-    }
-  }
-
-  @Method('设置视频地址')
-  addSrc(@Param('视频地址') src: string) {
-    if (src) {
-      const video = this.videos[this.selectedIndex];
-      if (video) {
-        video.src = src;
-      }
-      this.selectedIndex++;
-      this.validIndex();
-    }
-  }
-
-  toggle() {
-    this.size = this.size === 4 ? 9 : 4;
-    this.updateSize();
-  }
-}

package/src/lib/video-grid/video-grid.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { VideoGridComponent } from './video-grid.component';
-import { WidgetService } from 'bbj-widget-base';
-import { NzGridModule } from 'ng-zorro-antd/grid';
-import { VideoPlayerModule } from '../shared/component/video-player/video-player.module';
-import { NzIconModule } from 'ng-zorro-antd/icon';
-
-@NgModule({
-  declarations: [VideoGridComponent],
-  imports: [CommonModule, VideoPlayerModule, NzGridModule,NzIconModule],
-})
-export class VideoGridModule {
-  constructor(widgetService: WidgetService) {
-    widgetService.register(VideoGridComponent);
-  }
-}

package/src/lib/visual-map-chart/visual-map-chart.component.html

@@ -1,8 +0,0 @@
-<div
-  echarts
-  id="main"
-  [options]="chartOption"
-  class="demo-chart"
-  (chartClick)="onChartClick($event)"
-  [initOpts]="{ renderer: 'svg' }"
-></div>