bbj-screen-widget 2.4.61 → 2.4.62

package/src/lib/gauge-progress/gauge-progress.component.ts

@@ -0,0 +1,293 @@
+import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Property, Widget, Data } from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-gauge-progress',
+  templateUrl: './gauge-progress.component.html',
+  styleUrls: ['./gauge-progress.component.less'],
+})
+@Widget('进度条仪表盘', {
+  group: 'otherChart',
+  image: 'assets/img/screen/gauge-progress.png',
+  icon: 'icontubiao',
+})
+export class GaugeProgressComponent implements OnInit, OnChanges {
+  @Property('数值字体', { ui: { widget: 'myFont' } })
+  numfont: any = {
+    family: 'Microsoft YaHei',
+    color: '#ffffff',
+    weight: 'normal',
+    size: 21,
+    space: 0,
+    lineHeight: '20',
+  };
+
+  @Property('可视个数', { type: 'number' })
+  slidesPerView = 1;
+
+  @Property('间距', { type: 'number' })
+  spaceBetween = 0;
+
+  @Property('左右按钮', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  navigation = true;
+
+  @Property('按钮偏移', { type: 'number' })
+  navigationMoveVal = -60;
+
+  @Property('左图标', {
+    type: 'string',
+    ui: {
+      widget: 'myUpload',
+    },
+  })
+  navigationLeftIcon = null;
+
+  @Property('右图标', {
+    type: 'string',
+    ui: {
+      widget: 'myUpload',
+    },
+  })
+  navigationRightIcon = null;
+
+  @Property('显示模式', {
+    ui: { widget: 'select' },
+    enum: [{ label: '图标卡片', value: 'card' }],
+  })
+  showType = 'card';
+
+  @Property('卡片背景', {
+    type: 'string',
+    ui: {
+      widget: 'myUpload',
+    },
+  })
+  cardBgImg = null;
+  navigationBtnConfig = {
+    prevEl: '.swiper-navigation-prev',
+    nextEl: '.swiper-navigation-next',
+  };
+  //========================================
+  @Property('表盘颜色', {
+    ui: {
+      widget: 'seriesColor',
+      type: 'gradual',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  seriesColor: any = { gradient: false, value: [['#6D7597', '#6D7597']] };
+
+  @Property('表盘宽度', {
+    ui: { widget: 'myRange', min: 0, max: 100, step: 1 },
+  })
+  width = 10;
+  @Property('起始角度', {
+    ui: { widget: 'myRange', min: 90, max: 360, step: 1 },
+  })
+  startAngle = 210;
+  @Property('结束角度', {
+    ui: { widget: 'myRange', min: -90, max: 90, step: 1 },
+  })
+  endAngle = -30;
+
+  @Property('显示标题', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  label = true;
+
+  @Property('标题字体', { ui: { widget: 'myFont' } })
+  font: any = {
+    family: '',
+    color: '#FFFFFF',
+    weight: 'normal',
+    size: 18,
+    space: 0,
+    lineHeight: 18,
+  };
+  @Property('标题位移', {
+    ui: { widget: 'number' },
+  })
+  labelOffset = 50;
+  @Property('标题宽度', {
+    ui: { widget: 'number' },
+  })
+  labelWidth = null;
+
+  @Property('显示数值', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  labelVal = true;
+
+  @Property('数值字体', { ui: { widget: 'myFont' } })
+  numFont: any = {
+    family: '',
+    color: '#FFFFFF',
+    weight: 'normal',
+    size: 38,
+    space: 0,
+    lineHeight: 38,
+  };
+
+  @Property('百分号', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  percent = false;
+
+  @Property('数值位移', {
+    ui: { widget: 'number' },
+  })
+  labelValOffset = -10;
+
+  @Property('最大值', {
+    ui: { widget: 'number' },
+  })
+  max = 100;
+  @Property('最小值', {
+    ui: { widget: 'number' },
+  })
+  min = 0;
+
+  @Property('进度颜色', {
+    ui: {
+      widget: 'seriesColor',
+      type: 'gradual',
+    },
+  })
+  progressColor = { gradient: true, value: [['#2505F0', '#f00']] };
+
+  @Property('进度阴影', {
+    ui: {
+      widget: 'myColor',
+      example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  progressShadow = null;
+
+  image: string;
+  constructor() {}
+  chartOption: any = {};
+  @Data({
+    properties: {
+      name: { type: 'string', title: '文字' },
+      value: { type: 'number', title: '值' },
+    },
+  })
+  _data = [{ name: '标题', value: 50 }];
+
+  data = [];
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes._data) {
+      this.data = [];
+      if (this._data) {
+        if (this._data.length <= this.slidesPerView) {
+          this.navigation = false;
+        }
+        this._data.forEach((e: any) => {
+          let sourceData = [];
+          sourceData.push(e);
+          let chartOption = {
+            series: [
+              {
+                // name: this.title,
+                type: 'gauge',
+                startAngle: this.startAngle,
+                endAngle: this.endAngle,
+                progress: {
+                  show: e.value && Number(e.value) > 0 ? true : false,
+                  overlap: false,
+                  roundCap: true,
+                  clip: false,
+                  itemStyle: {
+                    borderWidth: 1,
+                    color: this.getColor(this.progressColor, 'progress'),
+                    shadowColor: this.progressShadow,
+                    shadowBlur: 5,
+                  },
+                },
+                detail: {
+                  show: this.labelVal,
+                  formatter: this.percent ? '' + ((e.value / this.max) * 100).toFixed(2) + '%' : '{value}',
+                  color: this.numFont.color,
+                  fontFamily: this.numFont.family,
+                  fontWeight: this.numFont.weight,
+                  fontSize: this.numFont.size,
+                  lineHeight: this.numFont.lineHeight,
+                  offsetCenter: [0, `${this.labelValOffset}%`],
+                },
+                data: sourceData,
+                title: {
+                  show: this.label,
+                  color: this.font.color,
+                  fontFamily: this.font.family,
+                  fontWeight: this.font.weight,
+                  fontSize: this.font.size,
+                  lineHeight: this.font.lineHeight,
+                  offsetCenter: [0, `${this.labelOffset}%`],
+                  overflow: 'breakAll',
+                  width: this.labelWidth,
+                },
+                axisLine: {
+                  roundCap: true,
+                  lineStyle: {
+                    width: this.width,
+                    color: this.getColor(this.seriesColor),
+                  },
+                },
+                max: this.max,
+                min: this.min,
+                axisLabel: {
+                  show: false,
+                },
+                splitLine: {
+                  show: false,
+                },
+                axisTick: {
+                  show: false,
+                },
+                pointer: {
+                  show: false,
+                },
+              },
+            ],
+          };
+          this.data.push(chartOption);
+        });
+      }
+
+      // console.log(this._data[0].value,this._data[0].value && Number(this._data[0].value) !== 0 ? true : false)
+
+      // console.log(JSON.stringify(this.chartOption));
+    }
+  }
+  ngOnInit() {}
+  getColor(colorBox, type?: string) {
+    const color = [];
+    const color1 = [];
+    const colorInfo = colorBox && colorBox.value ? colorBox.value : colorBox;
+    colorInfo.forEach((item) => {
+      color.push({
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 1,
+        y2: 0,
+        global: false,
+        colorStops: [
+          { offset: 0, color: item[0] },
+          { offset: 1, color: item[1] },
+        ],
+      });
+    });
+    let count = 1;
+    if (colorInfo.length > 1) {
+      count = 1 / colorInfo.length;
+      for (let i = 0; i < colorInfo.length; i++) {
+        color1.push([count * (i + 1), color[i]]);
+      }
+    }
+    return type === 'progress' ? color[0] : count < 1 ? color1 : [[1, color[0]]];
+  }
+}

package/src/lib/gauge-progress/gauge.module.ts

@@ -0,0 +1,17 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { GaugeProgressComponent } from './gauge-progress.component';
+import { NgxEchartsModule } from 'ngx-echarts';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+import 'swiper/swiper-element-bundle.js';
+
+@NgModule({
+  declarations: [GaugeProgressComponent],
+  imports: [CommonModule, WidgetBaseModule, NgxEchartsModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class GaugeProgressModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(GaugeProgressComponent);
+  }
+}

package/src/lib/general-text/general-text.component.html

@@ -0,0 +1,7 @@
+<div
+  *ngIf="data && data[0]"
+  [ngStyle]="style"
+  class="text"
+  [innerHTML]="(data[0].value != null ? data[0].value : title) | nzSanitizer: 'html'"
+></div>
+<div *ngIf="!data || !data[0]" [ngStyle]="style" class="text" [innerHTML]="title | nzSanitizer: 'html'"></div>

package/src/lib/general-text/general-text.component.less

@@ -0,0 +1,8 @@
+:host {
+  width: 100%;
+  height: 100%;
+}
+.text {
+  white-space: pre-wrap;
+}
+

package/src/lib/general-text/general-text.component.spec.ts

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

package/src/lib/general-text/general-text.component.ts

@@ -0,0 +1,114 @@
+import {
+  Component,
+  OnInit,
+  ElementRef,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  OnChanges,
+  SimpleChanges,
+  EventEmitter,
+  Renderer2,
+} from '@angular/core';
+import { Property, Widget, Data, DataOutput, WidgetRef, CustomExport } from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-general-text',
+  templateUrl: './general-text.component.html',
+  styleUrls: ['./general-text.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+@Widget('常规文本', { group: 'generalText', icon: 'iconwenzi' })
+export class GeneralTextComponent implements OnInit, OnChanges, CustomExport {
+  @Property('内容', { ui: { widget: 'textarea', autosize: { minRows: 6, maxRows: 6 } } })
+  title = '文本';
+  @Property('背景', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  background: string;
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = { family: '', color: '#ffffff', weight: 'normal', size: 12, space: 0, lineHeight: '' };
+  @Property('透明度', { ui: { widget: 'myRange', min: 0, max: 1, step: 0.1 } })
+  opacity = 1;
+  @Property('阴影', { ui: { widget: 'myShadow' } })
+  shadow: any = { color: '', X: 0, Y: 0, Z: 0 };
+  @Property('文字对齐', {
+    ui: { widget: 'select' },
+    enum: [
+      { label: '左对齐', value: 'left' },
+      { label: '右对齐', value: 'right' },
+      { label: '居中', value: 'center' },
+    ],
+  })
+  align = 'left';
+  @Property('内容边距', { ui: { widget: 'myGrid' } })
+  grid: any = {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  };
+  style: any;
+  @Data({
+    properties: {
+      value: { type: 'string', title: '值' },
+      color: { type: 'string', title: '颜色' },
+    },
+  })
+  data: any[] = [];
+  @DataOutput('值', { triggerLink: false })
+  dataChange = new EventEmitter();
+  constructor(private renderer: Renderer2, private cd: ChangeDetectorRef, private widgetRef: WidgetRef) {}
+
+  ngOnInit() {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.style = {
+      backgroundColor: this.background,
+      fontSize: this.font.size + 'px',
+      fontFamily: this.font.family,
+      color: this.data && this.data[0] && this.data[0].color ? this.data[0].color : this.font.color,
+      fontWeight: this.font.weight,
+      letterSpacing: this.font.space + 'px',
+      lineHeight: this.font.lineHeight + 'px',
+      opacity: this.opacity,
+      textShadow: this.shadow.X + 'px ' + this.shadow.Y + 'px ' + this.shadow.Z + 'px ' + this.shadow.color,
+    };
+    if (this.grid) {
+      const { top = 0, right = 0, bottom = 0, left = 0 } = this.grid;
+      this.style.padding = top + 'px ' + right + 'px ' + bottom + 'px ' + left + 'px';
+    }
+    const widget: any = this.widgetRef.widget as any;
+    if (widget.link?.enabled || widget.outputs?.enabled) {
+      this.style.cursor = 'pointer';
+    }
+    this.style.textAlign = this.align;
+    if (changes.data) {
+      if (this.data?.length && this.data[0].value) {
+        this.dataChange.emit(this.data[0].value);
+      } else {
+        this.dataChange.emit(null);
+      }
+    }
+    this.cd.markForCheck();
+  }
+
+  exportWord() {
+    let content = this.title;
+    if (this.data != null && this.data[0] != null && this.data[0].value != null) {
+      content = this.data[0].value;
+    }
+    if (content) {
+      content = content.replace(/\n/g, '<br/>').replace(/ /g, '&nbsp;');
+      const p = document.createElement('p');
+      p.innerHTML = content;
+      Object.keys(this.style).forEach((key) => {
+        this.renderer.setStyle(p, key, this.style[key]);
+      });
+      return p.outerHTML;
+    }
+    return null;
+  }
+}

package/src/lib/general-text/general-text.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { GeneralTextComponent } from './general-text.component';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+import { NzPipesModule } from 'ng-zorro-antd/pipes';
+
+@NgModule({
+  declarations: [GeneralTextComponent],
+  imports: [CommonModule, WidgetBaseModule,NzPipesModule],
+})
+export class GeneralTextModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(GeneralTextComponent);
+  }
+}

package/src/lib/iconfont/icon.ts

@@ -0,0 +1,198 @@
+export const icons = [
+  'icondingwei1',
+  'iconxialakuang',
+  'icontianjiazu',
+  'iconguanlianshuxing',
+  'iconbianzu401',
+  'iconanzhuang',
+  'iconbaojing',
+  'iconbuguifan',
+  'iconbianzu621',
+  'iconbumen',
+  'iconbianzu6',
+  'iconbianzu3311',
+  'icondaohang',
+  'iconbianzu111',
+  'iconditu2',
+  'iconfuzeren',
+  'iconfuzhi1',
+  'icongengduo1',
+  'iconbuguifanjiashi',
+  'iconfadianji',
+  'iconbianzu33xiawu42347',
+  'iconche',
+  'iconguanli',
+  'icondukaqi',
+  'iconhulian1',
+  'iconhoutai',
+  'icondianhua2',
+  'iconliangqizuozhanjianting',
+  'iconguanggao',
+  'iconkongqijinghua',
+  'iconjuleledaohang',
+  'iconluxiang1',
+  'iconchouti1',
+  'icongerenxinxilan',
+  'iconqiqiu',
+  'iconpihuating',
+  'iconkulian',
+  'iconhulianxiawu35716',
+  'iconguiji',
+  'iconrenyuan1',
+  'iconnongye',
+  'iconremen',
+  'iconshajunshebei',
+  'iconnengyuan1',
+  'iconshezhixiawu20722',
+  'iconshujuyuan',
+  'iconxiangpiting',
+  'iconlajitong1',
+  'iconjiaocheng',
+  'icontuichu2',
+  'iconweifanggaizao',
+  'iconxiaodudu',
+  'iconxiaodu1',
+  'iconriqi',
+  'iconxiaofang',
+  'iconwurenji',
+  'icontanzhaodengshijian',
+  'iconquanxian',
+  'iconxiaodu2',
+  'iconbumenxiawu14836',
+  'iconqiche',
+  'iconwulianwang',
+  'iconxiaoqu',
+  'iconxingzhuangjiehe1',
+  'iconxunjian1',
+  'iconyangan',
+  'iconxinxixiugai',
+  'iconyangan1',
+  'iconxinshuai',
+  'iconzhihang1',
+  'iconxiaolian',
+  'iconxieya',
+  'iconLEDTrackLight-02',
+  'iconzhaomingdeng',
+  'iconzhangpeng',
+  'iconyouhuiquanquanmian',
+  'iconicon_gouwu1',
+  'iconLedCleanEnergy',
+  'iconicon_diannao1',
+  'iconled2',
+  'iconzhihang2',
+  'iconzhineng',
+  'iconzhihang',
+  'iconjindu',
+  'iconhoutui',
+  'iconguanbi1',
+  'iconhulian',
+  'iconkefu',
+  'iconkuaidi',
+  'iconlianjie',
+  'iconkefurexian',
+  'iconliuchengjiedian',
+  'iconmengjiangnan',
+  'iconmoxing',
+  'iconqunyou',
+  'iconrenyuanguanli',
+  'iconqingchuhuancun3x1',
+  'iconrenyuanjiegou',
+  'iconrongyu',
+  'iconshangpin',
+  'iconsaomiaohongbao',
+  'iconsaoyisao',
+  'iconshebei',
+  'iconshenghuo',
+  'iconshexiang',
+  'icontianjia',
+  'icontuichubeifen2',
+  'icontishi',
+  'iconshexiangtou',
+  'iconshijiandefuben',
+  'iconsoucha',
+  'iconxiuxi1',
+  'iconxuanze',
+  'iconyoutui',
+  'iconyonghu',
+  'iconzhuanyi',
+  'iconicon_diannao',
+  'iconwenduji',
+  'iconicon_dengdaicaiji',
+  'iconzhihuinongye',
+  'iconsousuo1',
+  'iconicon_neirongjilu',
+  'iconicon_ppt',
+  'iconshuidi',
+  'iconicon_word',
+  'iconicon_txt',
+  'iconwenjiansoucha',
+  'iconwodedianzan1',
+  'iconyanganjiankong',
+  'iconzhinenglajitong',
+  'iconwuliu',
+  'iconGroup2',
+  'iconicon_gouwu',
+  'iconxunjian',
+  'iconyouhuiquan',
+  'iconyinhangka',
+  'iconwodepinglun1',
+  'iconGroup2beifen2',
+  'iconicon_zhuye',
+  'iconwangluo',
+  'iconbanbenhao1',
+  'iconbianzu11',
+  'iconbianzu22',
+  'iconbianzu12',
+  'iconbianzu13',
+  'iconchukou',
+  'iconbianzu361',
+  'icondaima',
+  'iconbianzu39',
+  'icondajian',
+  'icondiannao',
+  'icondenglu',
+  'iconbianzu381',
+  'iconfangan',
+  'icongengxin',
+  'icongenghuantouxiang1',
+  'icongouwuche',
+  'iconguangbo',
+  'iconcaijian',
+  'iconbaocun',
+  'iconbianji',
+  'iconbeijing',
+  'icondian',
+  'iconbukejian',
+  'iconfuzhi',
+  'iconkejian',
+  'iconfangwen',
+  'iconguanbi',
+  'iconjia',
+  'iconlajitong2',
+  'iconshangyibu',
+  'iconren',
+  'iconshangchuan',
+  'iconsshanchu',
+  'iconshijian',
+  'iconsousuo',
+  'iconsuo',
+  'iconsuoding',
+  'iconmokuai',
+  'icontexiao',
+  'icontubiao',
+  'iconwenzi',
+  'iconwenjianjia',
+  'icontianjiaxuanxiang',
+  'iconxiala',
+  'iconkaisuo',
+  'iconxiayibu',
+  'icontupian',
+  'iconsxingzhuang',
+  'iconxiuxi',
+  'iconzhinanzhen',
+  'iconyulan',
+  'iconstuichu',
+  'iconyinle',
+  'iconyun',
+  'iconzhinanzhen',
+];

package/src/lib/iconfont/iconfont.component.html

@@ -0,0 +1,4 @@
+<span *ngIf="type === 'iconfont'" [ngStyle]="style">
+  <i nz-icon [nzIconfont]="icon"></i>
+</span>
+<i nz-icon *ngIf="type === 'nzIcon'" [ngStyle]="style" [nzType]="icon" nzTheme="outline"></i>

package/src/lib/iconfont/iconfont.component.less

@@ -0,0 +1,5 @@
+:host {
+    width: 100%;
+    height: 100%;
+    display: inline-block;
+}