bbj-screen-widget 2.4.60 → 2.4.62

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

@@ -0,0 +1,277 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,7 @@
+<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

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

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,346 @@
+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

@@ -0,0 +1,15 @@
+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

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