优化属性表分页逻辑 review by luox

src/common/_utils/__tests__/iServerRestService.spec.js

@@ -1,5 +1,6 @@
 import iServerRestService from '../../../common/_utils/iServerRestService';
 const SuperMap = require('../../../../test/unit/mocks/supermap');
+import mockFetch from 'vue-iclient/test/unit/mocks/FetchRequest';
 
 describe('iServerRestService', () => {
   afterEach(() => {
@@ -36,4 +37,29 @@ describe('iServerRestService', () => {
       },
     })
   });
+  it('getDataFeaturesCount', async (done) => {
+    const fetchResource = {
+      'http://localhost:8090/iserver/services/xxx/rest/data/featureResults.json?fromIndex=0&toIndex=19&&returnCountOnly=true&returnContent=true': {
+        totalCount: 200
+      }
+    };
+    mockFetch(fetchResource);
+    const service = new iServerRestService();
+    const result = await service.getDataFeaturesCount({ dataUrl: 'http://localhost:8090/iserver/services/xxx/rest/data', datasetName: 'test', dataSourceName: 'test' });
+    expect(result).toBe(500);
+    done();
+  });
+  it('getFeaturesDatasetInfo', async (done) => {
+    const fetchResource = {
+      'http://localhost:8090/iserver/services/xxx/rest/data/featureResults.json?fromIndex=0&toIndex=19&&returnDatasetInfoOnly=true&returnContent=true': {
+        fieldInfos: []
+      }
+    };
+    mockFetch(fetchResource);
+    const service = new iServerRestService();
+    const result = await service.getFeaturesDatasetInfo({ dataUrl: 'http://localhost:8090/iserver/services/xxx/rest/data', datasetName: 'test', dataSourceName: 'test'});
+    expect(result[0].name).toBe('capital');
+    expect(result[0].caption).toBe('Capital');
+    done();
+  });
 });

src/common/_utils/get-features.js

