bbj-screen-widget 2.4.61 → 2.4.62

package/src/lib/screen-widget.module.ts

@@ -0,0 +1,592 @@
+import { NgModule } from '@angular/core';
+import { ImageModule } from './image/image.module';
+import { BasicLineChartModule } from './basic-line-chart/basic-line-chart.module';
+import { ButtonModule } from './button/button.module';
+import { TimerModule } from './timer/timer.module';
+import { NumberFlopModule } from './number-flop/number-flop.module';
+import { VoteModule } from './vote/vote.module';
+import { SelectModule } from './select/select.module';
+import { FormsModule } from '@angular/forms';
+import { SearchModule } from './search/search.module';
+import { WeatherModule } from './weather/weather.module';
+import { RadioModule } from './radio/radio.module';
+import { CheckboxModule } from './checkbox/checkbox.module';
+import { RateModule } from './rate/rate.module';
+import { GeneralTextModule } from './general-text/general-text.module';
+import { MarqueeModule } from './marquee/marquee.module';
+import { WordartModule } from './wordart/wordart.module';
+import { IconfontModule } from './iconfont/iconfont.module';
+import { AudioModule } from './audio/audio.module';
+import { BasicBarChartModule } from './basic-bar-chart/basic-bar-chart.module';
+import { BasicPieChartModule } from './basic-pie-chart/basic-pie-chart.module';
+import { BarChartThreeDModule } from './bar-chart-three-d/bar-chart-three-d.module';
+import { ShapeModule } from './shape/shape.module';
+import { LineBarChartModule } from './line-bar-chart/line-bar-chart.module';
+import { BubbleChartModule } from './bubble-chart/bubble-chart.module';
+import { RadarChartModule } from './radar-chart/radar-chart.module';
+import { FunnelChartModule } from './funnel-chart/funnel-chart.module';
+import { BackgroundModule } from './background/background.module';
+import { GaugeModule } from './gauge/gauge.module';
+import { PercentPieChartModule } from './percent-pie-chart/percent-pie-chart.module';
+import { TreeRingChartModule } from './tree-ring-chart/tree-ring-chart.module';
+import { LiquidFillModule } from './liquid-fill/liquid-fill.module';
+import { ShufflingListModule } from './shuffling-list/shuffling-list.module';
+// import {DropDownDetailListModule} from './drop-down-detail-list/drop-down-detail-list.module';
+// import {DynamicListModule} from './dynamic-list/dynamic-list.module';
+import { BasicPlanimetricMapModule } from './basic-planimetric-map/basic-planimetric-map.module';
+import { BreathingBubbleLayerModule } from './breathing-bubble-layer/breathing-bubble-layer.module';
+import { PlanimetricMap2dModule } from './planimetric-map2d/planimetric-map2d.module';
+import { ParentContainerModule } from './parent-container/parent-container.module';
+import { PlanimetricMap3dModule } from './planimetric-map3d/planimetric-map3d.module';
+import { MipAnimComponent } from './mip-anim/mip-anim.component';
+import { MipAnimModule } from './mip-anim/mip-anim.module';
+import { TreeControlModule } from './tree-control/tree-control.module';
+import { VisualMapChartModule } from './visual-map-chart/visual-map-chart.module';
+import { DatePickerModule } from './date-picker/date-picker.module';
+import { TimePickerModule } from './time-picker/time-picker.module';
+import { CustomBaiduMapModule } from './custom-baidu-map/custom-baidu-map.module';
+import { WidgetService } from 'bbj-widget-base';
+import { ImageComponent } from './image/image.component';
+import { icons } from './iconfont/icon';
+import { IconfontComponent } from './iconfont/iconfont.component';
+import { GeneralTextComponent } from './general-text/general-text.component';
+import { WordartComponent } from './wordart/wordart.component';
+import { AudioComponent } from './audio/audio.component';
+import { BasicLineChartComponent } from './basic-line-chart/basic-line-chart.component';
+import { BarChartThreeDComponent } from './bar-chart-three-d/bar-chart-three-d.component';
+import { ShapeComponent } from './shape/shape.component';
+import { LineBarChartComponent } from './line-bar-chart/line-bar-chart.component';
+import { BackgroundComponent } from './background/background.component';
+import { BasicPieChartComponent } from './basic-pie-chart/basic-pie-chart.component';
+import { BasicBarChartComponent } from './basic-bar-chart/basic-bar-chart.component';
+import { ButtonComponent } from './button/button.component';
+import { SelectComponent } from './select/select.component';
+import { UploadModule } from './upload/upload.module';
+import { TreeControlComponent } from './tree-control/tree-control.component';
+import { CrossTableModule } from './cross-table/cross-table.module';
+import { DatePickerComponent } from './date-picker/date-picker.component';
+import { TableModule } from './table/table.module';
+import { Pie3dChartModule } from './pie3d-chart/pie3d-chart.module';
+import { MultiTitleGaugeModule } from './multi-title-gauge/multi-title-gauge.module';
+import { GaugeProgressModule } from './gauge-progress/gauge.module';
+import { CheckboxComponent } from './checkbox/checkbox.component';
+import { BulletinBoardModule } from './bulletin-board/bulletin-board.module';
+// import {MyBaiduMapModule} from './my-baidu-map/my-baidu-map.module';
+// import {DataMapModule} from './data-map/data-map.module';
+import { ItemSwiperModule } from './item-swiper/item-swiper.module';
+import { TemporaryDataModule } from './temporary-data/temporary-data.module';
+import { LineLightFlowModule } from './line-light-flow/line-light-flow.module';
+import { IframeModule } from './iframe/iframe.module';
+import { VideoGridModule } from './video-grid/video-grid.module';
+import { Scatter3dModule } from './scatter3d/scatter3d.module';
+@NgModule({
+  imports: [
+    FormsModule,
+    ImageModule,
+    BasicLineChartModule,
+    BasicPieChartModule,
+    BasicBarChartModule,
+    LineBarChartModule,
+    BarChartThreeDModule,
+    BubbleChartModule,
+    RadarChartModule,
+    FunnelChartModule,
+    PercentPieChartModule,
+    TreeRingChartModule,
+    GaugeModule,
+    LiquidFillModule,
+    ButtonModule,
+    TimerModule,
+    NumberFlopModule,
+    VoteModule,
+    SelectModule,
+    SearchModule,
+    WeatherModule,
+    RadioModule,
+    CheckboxModule,
+    RateModule,
+    GeneralTextModule,
+    MarqueeModule,
+    WordartModule,
+    IconfontModule,
+    TableModule,
+    AudioModule,
+    ShapeModule,
+    BackgroundModule,
+    ShufflingListModule,
+    BasicPlanimetricMapModule,
+    BreathingBubbleLayerModule,
+    PlanimetricMap2dModule,
+    ParentContainerModule,
+    PlanimetricMap3dModule,
+    MipAnimModule,
+    TreeControlModule,
+    VisualMapChartModule,
+    DatePickerModule,
+    TimePickerModule,
+    CustomBaiduMapModule,
+    UploadModule,
+    CrossTableModule,
+    Pie3dChartModule,
+    MultiTitleGaugeModule,
+    GaugeProgressModule,
+    ItemSwiperModule,
+    BulletinBoardModule,
+    TemporaryDataModule,
+    LineLightFlowModule,
+    IframeModule,
+    VideoGridModule,
+    Scatter3dModule,
+    // DropDownDetailListModule,
+    // DynamicListModule,
+    // MyBaiduMapModule,
+    // DataMapModule
+  ],
+  exports: [],
+  declarations: [],
+})
+export class ScreenWidgetModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(ButtonComponent, { size: { width: 60, height: 30 } });
+    widgetService.register(SelectComponent, {
+      size: { width: 200, height: 36 },
+      option: {
+        borderColor: '#3285ff',
+        background: 'rgba(50,133,255,0.2)',
+        dropdownBackgroundColor: '#3285ff',
+        selectDropDownColor: '#fff',
+        selectHoverColor: '#fff',
+        selectHoverBackgroundColor: '#3285ff',
+        font: { color: '#ffffff' },
+        dropdownBg: 'rgba(50,133,255,0.2)',
+        dropdownBorderColor: '#3285ff',
+      },
+    });
+    for (let i = 1; i <= 82; i++) {
+      widgetService.register(ImageComponent, {
+        option: { image: `assets/img/screen/picture${i}.png` },
+      });
+    }
+    icons.forEach((icon) => {
+      widgetService.register(IconfontComponent, {
+        option: { icon },
+      });
+    });
+    widgetService.register(
+      GeneralTextComponent,
+      {
+        className: 'big-title title',
+        title: '大标题',
+        option: {
+          title: '大标题',
+          font: { family: '', color: '#ffffff', weight: 'normal', size: 36, space: 0, lineHeight: 50 },
+        },
+      },
+      {
+        className: 'normal-title title',
+        title: '标题',
+        option: {
+          title: '标题',
+          font: { family: '', color: '#ffffff', weight: 'normal', size: 32, space: 0, lineHeight: 45 },
+        },
+      },
+      {
+        className: 'subtitle title',
+        title: '副标题',
+        option: {
+          title: '副标题',
+          font: { family: '', color: '#ffffff', weight: 'normal', size: 24, space: 0, lineHeight: 33 },
+        },
+      },
+      {
+        className: 'small-title title',
+        title: '小标题',
+        option: {
+          title: '小标题',
+          font: { family: '', color: '#ffffff', weight: 'normal', size: 16, space: 0, lineHeight: 22 },
+        },
+      },
+      {
+        className: 'content title',
+        title: '正文内容',
+        option: {
+          title: '正文内容',
+          font: { family: '', color: '#ffffff', weight: 'normal', size: 13, space: 0, lineHeight: 18 },
+        },
+      },
+    );
+    widgetService.register(
+      WordartComponent,
+      {
+        className: 'wordart1 wordart',
+        title: '可视化数字大屏',
+        option: {
+          title: '可视化数字大屏',
+          font: { family: 'cursive', color: '#3285FF', weight: 'normal', size: 24, space: 0, lineHeight: '' },
+        },
+      },
+      {
+        className: 'wordart2 wordart',
+        title: '可视化数字大屏',
+        option: {
+          title: '可视化数字大屏',
+          font: { family: 'sans-serif', color: '#7ee5ce', weight: 'bold', size: 24, space: 0, lineHeight: '' },
+        },
+      },
+      {
+        className: 'wordart3 wordart',
+        title: '可视化数字大屏',
+        option: {
+          title: '可视化数字大屏',
+          backgroundImage: '-webkit-linear-gradient(-90deg, #09FFDD 14%, #0055FF 100%)',
+          font: { family: 'sans-serif', color: '#7ee5ce', weight: 'bold', size: 24, space: 0, lineHeight: '' },
+        },
+      },
+      {
+        className: 'wordart4 wordart',
+        title: '可视化数字大屏',
+        option: {
+          title: '可视化数字大屏',
+          backgroundImage: '-webkit-linear-gradient(-90deg, #F76B1C 14%, #FAD961 100%)',
+          font: { family: 'sans-serif', color: '#7ee5ce', weight: 'bold', size: 24, space: 0, lineHeight: '' },
+        },
+      },
+      {
+        className: 'wordart5 wordart',
+        title: '可视化数字大屏',
+        option: {
+          title: '可视化数字大屏',
+          backgroundImage: '-webkit-linear-gradient(-90deg, #B4EC51 14%, #429321 100%)',
+          font: { family: 'sans-serif', color: '#7ee5ce', weight: 'bold', size: 24, space: 0, lineHeight: '' },
+        },
+      },
+      {
+        className: 'wordart6 wordart',
+        title: '可视化数字大屏',
+        option: {
+          title: '可视化数字大屏',
+          backgroundImage: '-webkit-linear-gradient(-90deg, #3023AE 14%, #FE55FF 100%)',
+          font: { family: 'sans-serif', color: '#7ee5ce', weight: 'bold', size: 24, space: 0, lineHeight: '' },
+        },
+      },
+    );
+    widgetService.register(
+      AudioComponent,
+      {
+        title: '视频demo',
+        option: {
+          type: 'video',
+          src: 'https://xiche.oss-cn-beijing.aliyuncs.com/video/20180417154421.mp4',
+        },
+      },
+      {
+        title: '音频demo',
+        option: {
+          type: 'audio',
+          src: 'https://xiche.oss-cn-beijing.aliyuncs.com/video/20180417154421.mp4',
+        },
+      },
+    );
+    widgetService.register(
+      BasicLineChartComponent,
+      {
+        option: {
+          type: 'basic',
+          font: { color: '#FFFFFF' },
+        },
+        image: 'assets/img/screen/basic-line-chart.png',
+      },
+      {
+        title: '区域折线图',
+        image: 'assets/img/screen/area-line-chart.png',
+        option: {
+          type: 'area',
+          font: { color: '#FFFFFF' },
+        },
+      },
+      {
+        title: '基本曲线图',
+        image: 'assets/img/screen/smooth-line-chart.png',
+        group: 'smoothLineChart',
+        option: {
+          type: 'smooth',
+          font: { color: '#FFFFFF' },
+        },
+      },
+      {
+        title: '区域曲线图',
+        image: 'assets/img/screen/smooth-area-line-chart.png',
+        group: 'smoothLineChart',
+        option: {
+          type: 'smooth-area',
+          font: { color: '#FFFFFF' },
+        },
+      },
+      {
+        title: '阶梯线图',
+        group: 'stepLineChart',
+        option: {
+          type: 'step',
+          step: 'end',
+          font: { color: '#FFFFFF' },
+        },
+        image: 'assets/img/screen/basic-line-chart.png',
+      },
+    );
+    widgetService.register(
+      BasicPieChartComponent,
+      {
+        option: {
+          type: 'basic',
+        },
+      },
+      {
+        title: '环形饼图',
+        image: 'assets/img/screen/pie-o.png',
+        option: {
+          type: 'ring',
+        },
+      },
+      {
+        title: '玫瑰饼图',
+        image: 'assets/img/screen/rosePie.png',
+        option: {
+          type: 'rose',
+        },
+      },
+      {
+        title: '玫瑰环形饼图',
+        image: 'assets/img/screen/roseRingPie.png',
+        option: {
+          type: 'roseRing',
+        },
+      },
+    );
+    widgetService.register(
+      BasicBarChartComponent,
+      {
+        option: {
+          font: { color: '#FFFFFF' },
+        },
+      },
+      {
+        title: '堆叠柱图',
+        image: 'assets/img/screen/doubleBar.png',
+        option: {
+          type: 'double',
+          font: { color: '#FFFFFF' },
+        },
+      },
+      {
+        title: '横向柱图',
+        image: 'assets/img/screen/horiBar.png',
+        option: {
+          type: 'hori',
+          font: { color: '#FFFFFF' },
+        },
+      },
+      {
+        title: '横向堆叠柱图',
+        image: 'assets/img/screen/doubleHoriBar.png',
+        option: {
+          type: 'horiD',
+          font: { color: '#FFFFFF' },
+        },
+      },
+      {
+        title: '双向柱图',
+        image: 'assets/img/screen/doubleColorBar.png',
+        option: {
+          type: 'dcolor',
+          font: { color: '#FFFFFF' },
+        },
+      },
+    );
+    widgetService.register(
+      BarChartThreeDComponent,
+      {
+        title: '3D柱图',
+        image: 'assets/img/screen/3Dbar.png',
+        option: {
+          type: '3D',
+        },
+      },
+      {
+        title: '3D堆叠柱图',
+        image: 'assets/img/screen/3DdoubleBar.png',
+        option: {
+          type: '3Ddouble',
+        },
+      },
+      {
+        title: '3D横向柱图',
+        image: 'assets/img/screen/3DhoriBar.png',
+        option: {
+          type: 'hori',
+        },
+      },
+      {
+        title: '3D堆叠横向柱图',
+        image: 'assets/img/screen/3DdoubleHoriBar.png',
+        option: {
+          type: 'horiD',
+        },
+      },
+    );
+    widgetService.register(TreeControlComponent, {
+      option: {
+        font: {
+          color: '#ffffff',
+        },
+      },
+    });
+    widgetService.register(
+      ShapeComponent,
+      {
+        title: '线条',
+        image: 'assets/img/screen/shape01.png',
+        option: {
+          type: 'line',
+        },
+      },
+      {
+        title: '三角形',
+        image: 'assets/img/screen/shape06.png',
+        option: {
+          type: 'triangle',
+        },
+      },
+      {
+        title: '矩形',
+        image: 'assets/img/screen/shape03.png',
+        option: {
+          type: 'rect',
+        },
+      },
+      {
+        title: '圆角矩形',
+        image: 'assets/img/screen/shape04.png',
+        option: {
+          type: 'rect',
+          fillet: 16,
+        },
+      },
+      {
+        title: '平行四边形',
+        image: 'assets/img/screen/shape09.png',
+        option: {
+          type: 'parallelogram',
+          deviation: 30,
+        },
+      },
+      {
+        title: '梯形',
+        image: 'assets/img/screen/shape10.png',
+        option: {
+          type: 'trapezoid',
+          upper: 50,
+          bottom: 100,
+        },
+      },
+      {
+        title: '五边形',
+        image: 'assets/img/screen/shape08.png',
+        option: {
+          type: 'polygonplus',
+          side: 5,
+        },
+      },
+      {
+        title: '五角星',
+        image: 'assets/img/screen/shape07.png',
+        option: {
+          type: 'polyhedrosis',
+          side: 5,
+        },
+      },
+      {
+        title: '圆形',
+        image: 'assets/img/screen/shape05.png',
+        option: {
+          type: 'circle',
+        },
+      },
+      {
+        title: '箭头',
+        image: 'assets/img/screen/shape11.png',
+        option: {
+          type: 'polygon',
+          data: [
+            {
+              x: 20,
+              y: 80,
+            },
+            {
+              x: 100,
+              y: 80,
+            },
+            {
+              x: 100,
+              y: 40,
+            },
+            {
+              x: 180,
+              y: 100,
+            },
+            {
+              x: 100,
+              y: 160,
+            },
+            {
+              x: 100,
+              y: 120,
+            },
+            {
+              x: 20,
+              y: 120,
+            },
+          ],
+        },
+      },
+    );
+    for (let i = 1; i <= 75; i++) {
+      widgetService.register(BackgroundComponent, {
+        option: {
+          image: `assets/img/screen/moduleBg${i}.png`,
+          type: 'background',
+        },
+      });
+    }
+    for (let i = 1; i <= 8; i++) {
+      widgetService.register(BackgroundComponent, {
+        option: {
+          image: `assets/img/screen/border${i}.png`,
+          type: 'background',
+        },
+      });
+    }
+    for (let i = 1; i <= 8; i++) {
+      widgetService.register(BackgroundComponent, {
+        option: {
+          image: `assets/img/screen/bg${i}.png`,
+          type: 'border',
+        },
+      });
+    }
+    ['assets/img/screen/mipAnim1.gif', 'assets/img/screen/mipAnim2.gif'].forEach((image) => {
+      widgetService.register(MipAnimComponent, {
+        option: { image },
+      });
+    });
+    widgetService.register(DatePickerComponent, {
+      option: {
+        borderColor: '#3285ff',
+        font: { color: '#3285ff' },
+        background: 'rgba(50,133,255,0.2)',
+      },
+    });
+    widgetService.register(CheckboxComponent, {
+      option: { font: { color: '#ffffff' } },
+    });
+  }
+}

