bbj-screen-widget 2.4.61 → 2.4.62

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

@@ -0,0 +1,307 @@
+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-bubble-chart',
+  templateUrl: './bubble-chart.component.html',
+  styleUrls: ['./bubble-chart.component.less'],
+})
+@Widget('散点图', {
+  group: 'otherChart',
+  image: 'assets/img/screen/bubble.png',
+  icon: 'icontubiao',
+})
+export class BubbleChartComponent extends BasicLineChartComponent implements OnInit, OnChanges {
+  @Property('图表样式', {
+    ui: {
+      widget: 'myImageExample',
+      spanLabel: 24,
+      spanControl: 24,
+      reset: ['bubbleColor'],
+      example: [
+        {
+          background: 'assets/img/screen/bubble1.png',
+          data: { bubbleColor: { gradient: true, value: [['#FFEF66', '#FF851D']] } },
+        },
+        {
+          background: 'assets/img/screen/bubble2.png',
+          data: { bubbleColor: { gradient: true, value: [['#00FECB', '#00D191']] } },
+        },
+        {
+          background: 'assets/img/screen/bubble3.png',
+          data: { bubbleColor: { gradient: true, value: [['#00D2FD', '#3285FF']] } },
+        },
+        {
+          background: 'assets/img/screen/bubble4.png',
+          data: { bubbleColor: { gradient: true, value: [['#FF3699', '#8934F8']] } },
+        },
+      ],
+    },
+  })
+  example: any;
+  @Property('填充', {
+    ui: {
+      widget: 'seriesColor',
+      type: 'gradual',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  bubbleColor = { gradient: true, value: [['#00D2FD', '#3285FF']] };
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = {
+    family: '',
+    color: '#FFFFFF',
+    weight: 'normal',
+    size: 12,
+    space: 0,
+    lineHeight: 12,
+  };
+  @Property('边距', { ui: { widget: 'myGrid' } })
+  grid: any = {
+    top: 30,
+    right: 30,
+    bottom: 34,
+    left: 36,
+  };
+  @Property('图例', {
+    ui: { widget: 'select' },
+    enum: [
+      { label: '无', value: 'none' },
+      { label: '自动', value: 'auto' },
+      { label: '左对齐', value: 'left' },
+      { label: '右对齐', value: 'right' },
+    ],
+  })
+  align = 'auto';
+  // @Property('轴单位', { ui: { widget: 'myUnit' } })
+  // unit = { x: '', y: '' };
+  @Property('y轴单位', { type: 'string' })
+  yUnit = '';
+  @Property('x轴单位', { type: 'string' })
+  xUnit = '';
+  @Property('y轴最大')
+  yMax: number;
+  @Property('网络线', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  netLine = false;
+  @Property('标签', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  label = false;
+  @Property('轴标签角度', {
+    ui: { widget: 'myRange', min: -90, max: 90, step: 10 },
+  })
+  xLabelRotate = 0;
+
+  chartOption: any = {};
+  @Data({
+    properties: {
+      x: { type: 'string', title: '类目' },
+      y: { type: 'number', title: '高度' },
+      v: { type: 'number', title: '值' },
+      s: { type: 'string', title: '系列' },
+    },
+  })
+  _data = [
+    { x: '一月', y: 10, v: 32, s: '收入' },
+    { x: '二月', y: 20, v: 13, s: '收入' },
+    { x: '三月', y: 25, v: 87, s: '收入' },
+    { x: '四月', y: 35, v: 45, s: '收入' },
+    { x: '五月', y: 27, v: 18, s: '收入' },
+    { x: '六月', y: 28, v: 95, s: '收入' },
+    { x: '一月', y: 18, v: 59, s: '支出' },
+    { x: '二月', y: 28, v: 32, s: '支出' },
+    { x: '三月', y: 32, v: 75, s: '支出' },
+    { x: '四月', y: 48, v: 17, s: '支出' },
+    { x: '五月', y: 20, v: 43, s: '支出' },
+    { x: '六月', y: 17, v: 94, s: '支出' },
+  ];
+  @Drill()
+  @DataOutput(['x', 's'])
+  dataClick = new EventEmitter<any>();
+
+  style = {
+    color: '',
+    fontFamily: '',
+    fontWeight: '',
+    fontSize: '',
+    lineHeight: '',
+  };
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes._data) {
+      this.style = {
+        color: this.font.color,
+        fontFamily: this.font.family,
+        fontWeight: this.font.weight,
+        fontSize: this.font.size,
+        lineHeight: this.font.lineHeight,
+      };
+
+      const color = [];
+      let bubbleColor;
+      if (this.bubbleColor && this.bubbleColor.value) {
+        bubbleColor = this.bubbleColor.value;
+      } else {
+        bubbleColor = this.bubbleColor;
+      }
+      for (let i = 0; i < bubbleColor.length; i++) {
+        color.push({
+          type: 'radial',
+          x: 0.4,
+          y: 0.3,
+          r: 1,
+          global: false,
+          colorStops: [
+            { offset: 0, color: bubbleColor[i][0] },
+            { offset: 1, color: bubbleColor[i][1] },
+          ],
+        });
+      }
+      this.chartOption = {
+        legend: {
+          align: this.align,
+          show: this.align !== 'none',
+          textStyle: this.style,
+        },
+        grid: {
+          top: this.grid.top,
+          right: this.grid.right,
+          left: this.grid.left,
+          bottom: this.grid.bottom,
+        },
+        xAxis: {
+          name: this.xUnit,
+          nameTextStyle: this.style,
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: this.style.color,
+            },
+          },
+          axisLabel: {
+            rotate: this.xLabelRotate,
+            show: true,
+            color: this.font.color,
+            fontFamily: this.font.family,
+            fontWeight: this.font.weight,
+            fontSize: this.font.size,
+            margin: this.font.lineHeight,
+          },
+          // data: this.xData,
+        },
+        yAxis: {
+          name: this.yUnit,
+          nameTextStyle: this.style,
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: this.style.color,
+            },
+          },
+          axisLabel: this.style,
+          splitLine: {
+            show: this.netLine,
+            lineStyle: {
+              type: 'dashed',
+            },
+          },
+        },
+        color,
+        series: [],
+      };
+      this.reloadData();
+      // for (let i = 0; i < this.series.length; i++) {
+
+      // let temp = [];
+      // for (let j = 0; j < this._data.length; j++) {
+      //   if (this.series[i] === this._data[j].s) {
+      //     temp.push(this._data[j]);
+      //   }
+      // }
+      // for (let j = 0; j < this.xData.length; j++) {
+      //   let count = 0;
+      //   for (let k = 0; k < temp.length; k++) {
+      //     if (temp[k].x == this.xData[j]) {
+      //       count++;
+      //     }
+      //   }
+      //   if (count == 0) {
+      //     this._data.push({ x: this.xData[j], y: null,v:null, s: this.series[i] });
+      //   }
+      // }
+      // this._data.sort((prev, next) => {
+      //   return this.xData.indexOf(prev.x) - this.xData.indexOf(next.x);
+      // });
+      // this._data
+      //   .filter(els => els.s === this.series[i])
+      //   .forEach(el => {
+      //     for (let j = 0; j < this.xData.length; j++) {
+      //       if (this.xData[j] === el.x) {
+      //         this.chartOption.series[i].data.push([el.x, el.y, el.v]);
+      //       }
+      //     }
+      //   });
+      // this.chartOption.series[i].symbolSize = function(data) {
+      //   return data[2] / 2;
+      // };
+      // this.chartOption.series[i].label.emphasis.formatter = function(param) {
+      //   return param.data[2];
+      // };
+      // }
+
+      // console.log(JSON.stringify(this.chartOption));
+    }
+  }
+  // reloadData(){
+  //   if (this._data[0]) {
+  //     for (let i = 0; i < this._data.length; i++) {
+  //       if ( this._data[i].s) {
+  //         this.series[i] = this._data[i].s;
+  //       }
+  //     }
+  //     this.uniqueData(this.series);
+  //   }
+  //   for (let i = 0; i < this._data.length; i++) {
+  //     this.xData[i] = this._data[i].x;
+  //   }
+  //   this.uniqueData(this.xData);
+  // }
+  setSeriesStyle(name: string, datasetIndex: number) {
+    const series = {
+      type: 'scatter',
+      symbolSize: (data) => {
+        return data.v;
+      },
+      name,
+      label: {
+        show: this.label,
+        textStyle: this.style,
+        emphasis: {
+          show: true,
+          position: 'top',
+          textStyle: this.style,
+          formatter: [],
+        },
+      },
+      itemStyle: {
+        normal: {
+          shadowBlur: 10,
+          shadowOffsetY: 5,
+          shadowColor: 'rgba(67, 74, 78, 0.5)',
+        },
+      },
+      encode: { x: 'x', y: 'y' },
+      datasetIndex,
+      // data: [],
+    };
+    this.chartOption.series.push(series);
+    return series;
+  }
+  ngOnInit() {}
+  onChartClick(event) {
+    this.dataClick.emit({ x: event.name, s: event.seriesName });
+  }
+}

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

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

