电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

如何利用vue實現(xiàn)波譜擬合詳解

瀏覽:6日期:2022-11-05 17:24:39

主頁面-功能介紹

小白初入職場第一篇總結(jié),廢話比較多,求輕噴~

如何利用vue實現(xiàn)波譜擬合詳解

波譜擬合用來對某種材料或物質(zhì)的譜圖進(jìn)行識別和分析,每種物質(zhì)可以有多種成分,每種成分用component1、component2...表示,用Add another component和Remove component來控制每種成分的增加和刪除,每種成分由多種原子核構(gòu)成,即nuclei,用Add nucleus和Remove nucleus來控制每種成分內(nèi)原子核數(shù)量,每新增一個原子核,波譜就會分裂一次,譜峰數(shù)量由(1->2->4->8...)依次分裂。另外可以通過更改默認(rèn)參數(shù),改變波譜形態(tài),成分參數(shù)中:Relative amount表示每種成分占繪圖分量的百分比,百分比之和不超過100,giso用來計算分裂的中心位置,LineWidth用來控設(shè)置譜峰到譜谷的寬度,%Lorentzian表示譜峰形態(tài),一共兩種形態(tài),高斯和洛倫茲,兩者之和為100;原子核參數(shù):No of equivalent nuclei用來改變原子核個數(shù),如果一種成分內(nèi)包含很多個一模一樣的參數(shù)時,就可以通過改變這個參數(shù)實現(xiàn),Nuclear spin用來改變原子核種類,Hyperfine用來設(shè)置分裂后兩峰之間的寬度。

再來一張圖:

如何利用vue實現(xiàn)波譜擬合詳解

每種成分?jǐn)?shù)量和參數(shù)、每種成分內(nèi)每種原子核數(shù)量和參數(shù)設(shè)置好后,對數(shù)據(jù)進(jìn)行處理,由三種結(jié)果,卷積、積分、二重積分,那就來看看數(shù)據(jù)的處理邏輯吧~

如何利用vue實現(xiàn)波譜擬合詳解

從數(shù)據(jù)流角度,主要進(jìn)行三步處理:數(shù)據(jù)->數(shù)據(jù)裂變->光譜計算->繪圖,左邊是算法實現(xiàn)所需的參數(shù)、右邊是對數(shù)據(jù)及每個步驟的描述。

代碼實現(xiàn)

遇到一個坑,一開始寫demo的時候用的vue+Ant design of vue,在select等其他組件的使用上都是正常的,但是在input number中就很變態(tài)了,給input number綁定的change事件,用戶在輸入兩位以上數(shù)據(jù)的時候,change事件會觸發(fā)兩次!!!想避免這個問題,于是用blur事件,問題又來了,因為這個頁面中組件的生成和刪除需要動態(tài)渲染,并且根據(jù)前面的介紹很容易知道組件的渲染是有兩層結(jié)構(gòu)的,那么在用戶進(jìn)行點擊或輸入操作的時候,就需要傳遞一個參數(shù)(用來定位是哪個component以及每個component下面對應(yīng)的某一個nucle等等),能力有限( ?□? )目前我沒有找到解決辦法,于是轉(zhuǎn)elementUI框架。

組件的動態(tài)渲染用了一個比較巧妙的辦法,一開始我打算用render來寫,后來從部門大神那里學(xué)到通過遍歷列表進(jìn)行渲染,腦子之間還是有差距的。。。

<div v-for='(Con, i) in componentList' :key='Con[i]'><strong>Component {{i+1}}.</div>

同理原子核的動態(tài)渲染也是這么實現(xiàn)的:

<div v-for='(li, j) in nucleusList[i]' :key='li[j]'>{{j+1}}. No of equivalent nuclei:</div>

然后每次增加和刪除只需要操作數(shù)組列表的長度即可~

各參數(shù)的綁定:component中參數(shù)均使用一維數(shù)組,chenge事件需傳遞一維數(shù)組的下標(biāo),component內(nèi)的nucleui均使用二維數(shù)組,change事件需傳遞二維數(shù)組的下標(biāo)。

