bbj-screen-widget 2.4.60 → 2.4.62

package/src/lib/visual-map-chart/visual-map-chart.component.less

@@ -0,0 +1,21 @@
+.demo-chart {
+  height: 100%;
+  width: 100%;
+}
+
+:host {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+// ::ng-deep button {
+
+//   margin-bottom: 10px;
+// }
+
+// ::ng-deep {
+//   .sf__array-container nz-card .ant-card-body{
+//     padding: 15px 3px 3px 3px  !important;
+//   }
+// }

package/src/lib/visual-map-chart/visual-map-chart.component.spec.ts

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

package/src/lib/visual-map-chart/visual-map-chart.component.ts

@@ -0,0 +1,365 @@
+import { Component, OnChanges, OnInit, SimpleChanges, EventEmitter } from '@angular/core';
+import { Data, DataOutput, Drill, Property, Widget, Event, EventParam } from 'bbj-widget-base';
+import * as echarts from 'echarts';
+import { HttpClient } from '@angular/common/http';
+import { SFArrayWidgetSchema, SFRadioWidgetSchema, SFStringWidgetSchema } from '@delon/form';
+
+@Component({
+  selector: 'sc-visual-map-chart',
+  templateUrl: './visual-map-chart.component.html',
+  styleUrls: ['./visual-map-chart.component.less'],
+})
+@Widget('2D热力图', {
+  group: 'component',
+  image: 'assets/img/screen/hotMap.png',
+  icon: 'icontubiao',
+})
+export class VisualMapChartComponent implements OnInit, OnChanges {
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = {
+    family: '',
+    color: '#FFFFFF',
+    weight: 'normal',
+    size: 12,
+    space: 0,
+    lineHeight: 12,
+  };
+  chartOption: any = null;
+  @Property('地图样式', {
+    ui: {
+      widget: 'myUrlSelect',
+      url: '/assets/mapListItem.json',
+    },
+  })
+  mapStyle = 'china';
+  @Property('触发提示', {
+    type: 'string',
+    enum: [
+      { value: 'mousemove', label: '移动' },
+      { value: 'click', label: '点击' },
+    ],
+    ui: {
+      widget: 'radio',
+      styleType: 'button',
+      buttonStyle: 'solid',
+    } as SFRadioWidgetSchema,
+    default: 'mousemove',
+  })
+  trigger = 'mousemove';
+  @Property('图例位置', { ui: { widget: 'myGrid' } })
+  visualMapPosition: any = {
+    left: '',
+    right: '',
+    top: '',
+    bottom: 40,
+  };
+  @Property('分级', {
+    type: 'array',
+    title: '热力等级',
+    maxItems: 10,
+    items: {
+      type: 'object',
+      properties: {
+        gte: {
+          type: 'number',
+          title: '大于',
+        },
+        lte: {
+          type: 'number',
+          title: '小于',
+          minimum: 1,
+        },
+        label: {
+          type: 'string',
+          title: '标签',
+        },
+        color: {
+          type: 'string',
+          title: '颜色',
+          ui: {
+            widget: 'myColor',
+          },
+        },
+        unit: {
+          type: 'string',
+          title: '单位',
+        },
+      },
+      required: ['label', 'color'],
+    },
+    ui: { grid: { arraySpan: 24 }, spanControl: 24 } as SFArrayWidgetSchema,
+  })
+  level = [
+    { gte: 0, lte: 50, label: '等级1', color: '#AAAAAA', unit: '' },
+    {
+      gte: 50,
+      label: '等级2',
+      color: '#FF3333',
+      unit: '',
+    },
+  ];
+  @Property('地图颜色', {
+    type: 'string',
+    ui: {
+      widget: 'myColor',
+    },
+  })
+  mapColor = '#FFFFFF';
+  @Property('选中区域颜色', {
+    type: 'string',
+    ui: {
+      widget: 'myColor',
+    },
+  })
+  selectAreaColor = '#f2d5ad';
+  @Property('正极名称', {
+    max: {
+      type: 'string',
+      title: 'max',
+      ui: {} as SFStringWidgetSchema,
+    },
+    required: ['max'],
+  })
+  max = '高';
+
+  @Property('负极名称', {
+    min: {
+      type: 'string',
+      title: 'min',
+      ui: {} as SFStringWidgetSchema,
+    },
+    required: ['min'],
+  })
+  min = '低';
+  @Property('前缀', {
+    min: {
+      type: 'string',
+      ui: {} as SFStringWidgetSchema,
+    },
+  })
+  prefix = '';
+  @Property('后缀', {
+    min: {
+      type: 'string',
+      ui: {} as SFStringWidgetSchema,
+    },
+  })
+  suffix = '';
+  @Data({
+    properties: {
+      name: { type: 'string', title: '地名' },
+      value: { type: 'number', title: '值' },
+      tooltip: { type: 'string', title: '提示' },
+      lng: { type: 'number', title: '中心经度' },
+      lat: { type: 'number', title: '中心纬度' },
+    },
+  })
+  _data: any[] = [
+    { name: '南海诸岛', value: 0, tooltip: '告警统计' + '<br />' + '失联告警：0' },
+    { name: '北京', value: 54, tooltip: '告警统计' + '<br />' + '失联告警：54' },
+    { name: '天津', value: 13, tooltip: '告警统计' + '<br />' + '失联告警：13' },
+    { name: '上海', value: 40, tooltip: '告警统计' + '<br />' + '失联告警：40' },
+    { name: '重庆', value: 75, tooltip: '告警统计' + '<br />' + '失联告警：75' },
+    { name: '河北', value: 13, tooltip: '告警统计' + '<br />' + '失联告警：13' },
+    { name: '海口市', value: 70, tooltip: '告警统计' + '<br />' + '失联告警：70' },
+  ];
+  @Drill()
+  @DataOutput(['name', 'value', 'tooltip', 'lng', 'lat'])
+  dataClick = new EventEmitter<any>();
+  xData = [];
+  yData = [];
+  series = [];
+  image: string;
+  style = {
+    color: '',
+    fontFamily: '',
+    fontWeight: '',
+    fontSize: '',
+    lineHeight: '',
+  };
+  data: any;
+
+  constructor(private http: HttpClient) { }
+
+  ngOnInit(): void { }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.style = {
+      color: this.font.color,
+      fontFamily: this.font.family,
+      fontWeight: this.font.weight,
+      fontSize: this.font.size,
+      lineHeight: this.font.lineHeight,
+    };
+
+    const posi = { bottom: 40 }; // 保证以前添加的此组件在未修改图例位置前保持不变
+    if (this.visualMapPosition) {
+      Object.keys(this.visualMapPosition).forEach(key => {
+        if (this.visualMapPosition[key] || this.visualMapPosition[key] === 0) {
+          posi[key] = this.visualMapPosition[key];
+        }
+      });
+    }
+    if (changes._data) {
+      this.http
+        .get('assets/echarts/map/json/' + this.mapStyle + '.json')
+        .toPromise()
+        .then((data:any) => {
+          echarts.registerMap(this.mapStyle, data);
+          this.data = data;
+          this.chartOption = {
+            tooltip: {
+              triggerOn: this.trigger,
+              // formatter:(params)=>{
+              //   console.log(params);
+              // }
+              // formatter: function(e, t, n) {
+              //   return .5 === e.value ? e.name + '：有疑似病例' : e.seriesName + '<br />' + e.x + '：' + e.y
+              // }
+            },
+            visualMap: {
+              min: 0,
+              max: 500,
+              ...posi,
+              showLabel: !0,
+              text: [],
+              pieces: this.level,
+              textStyle: this.style,
+              // [{
+              //   gt: 100,
+              //   label: '> 100 人',
+              //   color: '#7f1100'
+              // }, {
+              //   gte: 10,
+              //   lte: 100,
+              //   label: '10 - 100 人',
+              //   color: '#ff5428'
+              // }, {
+              //   gte: 1,
+              //   lt: 10,
+              //   label: '1 - 9 人',
+              //   color: '#ff8c71'
+              // }, {
+              //   gt: 0,
+              //   lt: 1,
+              //   label: '疑似',
+              //   color: '#ffd768'
+              // }, {
+              //   value: 0,
+              //   color: '#ffffff'
+              // }],
+              show: !0,
+            },
+            // geo: {
+            //   map: this.mapStyle,
+            //   roam: !1,
+            //   scaleLimit: {
+            //     min: 1,
+            //     max: 2
+            //   },
+            //   // label: {
+            //   //   normal: {
+            //   //     show: !0,
+            //   //     fontSize: '14',
+            //   //     color: 'rgba(0,0,0,0.7)'
+            //   //   }
+            //   // },
+            //   itemStyle: {
+            //     normal: {
+            //       borderColor: 'rgba(0, 0, 0, 0.2)',
+            //       areaColor: this.mapColor,
+            //     },
+            //     emphasis: {
+            //       areaColor: this.selectAreaColor,
+            //       shadowOffsetX: 0,
+            //       shadowOffsetY: 0,
+            //       borderWidth: 0
+            //     }
+            //   }
+            // },
+            series: [
+              {
+                name: '',
+                type: 'map',
+                geoIndex: 0,
+                mapType: this.mapStyle,
+                label: {
+                  normal: {
+                    show: true,
+                    formatter: (val) => {
+                      const value = val.value ? val.value : 0;
+                      const prefix = this.prefix ? this.prefix : '';
+                      const suffix = this.suffix ? this.suffix : '';
+                      return (val.name + '-' + prefix + value + suffix).split('-').join('\n');
+                    },
+                    textStyle: this.style,
+                  },
+                  emphasis: {
+                    show: false,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    borderColor: 'rgba(0, 0, 0, 0.2)',
+                    areaColor: this.mapColor,
+                  },
+                  emphasis: {
+                    areaColor: this.selectAreaColor,
+                    shadowOffsetX: 0,
+                    shadowOffsetY: 0,
+                    borderWidth: 0,
+                  },
+                },
+                data: this._data,
+              },
+            ],
+          };
+          this.reloadData();
+        });
+    }
+  }
+
+  onChartClick(event) {
+    let n = '';
+    let v = '';
+    let t = '';
+    let centerLng = '';
+    let centerLat = '';
+    if (typeof event.data !== 'undefined') {
+      n = event.data.name;
+      v = event.data.value;
+      t = event.data.tooltip;
+    } else {
+      n = event.name;
+      v = '0';
+    }
+    this.data.features.forEach((a) => {
+      if (a.properties.name === n) {
+        centerLng = a.properties.cp[0];
+        centerLat = a.properties.cp[1];
+      }
+    });
+    this.dataClick.emit({ name: n, value: v, tooltip: t, lng: centerLng, lat: centerLat });
+
+    this.onClick(n, v, t, Number(centerLng), Number(centerLat));
+  }
+
+  reloadData() {
+    this.chartOption.visualMap.text.push(this.max);
+    this.chartOption.visualMap.text.push(this.min);
+    if (this.mapStyle === 'province/hainan') {
+      this.chartOption.geo.center = [109.844902, 19.0392];
+      this.chartOption.geo.layoutCenter = ['50%', '50%'];
+      this.chartOption.geo.layoutSize = '600%';
+    }
+  }
+
+  @Event('点击')
+  onClick(
+    @EventParam('名称') name: string,
+    @EventParam('值') value: string,
+    @EventParam('提示') tooltip: string,
+    @EventParam('经度') lng: number,
+    @EventParam('维度') lat: number,
+  ) { }
+}