package/src/lib/bulletin-board/bulletin-board.component.html

@@ -0,0 +1,15 @@
+<div class="content">
+  <div *ngIf="title" class="title">
+    <p [ngStyle]="titleStyle">{{ title }}</p>
+  </div>
+  <div class="module" *ngFor="let item of contentArr">
+    <div class="subtitle" [ngStyle]="subtitleStyle">
+      {{ item.title }}
+    </div>
+    <div class="box" [ngStyle]="boxStyle">
+      <div class="text" [ngStyle]="textStyle" *ngFor="let a of item.content">
+        {{ a }}
+      </div>
+    </div>
+  </div>
+</div>

package/src/lib/bulletin-board/bulletin-board.component.less

@@ -0,0 +1,27 @@
+:host {
+    width: 100%;
+    height: 100%;
+  }
+  .content{
+    width: 100%;
+    height: 100%;
+    display: block;
+    padding: 0% 5% 0% 5%;
+    overflow-y: scroll;
+    .title{
+        padding: 10% 0 5% 0;
+    }
+    .text{
+      margin-bottom: 10px;
+      padding-left: 5%;
+    }
+    .subtitle{
+      // border-left:5px solid rgb(97, 149, 207);
+      margin-bottom: 3%;
+      // background: -webkit-linear-gradient(left,white,lightblue,skyblue);
+      padding-left: 5%;
+    }
+  }
+  .content::-webkit-scrollbar {
+    display: none;/*隐藏滚动条*/
+}

