统计-table、grid

grid

 <nz-spin [nzSpinning]="isSearch " [nzIndicator]="indicatorTemplate">
                    <ngx-grid #grid [settings]="settings" [source]="source" [isFieldSelection]="true">
                    </ngx-grid>
                </nz-spin> 

 public isSearch: boolean = false;
  @ViewChild("grid", { static: false }) grid: YzNgxGridComponent;
  public source = [];
  public gridOptions = null;
  public settings: {
    headerName?: string,
    field?: string,
    sort?: string
  }[] = [];
  search() {
    let statisticsData
    this.settings = [];
    this.isSearch = true;
    this.statisticsService.statistic().toPromise().then(GridInfo => {
      statisticsData = GridInfo;
      // console.log(GridInfo)
      GridInfo.forEach((info, i) => {
        //拼接表格标题栏
        if (i == 0) {
          for (let key = 0; key < info.split(",").length; key++) {
            if (info.split(",")[key] == "要素类型" || info.split(",")[key] == "分辨率" || info.split(",")[key] == "年份" || info.split(",")[key] == "月份") {
              continue;
            }
            this.settings.push({
              headerName: info.split(",")[key],
              field: key.toString(),
              sort: null
            })
          }
          return
        }
      })
    }).catch(() => {
      this.isSearch = false;
      this.message.error(this.type + "数据获取失败");
      return;
    }).then(() => {
      if (statisticsData == undefined) return
      this.source = [];
      //拼接表格body
      statisticsData.split("\r\n").forEach((info, i) => {
        if (i != 0) {
          let item: {} = []
          for (let key = 0; key < info.split(",").length; key++) {
            item[key] = info.split(",")[key]
          }
          this.source.push(item)
        }
      })
      this.isSearch = false;
      this.source.pop()
    })
  }

table

<nz-spin [nzSpinning]="isScaleStatistics">
        <nz-table *ngIf="!isScaleStatistics" #columnTable [nzData]="listOfStatistics" [nzScroll]="{ x: '300px' }">
            <thead>
                <tr>
                    <th nzWidth="100px" nzLeft="0px">值</th>
                    <th nzWidth="100px" nzLeft="100px">描述</th>
                    <th *ngFor="let data of columnTable.data[0].header">{{data}}</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of columnTable.data[0].body">
                    <td nzLeft="0px">{{ data.value }}</td>
                    <td nzLeft="100px">{{ data.text }}</td>
                    <td *ngFor="let data of data.province">{{data}}</td>
                </tr>
            </tbody>
        </nz-table>
    </nz-spin>

handleOk(): void {
    this.isAreaVisible = false;
    this.listOfStatistics = [{ header: [], body: [] }];
    this.isScaleStatistics = true;
    this.typeChange.emit(true)
    this.gisService.statisticByLevel(this.levels, this.where, this.levelParams.img)
      .subscribe((data) => {
        let areaData: Array<any> = [];
        //翻译表格header 区域
        for (let j in data) {
          if (j == "province") continue;//选择区域为省 删去重复列
          this.listOfStatistics[0].header.push(this.cCodeToProvName((j).length == 6 ? Number(j) : this.selArea.cCode))
        }
        //特殊区域放在前列
        let key = this.listOfStatistics[0].header[this.listOfStatistics[0].header.length - 1]
        this.listOfStatistics[0].header.splice(this.listOfStatistics[0].header.length - 1, 1);
        this.listOfStatistics[0].header.unshift(key)
        //拼接表格body数组
        this.scaleData.forEach(item => {
          for (let j in data) {
            for (let k in data[j]) {
              if (j == "province") continue;//选择区域为省 删去重复列
              if (k.split(',')[0] == item.value) {
                areaData.push(data[j]["total"] == 0 || data[j][k] == 0 ? 0 : ((data[j][k] / data[j]["total"]) * 100).toFixed(3) + "%");
                continue;
              }
            }
          }
          let b = areaData[areaData.length - 1]
          areaData.splice(areaData.length - 1, 1);
          areaData.unshift(b)
          this.listOfStatistics[0].body.push({ value: item.value, text: item.text, province: areaData })
          areaData = []
        })
        this.isScaleStatistics = false;

      }, e => {
        this.isScaleStatistics = false;
        this.message.error("等级比例面积统计数据获取失败")
      })
  }