package/src/lib/visual-map-chart/visual-map-chart.module.ts

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

package/src/lib/vote/vote.component.html

@@ -0,0 +1,6 @@
+<nz-checkbox-wrapper style="width: 100%;" (nzOnChange)="log($event)">
+  <div class="item-wrap" [ngStyle]="textStyle">
+    <div class="item" [style.color]="borderColor" *ngFor="let item of options"><label nz-checkbox [nzValue]="item.value ? item.value:item.label"  [ngStyle]="textStyle" [ngModel]="item.checked">{{item.label}}</label></div>
+  </div>
+</nz-checkbox-wrapper>
+<div class="vote-btn" [style.backgroundColor]="btnColor" [ngStyle]="textStyle">投票</div>

package/src/lib/vote/vote.component.less

@@ -0,0 +1,41 @@
+:host {
+  width: 100%;
+  text-align: center;
+  display: inline-block;
+  ::ng-deep {
+    .item-wrap {
+      display: inline-flex;
+      flex-direction: column;
+      text-align: left;
+      .ant-checkbox-inner {
+        background-color: inherit;
+      }
+      .item {
+        display: inline-block;
+        height: 28px;
+        line-height: 28px;
+        label {
+          margin: 0;
+        }
+      }
+      .item:before {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        border-bottom: 1px solid;
+        height: 0;
+      }
+      .ant-checkbox-inner {
+        border-color: var(--color);
+      }
+    }
+    .vote-btn {
+      height: 28px;
+      line-height: 28px;
+    }
+    .ant-checkbox-group {
+      position: relative;
+    }
+  }
+}

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

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

