bbj-screen-widget 2.4.61 → 2.4.62

package/src/lib/drop-down-detail-list/drop-down-detail-list.component.ts

@@ -0,0 +1,117 @@
+import {Component, OnInit, SimpleChanges} from '@angular/core';
+import {Data, DataOutput, Drill, Property, Widget} from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-drop-down-detail-list',
+  templateUrl: './drop-down-detail-list.component.html',
+  styleUrls: ['./drop-down-detail-list.component.less']
+})
+@Widget('下拉详情列表',{group:'component',image: 'assets/img/screen/drop-down-detail-list.png'})
+export class DropDownDetailListComponent implements OnInit {
+  data=[];
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = {
+    family: '',
+    color: '#FFFFFF',
+    weight: 'normal',
+    size: 16,
+    space: 0,
+    lineHeight: 0,
+  };
+  @Property('高', { type: 'number'})
+  height=30;
+  @Property('详情字体', { type: 'number'})
+  fontSize=16;
+  @Data({
+    properties: {
+      titleName: { type: 'string', title: '名称' },
+      detail: { type: 'string', title: '详情' },
+    },
+  })
+  _data: any[] = [
+    {titleName:'a',detail:'aa'},
+    {titleName:'a',detail:'bb'},
+    {titleName:'b',detail:'bb'},
+    {titleName:'b',detail:'cc'},
+  ];
+  // @Drill()
+  // @DataOutput(['titleName', 'list'])
+  constructor() { }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes._data){
+      this.data=this.jsonMerge(this._data,['titleName']);
+      this.data.forEach(function(item){
+        item.icon='caret-down'
+      });
+    }
+  }
+
+  ngOnInit() {
+    this.font = {
+      fontSize: this.font.size + 'px',
+      fontFamily: this.font.family,
+      color: this.font.color,
+      fontWeight: this.font.weight,
+      letterSpacing: this.font.space + 'px',
+      lineHeight: 'normal'
+    }
+  }
+  openList(index){
+    if(this.data[index].icon=='caret-down'){
+      this.data[index].icon='caret-up'
+    }else if(this.data[index].icon=='caret-up'){
+      this.data[index].icon='caret-down'
+    }
+  }
+  jsonMerge(jsonArr,keyArr){
+    const newJson = [] // 合并好的数据都放在这个数组里
+    jsonArr.forEach((itemJson,indexJson)=>{
+      let mark = -1
+      const finded = newJson.find((itemFind, indexFind) => {
+        if (itemFind[keyArr[0]] === itemJson[keyArr[0]]) {
+          mark = indexFind
+          return itemFind[keyArr[0]] === itemJson[keyArr[0]]
+        }
+      })
+      if(!finded){
+        const value = {}
+        value[keyArr[0]] = itemJson[keyArr[0]]
+        value.list = []
+        const list = {}
+        for(const i in itemJson){
+          if(i!==keyArr[0]){
+            list[i] = itemJson[i]
+          }
+        }
+        value.list.push(list)
+        newJson.push(value)
+      }else{
+        const list = {}
+        for(const i in itemJson){
+          if(i!==keyArr[0]){
+            list[i] = itemJson[i]
+          }
+        }
+        newJson[mark].list.push(list)
+      }
+    })
+    // 递归的条件是不断的缩减keyArr的length，每次都去除第零个，直到为0
+    if(keyArr.length === 1){
+      return newJson
+    }else{
+      return newJson.map((itemInfo)=>{
+        const newKeyArr = []
+        keyArr.forEach((item,index)=>{
+          if(index>0){
+            newKeyArr.push(item)
+          }
+        })
+        return{
+          [keyArr[0]]:itemInfo[keyArr[0]],
+          list:this.jsonMerge(itemInfo.list,newKeyArr)
+        }
+      })
+    }
+  }
+}

package/src/lib/drop-down-detail-list/drop-down-detail-list.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NzListModule } from 'ng-zorro-antd/list';
+import { DropDownDetailListComponent } from './drop-down-detail-list.component';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+
+@NgModule({
+  declarations: [DropDownDetailListComponent],
+  imports: [CommonModule, WidgetBaseModule, NzListModule],
+})
+export class DropDownDetailListModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(DropDownDetailListComponent);
+  }
+}