以上介紹參數(shù)定義,接下來是數(shù)據(jù)處理:

// 首先計算裂變數(shù)據(jù)stickspectrum (w) { // console.log(’組件信息’, w) const stick = new Array(2) // 返回包含stick[0]的stick光譜數(shù)組,stick[1]是位置 stick[0] = new Array()// 光譜強度 stick[1] = new Array()// 光譜位置 stick[1][0] = this.h * this.frequency / (this.r[w].g * this.mu) for (var j = 0; j < this.r[w].equiv.length; j++) { // console.log(’stick[0].length’, stick[0].length) //分裂后的光譜數(shù)據(jù)長度 for (var i = stick[0].length - 1; i >= 0; i--) { stick[0][i] /= Math.pow((2 * this.r[w].spin[j] + 1), this.r[w].equiv[j]) stick[1][i] -= this.r[w].equiv[j] * this.r[w].spin[j] * this.r[w].hfc[j] for (var k = 0; k < 2 * this.r[w].equiv[j] * this.r[w].spin[j]; k++) { stick[1].splice(i + k + 1, 0, stick[1][i] + this.r[w].hfc[j] * (k + 1)) stick[0].splice(i + k + 1, 0, 0) } for (var k = 0; k < this.r[w].equiv[j]; k++) { for (var m = i + 2 * this.r[w].spin[j] * k; m >= i; m--) { for (var ii = 0; ii < 2 * this.r[w].spin[j]; ii++) {stick[0][m + ii + 1] += stick[0][m] } } } } } return stick },

// 再對裂變后的數(shù)據(jù)進(jìn)行光譜計算spectrum (stick) { let xmin = Infinity; let xmax = 0 for (var k = 0; k < this.r.length; k++) { xmin = Math.min(Math.min.apply(Math, stick[k][1]) - 10 * this.r[k].width, xmin) xmax = Math.max(Math.max.apply(Math, stick[k][1]) + 10 * this.r[k].width, xmax) } const tmp = xmax - xmin xmax += tmp * 0.05 xmin -= tmp * 0.05 const step = (xmax - xmin) / (this.No_integers - 1) for (let i = 0; i < this.No_integers; i++) { this.XY[0][i][0] = xmin + step * i this.XY[0][i][1] = 0 this.XYint[0][i][0] = this.XY[0][i][0] this.XYint[0][i][1] = 0 this.XYdoubleint[0][i][0] = this.XY[0][i][0] this.XYdoubleint[0][i][1] = 0 } for (let k = 0; k < this.r.length; k++) { // 分量累加 const sticks = new Array(this.No_integers) for (var i = 0; i < stick[k][0].length; i++) { var j = Math.round((stick[k][1][i] - xmin) / step) sticks[j] = sticks[j] ? sticks[j] + stick[k][0][i] : stick[k][0][i] } const tmp = new Array(this.No_integers)// 第一種光譜繪圖位置數(shù)據(jù) let ind = 0 for (var i = 0; i < this.No_integers; i++) { if (sticks[i]) { // 建立峰值索引——sticks[i]===1即峰值所在。 tmp[ind] = i ind++ } } const tmpint = new Array(this.No_integers) // 用來保存每個分量的積分 const tmpdoubleint = new Array(this.No_integers) // 用來保存每個分量的二重積分 for (var i = 0; i < this.No_integers; i++) tmpint[i] = 0 tmpdoubleint[0] = 0 const rwid = Number(this.r[k].width) const rwid2 = Math.pow(rwid, 2) const lortmp = Number(this.r[k].percent) * Number(this.r[k].lor) / 100 * Math.sqrt(3) / Math.PI // 洛倫茲線乘積 const gaustmp = Number(this.r[k].percent) * (100 - Number(this.r[k].lor)) / 100 * Math.sqrt(2 / Math.PI) // 高斯線乘法器 for (let i = 0; i < this.No_integers; i++) { for (let j = 0; j < ind; j++) { const delta = this.XY[0][i][0] - this.XY[0][tmp[j]][0] const delta2 = Math.pow(delta, 2) if ((rwid > step && Math.abs(-0.5 * rwid - delta) < 0.5 * step) || (rwid < step && -0.5 * rwid - delta > 0 && -0.5 * rwid - delta < step)) { this.XY[0][i][1] += sticks[tmp[j]] * (lortmp * 0.5 / rwid2 + gaustmp * 2 / Math.sqrt(Math.E) / rwid2) } else if ((rwid > step && Math.abs(0.5 * rwid - delta) < 0.5 * step) || (rwid < step && delta - 0.5 * rwid > 0 && delta - 0.5 * rwid < step)) { this.XY[0][i][1] -= sticks[tmp[j]] * (lortmp * 0.5 / rwid2 + gaustmp * 2 / Math.sqrt(Math.E) / rwid2) } else { this.XY[0][i][1] += sticks[tmp[j]] * (gaustmp * (-4) / rwid / rwid2 * delta * Math.exp(-2 * delta2 / rwid2) + lortmp * (-delta) * rwid / Math.pow((delta2 + 3 / 4 * rwid2), 2)) // 其他情況下的正常計算,高斯+洛倫茲 } this.dataarray = [this.XY, this.XYint, this.XYdoubleint] tmpint[i] += sticks[tmp[j]] * (gaustmp * Math.exp(-2 * delta2 / rwid2) / rwid + lortmp / 2 / rwid / (0.75 + delta2 / rwid2)) // 高斯+洛倫茲積分-明確計算以避免積分誤差 } } for (let j = 1; j < this.No_integers; j++) { tmpdoubleint[j] = tmpdoubleint[j - 1] + step * (tmpint[j] + tmpint[j - 1]) / 2 } // 二重積分 // console.log(’二重積分’, tmpdoubleint) const mm = tmpdoubleint[this.No_integers - 1] / Number(this.r[k].percent) // 有多少積分高于理論(只發(fā)生在非常尖銳的線) for (let j = 1; j < this.No_integers; j++) { this.XYdoubleint[0][j][1] += mm > 1 ? tmpdoubleint[j] / mm : tmpdoubleint[j] // 第三種頻譜數(shù)據(jù) 如果二重積分高于理論,將其標(biāo)準(zhǔn)化 this.XYint[0][j][1] += tmpint[j] // 第二種頻譜數(shù)據(jù) } } // console.log(’XYint’, this.XYint[0]) },

