主頁面-功能介紹

小白初入職場第一篇總結，廢話比較多，求輕噴~

波譜擬合用來對某種材料或物質的譜圖進行識別和分析，每種物質可以有多種成分，每種成分用component1、component2...表示，用Add another component和Remove component來控制每種成分的增加和刪除，每種成分由多種原子核構成，即nuclei，用Add nucleus和Removenucleus來控制每種成分內原子核數量，每新增一個原子核，波譜就會分裂一次，譜峰數量由（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來寫，後來從部門大神那裡學到通過遍歷列表進行渲染，腦子之間還是有差距的。。。

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

同理原子核的動態渲染也是這麼實現的：

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

然後每次增加和刪除只需要運算元組列表的長度即可~

各引數的繫結：component中引數均使用一維陣列，chenge事件需傳遞一維陣列的下標，component內的nucleui均使用二維陣列，change事件需傳遞二維陣列的下標。

以上介紹引數定義，接下來是資料處理：

// 首先計算裂變資料
stickspectrum (w) {
   // console.log('元件資訊',w)
   const stick = new Array(2) // 返回包含stick[0]的stick光譜陣列，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) //分裂後的光譜資料長度
    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,stick[1][i] + this.r[w].hfc[j] * (k + 1))
      stick[0].splice(i + k + 1,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
  },

// 再對裂變後的資料進行光譜計算
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)// 第一種光譜繪圖位置資料
    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) // 有多少積分高於理論(只發生在非常尖銳的線)
    for (let j = 1; j < this.No_integers; j++) {
     this.XYdoubleint[0][j][1] += mm > 1 ? tmpdoubleint[j] / mm : tmpdoubleint[j] // 第三種頻譜資料 如果二重積分高於理論，將其標準化
     this.XYint[0][j][1] += tmpint[j] // 第二種頻譜資料
    }
   }
   // console.log('XYint',this.XYint[0])
  },

計算完成的光譜，返回三種資料XY、XYint、XYdouble，然後就是繪圖~

到此這篇關於如何利用vue實現波譜擬合的文章就介紹到這了,更多相關vue實現波譜擬合內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！