package/src/lib/dynamic-list/dynamic-list.component.html

@@ -0,0 +1,15 @@
+<div class="dynamicList">
+  <nz-list nzBordered="false" nzSplit="false">
+    <nz-list-item *ngFor="let item of _data" [ngStyle]="font" [style.backgroundImage]="'url(' + image + ')'" [style.height]="height+'px'">
+      <div class="listTop">
+        <div>{{item.add}}</div>
+        <div>{{item.name}}</div>
+      </div>
+      <hr class="listLine" *ngIf="lineShow" [style.backgroundColor]="lineColor">
+      <div class="listBottom" >
+        <div> 联系方式：</div>
+        <div>{{item.tel}}</div>
+      </div>
+    </nz-list-item>
+  </nz-list>
+</div>

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

@@ -0,0 +1,31 @@
+.dynamicList {
+  height: 100%;
+  overflow: auto;
+}
+.ant-list-item {
+  flex-wrap: wrap;
+  background-size: 100% 100%;
+  margin-bottom: 10px;
+  padding: 0;
+}
+.listTop{
+  height: calc(50% - 0.5px);
+  justify-content: space-between;
+}
+.listTop, .listBottom {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding:0 10px;
+}
+.listBottom{
+  height: calc(50% - 0.5px);
+  justify-content: space-between;
+}
+
+.listLine {
+  width: 100%;
+  height: 1px;
+  border: 0;
+  margin: 0;
+}

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

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

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

@@ -0,0 +1,57 @@
+import { Component, OnInit } from '@angular/core';
+import {Data, Property, Widget} from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-dynamic-list',
+  templateUrl: './dynamic-list.component.html',
+  styleUrls: ['./dynamic-list.component.less']
+})
+@Widget('动态列表',{group:'component',image: 'assets/img/screen/dynamic-list.png'})
+export class DynamicListComponent implements OnInit {
+  @Property('高', { type: 'number'})
+  height=100;
+  @Property('是否显示分割线',{ui:{widget: 'checkbox'}})
+  lineShow = true;
+  @Property('线颜色',{ui:{widget: 'myColor'}})
+  lineColor = '#ffffff';
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = {
+    family: '',
+    color: '#FFFFFF',
+    weight: 'normal',
+    size: 16,
+    space: 0,
+    lineHeight: 0,
+  };
+  @Property('',{min: 1,ui:{widget: 'myUpload', spanLabel: 0, spanControl: 24}})
+  image: string;
+  @Data({
+    properties: {
+      add: { type: 'string', title: '地址' },
+      name: { type: 'string', title: '姓名' },
+      tel: { type: 'string', title: '电话' },
+    },
+  })
+  _data=[{
+    name:'周某',
+    tel:'13656789414',
+    add:'变电检修室'
+  },{
+    name:'周某某',
+    tel:'13612349414',
+    add:'变电运维室'
+  }];
+  constructor() { }
+
+  ngOnInit() {
+    this.font = {
+      fontSize: this.font.size + 'px',
+      fontFamily: this.font.family,
+      color: this.font.color,
+      fontWeight: this.font.weight,
+      letterSpacing: this.font.space + 'px',
+      lineHeight: 'normal'
+    }
+  }
+
+}

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

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DynamicListComponent } from './dynamic-list.component';
+import { NzListModule } from 'ng-zorro-antd/list';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+
+@NgModule({
+  declarations: [DynamicListComponent],
+  imports: [CommonModule, WidgetBaseModule, NzListModule],
+})
+export class DynamicListModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(DynamicListComponent);
+  }
+}

package/src/lib/funnel-chart/funnel-chart.component.html

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

package/src/lib/funnel-chart/funnel-chart.component.less

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

package/src/lib/funnel-chart/funnel-chart.component.spec.ts

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

package/src/lib/funnel-chart/funnel-chart.component.ts