package/src/lib/vote/vote.component.ts

@@ -0,0 +1,71 @@
+import { Component, ElementRef, OnInit, EventEmitter } from '@angular/core';
+import { Property, Widget, DataOutput, Data } from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-vote',
+  templateUrl: './vote.component.html',
+  styleUrls: ['./vote.component.less'],
+})
+@Widget('投票', { group: 'component', image: 'assets/img/screen/vote.png', icon: 'iconmokuai' })
+export class VoteComponent implements OnInit {
+
+  @Data({
+    properties: {
+      label: { title: '标签', type: 'string' },
+      value: { title: '值', type: 'string' },
+      checked: { title: '是否选中', type: 'boolean' },
+    },
+  })
+  options: any = [
+    { label: '选项一', value: 'option1' },
+    { label: '选项二', value: 'option2' },
+    { label: '选项三', value: 'option3' },
+  ];
+  @Property('', { ui: { widget: 'myCheckNumber', title: '多选个数', spanLabel: 0, spanControl: 24 } })
+  num = 1;
+  @Property('填充', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  background = 'rgba(50,133,255,0.2)';
+  @Property('边框', {
+    ui: {
+      widget: 'myColor',
+      example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  borderColor = '#3285FF';
+  @Property('按钮颜色', {
+    ui: {
+      widget: 'myColor',
+      example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  btnColor = '#3285FF';
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = { family: '', color: '#ffffff', weight: 'normal', size: 12, space: 0, lineHeight: '' };
+  /*checkOptionsOne = [];*/
+  textStyle: any;
+  @DataOutput('值')
+  valueChange = new EventEmitter<any>();
+  constructor(private ele: ElementRef) {}
+
+  ngOnInit() {
+    this.ele.nativeElement.style.background = this.background;
+    this.ele.nativeElement.style.border = this.borderColor ? '1px solid ' + this.borderColor : 0;
+    this.ele.nativeElement.style.setProperty('--color', this.borderColor);
+    this.textStyle = {
+      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',
+    };
+  }
+  log(value: object[]): void {
+    this.valueChange.emit(value);
+  }
+}

package/src/lib/vote/vote.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { VoteComponent } from './vote.component';
+import { FormsModule } from '@angular/forms';
+import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+
+@NgModule({
+  declarations: [VoteComponent],
+  imports: [CommonModule, WidgetBaseModule, NzCheckboxModule, FormsModule],
+})
+export class VoteModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(VoteComponent);
+  }
+}

package/src/lib/weather/weather.component.html

@@ -0,0 +1,27 @@
+<ng-container [ngSwitch]="weatherStyleType">
+  <ng-container *ngSwitchCase="'mini'">
+    <div class="weatherStyle-mini" *ngIf="weather">
+      <img
+        [src]="'/assets/img/screen/' + weatherImgs[weatherImgName || 'overcast'] + '.png'"
+        alt=""
+        [style]="{ width: (iconSize || 64) + 'px', height: (iconSize || 64) + 'px' }"
+      />
+      <span [ngStyle]="tempStyle">{{ weather }} {{ temperature }}℃</span>
+    </div>
+  </ng-container>
+  <ng-container *ngSwitchDefault>
+    <div class="flex-row" [ngStyle]="tempStyle">
+      <div class="wd flex-row">
+        <div class="f-s30 f-w">{{ temperature }}</div>
+        <div style="font-size: 0.4em">℃</div>
+      </div>
+      <div class="icon">
+        <i [ngClass]="weatherIcon" style="font-size: 1em"></i>
+      </div>
+      <div class="status">
+        <div class="weather">{{ weather }}</div>
+        <div class="city">{{ city }}</div>
+      </div>
+    </div>
+  </ng-container>
+</ng-container>

package/src/lib/weather/weather.component.less

@@ -0,0 +1,67 @@
+@font-face {font-family: "iconfont";
+    src: url('//at.alicdn.com/t/font_1514307_kyxp4dpada.eot?t=1574038799011'); /* IE9 */
+    src: url('//at.alicdn.com/t/font_1514307_kyxp4dpada.eot?t=1574038799011#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+    url('//at.alicdn.com/t/font_1514307_kyxp4dpada.woff?t=1574038799011') format('woff'),
+    url('//at.alicdn.com/t/font_1514307_kyxp4dpada.ttf?t=1574038799011') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+    url('//at.alicdn.com/t/font_1514307_kyxp4dpada.svg?t=1574038799011#iconfont') format('svg'); /* iOS 4.1- */
+  }
+  
+  .iconfont {
+    font-family: "iconfont" !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  
+  .icon-sun:before {
+    content: "\e613";
+  }
+  
+  .icon-leiyu:before {
+    content: "\e626";
+  }
+  
+  .icon-rain:before {
+    content: "\e62f";
+  }
+  
+  .icon-duoyun:before {
+    // font-size: 40px;
+    content: "\e944";
+  }
+  
+
+.flex-row {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+}
+
+.f-s30 {
+    // font-size: 3em;
+}
+.f-w {
+    font-weight: bold;
+}
+.wd {
+    flex: 1;
+    align-items: baseline;
+    div:first-child {
+        margin-right: 10px;
+    }
+}
+.status {
+    font-size: 0.4em;
+    margin-left: 10px;
+}
+
+.weatherStyle-mini{
+  display: flex;
+  align-items: center;
+  img{
+    display: block;
+    margin-right: 8px;
+  }
+}