波谱拟合的实现——Vue篇-创新互联

这篇文章运用简单易懂的例子给大家介绍波谱拟合的实现——Vue篇，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

主页面-功能介绍

波谱拟合用来对某种材料或物质的谱图进行识别和分析，每种物质可以有多种成分，每种成分用component1、component2...表示，用Add another component和Remove component来控制每种成分的增加和删除，每种成分由多种原子核构成，即nuclei，用Add nucleus和Remove nucleus来控制每种成分内原子核数量，每新增一个原子核，波谱就会分裂一次，谱峰数量由（1->2->4->8...）依次分裂。另外可以通过更改默认参数，改变波谱形态，成分参数中：Relative amount表示每种成分占绘图分量的百分比，百分比之和不超过100，giso用来计算分裂的中心位置，LineWidth用来控设置谱峰到谱谷的宽度，%Lorentzian表示谱峰形态，一共两种形态，高斯和洛伦兹，两者之和为100；原子核参数：No of equivalent nuclei用来改变原子核个数，如果一种成分内包含很多个一模一样的参数时，就可以通过改变这个参数实现，Nuclear spin用来改变原子核种类，Hyperfine用来设置分裂后两峰之间的宽度。

再来一张图：

每种成分数量和参数、每种成分内每种原子核数量和参数设置好后，对数据进行处理，由三种结果，卷积、积分、二重积分，那就来看看数据的处理逻辑吧~

从数据流角度，主要进行三步处理：数据->数据裂变->光谱计算->绘图，左边是算法实现所需的参数、右边是对数据及每个步骤的描述。

代码实现

遇到一个坑，一开始写demo的时候用的vue+Ant design of vue，在select等其他组件的使用上都是正常的，但是在input number中就很变态了，给input number绑定的change事件，用户在输入两位以上数据的时候，change事件会触发两次！！！想避免这个问题，于是用blur事件，问题又来了，因为这个页面中组件的生成和删除需要动态渲染，并且根据前面的介绍很容易知道组件的渲染是有两层结构的，那么在用户进行点击或输入操作的时候，就需要传递一个参数（用来定位是哪个component以及每个component下面对应的某一个nucle等等），能力有限( ╯□╰ )目前我没有找到解决办法，于是转elementUI框架。

组件的动态渲染用了一个比较巧妙的办法，一开始我打算用render来写，后来从部门大神那里学到通过遍历列表进行渲染，脑子之间还是有差距的。。。

Component {{i+1}}.