@@ -0,0 +1,198 @@
+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-funnel-chart',
+  templateUrl: './funnel-chart.component.html',
+  styleUrls: ['./funnel-chart.component.less'],
+})
+@Widget('三角图', {
+  group: 'otherChart',
+  image: 'assets/img/screen/funnel.png',
+  icon: 'icontubiao',
+})
+export class FunnelChartComponent extends BasicLineChartComponent implements OnInit, OnChanges {
+  @Property('图表样式', {
+    ui: {
+      widget: 'myImageExample',
+      spanLabel: 24,
+      spanControl: 24,
+      reset: ['seriesColor'],
+      example: [
+        {
+          background: 'assets/img/screen/funnel1.png',
+          data: {
+            seriesColor: ['#FFE53F', '#FFBF47', '#FF7F1D', '#FC460D', '#EE2100'],
+          },
+        },
+        {
+          background: 'assets/img/screen/funnel2.png',
+          data: {
+            seriesColor: ['#C0E656', '#52D852', '#00B335', '#008F44', '#006A61'],
+          },
+        },
+        {
+          background: 'assets/img/screen/funnel3.png',
+          data: {
+            seriesColor: ['#00E5E3', '#0DBBD8', '#2A8BC9', '#345EBB', '#003560'],
+          },
+        },
+        {
+          background: 'assets/img/screen/funnel4.png',
+          data: {
+            seriesColor: ['#FF6DB7', '#E23FCA', '#AD12CE', '#7F0B84', '#610796'],
+          },
+        },
+      ],
+    },
+  })
+  example: any;
+  @Property('系列颜色', {
+    ui: {
+      widget: 'seriesColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  seriesColor = ['#00E5E3', '#0DBBD8', '#2A8BC9', '#345EBB', '#003560'];
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = {
+    family: '',
+    color: '#FFFFFF',
+    weight: 'normal',
+    size: 12,
+    space: 0,
+    lineHeight: '',
+  };
+  @Property('边距', { ui: { widget: 'myGrid' } })
+  grid: any = {
+    top: 60,
+    right: 16,
+    bottom: 20,
+    left: 16,
+  };
+  @Property('图例', {
+    ui: { widget: 'select' },
+    enum: [
+      { label: '无', value: 'none' },
+      { label: '自动', value: 'auto' },
+      { label: '左对齐', value: 'left' },
+      { label: '右对齐', value: 'right' },
+    ],
+  })
+  align = 'auto';
+  @Property('最大值', {
+    ui: { widget: 'myRange', min: 0, max: 100, step: 1 },
+  })
+  max = 100;
+  @Property('最小值', {
+    ui: { widget: 'myRange', min: 0, max: 100, step: 1 },
+  })
+  min = 0;
+  @Property('排序', {
+    ui: { widget: 'select' },
+    enum: [
+      { label: '升序', value: 'ascending' },
+      { label: '降序', value: 'descending' },
+      { label: '无/按数据先后', value: 'none' },
+    ],
+  })
+  sort = 'ascending';
+  @Property('间隔', {
+    ui: { widget: 'myRange', min: 0, max: 10, step: 1 },
+  })
+  gap = 4;
+  @Property('标签', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  label = true;
+
+  chartOption: any = {};
+  @Data({
+    properties: {
+      x: { type: 'string', title: '类目' },
+      y: { type: 'number', title: '值' },
+    },
+  })
+  _data = [
+    { x: '一月', y: 20 },
+    { x: '二月', y: 40 },
+    { x: '三月', y: 60 },
+    { x: '四月', y: 80 },
+    { x: '五月', y: 100 },
+  ];
+  @Drill()
+  @DataOutput(['x'])
+  dataClick = new EventEmitter<any>();
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes._data) {
+      const style = {
+        color: this.font.color,
+        fontFamily: this.font.family,
+        fontWeight: this.font.weight,
+        fontSize: this.font.size,
+        lineHeight: this.font.lineHeight,
+      };
+
+      this.chartOption = {
+        legend: {
+          data: this.xData,
+          align: this.align,
+          show: this.align !== 'none',
+          textStyle: style,
+        },
+        calculable: true,
+        color: this.seriesColor,
+        series: [
+          {
+            type: 'funnel',
+            top: this.grid.top,
+            right: this.grid.right,
+            left: this.grid.left,
+            bottom: this.grid.bottom,
+            maxSize: this.max + '%',
+            minSize: this.min + '%',
+            sort: this.sort,
+            gap: this.gap,
+            itemStyle: { borderWidth: 0 },
+            label: {
+              show: this.label,
+              position: 'inside',
+            },
+          },
+        ],
+        dataset: {
+          // 用 dimensions 指定了维度的顺序。直角坐标系中，
+          // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
+          // 如果不指定 dimensions，也可以通过指定 series.encode
+          // 完成映射，参见后文。
+          dimensions: [],
+          source: [],
+        },
+      };
+      this.reloadData();
+      // for (let i = 0; i < this._data.length; i++) {
+      //   this.chartOption.series[0].data.push({
+      //     value: this._data[i].y,
+      //     name: this._data[i].x
+      //   });
+      // }
+      // console.log(JSON.stringify(this.chartOption));
+    }
+  }
+  reloadData() {
+    const dimensions = ['x', 'y'];
+    const source = this._data;
+    for (let i = 0; i < this._data.length; i++) {
+      this.xData[i] = this._data[i].x;
+    }
+    this.uniqueData(this.xData);
+    this.chartOption.dataset.dimensions = dimensions;
+    this.chartOption.dataset.source = source;
+  }
+  ngOnInit() {}
+  onChartClick(event) {
+    this.dataClick.emit({ x: event.name, s: event.seriesName });
+  }
+}

package/src/lib/funnel-chart/funnel-chart.module.ts

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

package/src/lib/gantt/gantt.component.html

@@ -0,0 +1,10 @@
+<!--<nz-date-picker [(ngModel)]="initDate" (ngModelChange)="onChange(initDate)"></nz-date-picker>-->
+<full-calendar *ngIf="calendarOptions" [options]="calendarOptions" ></full-calendar>
+<ng-template #fcEventContent let-data="data">
+
+  <div class="progress" nz-tooltip [nzTooltipTitle]="titleTemplate" [ngStyle]="data.progressStyle">
+    <span class="bar" [ngStyle]="data.barStyle">{{data.title}}</span>
+  </div>
+  <ng-template #titleTemplate><i nz-icon nzType="file" style="margin-right: 8px"></i> <span>{{data.title}}<br/>开始:{{data.start}}<br/>结束:{{data.end}}<br/>进度:{{data.progress}}</span></ng-template>
+</ng-template>
+

package/src/lib/gantt/gantt.component.less

@@ -0,0 +1,76 @@
+:host ::ng-deep {
+  .fc-direction-ltr {
+    height: 100%;
+  }
+  .fc .fc-view-harness {
+    padding-bottom: 0 !important;
+  }
+  .progress {
+    overflow: hidden;
+    height: var(--height);
+    //margin-bottom: 20px;
+    //margin-top: 20px;
+    //margin-left: 30px;
+    background-color: #f7f7f7;
+    //background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
+    //background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
+    //background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
+    //background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
+    //background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
+    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    width: 100%;
+    //margin-right:12px;
+  }
+
+  .progress .bar {
+    white-space: nowrap;
+    width: 0%;
+    height: 100%;
+    color: #ffffff;
+    float: left;
+    font-size: 12px;
+    text-align: center;
+    align-items: center;
+    display: flex;
+    // justify-content: center;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+    background-color: #0e90d2;
+    //background-image: -moz-linear-gradient(top, #149bdf, #0480be);
+    //background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
+    //background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
+    //background-image: -o-linear-gradient(top, #149bdf, #0480be);
+    //background-image: linear-gradient(to bottom, #149bdf, #0480be);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
+    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+    -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-transition: width 0.6s ease;
+    -moz-transition: width 0.6s ease;
+    -o-transition: width 0.6s ease;
+    transition: width 0.6s ease;
+  }
+  .fc-license-message {
+    display: none !important;
+  }
+  .fc table {
+    font-size: 17px !important;
+  }
+  .fc-resource .fc-datagrid-cell-main {
+    font-size: var(--fontSize);
+    color: var(--color);
+    font-weight: var(--weight);
+    font-family: var(--family);
+    line-height: var(--lineHeight); 
+  }
+}

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

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