package/src/lib/search/search.component.html

@@ -0,0 +1,30 @@
+<nz-input-group
+  nzSearch
+  [nzAddOnAfter]="hideBtn ? null : suffixIconButton"
+  class="search-group"
+  
+>
+  <input
+    type="text"
+    nz-input
+    [ngStyle]="btnStyle"
+    [(ngModel)]="value"
+    [placeholder]="placeholder | nzSafeNull"
+    (keypress)="onKeypress($event)"
+    [style.height.px]="height || 26"
+  />
+</nz-input-group>
+<ng-template #suffixIconButton>
+  <ng-container [ngSwitch]="btnStyleOption">
+    <ng-container  *ngSwitchCase="'iconSingle'">
+      <div class="input-icon">
+        <i [ngStyle]="btnIconStyle" nz-icon [nzIconfont]="'iconsousuo1'"  (click)="searchChange(value)" ></i>
+      </div>
+    </ng-container>
+    <ng-container  *ngSwitchDefault>
+      <button nz-button nzType="primary" [ngStyle]="btnStyle" (click)="searchChange(value)" nzSearch>
+        <i nz-icon nzType="search"></i>
+      </button>
+    </ng-container>
+  </ng-container>
+</ng-template>

package/src/lib/search/search.component.less

@@ -0,0 +1,30 @@
+:host ::ng-deep {
+
+  .ant-input:focus,
+  .ant-input-focused {
+    box-shadow: none !important;
+  }
+
+  .search-group .ant-input-group-addon {
+    background-color: unset;
+    height: 100%;
+  }
+
+  .ant-input-group,
+  .ant-input-group .ant-input,
+  .ant-btn.ant-input-search-button {
+    height: 100%;
+  }
+
+  .input-icon {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    cursor: pointer;
+    font-size: 16px;
+    color: #fff;
+    position: absolute;
+    right: 10px;
+    top: 0;
+  }
+}

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

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