电子表格初始化流程
拖拽区域加载弹窗
在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，否则继续渲染前端渲染的步骤
服务端渲染流程图