計算完成的光譜,返回三種數(shù)據(jù)XY、XYint、XYdouble,然后就是繪圖~

到此這篇關(guān)于如何利用vue實現(xiàn)波譜擬合的文章就介紹到這了,更多相關(guān)vue實現(xiàn)波譜擬合內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 电子厂招聘_工厂招聘_普工招聘_小时工招聘信息平台-众立方招工网 | 橡胶粉碎机_橡胶磨粉机_轮胎粉碎机_轮胎磨粉机-河南鼎聚重工机械制造有限公司 | 郑州水质检测中心_井水检测_河南废气检测_河南中环嘉创检测 | 阻燃剂-氢氧化镁-氢氧化铝-沥青阻燃剂-合肥皖燃新材料 | 亚洲工业智能制造领域专业门户网站 - 亚洲自动化与机器人网 | 橡胶接头_橡胶软接头_可曲挠橡胶接头-巩义市创伟机械制造有限公司 | 长沙印刷厂-包装印刷-画册印刷厂家-湖南省日大彩色印务有限公司 青州搬家公司电话_青州搬家公司哪家好「鸿喜」青州搬家 | 搬运设备、起重设备、吊装设备—『龙海起重成套设备』 | 郑州巴特熔体泵有限公司专业的熔体泵,熔体齿轮泵与换网器生产厂家 | 新疆系统集成_新疆系统集成公司_系统集成项目-新疆利成科技 | 储气罐,真空罐,缓冲罐,隔膜气压罐厂家批发价格,空压机储气罐规格型号-上海申容压力容器集团有限公司 | AR开发公司_AR增强现实_AR工业_AR巡检|上海集英科技 | 密集架-手摇-智能-移动-价格_内蒙古档案密集架生产厂家 | 北京公寓出租网-北京酒店式公寓出租平台| 精密钢管,冷拔精密无缝钢管,精密钢管厂,精密钢管制造厂家,精密钢管生产厂家,山东精密钢管厂家 | 闭端端子|弹簧螺式接线头|防水接线头|插线式接线头|端子台|电源线扣+护线套|印刷电路板型端子台|金笔电子代理商-上海拓胜电气有限公司 | 绿萝净除甲醛|深圳除甲醛公司|测甲醛怎么收费|培训机构|电影院|办公室|车内|室内除甲醛案例|原理|方法|价格立马咨询 | 背压阀|减压器|不锈钢减压器|减压阀|卫生级背压阀|单向阀|背压阀厂家-上海沃原自控阀门有限公司 本安接线盒-本安电路用接线盒-本安分线盒-矿用电话接线盒-JHH生产厂家-宁波龙亿电子科技有限公司 | 电磁流量计厂家_涡街流量计厂家_热式气体流量计-青天伟业仪器仪表有限公司 | 北钻固控设备|石油钻采设备-石油固控设备厂家 | 有机肥设备生产制造厂家,BB掺混肥搅拌机、复合肥设备生产线,有机肥料全部加工设备多少钱,对辊挤压造粒机,有机肥造粒设备 -- 郑州程翔重工机械有限公司 | 回转支承-转盘轴承-回转驱动生产厂家-洛阳隆达轴承有限公司 | 山东PE给水管厂家,山东双壁波纹管,山东钢带增强波纹管,山东PE穿线管,山东PE农田灌溉管,山东MPP电力保护套管-山东德诺塑业有限公司 | 锂电池砂磨机|石墨烯砂磨机|碳纳米管砂磨机-常州市奥能达机械设备有限公司 | 宁夏档案密集柜,智能密集柜,电动手摇密集柜-盛隆柜业宁夏档案密集柜厂家 | 珠海冷却塔降噪维修_冷却塔改造报价_凉水塔风机维修厂家- 广东康明节能空调有限公司 | 永嘉县奥阳陶瓷阀门有限公司| 包装设计公司,产品包装设计|包装制作,包装盒定制厂家-汇包装【官方网站】 | 河南彩印编织袋,郑州饲料编织袋定制,肥料编织袋加工厂-盛军塑业 河南凯邦机械制造有限公司 | 电机保护器-电动机综合保护器-上海硕吉电器有限公司 | 洛阳防爆合格证办理-洛阳防爆认证机构-洛阳申请国家防爆合格证-洛阳本安防爆认证代办-洛阳沪南抚防爆电气技术服务有限公司 | 拉力机-拉力试验机-万能试验机-电子拉力机-拉伸试验机-剥离强度试验机-苏州皖仪实验仪器有限公司 | POS机官网 - 拉卡拉POS机免费办理|官网在线申请入口 | 东亚液氮罐-液氮生物容器-乐山市东亚机电工贸有限公司 | 【直乐】河北石家庄脊柱侧弯医院_治疗椎间盘突出哪家医院好_骨科脊柱外科专业医院_治疗抽动症/关节病骨伤权威医院|排行-直乐矫形中医医院 | 室内室外厚型|超薄型|非膨胀型钢结构防火涂料_隧道专用防火涂料厂家|电话|价格|批发|施工 | 动力配电箱-不锈钢配电箱-高压开关柜-重庆宇轩机电设备有限公司 聚天冬氨酸,亚氨基二琥珀酸四钠,PASP,IDS - 远联化工 | 制氮设备_PSA制氮机_激光切割制氮机_氮气机生产厂家-苏州西斯气体设备有限公司 | 杜康白酒加盟_杜康酒代理_杜康酒招商加盟官网_杜康酒厂加盟总代理—杜康酒神全国运营中心 | 青岛球场围网,青岛车间隔离网,青岛机器人围栏,青岛水源地围网,青岛围网,青岛隔离栅-青岛晟腾金属制品有限公司 | 钢板仓,大型钢板仓,钢板库,大型钢板库,粉煤灰钢板仓,螺旋钢板仓,螺旋卷板仓,骨料钢板仓 |