bbj-screen-widget 2.4.61 → 2.4.62

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

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

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

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

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

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

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

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

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

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

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

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

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

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