@@ -20,7 +20,8 @@ export default function getFeatures(dataset) {
       fromIndex,
       toIndex,
       hasGeometry,
-      orderBy
+      orderBy,
+      returnFeaturesOnly
     } = dataset;
     if (dataset && (url || geoJSON) && type) {
       let queryInfo = {
@@ -33,7 +34,8 @@ export default function getFeatures(dataset) {
         const options = {
           fromIndex,
           toIndex,
-          hasGeometry
+          hasGeometry,
+          returnFeaturesOnly
         };
         if (dataset.proxy) {
           options.proxy = dataset.proxy;

src/common/_utils/iServerRestService.js

@@ -1,4 +1,4 @@
-import 'vue-iclient/static/libs/mapboxgl/mapbox-gl-enhance';
+import mapboxgl from 'vue-iclient/static/libs/mapboxgl/mapbox-gl-enhance';
 import 'vue-iclient/static/libs/iclient-mapboxgl/iclient-mapboxgl.min';
 import { Events } from 'vue-iclient/src/common/_types/event/Events';
 import { getProjection } from 'vue-iclient/src/common/_utils/epsg-define';
@@ -210,6 +210,50 @@ export default class iServerRestService extends Events {
     }
   }
 
+/**
+   * @function iServerRestService.prototype.getDataFeaturesCount
+   * @description 获取要素总数。
+   * @param {Object} datasetInfo - 数据集参数。
+   * @param {Object} datasetInfo.datasetName - 数据集名。
+   * @param {Object} datasetInfo.dataSourceName - 数据源名。
+   * @param {Object} datasetInfo.dataUrl - 数据服务地址。
+   */
+  getDataFeaturesCount(datasetInfo) {
+    let { datasetName, dataSourceName, dataUrl } = datasetInfo;
+    var sqlParam = new mapboxgl.supermap.GetFeaturesBySQLParameters({
+      queryParameter: {
+        name: datasetName + '@' + dataSourceName
+      },
+      datasetNames: [dataSourceName + ':' + datasetName]
+    });
+
+    return new mapboxgl.supermap.FeatureService(dataUrl).getFeaturesCount(sqlParam).then(function (serviceResult) {
+      return serviceResult.result.totalCount;
+    });
+  }
+
+  /**
+   * @function iServerRestService.prototype.getFeaturesDatasetInfo
+   * @description 获取要素的数据集信息。
+   * @param {Object} datasetInfo - 数据集参数。
+   * @param {Object} datasetInfo.datasetName - 数据集名。
+   * @param {Object} datasetInfo.dataSourceName - 数据源名。
+   * @param {Object} datasetInfo.dataUrl - 数据服务地址。
+   */
+  getFeaturesDatasetInfo(datasetInfo) {
+    let { datasetName, dataSourceName, dataUrl } = datasetInfo;
+    var sqlParam = new mapboxgl.supermap.GetFeaturesBySQLParameters({
+      queryParameter: {
+        name: datasetName + '@' + dataSourceName
+      },
+      datasetNames: [dataSourceName + ':' + datasetName]
+    });
+
+    return new mapboxgl.supermap.FeatureService(dataUrl).getFeaturesDatasetInfo(sqlParam).then(function (serviceResult) {
+      return serviceResult.result[0].fieldInfos;
+    });
+  }
+
   _getMapFeatureBySql(url, queryInfo) {
     let queryBySQLParams, queryBySQLService;
     queryBySQLParams = new SuperMap.QueryBySQLParameters({
@@ -250,7 +294,8 @@ export default class iServerRestService extends Events {
       datasetNames: queryInfo.datasetNames,
       fromIndex: this.options.fromIndex || 0,
       toIndex: this.options.toIndex || (queryInfo.maxFeatures >= 1000 ? -1 : queryInfo.maxFeatures - 1),
-      maxFeatures: -1
+      maxFeatures: -1,
+      returnFeaturesOnly: this.options.returnFeaturesOnly
     });
     getFeatureBySQLService = new SuperMap.GetFeaturesBySQLService(url, {
       proxy: this.options.proxy,
@@ -269,7 +314,6 @@ export default class iServerRestService extends Events {
   async _getFeaturesSucceed(results) {
     let features;
     let data;
-
     if (results.result && results.result.recordsets) {
       // 数据来自restmap
       const recordsets = results.result.recordsets[0] || {};
@@ -292,7 +336,7 @@ export default class iServerRestService extends Events {
     } else if (results.result && results.result.features) {
       // 数据来自restdata---results.result.features
       this.features = results.result.features;
-      features = this.features.features;
+      features = this.features.features || this.features;
       let fields = []; let fieldCaptions = []; let fieldTypes = [];
       if(results.result.datasetInfos) {
         const fieldInfos = results.result.datasetInfos[0].fieldInfos;
@@ -306,7 +350,7 @@ export default class iServerRestService extends Events {
       }
       if (features && features.length > 0) {
         data = statisticsFeatures(features, fields, fieldCaptions, fieldTypes);
-        data.totalCount = results.result.totalCount;
+        results.result.totalCount && (data.totalCount = results.result.totalCount);
       } else {
         this.triggerEvent('featureisempty', {
           results

src/mapboxgl/attributes/Attributes.vue

@@ -433,7 +433,9 @@ class SmAttributes extends Mixins(MapGetter, Theme, VmUpdater) {
 
   handleChange(pagination, filters, sorter, { currentDataSource }) {
     this.currentDataSource = currentDataSource;
-    this.$set(this.paginationOptions, 'total', currentDataSource.length);
+    if (filters && Object.keys(filters).length) {
+      this.$set(this.paginationOptions, 'total', currentDataSource.length);
+    }
     this.getCurrentSelectedRowLength();
     this.paginationOptions = { ...this.paginationOptions, current: pagination.current };
     this.sorter = sorter;
@@ -446,6 +448,7 @@ class SmAttributes extends Mixins(MapGetter, Theme, VmUpdater) {
       if (totalCount) {
         // @ts-ignore
         this.totalCount = totalCount;
+        this.$set(this.paginationOptions, 'total', totalCount);
       }
       // @ts-ignore
       const hideColumns = this.columns.filter(item => !item.visible);
@@ -498,8 +501,8 @@ class SmAttributes extends Mixins(MapGetter, Theme, VmUpdater) {
     this.viewModel = null;
   }
 
-  beforeDestory() {
-    this.$options.removed.call(this);
+  beforeDestroy() {
+    this.removed();
   }
 }
 

src/mapboxgl/attributes/AttributesViewModel.ts

@@ -5,6 +5,8 @@ import clonedeep from 'lodash.clonedeep';
 import mergewith from 'lodash.mergewith';
 import difference from 'lodash.difference';
 import getFeatures from '../../common/_utils/get-features';
+import iServerRestService from 'vue-iclient/src/common/_utils/iServerRestService';
+import { statisticsFeatures } from 'vue-iclient/src/common/_utils/statistics';
 
 /**
  * @class AttributesViewModel
@@ -119,6 +121,10 @@ class FeatureTableViewModel extends mapboxgl.Evented {
 
   currentTitle: string;
 
+  prevDatasetUrl: string;
+
+  totalCount: number;
+
   constructor(options) {
     super();
     this.selectedKeys = [];
@@ -435,19 +441,44 @@ class FeatureTableViewModel extends mapboxgl.Evented {
   async getDatas() {
     if (this.dataset || this.layerName) {
       let features;
-      let totalCount;
       if (this.useDataset()) {
-        const datas = await this._getFeaturesFromDataset();
+        let datas = await this._getFeaturesFromDataset();
         features = datas.features;
-        totalCount = datas.totalCount;
+        !this.totalCount && (this.totalCount = datas.totalCount);
+        if (this.canLazyLoad()) {
+          if (this.dataset.url !== this.prevDatasetUrl) {
+            let arr = this.dataset.dataName[0].split(':');
+            let config = {
+              datasetName: arr[1],
+              dataSourceName: arr[0],
+              dataUrl: this.dataset.url
+            }
+            // @ts-ignore
+            this.totalCount = await new iServerRestService(this.dataset.url).getDataFeaturesCount(config);
+            // @ts-ignore
+            let fieldInfos = await new iServerRestService(this.dataset.url).getFeaturesDatasetInfo(config);
+            let fields = []; let fieldCaptions = []; let fieldTypes = [];
+            if(fieldInfos) {
+              fieldInfos.forEach(fieldInfo => {
+                if(fieldInfo.name) {
+                  fields.push(fieldInfo.name.toUpperCase());
+                  fieldCaptions.push(fieldInfo.caption.toUpperCase());
+                  fieldTypes.push(fieldInfo.type);
+                }
+              });
+            }
+            datas = statisticsFeatures(features, fields, fieldCaptions, fieldTypes);
+            this.prevDatasetUrl = this.dataset.url;
+          }
+        }
       } else {
         features = this._getFeaturesFromLayer(this.layerName);
-        totalCount = features.length;
+        this.totalCount = features.length;
       }
       const content = this.toTableContent(features);
       const columns = this.toTableColumns(features[0].properties);
 
-      this.fire('dataChanged', { content, totalCount, columns });
+      this.fire('dataChanged', { content, totalCount: this.totalCount, columns });
     }
   }
 
@@ -473,6 +504,7 @@ class FeatureTableViewModel extends mapboxgl.Evented {
         }
         dataset.fromIndex = this.paginationOptions.pageSize * (this.paginationOptions.current - 1 || 0);
         dataset.toIndex = dataset.fromIndex + this.paginationOptions.pageSize - 1;
+        dataset.returnFeaturesOnly = true;
       }
 
       return await getFeatures(dataset);

test/unit/mocks/supermap_mapboxgl.js

@@ -18,7 +18,46 @@ supermap.FeatureService = () => {
     getFeaturesByGeometry: (param, callback) =>
       setTimeout(() => {
         callback(fakeDataServiceResult);
-      }, 0)
+      }, 0),
+    getFeaturesDatasetInfo: (param, callback) => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          callback && callback({
+            result: [{
+              fieldInfos: [{
+                name: 'capital',
+                caption: 'Capital'
+              }]
+            }]
+          });
+          resolve({
+            result: [{
+              fieldInfos: [{
+                name: 'capital',
+                caption: 'Capital'
+              }]
+            }]
+          })
+        }, 0)
+      });
+    },
+    getFeaturesCount: (param, callback) => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          callback && callback({
+            result: {
+              totalCount: 500
+            }
+          });
+          resolve({
+            result: {
+              totalCount: 500
+            }
+          });
+        }, 0)
+      })
+    }
+
   };
 };
 
@@ -234,6 +273,10 @@ supermap.DataFlowService = serviceUrl => {
 
 supermap.DeckglLayer = () => {};
 
+supermap.GetFeaturesBySQLParameters = () => {
+  return {}
+}
+
 supermap.Util = {
   hexToRgba: function (hex, opacity) {
     var color = [],