어떻게 vue 를 이용 하여 스펙트럼 적합 을 실현 합 니까?

홈 페이지-기능 소개
소 백 이 가 직장 에 처음 들 어 왔 을 때 첫 번 째 정 리 는 쓸데없는 말 이 많 으 니 가볍게 뿌 려 주세요~

스펙트럼 의합 은 특정한 재료 나 물질의 스펙트럼 을 식별 하고 분석 하 는 데 사용 된다.각 물질 은 여러 가지 성분 이 있 을 수 있 고 각 성분 은 component 1,component 2 로 표시 한다.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 이벤트 로 문제 가 다시 발생 했 습 니 다.이 페이지 에서 구성 요소 의 생 성과 삭 제 는 동적 렌 더 링 이 필요 하기 때 문 입 니 다.또한 앞의 소개 에 따 르 면 구성 요소 의 렌 더 링 이 2 층 구조 라 는 것 을 쉽게 알 수 있 습 니 다.그러면 사용자 가 클릭 하거나 입력 할 때...하나의 매개 변 수 를 전달 해 야 합 니 다.(어떤 component 인지,그리고 모든 component 아래 에 대응 하 는 nucle 등)능력 에 한계 가 있 습 니 다.(s□t)현재 해결 방법 을 찾 지 못 해서 element UI 프레임 워 크 를 돌 립 니 다.
구성 요소 의 동적 렌 더 링 은 비교적 교묘 한 방법 을 사 용 했 습 니 다.처음에 저 는 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 에서 매개 변 수 는 모두 1 차원 배열 을 사용 합 니 다.chenge 사건 은 1 차원 배열 의 하 표를 전달 해 야 합 니 다.component 안의 nucleui 는 모두 2 차원 배열 을 사용 하고 change 사건 은 2 차원 배열 의 하 표를 전달 해 야 합 니 다.
상기 매개 변수 정 의 를 소개 합 니 다.다음은 데이터 처리 입 니 다.

//         
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, 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
  },

//               
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 가 스펙트럼 적합 을 실현 하 는 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!