package/src/lib/bulletin-board/bulletin-board.component.spec.ts

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

package/src/lib/bulletin-board/bulletin-board.component.ts

@@ -0,0 +1,127 @@
+import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Data, Property, Widget } from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-bulletin-board',
+  templateUrl: './bulletin-board.component.html',
+  styleUrls: ['./bulletin-board.component.less']
+})
+@Widget('布告栏', {group: 'component', icon: 'icontubiao', image: '/assets/img/screen/bulletin-board.png'})
+export class BulletinBoardComponent implements OnInit,OnChanges {
+  @Property('标题', {type:'string'})
+  title='';
+  @Property('标题字体', { ui: { widget: 'myFont' } })
+  titleFont: any = { family: '', color: '#ffffff', weight: 'normal', size: 20, space: 0, lineHeight: 40 };
+  @Property('小标题字', { ui: { widget: 'myFont' } })
+  subtitleFont: any = { family: '', color: '#ffffff', weight: 'normal', size: 20, space: 0, lineHeight: 40 };
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = {
+    family: '',
+    color: '#FFFFFF',
+    weight: 'normal',
+    size: 12,
+    space: 0,
+    lineHeight: 12,
+  };
+  @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'],
+    },
+  })
+  startColor = '#D0021B';
+  @Property('渐变结束', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#ffffff'],
+    },
+  })
+  endColor = '#F5A623';
+  @Property('边框粗细',{
+    type:'number'
+  })
+  borderWidth=5;
+  @Property('分隔符',{
+    type:'string'
+  })
+  separate=';';
+  @Property('内容边距',{
+    type:'number'
+  })
+  marginSize=';';
+  @Data({
+    properties: {
+      title: { type: 'string', title: '小标题' },
+      content: { type: 'string', title: '内容' },
+    },
+  })
+  _data = [
+    { title: '单位单位单位', content: '【带班领导】  张三  1300000000;【值班联系】  李四  1300000000 ' },
+    { title: '单位单位单位', content: '【带班领导】  张三  1300000000;【值班联系】  李四  1300000000 ' },
+    { title: '单位单位单位', content: '【带班领导】  张三  1300000000;【值班联系】  李四  1300000000 ' },
+    { title: '单位单位单位', content: '【带班领导】  张三  1300000000;【值班联系】  李四  1300000000 ' },
+  ];
+  contentArr: any = [];
+  titleStyle: any;
+  textStyle: any;
+  subtitleStyle: any;
+  boxStyle: any;
+  constructor() { }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if(this._data&&this._data.length>0){
+      this._data.forEach(a=>{
+        let obj={title:'',content:[]};
+        let sp=this.separate;
+        if(!sp||sp===''){
+          sp=';';
+        }
+        obj.title=a.title;
+        obj.content=a.content.split(sp);
+        this.contentArr.push(obj);
+      })
+    }
+  }
+
+  ngOnInit(): void {
+    this.titleStyle = {
+      fontSize: this.titleFont.size + 'px',
+      fontFamily: this.titleFont.family,
+      color: this.titleFont.color,
+      fontWeight: this.titleFont.weight,
+      letterSpacing: this.titleFont.space + 'px',
+      lineHeight: this.titleFont.lineHeight + 'px',
+      // backgroundColor: this.headBackground,
+    };
+    this.subtitleStyle = {
+      fontSize: this.subtitleFont.size + 'px',
+      fontFamily: this.subtitleFont.family,
+      color: this.subtitleFont.color,
+      fontWeight: this.subtitleFont.weight,
+      letterSpacing: this.subtitleFont.space + 'px',
+      lineHeight: this.subtitleFont.lineHeight + 'px',
+      borderLeft: this.borderWidth+'px'+' solid '+this.borderColor,
+      background:'-webkit-linear-gradient(left,'+this.startColor+','+this.endColor+')',
+    };
+    this.textStyle = {
+      fontSize: this.font.size + 'px',
+      fontFamily: this.font.family,
+      color: this.font.color,
+      fontWeight: this.font.weight,
+      letterSpacing: this.font.space + 'px',
+      lineHeight: this.font.lineHeight + 'px',
+    };
+    this.boxStyle={
+      margin: this.marginSize+'px 0px',
+    }
+    
+  }
+
+}

package/src/lib/bulletin-board/bulletin-board.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BulletinBoardComponent } from './bulletin-board.component';
+import { WidgetService } from 'bbj-widget-base';
+
+
+
+@NgModule({
+  declarations: [
+    BulletinBoardComponent
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class BulletinBoardModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(BulletinBoardComponent);
+  }
+ }

package/src/lib/button/button.component.html

@@ -0,0 +1 @@
+<div class="screen-button" (click)="openPage($event)" [ngStyle]="textStyle">{{title}}</div>

package/src/lib/button/button.component.less

@@ -0,0 +1,17 @@
+:host {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+.screen-button {
+  // padding: 4px 18px;
+  color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border: 1px solid;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}

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

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