bbj-screen-widget 2.4.62 → 2.4.63

package/src/lib/item-swiper/item-swiper.component.ts

@@ -1,277 +0,0 @@
-import { Component, ElementRef, OnInit, EventEmitter, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
-import { Property, Widget, DataOutput, Data } from 'bbj-widget-base';
-
-// install Swiper components
-// SwiperCore.use([
-//   Navigation,
-//   Pagination,
-//   Scrollbar,
-//   A11y,
-//   Virtual,
-//   Zoom,
-//   Autoplay,
-//   Thumbs,
-//   Controller
-// ]);
-@Component({
-  selector: 'sc-item-swiper',
-  templateUrl: './item-swiper.component.html',
-  styleUrls: ['./item-swiper.component.less'],
-})
-@Widget('轮播', { group: 'component', image: 'assets/img/screen/item-swiper.png', icon: 'iconmokuai' })
-export class ItemSwiperComponent implements OnInit, OnChanges {
-  @Property('标题字体', { ui: { widget: 'myFont' } })
-  font: any = { family: 'Microsoft YaHei', color: '#ffffff', weight: 'normal', size: 20, space: 0, lineHeight: '66' };
-
-  @Property('数值字体', { ui: { widget: 'myFont' } })
-  numfont: any = {
-    family: 'Microsoft YaHei',
-    color: '#ffffff',
-    weight: 'normal',
-    size: 21,
-    space: 0,
-    lineHeight: '25',
-  };
-  @Property('分组字体', { ui: { widget: 'myFont' } })
-  titlefont: any = {
-    family: 'Microsoft YaHei',
-    color: '#ffffff',
-    weight: 'normal',
-    size: 21,
-    space: 0,
-    lineHeight: '25',
-  };
-  @Property('可视个数', { type: 'number' })
-  slidesPerView = 3;
-  @Property('选项高度')
-  selectHeight: number = 180;
-  @Property('分组高度', { type: 'number' })
-  gourpHeight = 0;
-  @Property('值高度', { type: 'number' })
-  valueBottom = 0;
-  @Property('间距', { type: 'number' })
-  spaceBetween = 10;
-
-  @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;
-  @Property('图片高度')
-  height: number = 180;
-  @Property('图片宽度')
-  width: number = 180;
-  @Property('是否分组')
-  isgroup: boolean = false;
-  @Property('图片分类', {
-    type: 'array',
-    title: '图片分类',
-    maxItems: 10,
-    items: {
-      type: 'object',
-      properties: {
-        imageUrl: {
-          type: 'string',
-          title: '图片',
-          ui: {
-            widget: 'myPicture',
-          },
-        },
-      },
-      required: [],
-    },
-    ui: { visibleIf: { isgroup: [false] }, grid: { arraySpan: 24 }, spanControl: 24 },
-  })
-  images: any = [
-    { imageUrl: 'assets/img/screen/picture9.png' },
-    { imageUrl: 'assets/img/screen/picture9.png' },
-    { imageUrl: 'assets/img/screen/picture9.png' },
-    { imageUrl: 'assets/img/screen/picture9.png' },
-    { imageUrl: 'assets/img/screen/picture9.png' },
-    { imageUrl: 'assets/img/screen/picture9.png' },
-  ];
-  @Property('新增分组', {
-    type: 'array',
-    title: '新增分组',
-    maxItems: 10,
-    items: {
-      type: 'object',
-      properties: {
-        groupName: {
-          type: 'string',
-          title: '组名',
-        },
-        imageUrl: {
-          type: 'string',
-          title: '图片',
-          ui: {
-            widget: 'myPicture',
-          },
-        },
-      },
-      required: [],
-    },
-    ui: { visibleIf: { isgroup: [true] }, grid: { arraySpan: 24 }, spanControl: 24 },
-  })
-  groups = [
-    { groupName: '1', imageUrl: 'assets/img/screen/picture9.png' },
-    { groupName: '2', imageUrl: 'assets/img/screen/picture9.png' },
-    { groupName: '3', imageUrl: 'assets/img/screen/picture9.png' },
-    { groupName: '4', imageUrl: 'assets/img/screen/picture9.png' },
-    { groupName: '5', imageUrl: 'assets/img/screen/picture9.png' },
-    { groupName: '6', imageUrl: 'assets/img/screen/picture9.png' },
-  ];
-  groupfont: any = {};
-  @Data({
-    properties: {
-      label: { title: '标题', type: 'string' },
-      value: { title: '值', type: 'string' },
-      group: { title: '分组', type: 'string' },
-    },
-  })
-  _data: any[] = [
-    { label: '测试1', value: '1000', group: '1' },
-    { label: '测试2', value: '1000', group: '2' },
-    { label: '测试3', value: '1000', group: '3' },
-    { label: '测试4', value: '1000', group: '4' },
-    { label: '测试5', value: '1000', group: '5' },
-    { label: '测试6', value: '1000', group: '6' },
-  ];
-  @DataOutput('值')
-  valueChange = new EventEmitter<any>();
-
-  navigationBtnConfig = {
-    prevEl: '.swiper-navigation-prev',
-    nextEl: '.swiper-navigation-next',
-  };
-
-  data: any = [];
-  items: any = {};
-  showNavigation = true;
-  constructor(private ele: ElementRef) {}
-
-  ngOnInit(): void {
-    if (this.isgroup) {
-      this.groupfont = {
-        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',
-        top: this.gourpHeight + 'px',
-      };
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    this.items = {};
-    this.data = [];
-    if (changes.numfont) {
-      this.numfont = {
-        fontSize: this.numfont.size + 'px',
-        fontFamily: this.numfont.family,
-        color: this.numfont.color,
-        fontWeight: this.numfont.weight,
-        letterSpacing: this.numfont.space + 'px',
-        lineHeight: this.numfont.lineHeight + 'px',
-      };
-    }
-    if (changes.font) {
-      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: this.font.lineHeight + 'px',
-      };
-    }
-    if (this._data && this._data[0] && !this.isgroup) {
-      this._data.forEach((t, i) => {
-        let img = '';
-        if (this.images) {
-          img = this.images[i]?.imageUrl || this.images[this.images.length - 1].imageUrl;
-          t.imgstyle = {
-            height: (this.height || 30) + 'px',
-            width: (this.width || 30) + 'px',
-          };
-        }
-        t.img = img;
-        this.data.push(t);
-      });
-    }
-    if (this._data && this._data[0] && this.isgroup) {
-      this._data.forEach((t: any) => {
-        let groupName = t.group || ' ';
-        if (!this.items[groupName]) {
-          this.items[groupName] = {};
-        }
-        let a = this.items[groupName];
-        if (!a.field) {
-          a.field = [];
-        }
-        let arr = a.field;
-        arr.push({ label: t.label, value: t.value });
-      });
-      if (this.groups && this.groups.length > 0) {
-        this.groups.forEach((e) => {
-          let a = this.items[e.groupName];
-          if (!a) {
-            return;
-          }
-          a.img = e.imageUrl || '';
-          a.imgstyle = {
-            height: (this.height || 30) + 'px',
-            width: (this.width || 30) + 'px',
-          };
-        });
-      }
-      Object.keys(this.items).forEach((key) => {
-        let map = this.items[key];
-        map['group'] = key;
-        this.data.push(map);
-      });
-    }
-    if (!this.data || !this.data[0]) {
-      this.showNavigation = false;
-    } else {
-      this.showNavigation = this.navigation;
-    }
-    console.log(this.data);
-  }
-  onSwiper(swiper) {}
-  onSlideChange() {}
-}

package/src/lib/item-swiper/item-swiper.module.ts

@@ -1,17 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ItemSwiperComponent } from './item-swiper.component';
-import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
-import { NzSpaceModule } from 'ng-zorro-antd/space';
-import 'swiper/swiper-element-bundle.js';
-
-@NgModule({
-  declarations: [ItemSwiperComponent],
-  imports: [CommonModule, WidgetBaseModule, NzSpaceModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-})
-export class ItemSwiperModule {
-  constructor(widgetService: WidgetService) {
-    widgetService.register(ItemSwiperComponent);
-  }
-}

package/src/lib/line-bar-chart/line-bar-chart.component.html

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

package/src/lib/line-bar-chart/line-bar-chart.component.less

@@ -1,3 +0,0 @@
-.demo-chart {
-    height: 100%;
-  }

package/src/lib/line-bar-chart/line-bar-chart.component.spec.ts

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

package/src/lib/line-bar-chart/line-bar-chart.component.ts

@@ -1,346 +0,0 @@
-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';
-import { BasicBarChartComponent } from '../basic-bar-chart/basic-bar-chart.component';
-
-@Component({
-  selector: 'sc-line-bar-chart',
-  templateUrl: './line-bar-chart.component.html',
-  styleUrls: ['./line-bar-chart.component.less'],
-})
-@Widget('折线柱图', {
-  group: 'barChart',
-  image: 'assets/img/screen/lineBar.png',
-  icon: 'icontubiao',
-})
-export class LineBarChartComponent extends BasicLineChartComponent implements OnInit, OnChanges {
-  @Property('类型', { ui: { hidden: true } })
-  type = 'line';
-  @Property('图表样式', {
-    ui: {
-      widget: 'myImageExample',
-      spanLabel: 24,
-      spanControl: 24,
-      reset: ['barColor'],
-      example: [
-        {
-          background: 'assets/img/screen/bar1.png',
-          data: { barColor: { gradient: true, value: [['#FFEF66', '#FF851D']] } },
-        },
-        {
-          background: 'assets/img/screen/bar2.png',
-          data: { barColor: { gradient: true, value: [['#00FECB', '#00D191']] } },
-        },
-        {
-          background: 'assets/img/screen/bar3.png',
-          data: { barColor: { gradient: true, value: [['#00D2FD', '#3285FF']] } },
-        },
-        {
-          background: 'assets/img/screen/bar4.png',
-          data: { barColor: { gradient: true, value: [['#FF3699', '#8934F8']] } },
-        },
-      ],
-    },
-  })
-  example: any;
-  @Property('填充', {
-    ui: {
-      widget: 'seriesColor',
-      type: 'gradual',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
-    },
-  })
-  barColor = { 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: 30,
-    left: 30,
-  };
-  @Property('图例', {
-    ui: { widget: 'select' },
-    enum: [
-      { label: '无', value: 'none' },
-      { label: '自动', value: 'auto' },
-      { label: '左对齐', value: 'left' },
-      { label: '右对齐', value: 'right' },
-    ],
-  })
-  align = 'none';
-  // @Property('轴单位', { ui: { widget: 'myUnit', type: 'double' } })
-  // unit = { x: '', y: '', yMax: '', y1: '', y1Max: '', showY1: false };
-  @Property('y轴单位', { type: 'string' })
-  yUnit = '';
-  @Property('x轴单位', { type: 'string' })
-  xUnit = '';
-  @Property('y轴最大')
-  yMax: number;
-  @Property('y轴最大', { type: 'boolean' })
-  showY1 = false;
-  @Property('网络线', {
-    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
-  })
-  netLine = false;
-  @Property('标签', {
-    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
-  })
-  label = false;
-  @Property('列间距', { ui: { widget: 'myRange', min: 0, max: 100, step: 10 } })
-  barCategoryGap = 40;
-  @Property('圆角', { ui: { widget: 'myRange', min: 0, max: 10, step: 1 } })
-  barBorderRadius = 0;
-  @Property('轴标签角度', {
-    ui: { widget: 'myRange', min: -90, max: 90, step: 10 },
-  })
-  xLabelRotate = 0;
-
-  chartOption: any = {};
-  @Data({
-    properties: {
-      x: { type: 'string', title: '类目' },
-      y: { type: 'number', title: '值' },
-      s: { type: 'string', title: '系列' },
-    },
-  })
-  _data: any[] = [
-    { x: '一月', y: 2.0, s: '蒸发量' },
-    { x: '二月', y: 4.9, s: '蒸发量' },
-    { x: '三月', y: 7.0, s: '蒸发量' },
-    { x: '四月', y: 35.6, s: '蒸发量' },
-    { x: '五月', y: 73.4, s: '蒸发量' },
-    { x: '六月', y: 123.4, s: '蒸发量' },
-    { x: '一月', y: 2.6, s: '降水量' },
-    { x: '二月', y: 5.9, s: '降水量' },
-    { x: '三月', y: 9.0, s: '降水量' },
-    { x: '四月', y: 25.7, s: '降水量' },
-    { x: '五月', y: 43.5, s: '降水量' },
-    { x: '六月', y: 78.9, s: '降水量' },
-    { x: '一月', y: 2.0, s: '温度' },
-    { x: '二月', y: 2.2, s: '温度' },
-    { x: '三月', y: 3.3, s: '温度' },
-    { x: '四月', y: 4.5, s: '温度' },
-    { x: '五月', y: 6.3, s: '温度' },
-    { x: '六月', y: 10.2, s: '温度' },
-  ];
-  @Drill()
-  @DataOutput(['x', 's'])
-  dataClick = new EventEmitter<any>();
-  xData = [];
-  series = [];
-  yData = [];
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes._data) {
-      const dataShadow = [];
-      const maxNum = this.getMaxY();
-
-      for (let i = 0; i < this.xData.length; i++) {
-        dataShadow.push(maxNum);
-      }
-      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 barColor;
-      if (this.barColor && this.barColor.value) {
-        barColor = this.barColor.value;
-      } else {
-        barColor = this.barColor;
-      }
-      for (let i = 0; i < barColor.length; i++) {
-        color.push({
-          type: 'linear',
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          global: false,
-          colorStops: [
-            { offset: 0, color: barColor[i][0] },
-            { offset: 1, color: barColor[i][1] },
-          ],
-        });
-      }
-
-      const xAxis: any = {
-        type: 'category',
-        name: this.xUnit,
-        nameTextStyle: this.style,
-        axisLine: {
-          show: true,
-          lineStyle: {
-            color: this.style.color,
-          },
-        },
-        axisTick: {
-          show: true,
-        },
-        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,
-        },
-      };
-
-      let yAxis: any = {
-        type: 'value',
-        name: this.yUnit,
-        nameTextStyle: this.style,
-        axisLine: {
-          lineStyle: {
-            color: this.style.color,
-          },
-        },
-        max: this.yMax ? undefined : this.yMax,
-        axisLabel: this.style,
-        splitLine: {
-          show: this.netLine,
-          lineStyle: {
-            type: 'dashed',
-          },
-        },
-      };
-
-      const grid: any = {
-        top: this.grid.top,
-        right: this.grid.right,
-        left: this.grid.left,
-        bottom: this.grid.bottom,
-      };
-
-      if (this.showY1) {
-        yAxis = [
-          {
-            type: 'value',
-            name: this.yUnit,
-            nameTextStyle: this.style,
-            axisLine: {
-              lineStyle: {
-                color: this.style.color,
-              },
-            },
-            max: this.yMax ? undefined : this.yMax,
-            axisLabel: this.style,
-            splitLine: {
-              show: this.netLine,
-              lineStyle: {
-                type: 'dashed',
-              },
-            },
-          },
-          {
-            type: 'value',
-            name: this.yUnit,
-            nameTextStyle: this.style,
-            axisLine: {
-              lineStyle: {
-                color: this.style.color,
-              },
-            },
-            max: this.yMax ? undefined : this.yMax,
-            axisLabel: this.style,
-            splitLine: {
-              show: false,
-            },
-          },
-        ];
-      }
-      this.chartOption = {
-        legend: {
-          data: this.series,
-          align: this.align,
-          icon: 'stack',
-          show: this.align !== 'none',
-          textStyle: this.style,
-        },
-        grid,
-        xAxis,
-        yAxis,
-        color,
-        series: [],
-      };
-      this.reloadData();
-      // 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, 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.y);
-      //       }
-      //     }
-      //   });
-      // }
-    }
-  }
-  setSeriesStyle(name: string, datasetIndex: number) {
-    const first = datasetIndex === 1;
-    const series = {
-      name,
-      showBackground: true,
-      label: {
-        show: this.label,
-        position: 'top',
-        textStyle: this.style,
-      },
-      itemStyle: {
-        normal: {
-          barBorderRadius: this.barBorderRadius,
-        },
-      },
-      connectNulls: true,
-      barCategoryGap: this.barCategoryGap + '%',
-      type: first ? 'bar' : 'line',
-      yAxisIndex: this.showY1 && !first ? 1 : 0,
-      areaStyle: {
-        opacity: 0,
-      },
-      encode: { x: 'x', y: 'y' },
-      datasetIndex,
-    };
-    this.chartOption.series.push(series);
-    return series;
-  }
-  ngOnInit() {}
-  onChartClick(event) {
-    this.dataClick.emit({ x: event.name, s: event.seriesName });
-  }
-}

package/src/lib/line-bar-chart/line-bar-chart.module.ts

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

package/src/lib/line-light-flow/line-light-flow.component.html

@@ -1,3 +0,0 @@
-<div #canvasBox [style.paddingTop]="topDistance + 'px'">
-  <canvas #lineCanvas></canvas>
-</div>