电子表格初始化流程

拖拽区域加载弹窗

在src\views\Pages\SpreadExcel\index.vue请求电子表格的get接口，根据返回的sheetList.regionList判断是否展示弹窗。

保存返回结果给spread，下次不用调接口

渲染电子表格

在src\views\Pages\SpreadExcel\setMenue\setMenueIndex.vue的mounted中执行函数
getBoardAuthority
获取接口得到的结果得到其runBoards.obj.jsonFileUrl然后将其渲染出来，再初始自定义的操作和绑定sheet的event

if (runBoards.obj.jsonFileUrl) {
        let jsonFileUrl = runBoards.obj.jsonFileUrl;
        console.time('初始化获取json数据'); // eslint-disable-line
        let getStyleResult = await getSpreadStyleJson(jsonFileUrl);
        // 适配器适配旧数据
        getStyleResult = adapterExchange(getStyleResult);
        console.timeEnd('初始化获取json数据'); // eslint-disable-line
        try {
            console.time('初始化渲染单独的json数据'); // eslint-disable-line
            this.spread.suspendPaint();
            // this.spread.fromJSON(getStyleResult)
            this.spread.fromJSON(getStyleResult, { doNotRecalculateAfterLoad: true });
            this.spread.options.calcOnDemand = true;
            this.spread.resumePaint();
            console.timeEnd('初始化渲染单独的json数据'); // eslint-disable-line
        } catch (error) {
            Timer.stop('fileOpenElapsed');
            Timer.stop('regionLoadElapsed');
            Timer.stop('renderRegionElapsed');
            Timer.stop('formulaLoadElapsed');
            this.getOpenElapsed(true);
        }
    }
}

至此，保存的时候保存给服务端的json（包括上次保存的时候的拖拽区域的数据）就已经转换到spread可以看到了

更新渲染拖拽区域

因为拖拽区域是实时发生变化的，所以在初始化的时候我们需要去更新拖拽区域
这个时候就分为两种情况

前端渲染

调用runAllArea去调query接口获得最新的拖拽区域的数据
首先会处理删除了字段的没有权限的等然后组成数据
之后进行调接口的函数

if (this.paramList.length > 3) {
    this.spreadQuery(this.paramList.splice(0, 3));
} else {
    this.spreadQuery(this.paramList, 'all');
}

若是拖拽区域<=3的，则是直接循环请求query接口
若是拖拽区域>3的也是前三个请求，然后一个一个请求（最终我看来还是一个一个去请求的，不懂为什么要这样设计）
等待query接口全部返回（不管成功还是时报）之后则进行拖拽区域的渲染

调用Bus.$emit('show-query-data', _.resObj, _.reg, _.sheetIndex);进行循环依次渲染

渲染，渲染的文件在src\views\Pages\SpreadExcel\mixins\queryResultHandle.js

渲染的时候数据放大没有遮盖的区域则直接渲染，接着渲染下一个
遇到放大的区域有其他数据的则需要弹窗确认的区域，先放在一个数组，等到拖拽区域弹窗关闭的时候再依次弹窗确认是否需要放大然后渲染数据

最后再启动公式等一些列收尾工作。
至此，前端渲染部分就结束了~

服务端渲染

服务端渲染则是为了减少query请求，前端渲染的弊端

一个拖拽区域请求一次query接口，可能请求很多
重复的数据集可能数据一样，但是也会请求多次
依赖于客户端这边的网络，电脑等情况，具有不确定性

若是服务端渲染则这些工作交给服务器来做，则不更多依赖用户
会在根据get请求的参数返回runBoards.obj.analysisConfig来判断是前端渲染还是后端渲染
渲染过程：
请求心跳接口checkHeartBeat使用settimeout来请求后端接口，根据后端返回的状态来判断是否继续请求，或者是返回成功或者失败的状态
状态

success 成功，直接渲染
error 失败根据hasData判断是否请求query
waiting 继续请求

前端请求超时也继续请求query

成功后直接渲染后端渲染好的spread，否则继续渲染前端渲染的步骤

服务端渲染流程图

image.png

2021-11-18