bbj-screen-widget 2.4.61 → 2.4.62

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

@@ -0,0 +1,675 @@
+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 { 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 { WidgetService } from 'bbj-widget-base';
+import { BasicBarChartComponent } from './basic-bar-chart/basic-bar-chart.component';
+import { ButtonComponent } from './button/button.component';
+import { ImageComponent } from './image/image.component';
+import { BasicLineChartComponent } from './basic-line-chart/basic-line-chart.component';
+import { BasicPieChartComponent } from './basic-pie-chart/basic-pie-chart.component';
+import { TreeRingChartComponent } from './tree-ring-chart/tree-ring-chart.component';
+import { LineBarChartComponent } from './line-bar-chart/line-bar-chart.component';
+import { BarChartThreeDComponent } from './bar-chart-three-d/bar-chart-three-d.component';
+import { BubbleChartComponent } from './bubble-chart/bubble-chart.component';
+import { RadarChartComponent } from './radar-chart/radar-chart.component';
+import { FunnelChartComponent } from './funnel-chart/funnel-chart.component';
+import { GaugeComponent } from './gauge/gauge.component';
+import { TimerComponent } from './timer/timer.component';
+import { NumberFlopComponent } from './number-flop/number-flop.component';
+import { VoteComponent } from './vote/vote.component';
+import { SelectComponent } from './select/select.component';
+import { SearchComponent } from './search/search.component';
+import { WeatherComponent } from './weather/weather.component';
+import { RadioComponent } from './radio/radio.component';
+import { CheckboxComponent } from './checkbox/checkbox.component';
+import { RateComponent } from './rate/rate.component';
+import { GeneralTextComponent } from './general-text/general-text.component';
+import { IconfontComponent } from './iconfont/iconfont.component';
+import { WordartComponent } from './wordart/wordart.component';
+import { MarqueeComponent } from './marquee/marquee.component';
+import { AudioComponent } from './audio/audio.component';
+import { PercentPieChartComponent } from './percent-pie-chart/percent-pie-chart.component';
+import { LiquidFillComponent } from './liquid-fill/liquid-fill.component';
+import { ShapeComponent } from './shape/shape.component';
+import { BackgroundComponent } from './background/background.component';
+import { AnnouncementComponent } from './announcement/announcement.component';
+import { AnnouncementModule } from './announcement/announcement.module';
+import { TableModule } from './table/table.module';
+import { TableComponent } from './table/table.component';
+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 { BasicPlanimetricMapComponent } from './basic-planimetric-map/basic-planimetric-map.component';
+import { PlanimetricMap3dModule } from './planimetric-map3d/planimetric-map3d.module';
+import { PlanimetricMap3dComponent } from './planimetric-map3d/planimetric-map3d.component';
+import { CalendarModule } from './calendar/calendar.module';
+import { CalendarComponent } from './calendar/calendar.component';
+import { VisualMapChartModule } from './visual-map-chart/visual-map-chart.module';
+import { TimePickerModule } from './time-picker/time-picker.module';
+import { DatePickerModule } from './date-picker/date-picker.module';
+import { TreeControlModule } from './tree-control/tree-control.module';
+import { CustomBaiduMapModule } from './custom-baidu-map/custom-baidu-map.module';
+import { icons } from './iconfont/icon';
+import { TreeControlComponent } from './tree-control/tree-control.component';
+import { TabsModule } from './tabs/tabs.module';
+import { MipAnimComponent } from './mip-anim/mip-anim.component';
+import { MipAnimModule } from './mip-anim/mip-anim.module';
+import { UploadModule } from './upload/upload.module';
+import { CrossTableModule } from './cross-table/cross-table.module';
+import { GanttModule } from './gantt/gantt.module';
+import { Pie3dChartModule } from './pie3d-chart/pie3d-chart.module';
+
+import { LineLightFlowModule } from './line-light-flow/line-light-flow.module';
+import { TemporaryDataModule } from './temporary-data/temporary-data.module';
+
+@NgModule({
+  imports: [
+    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,
+    AudioModule,
+    ShapeModule,
+    BackgroundModule,
+    // BasicSmoothLineChartModule,
+    AnnouncementModule,
+    TableModule,
+    BasicPlanimetricMapModule,
+    BreathingBubbleLayerModule,
+    PlanimetricMap2dModule,
+    ParentContainerModule,
+    PlanimetricMap3dModule,
+    TreeControlModule,
+    VisualMapChartModule,
+    TimePickerModule,
+    DatePickerModule,
+    CustomBaiduMapModule,
+    TabsModule,
+    MipAnimModule,
+    CalendarModule,
+    UploadModule,
+    CrossTableModule,
+    GanttModule,
+    Pie3dChartModule,
+    LineLightFlowModule,
+    TemporaryDataModule,
+  ],
+  exports: [],
+  declarations: [],
+})
+export class WorkbenchWidgetModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(ButtonComponent, { option: {}, size: { width: 3, height: 3 } });
+    widgetService.register(CalendarComponent, { option: {}, size: { width: 16, height: 12 } });
+    for (let i = 1; i <= 82; i++) {
+      widgetService.register(ImageComponent, {
+        option: { image: `assets/img/screen/picture${i}.png`, hideHead: true },
+        size: { width: 6, height: 6 },
+      });
+    }
+    icons.forEach((icon) => {
+      widgetService.register(IconfontComponent, {
+        option: { type: 'iconfont', icon, hideHead: true },
+        size: { width: 4, height: 4 },
+      });
+    });
+    widgetService.register(TimerComponent, {
+      option: { font: { color: '#595F7A' } },
+      size: { width: 10, height: 4 },
+    });
+    widgetService.register(NumberFlopComponent, { size: { width: 12, height: 6 } });
+    widgetService.register(VoteComponent, { size: { width: 6, height: 6 } });
+    widgetService.register(SelectComponent, { size: { width: 6, height: 4 } });
+    widgetService.register(SearchComponent, { size: { width: 6, height: 3 } });
+    widgetService.register(WeatherComponent, {
+      option: { tempFont: { color: '#595F7A' } },
+      size: { width: 10, height: 6 },
+    });
+    widgetService.register(RadioComponent, {
+      option: { font: { color: '#595F7A' } },
+      size: { width: 6, height: 4 },
+    });
+    widgetService.register(RateComponent, {
+      option: { font: { color: '#595F7A' } },
+      size: { width: 6, height: 6 },
+    });
+    widgetService.register(
+      GeneralTextComponent,
+      {
+        className: 'big-title title',
+        title: '大标题',
+        option: {
+          title: '大标题',
+          font: { family: '', color: '#333333', weight: 'normal', size: 36, space: 0, lineHeight: 50 },
+        },
+        size: { width: 5, height: 3 },
+      },
+      {
+        className: 'normal-title title',
+        title: '标题',
+        option: {
+          title: '标题',
+          font: { family: '', color: '#333333', weight: 'normal', size: 32, space: 0, lineHeight: 45 },
+        },
+        size: { width: 5, height: 3 },
+      },
+      {
+        className: 'subtitle title',
+        title: '副标题',
+        option: {
+          title: '副标题',
+          font: { family: '', color: '#333333', weight: 'normal', size: 24, space: 0, lineHeight: 33 },
+        },
+        size: { width: 5, height: 3 },
+      },
+      {
+        className: 'small-title title',
+        title: '小标题',
+        option: {
+          title: '小标题',
+          font: { family: '', color: '#333333', weight: 'normal', size: 16, space: 0, lineHeight: 22 },
+        },
+        size: { width: 5, height: 3 },
+      },
+      {
+        className: 'content title',
+        title: '正文内容',
+        option: {
+          title: '正文内容',
+          font: { family: '', color: '#333333', weight: 'normal', size: 13, space: 0, lineHeight: 18 },
+        },
+        size: { width: 5, height: 3 },
+      },
+    );
+    widgetService.register(
+      WordartComponent,
+      {
+        className: 'wordart1 wordart',
+        title: '可视化数字大屏',
+        option: {
+          title: '可视化数字大屏',
+          font: { family: 'cursive', color: '#3285FF', weight: 'normal', size: 24, space: 0, lineHeight: '' },
+        },
+        size: { width: 7, height: 3 },
+      },
+      {
+        className: 'wordart2 wordart',
+        title: '可视化数字大屏',
+        option: {
+          title: '可视化数字大屏',
+          font: { family: 'sans-serif', color: '#7ee5ce', weight: 'bold', size: 24, space: 0, lineHeight: '' },
+        },
+        size: { width: 7, height: 3 },
+      },
+      {
+        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: '' },
+        },
+        size: { width: 7, height: 3 },
+      },
+      {
+        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: '' },
+        },
+        size: { width: 7, height: 3 },
+      },
+      {
+        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: '' },
+        },
+        size: { width: 7, height: 3 },
+      },
+      {
+        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: '' },
+        },
+        size: { width: 7, height: 3 },
+      },
+    );
+    widgetService.register(MarqueeComponent, {
+      option: {
+        font: { color: '#595F7A' },
+      },
+      size: { width: 7, height: 3 },
+    });
+    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',
+        },
+        image: 'assets/img/screen/basic-line-chart.png',
+      },
+      {
+        title: '区域折线图',
+        image: 'assets/img/screen/area-line-chart.png',
+        option: {
+          type: 'area',
+        },
+      },
+      {
+        title: '基本曲线图',
+        image: 'assets/img/screen/smooth-line-chart.png',
+        group: 'smoothLineChart',
+        option: {
+          type: 'smooth',
+        },
+      },
+      {
+        title: '区域曲线图',
+        image: 'assets/img/screen/smooth-area-line-chart.png',
+        group: 'smoothLineChart',
+        option: {
+          type: 'smooth-area',
+        },
+      },
+      {
+        title: '阶梯线图',
+        group: 'stepLineChart',
+        option: {
+          type: 'step',
+          step: 'end',
+        },
+        image: 'assets/img/screen/basic-line-chart.png',
+      },
+    );
+    widgetService.register(
+      BasicPieChartComponent,
+      {
+        option: {
+          type: 'basic',
+          font: { color: '#595F7A' },
+        },
+      },
+      {
+        title: '环形饼图',
+        image: 'assets/img/screen/pie-o.png',
+        option: {
+          type: 'ring',
+          font: { color: '#595F7A' },
+        },
+      },
+      {
+        title: '玫瑰饼图',
+        image: 'assets/img/screen/rosePie.png',
+        option: {
+          type: 'rose',
+          font: { color: '#595F7A' },
+        },
+      },
+      {
+        title: '玫瑰环形饼图',
+        image: 'assets/img/screen/roseRingPie.png',
+        option: {
+          type: 'roseRing',
+          font: { color: '#595F7A' },
+        },
+      },
+    );
+    widgetService.register(PercentPieChartComponent, {
+      option: {
+        font: { color: '#595F7A' },
+      },
+    });
+    widgetService.register(TreeRingChartComponent, {
+      option: {
+        font: { color: '#595F7A' },
+      },
+    });
+    widgetService.register(
+      BasicBarChartComponent,
+      {},
+      {
+        title: '堆叠柱图',
+        image: 'assets/img/screen/doubleBar.png',
+        option: {
+          type: 'double',
+        },
+      },
+      {
+        title: '横向柱图',
+        image: 'assets/img/screen/horiBar.png',
+        option: {
+          type: 'hori',
+        },
+      },
+      {
+        title: '横向堆叠柱图',
+        image: 'assets/img/screen/doubleHoriBar.png',
+        option: {
+          type: 'horiD',
+        },
+      },
+      {
+        title: '双向柱图',
+        image: 'assets/img/screen/doubleColorBar.png',
+        option: {
+          type: 'dcolor',
+        },
+      },
+    );
+    widgetService.register(LineBarChartComponent, {
+      title: '折线柱图',
+      image: 'assets/img/screen/lineBar.png',
+      option: {
+        type: 'line',
+        font: { color: '#595F7A' },
+      },
+    });
+    widgetService.register(
+      BarChartThreeDComponent,
+      {
+        title: '3D柱图',
+        image: 'assets/img/screen/3Dbar.png',
+        option: {
+          type: '3D',
+          font: { color: '#595F7A' },
+        },
+      },
+      {
+        title: '3D堆叠柱图',
+        image: 'assets/img/screen/3DdoubleBar.png',
+        option: {
+          type: '3Ddouble',
+          font: { color: '#595F7A' },
+        },
+      },
+      {
+        title: '3D横向柱图',
+        image: 'assets/img/screen/3DhoriBar.png',
+        option: {
+          type: 'hori',
+          font: { color: '#595F7A' },
+        },
+      },
+      {
+        title: '3D堆叠横向柱图',
+        image: 'assets/img/screen/3DdoubleHoriBar.png',
+        option: {
+          type: 'horiD',
+          font: { color: '#595F7A' },
+        },
+      },
+    );
+    widgetService.register(BubbleChartComponent, {
+      title: '散点图',
+      image: 'assets/img/screen/bubble.png',
+      option: {
+        type: 'bubble',
+        font: { color: '#595F7A' },
+      },
+    });
+    widgetService.register(RadarChartComponent, {
+      title: '雷达图',
+      image: 'assets/img/screen/radar.png',
+      option: {
+        type: 'radar',
+        font: { color: '#595F7A' },
+      },
+    });
+    widgetService.register(FunnelChartComponent, {
+      title: '三角图',
+      image: 'assets/img/screen/funnel.png',
+      option: {
+        type: 'funnel',
+        font: { color: '#595F7A' },
+      },
+    });
+    widgetService.register(GaugeComponent, {
+      option: {
+        font: { color: '#595F7A' },
+      },
+    });
+    widgetService.register(LiquidFillComponent, {
+      option: {
+        font: { color: '#595F7A' },
+      },
+    });
+    widgetService.register(
+      ShapeComponent,
+      {
+        title: '线条',
+        image: 'assets/img/screen/shape01.png',
+        option: {
+          type: 'line',
+        },
+        size: { width: 6, height: 7 },
+      },
+      {
+        title: '三角形',
+        image: 'assets/img/screen/shape06.png',
+        option: {
+          type: 'triangle',
+        },
+        size: { width: 6, height: 7 },
+      },
+      {
+        title: '矩形',
+        image: 'assets/img/screen/shape03.png',
+        option: {
+          type: 'rect',
+        },
+        size: { width: 6, height: 7 },
+      },
+      {
+        title: '圆角矩形',
+        image: 'assets/img/screen/shape04.png',
+        option: {
+          type: 'rect',
+          fillet: 16,
+        },
+        size: { width: 6, height: 7 },
+      },
+      {
+        title: '平行四边形',
+        image: 'assets/img/screen/shape09.png',
+        option: {
+          type: 'parallelogram',
+          bottom: 110,
+          deviation: 30,
+        },
+        size: { width: 6, height: 7 },
+      },
+      {
+        title: '梯形',
+        image: 'assets/img/screen/shape10.png',
+        option: {
+          type: 'trapezoid',
+          upper: 70,
+          bottom: 100,
+          deviation: 0,
+        },
+        size: { width: 6, height: 7 },
+      },
+      {
+        title: '五边形',
+        image: 'assets/img/screen/shape08.png',
+        option: {
+          type: 'polygonplus',
+          side: 5,
+        },
+        size: { width: 6, height: 7 },
+      },
+      {
+        title: '五角星',
+        image: 'assets/img/screen/shape07.png',
+        option: {
+          type: 'polyhedrosis',
+          side: 5,
+        },
+        size: { width: 6, height: 7 },
+      },
+      {
+        title: '圆形',
+        image: 'assets/img/screen/shape05.png',
+        option: {
+          type: 'circle',
+        },
+        size: { width: 6, height: 7 },
+      },
+      {
+        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',
+        },
+        size: { width: 10, height: 3 },
+      });
+    }
+    for (let i = 1; i <= 8; i++) {
+      widgetService.register(BackgroundComponent, {
+        option: {
+          image: `assets/img/screen/border${i}.png`,
+          type: 'background',
+        },
+        size: { width: 10, height: 10 },
+      });
+    }
+    for (let i = 1; i <= 8; i++) {
+      widgetService.register(BackgroundComponent, {
+        option: {
+          image: `assets/img/screen/bg${i}.png`,
+          type: 'border',
+        },
+        size: { width: 10, height: 10 },
+      });
+    }
+    widgetService.register(AnnouncementComponent, { size: { width: 14, height: 6 } });
+    widgetService.register(TableComponent, {
+      option: {
+        image: 'assets/img/screen/table.png',
+      },
+    });
+    widgetService.register(BasicPlanimetricMapComponent, { size: { width: 12, height: 12 } });
+    widgetService.register(PlanimetricMap3dComponent, { size: { width: 12, height: 12 } });
+    ['assets/img/screen/mipAnim1.gif', 'assets/img/screen/mipAnim2.gif'].forEach((image) => {
+      widgetService.register(MipAnimComponent, {
+        option: { image },
+        size: { height: 6, width: 6 },
+      });
+    });
+  }
+}