WIP: 自建台站按设计图修改优化
This commit is contained in:
parent
a445338e75
commit
93a2f3ed16
|
|
@ -1,5 +1,8 @@
|
|||
<template>
|
||||
<div class="custom-chart" ref="containerRef" :style="{ height: height + 'px' }"></div>
|
||||
<div class="custom-chart">
|
||||
<div class="custom-chart-container" ref="containerRef" :style="{ height: height + 'px' }"></div>
|
||||
<resize-observer v-if="autoresize" @notify="resize" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
|
@ -21,6 +24,10 @@ export default {
|
|||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
autoresize: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
|
|
@ -54,6 +61,7 @@ export default {
|
|||
|
||||
resize() {
|
||||
this._chart && this._chart.resize()
|
||||
this.$emit('resize')
|
||||
},
|
||||
|
||||
// 获取echart实例
|
||||
|
|
@ -85,5 +93,9 @@ export default {
|
|||
<style lang="less" scoped>
|
||||
.custom-chart {
|
||||
height: 100%;
|
||||
|
||||
&-container {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,41 +7,31 @@
|
|||
Detailed-Information
|
||||
<beta-gamma-detailed-infomation slot="content" :data="spectrumData" />
|
||||
</pop-over-with-icon>
|
||||
<pop-over-with-icon placement="bottomLeft">
|
||||
QC Flags
|
||||
<beta-gamma-qc-flags slot="content" :data="qcFlags" @click="handleQcFlagClick" />
|
||||
</pop-over-with-icon>
|
||||
<custom-select v-model="spectraType" :options="SampleType" @change="changeChartByType" style="width: 246px" class="sample-select"></custom-select>
|
||||
<div class="spectrum-analysis-sub-operators-roi">
|
||||
<div class="spectrum-analysis-sub-operators-roi-name">ROI1</div>
|
||||
<custom-select
|
||||
v-model="spectraType"
|
||||
:options="SampleType"
|
||||
@change="changeChartByType"
|
||||
style="width: 246px"
|
||||
class="sample-select"
|
||||
></custom-select>
|
||||
<div class="spectrum-analysis-sub-operators-roi" v-for="(_, index) in 4" :key="index">
|
||||
<div class="spectrum-analysis-sub-operators-roi-name" :style="{ color: ROIColors[index] }">
|
||||
ROI{{ index + 1 }}
|
||||
</div>
|
||||
<a-input-group>
|
||||
<a-input v-model:value="roiValues[0]" class="spectrum-analysis-sub-operators-roi-input" placeholder="Beta1" />
|
||||
<a-input
|
||||
type="number"
|
||||
v-model="roiParamList[index][0]"
|
||||
class="spectrum-analysis-sub-operators-roi-input"
|
||||
placeholder="Beta1"
|
||||
/>
|
||||
<a-input class="spectrum-analysis-sub-operators-roi-split site-input-split" placeholder="," disabled />
|
||||
<a-input v-model:value="roiValues[1]" class="spectrum-analysis-sub-operators-roi-input site-input-right" placeholder="Beta2" />
|
||||
</a-input-group>
|
||||
</div>
|
||||
<div class="spectrum-analysis-sub-operators-roi">
|
||||
<div class="spectrum-analysis-sub-operators-roi-name">ROI2</div>
|
||||
<a-input-group>
|
||||
<a-input v-model:value="roiValues[2]" class="spectrum-analysis-sub-operators-roi-input" placeholder="Beta1" />
|
||||
<a-input class="spectrum-analysis-sub-operators-roi-split site-input-split" placeholder="," disabled />
|
||||
<a-input v-model:value="roiValues[3]" class="spectrum-analysis-sub-operators-roi-input site-input-right" placeholder="Beta2" />
|
||||
</a-input-group>
|
||||
</div>
|
||||
<div class="spectrum-analysis-sub-operators-roi">
|
||||
<div class="spectrum-analysis-sub-operators-roi-name">ROI3</div>
|
||||
<a-input-group>
|
||||
<a-input v-model:value="roiValues[4]" class="spectrum-analysis-sub-operators-roi-input" placeholder="Beta1" />
|
||||
<a-input class="spectrum-analysis-sub-operators-roi-split site-input-split" placeholder="," disabled />
|
||||
<a-input v-model:value="roiValues[5]" class="spectrum-analysis-sub-operators-roi-input site-input-right" placeholder="Beta2" />
|
||||
</a-input-group>
|
||||
</div>
|
||||
<div class="spectrum-analysis-sub-operators-roi">
|
||||
<div class="spectrum-analysis-sub-operators-roi-name">ROI4</div>
|
||||
<a-input-group>
|
||||
<a-input v-model:value="roiValues[6]" class="spectrum-analysis-sub-operators-roi-input" placeholder="Beta1" />
|
||||
<a-input class="spectrum-analysis-sub-operators-roi-split site-input-split" placeholder="," disabled />
|
||||
<a-input v-model:value="roiValues[7]" class="spectrum-analysis-sub-operators-roi-input site-input-right" placeholder="Beta2" />
|
||||
<a-input
|
||||
type="number"
|
||||
v-model="roiParamList[index][1]"
|
||||
class="spectrum-analysis-sub-operators-roi-input site-input-right"
|
||||
placeholder="Beta2"
|
||||
/>
|
||||
</a-input-group>
|
||||
</div>
|
||||
<div class="spectrum-analysis-sub-operators-button" @click="reDrawRectOri">Update</div>
|
||||
|
|
@ -50,33 +40,46 @@
|
|||
|
||||
<!-- 主体部分 -->
|
||||
<div class="beta-gamma-analysis-main">
|
||||
<!-- 中间图表部分 -->
|
||||
<div class="beta-gamma-analysis-main-charts">
|
||||
<div class="beta-gamma-analysis-main-charts-left">
|
||||
<beta-gamma-chart-container>
|
||||
<template slot="title"> Beta-Gamma Spectrum: {{ currSpectrum }} </template>
|
||||
<beta-gamma-spectrum ref="betaChartRef" :betaEnergyData="betaEnergyData" :roiValues="roiValues" :gammaEnergyData="gammaEnergyData" :histogramDataList="histogramDataList" :boundary="boundaryList" :isLoading.sync="isLoading" :currIdx="currIdx" @refreshRoi="refreshRoi" />
|
||||
</beta-gamma-chart-container>
|
||||
</div>
|
||||
<div class="beta-gamma-analysis-main-charts-right">
|
||||
<beta-gamma-chart-container>
|
||||
|
||||
<template slot="title"> ROI LIMITS </template>
|
||||
<roi-limits ref="RoiChartRef" :ROILists="ROILists" :ROIAnalyzeLists="ROIAnalyzeLists" :gammaEnergyData="gammaEnergyData" />
|
||||
</beta-gamma-chart-container>
|
||||
<!-- 底部显示 -->
|
||||
<div class="beta-gamma-analysis-main-bottom">
|
||||
<div class="beta-gamma-analysis-main-bottom-left">
|
||||
<beta-gamma-chart-container>
|
||||
<template slot="title"> Result display </template>
|
||||
<result-display-beta :data="resultDisplay" @sendFlag="handleGetFlag"></result-display-beta>
|
||||
</beta-gamma-chart-container>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部显示结束 -->
|
||||
</div>
|
||||
<!-- 左侧图表部分 -->
|
||||
<div class="beta-gamma-analysis-main-left">
|
||||
<beta-gamma-chart-container>
|
||||
<template slot="title"> Beta-Gamma Spectrum: {{ currSpectrum }} </template>
|
||||
<beta-gamma-spectrum
|
||||
ref="betaChartRef"
|
||||
:betaEnergyData="betaEnergyData"
|
||||
:gammaEnergyData="gammaEnergyData"
|
||||
:histogramDataList="histogramDataList"
|
||||
:boundary="boundaryList"
|
||||
:isLoading.sync="isLoading"
|
||||
@refreshRoi="refreshRoi"
|
||||
@boundaryChange="handleBoundaryChange"
|
||||
/>
|
||||
</beta-gamma-chart-container>
|
||||
</div>
|
||||
<!-- 中间图表部分结束 -->
|
||||
<!-- 左侧图表结束 -->
|
||||
<!-- 右侧开始 -->
|
||||
<div class="beta-gamma-analysis-main-right">
|
||||
<beta-gamma-chart-container>
|
||||
<template slot="title"> ROI LIMITS </template>
|
||||
<roi-limits
|
||||
ref="RoiChartRef"
|
||||
:ROILists="ROILists"
|
||||
:ROIAnalyzeLists="ROIAnalyzeLists"
|
||||
:gammaEnergyData="gammaEnergyData"
|
||||
/>
|
||||
</beta-gamma-chart-container>
|
||||
<!-- 底部显示 -->
|
||||
<div class="beta-gamma-analysis-main-bottom">
|
||||
<div class="beta-gamma-analysis-main-bottom-left">
|
||||
<beta-gamma-chart-container>
|
||||
<template slot="title"> Result display </template>
|
||||
<result-display-beta :data="resultDisplay" @sendFlag="handleGetFlag"></result-display-beta>
|
||||
</beta-gamma-chart-container>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部显示结束 -->
|
||||
</div>
|
||||
<!-- 右侧结束 -->
|
||||
</div>
|
||||
<!-- 主体部分结束 -->
|
||||
</a-spin>
|
||||
|
|
@ -91,12 +94,14 @@ import CustomSelect from '@/components/CustomSelect/index.vue'
|
|||
import BetaGammaChartContainer from './components/BetaGammaChartContainer.vue'
|
||||
import ResultDisplayBeta from './components/ResultDisplay-Beta.vue'
|
||||
import BetaGammaSpectrum from './components/BetaGammaSpectrum.vue'
|
||||
import RoiLimits from './components/RoiLimits.vue'
|
||||
import RoiLimits from './components/RoiLimits/RoiLimits.vue'
|
||||
import RoiParam from './components/RoiParam.vue'
|
||||
import axios from 'axios'
|
||||
import store from '@/store/'
|
||||
import { getAction, postAction, deleteAction } from '../../api/manage'
|
||||
import { addSampleData, getSampleData } from '@/utils/SampleStore'
|
||||
import { addSampleData, getSampleData, updateSampleData } from '@/utils/SampleStore'
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
const SampleType = [
|
||||
{
|
||||
label: 'Sample Data',
|
||||
|
|
@ -107,6 +112,11 @@ const SampleType = [
|
|||
value: 'detBg',
|
||||
},
|
||||
]
|
||||
|
||||
const InitialRoiParamList = new Array(4).fill([0, 0])
|
||||
|
||||
const ROIColors = ['#16d5e6', '#34a1ff', '#66e411', '#fdaa1a']
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PopOverWithIcon,
|
||||
|
|
@ -126,6 +136,8 @@ export default {
|
|||
},
|
||||
data() {
|
||||
this.SampleType = SampleType
|
||||
this.ROIColors = ROIColors
|
||||
|
||||
return {
|
||||
currSpectrum: 'Sample',
|
||||
isLoading: false,
|
||||
|
|
@ -136,13 +148,10 @@ export default {
|
|||
betaEnergyData: [],
|
||||
ROILists: [],
|
||||
ROIAnalyzeLists: [],
|
||||
roiParamList: [],
|
||||
roiParamList: cloneDeep(InitialRoiParamList),
|
||||
boundaryList: [],
|
||||
sampleDetail: {},
|
||||
qcFlags: {},
|
||||
resultDisplay: [],
|
||||
currIdx: 0,
|
||||
roiValues:[],
|
||||
timerStamp: Date.now(),
|
||||
}
|
||||
},
|
||||
|
|
@ -158,6 +167,7 @@ export default {
|
|||
this.sampleDetail = data
|
||||
this.emitGetFiles(data)
|
||||
}
|
||||
// this.ROIAnalyzeLists = data.ROIAnalyzeLists
|
||||
} else {
|
||||
if (newVal.sampleId) {
|
||||
this.getSampleDetail()
|
||||
|
|
@ -174,71 +184,84 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
async getAnalyzeCurrentSpectrum() {
|
||||
|
||||
const { inputFileName, detFileName } = this.sample
|
||||
var userId = store.getters.userInfo.id
|
||||
const { success, result, message } = await postAction(`/selfStation/Reprocessing?fileName=${inputFileName}&processKey=${userId}_${this.timerStamp}`)
|
||||
console.log(userId,success, result, message)
|
||||
if(success){
|
||||
var _result = []
|
||||
_result.push(result.ROI1)
|
||||
_result.push(result.ROI2)
|
||||
_result.push(result.ROI3)
|
||||
_result.push(result.ROI4)
|
||||
this.ROIAnalyzeLists = _result
|
||||
try {
|
||||
const { inputFileName, detFileName } = this.sample
|
||||
const userId = store.getters.userInfo.id
|
||||
this.isLoading = true
|
||||
const { success, result, message } = await postAction(
|
||||
`/selfStation/Reprocessing?fileName=${inputFileName}&processKey=${userId}_${this.timerStamp}`
|
||||
)
|
||||
console.log(userId, success, result, message)
|
||||
if (success) {
|
||||
const _result = []
|
||||
_result.push(result.ROI1)
|
||||
_result.push(result.ROI2)
|
||||
_result.push(result.ROI3)
|
||||
_result.push(result.ROI4)
|
||||
this.ROIAnalyzeLists = _result
|
||||
updateSampleData({
|
||||
inputFileName,
|
||||
key: 'ROIAnalyzeLists',
|
||||
data: _result,
|
||||
})
|
||||
}
|
||||
let XeData = [
|
||||
{
|
||||
sampleId: null,
|
||||
idAnalysis: null,
|
||||
nuclideName: 'Xe131m',
|
||||
conc: -0.049,
|
||||
concErr: 0.04272,
|
||||
mdc: 0.14539,
|
||||
lc: 0.06362626536110005,
|
||||
nidFlag: 0,
|
||||
moddate: null,
|
||||
color: 'red',
|
||||
},
|
||||
{
|
||||
sampleId: null,
|
||||
idAnalysis: null,
|
||||
nuclideName: 'Xe133',
|
||||
conc: 0.07727,
|
||||
concErr: 0.0631,
|
||||
mdc: 0.23981,
|
||||
lc: 0.09916332268275692,
|
||||
nidFlag: 0,
|
||||
moddate: null,
|
||||
color: '#ffcc30',
|
||||
},
|
||||
{
|
||||
sampleId: null,
|
||||
idAnalysis: null,
|
||||
nuclideName: 'Xe133m',
|
||||
conc: -0.07186,
|
||||
concErr: 0.03596,
|
||||
mdc: 0.11014,
|
||||
lc: 0.044521536189968125,
|
||||
nidFlag: 0,
|
||||
moddate: null,
|
||||
color: 'red',
|
||||
},
|
||||
{
|
||||
sampleId: null,
|
||||
idAnalysis: null,
|
||||
nuclideName: 'Xe135',
|
||||
conc: 0.26636,
|
||||
concErr: 0.23193,
|
||||
mdc: 0.77578,
|
||||
lc: 0.3655879636569543,
|
||||
nidFlag: 0,
|
||||
moddate: null,
|
||||
color: '#ffcc30',
|
||||
},
|
||||
]
|
||||
this.resultDisplay = XeData
|
||||
// this.$emit('reAnalyCurr', true, XeData)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
this.isLoading = false
|
||||
}
|
||||
let XeData = [
|
||||
{
|
||||
sampleId: null,
|
||||
idAnalysis: null,
|
||||
nuclideName: 'Xe131m',
|
||||
conc: -0.049,
|
||||
concErr: 0.04272,
|
||||
mdc: 0.14539,
|
||||
lc: 0.06362626536110005,
|
||||
nidFlag: 0,
|
||||
moddate: null,
|
||||
color: 'red',
|
||||
},
|
||||
{
|
||||
sampleId: null,
|
||||
idAnalysis: null,
|
||||
nuclideName: 'Xe133',
|
||||
conc: 0.07727,
|
||||
concErr: 0.0631,
|
||||
mdc: 0.23981,
|
||||
lc: 0.09916332268275692,
|
||||
nidFlag: 0,
|
||||
moddate: null,
|
||||
color: '#ffcc30',
|
||||
},
|
||||
{
|
||||
sampleId: null,
|
||||
idAnalysis: null,
|
||||
nuclideName: 'Xe133m',
|
||||
conc: -0.07186,
|
||||
concErr: 0.03596,
|
||||
mdc: 0.11014,
|
||||
lc: 0.044521536189968125,
|
||||
nidFlag: 0,
|
||||
moddate: null,
|
||||
color: 'red',
|
||||
},
|
||||
{
|
||||
sampleId: null,
|
||||
idAnalysis: null,
|
||||
nuclideName: 'Xe135',
|
||||
conc: 0.26636,
|
||||
concErr: 0.23193,
|
||||
mdc: 0.77578,
|
||||
lc: 0.3655879636569543,
|
||||
nidFlag: 0,
|
||||
moddate: null,
|
||||
color: '#ffcc30',
|
||||
},
|
||||
]
|
||||
this.resultDisplay = XeData
|
||||
// this.$emit('reAnalyCurr', true, XeData)
|
||||
},
|
||||
getAnalyzeAllSpectrum() {
|
||||
let XeData = [
|
||||
|
|
@ -295,19 +318,10 @@ export default {
|
|||
// this.$emit('reAnalyCurr', true, XeData)
|
||||
},
|
||||
refreshRoi(data) {
|
||||
const { list, start, stop } = data
|
||||
let currRoiParam = { start, stop }
|
||||
let currBoundary = { minX: start, maxX: stop, minY: 0, maxY: 4096 }
|
||||
this.ROILists.splice(this.currIdx, 1, list)
|
||||
this.roiParamList.splice(this.currIdx, 1, currRoiParam)
|
||||
this.boundaryList.splice(this.currIdx, 1, currBoundary)
|
||||
console.log('%c [ 刷新 ]-303', 'font-size:13px; background:pink; color:#bf2c9f;', data)
|
||||
},
|
||||
reDrawRectOri(){
|
||||
this.$refs.betaChartRef.reDrawRect()
|
||||
|
||||
},
|
||||
getIndex(val) {
|
||||
this.currIdx = val
|
||||
reDrawRectOri() {
|
||||
// 更新
|
||||
},
|
||||
// async handleDetalSelfStationCache() {
|
||||
// const { inputFileName } = this.sample
|
||||
|
|
@ -322,7 +336,7 @@ export default {
|
|||
// },
|
||||
async getSelfStationSampleDetail() {
|
||||
this.spectraType = this.SampleType[0].value
|
||||
const { inputFileName, detFileName,qcFileName } = this.sample
|
||||
const { inputFileName, detFileName, qcFileName } = this.sample
|
||||
let params = {
|
||||
sampleFileName: inputFileName,
|
||||
detFileName: detFileName,
|
||||
|
|
@ -344,7 +358,6 @@ export default {
|
|||
this.sampleDetail = result
|
||||
this.changeChartByType('sample')
|
||||
this.isLoading = false
|
||||
this.currIdx = 2
|
||||
} else {
|
||||
this.$message.error(message)
|
||||
}
|
||||
|
|
@ -355,7 +368,7 @@ export default {
|
|||
changeChartByType(val) {
|
||||
if (val == 'sample') this.currSpectrum = 'Sample'
|
||||
if (val == 'detBg') this.currSpectrum = 'Det'
|
||||
this.roiParamList = []
|
||||
this.roiParamList = cloneDeep(InitialRoiParamList)
|
||||
this.boundaryList = []
|
||||
this.ROILists = []
|
||||
const {
|
||||
|
|
@ -381,16 +394,15 @@ export default {
|
|||
this.gammaEnergyData = gammaEnergyData
|
||||
this.betaEnergyData = betaEnergyData
|
||||
this.ROILists = [ROIOneList, ROITwoList, ROIThreeList, ROIFourList]
|
||||
let roiParam1 = { start: ROIOneStart, stop: ROIOneStop }
|
||||
let roiParam2 = { start: ROITwoStart, stop: ROITwoStop }
|
||||
let roiParam3 = { start: ROIThreeStart, stop: ROIThreeStop }
|
||||
let roiParam4 = { start: ROIFourStart, stop: ROIFourStop }
|
||||
this.roiParamList = [roiParam1, roiParam2, roiParam3, roiParam4]
|
||||
let boundary1 = { minX: ROIOneStart, maxX: ROIOneStop, minY: 0, maxY: 4096 }
|
||||
let boundary2 = { minX: ROITwoStart, maxX: ROITwoStop, minY: 0, maxY: 4096 }
|
||||
let boundary3 = { minX: ROIThreeStart, maxX: ROIThreeStop, minY: 0, maxY: 4096 }
|
||||
let boundary4 = { minX: ROIFourStart, maxX: ROIFourStop, minY: 0, maxY: 4096 }
|
||||
this.boundaryList = [boundary1, boundary2, boundary3, boundary4]
|
||||
|
||||
this.boundaryList = [
|
||||
[ROIOneStart, ROIOneStop],
|
||||
[ROITwoStart, ROITwoStop],
|
||||
[ROIThreeStart, ROIThreeStop],
|
||||
[ROIFourStart, ROIFourStop],
|
||||
]
|
||||
|
||||
this.roiParamList = cloneDeep(this.boundaryList)
|
||||
},
|
||||
cancelLastRequest() {
|
||||
if (this._cancelToken && typeof this._cancelToken == 'function') {
|
||||
|
|
@ -404,9 +416,6 @@ export default {
|
|||
})
|
||||
return cancelToken
|
||||
},
|
||||
handleQcFlagClick(item) {
|
||||
console.log(item)
|
||||
},
|
||||
handleGetFlag(val, obj) {
|
||||
this.resultDisplay.forEach((item) => {
|
||||
if (item.nuclideName === obj.nuclideName) {
|
||||
|
|
@ -414,7 +423,15 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
resize() { },
|
||||
|
||||
resize() {},
|
||||
|
||||
// 矩形框范围改变
|
||||
handleBoundaryChange(evt) {
|
||||
const { index, start, end } = evt
|
||||
this.$set(this.boundaryList, index, [start, end])
|
||||
this.$set(this.roiParamList, index, [start, end])
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
this.cancelLastRequest()
|
||||
|
|
@ -446,25 +463,19 @@ export default {
|
|||
}
|
||||
|
||||
&-main {
|
||||
height: calc(100% - 55px);
|
||||
height: calc(100% - 65px);
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
overflow: auto hidden;
|
||||
|
||||
&-charts {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
overflow: auto hidden;
|
||||
&-left {
|
||||
flex: 768;
|
||||
}
|
||||
|
||||
&-left {
|
||||
width: 790px;
|
||||
}
|
||||
|
||||
&-right {
|
||||
flex: 1;
|
||||
|
||||
.betagamma-chart {
|
||||
height: calc(100% - 200px);
|
||||
}
|
||||
&-right {
|
||||
flex: 1068;
|
||||
.betagamma-chart {
|
||||
height: calc(100% - 200px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -514,6 +525,12 @@ export default {
|
|||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.ant-input-group {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&-input {
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
|
|
@ -535,9 +552,8 @@ export default {
|
|||
pointer-events: none;
|
||||
background-color: #03353f;
|
||||
}
|
||||
|
||||
}
|
||||
&-button{
|
||||
&-button {
|
||||
text-align: center;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
|
|
@ -550,4 +566,5 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// 二级操作栏结束</style>
|
||||
// 二级操作栏结束
|
||||
</style>
|
||||
|
|
@ -1,36 +1,68 @@
|
|||
<template>
|
||||
<div class="beta-gamma-spectrum-chart">
|
||||
<div class="beta-gamma-spectrum-chart-operators">
|
||||
<span v-for="(item, index) in buttons" :key="item" :class="active == index ? 'active' : ''" @click="handleChange(index)">
|
||||
<span v-for="(item, index) in buttons" :key="item" @click="handleChange(index)">
|
||||
{{ item }}
|
||||
</span>
|
||||
<span @click="handleUnzoom">Unzoom</span>
|
||||
<span @click="handleROI">ROI</span>
|
||||
<span @click="handleLOG">Log</span>
|
||||
<span @click="handleLog">{{ isLog ? 'Linear' : 'Log' }}</span>
|
||||
</div>
|
||||
<div class="beta-gamma-spectrum-chart-main">
|
||||
<div
|
||||
class="beta-gamma-spectrum-chart-main"
|
||||
ref="chartContainerRef"
|
||||
@mousemove="handleBorderMouseMove"
|
||||
@mouseleave="handleBorderMouseLeave"
|
||||
@mouseup="handleBorderMouseLeave"
|
||||
>
|
||||
<!-- 2D 图表，为了相应Unzoom采用的v-show -->
|
||||
<div class="_2d-chart" ref="TwoChartRef" v-show="active == 0">
|
||||
<CustomChart ref="chartTwoDRef" :option="twoDOption" :opts="opts" @zr:mousedown="handleMouseDown" @zr:mouseup="handleMouseUp" @brushEnd="handleBrushEnd" />
|
||||
<!-- @brushEnd="handleBrushEnd" -->
|
||||
<!-- @zr:mousemove="handleMouseMove" -->
|
||||
<!-- <div class="bar">
|
||||
<color-palette v-model="currCount" />
|
||||
<div>{{ currCount }}</div>
|
||||
<div class="bar-main"></div>
|
||||
<div>0</div>
|
||||
</div> -->
|
||||
<div class="_2d-chart" ref="TwoChartRef">
|
||||
<CustomChart
|
||||
ref="chartTwoDRef"
|
||||
:option="twoDOption"
|
||||
:opts="opts"
|
||||
autoresize
|
||||
@zr:mousedown="handleMouseDown"
|
||||
@zr:mouseup="handleMouseUp"
|
||||
@brushEnd="handleBrushEnd"
|
||||
@resize="handleChartResize"
|
||||
/>
|
||||
</div>
|
||||
<!-- 2D图表结束 -->
|
||||
<CustomChart v-if="active == 0" key="1" ref="gammaLineChartRef" :option="gammaOption" />
|
||||
<CustomChart v-if="active == 1" key="2" ref="betaLineChartRef" :option="betaOption" />
|
||||
<!-- 图表上面的四边形 -->
|
||||
<div
|
||||
class="boundary-list"
|
||||
:style="{
|
||||
left: boundaryContainerPosition.left + 'px',
|
||||
top: boundaryContainerPosition.top + 'px',
|
||||
width: boundaryContainerPosition.width + 'px',
|
||||
height: boundaryContainerPosition.height + 'px',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="boundary-item"
|
||||
v-for="(boundaryItem, index) in boundaryList"
|
||||
:key="index"
|
||||
:style="{
|
||||
left: boundaryItem.left + 'px',
|
||||
top: boundaryItem.top + 'px',
|
||||
width: boundaryItem.width + 'px',
|
||||
height: boundaryItem.height + 'px',
|
||||
backgroundColor: boundaryItem.backgroundColor,
|
||||
borderColor: boundaryItem.borderColor,
|
||||
}"
|
||||
>
|
||||
<div class="boundary-item-left" @mousedown="handleBorderMouseDown(boundaryItem, 'left', index)"></div>
|
||||
<div class="boundary-item-right" @mousedown="handleBorderMouseDown(boundaryItem, 'right', index)"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图表上面的四边形结束 -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomChart from '@/components/CustomChart/index.vue'
|
||||
import ColorPalette from './ColorPalette.vue'
|
||||
import { getXAxisAndYAxisByPosition, rangeNumber } from '@/utils/chartHelper.js'
|
||||
import { putAction } from '../../../api/manage'
|
||||
import SampleDataMixin from '../SampleDataMixin'
|
||||
|
|
@ -45,10 +77,10 @@ const twoDOption = {
|
|||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
// formatter: (params) => {
|
||||
// const [b, g, c] = params.value
|
||||
// return `Beta: ${b}<br>Gamma: ${g}<br>Count: ${c}`
|
||||
// },
|
||||
formatter: (params) => {
|
||||
const [b, g, c] = params.value
|
||||
return `Beta: ${b}<br>Gamma: ${g}<br>Count: ${c}`
|
||||
},
|
||||
axisPointer: {
|
||||
animation: false,
|
||||
type: 'cross',
|
||||
|
|
@ -122,252 +154,62 @@ const twoDOption = {
|
|||
max: 4096,
|
||||
interval: 512,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'scatterGL',
|
||||
symbolSize: 4,
|
||||
zlevel: 4,
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
series: {
|
||||
type: 'scatterGL',
|
||||
symbolSize: 4,
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
data: [],
|
||||
itemStyle: { color: '#0CB4C1' },
|
||||
zlevel: 14,
|
||||
showSymbol: false,
|
||||
areaStyle: {}
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
data: [],
|
||||
itemStyle: { color: '#1B88E5' },
|
||||
zlevel: 13,
|
||||
showSymbol: false,
|
||||
areaStyle: {}
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
data: [],
|
||||
itemStyle: { color: '#43960C' },
|
||||
zlevel: 12,
|
||||
showSymbol: false,
|
||||
areaStyle: {}
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
data: [],
|
||||
itemStyle: { color: '#D09324' },
|
||||
zlevel: 11,
|
||||
showSymbol: false,
|
||||
areaStyle: {}
|
||||
},
|
||||
|
||||
],
|
||||
},
|
||||
brush: {},
|
||||
animation: false,
|
||||
}
|
||||
|
||||
const dragOption = {
|
||||
// 绘制阈值的graphic line
|
||||
graphic: [
|
||||
{
|
||||
type: 'rect',
|
||||
// rotation: Math.PI/2,
|
||||
zlevel: 12,
|
||||
shape: {
|
||||
width: 5,
|
||||
height: 0,
|
||||
},
|
||||
|
||||
//构造坐标扔进去
|
||||
position: [],
|
||||
draggable: true,
|
||||
style: {
|
||||
fill: 'rgba(0,0,0,0)',
|
||||
stroke: 'rgba(0,0,0,0)',
|
||||
// fill: 'rgba(255,0,0,0.5)', // 方便观察
|
||||
// stroke: 'rgba(255,0,0,0.5)', // 方便观察
|
||||
lineWidth: 10,
|
||||
},
|
||||
cursor: 'move',
|
||||
ondrag: null,
|
||||
visualMap: {
|
||||
type: 'continuous',
|
||||
min: 4096,
|
||||
max: 0,
|
||||
itemWidth: 12,
|
||||
itemHeight: 0,
|
||||
dimension: 1,
|
||||
seriesIndex: 0,
|
||||
zlevel: 0,
|
||||
orient: 'vertical',
|
||||
right: 0,
|
||||
bottom: 20,
|
||||
text: [4096, 0],
|
||||
textStyle: {
|
||||
color: '#8EC0C8',
|
||||
},
|
||||
{
|
||||
type: 'rect',
|
||||
zlevel: 12,
|
||||
shape: {
|
||||
width: 5,
|
||||
height: 0,
|
||||
},
|
||||
|
||||
//构造坐标扔进去
|
||||
position: [],
|
||||
draggable: true,
|
||||
style: {
|
||||
fill: 'rgba(0,0,0,0)',
|
||||
stroke: 'rgba(0,0,0,0)',
|
||||
// fill: 'rgba(255,0,0,0.5)', // 方便观察
|
||||
// stroke: 'rgba(255,0,0,0.5)', // 方便观察
|
||||
lineWidth: 10,
|
||||
},
|
||||
cursor: 'move',
|
||||
ondrag: null,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
// Gamma 的配置
|
||||
const gammaOption = {
|
||||
grid: {
|
||||
top: 15,
|
||||
left: 55,
|
||||
right: 18,
|
||||
bottom: 45,
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
splitLine: {
|
||||
show: true,
|
||||
interval: 'auto',
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#ade6ee',
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#ade6ee',
|
||||
},
|
||||
},
|
||||
series: {
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
animation: false,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
data: [],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#baaa3d',
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
},
|
||||
calculable: true,
|
||||
inRange: {
|
||||
color: ['#ffffff', '#ff0000'],
|
||||
},
|
||||
},
|
||||
}
|
||||
// Beta 的配置
|
||||
const betaOption = {
|
||||
grid: {
|
||||
top: 15,
|
||||
left: 55,
|
||||
right: 18,
|
||||
bottom: 45,
|
||||
|
||||
const ColorList = [
|
||||
{
|
||||
borderColor: '#0dcbdc',
|
||||
bgColor: 'rgba(13, 203, 220, .3)',
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
splitLine: {
|
||||
show: true,
|
||||
interval: 'auto',
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#ade6ee',
|
||||
},
|
||||
{
|
||||
borderColor: '#1b8bea',
|
||||
bgColor: 'rgba(27, 139, 234, .3)',
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#ade6ee',
|
||||
},
|
||||
{
|
||||
borderColor: '#4dac0d',
|
||||
bgColor: 'rgba(77, 172, 13, .3)',
|
||||
},
|
||||
series: {
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
animation: false,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
data: [],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#baaa3d',
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
borderColor: '#e49d21',
|
||||
bgColor: 'rgba(228, 157, 33, .3)',
|
||||
},
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
mixins: [SampleDataMixin],
|
||||
components: {
|
||||
CustomChart,
|
||||
ColorPalette,
|
||||
},
|
||||
props: {
|
||||
isLoading: {
|
||||
|
|
@ -389,129 +231,29 @@ export default {
|
|||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
roiValues: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
currIdx: {
|
||||
type: Number,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// 2D 图表
|
||||
histogramDataList: {
|
||||
handler() {
|
||||
this.active = 0
|
||||
this.buildScatterList()
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
gammaEnergyData: {
|
||||
handler(newVal) {
|
||||
this.buildGammaLineList(newVal)
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
betaEnergyData: {
|
||||
handler(newVal) {
|
||||
this.buildBetaLineList(newVal)
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
// 2D 图表 上的 矩形
|
||||
boundary: {
|
||||
handler(newVal) {
|
||||
// newVal.forEach((item, index) => {
|
||||
// item.color = '#99CA53'
|
||||
// })
|
||||
// this.boundaryData = newVal[this.currIdx]
|
||||
},
|
||||
// immediate: true,
|
||||
},
|
||||
currCount: {
|
||||
handler() {
|
||||
this.buildScatterList()
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
currIdx: {
|
||||
handler(newVal) {
|
||||
// this.boundaryData = this.boundary[newVal]
|
||||
this.initDrawRectOri()
|
||||
this.$nextTick(() => {
|
||||
this.reDrawRect()
|
||||
})
|
||||
},
|
||||
// immediate: true,
|
||||
},
|
||||
boundaryData: {
|
||||
handler(newVal) {
|
||||
this.opts.notMerge = false
|
||||
const { minX, maxX, minY, maxY, color } = newVal
|
||||
this.startChannel = minX
|
||||
this.endChannel = maxX
|
||||
const [graphic1, graphic2] = this.dragOption.graphic
|
||||
const _this = this
|
||||
this.myChart = this.$refs.chartTwoDRef.getChartInstance()
|
||||
let graphicHeight = this.$refs.TwoChartRef.clientHeight
|
||||
|
||||
graphic1.shape.height = graphicHeight
|
||||
let minleft = this.myChart.convertToPixel({ xAxisId: '2' }, 0)
|
||||
let maxRight = this.myChart.convertToPixel({ xAxisId: '2' }, 512)
|
||||
graphic1.position = [
|
||||
this.myChart.convertToPixel({ xAxisId: '2' }, minX),
|
||||
this.myChart.convertToPixel({ yAxisId: '3' }, maxY),
|
||||
]
|
||||
graphic1.ondrag = function () {
|
||||
this.position[0] = this.position[0] < minleft ? minleft : this.position[0]
|
||||
let [a, lineSeries] = _this.twoDOption.series
|
||||
_this.startChannel = parseInt(_this.myChart.convertFromPixel({ xAxisId: '2' }, this.position[0]))
|
||||
const rect = [
|
||||
[_this.startChannel, minY],
|
||||
[_this.endChannel, minY],
|
||||
[_this.endChannel, maxY],
|
||||
[_this.startChannel, maxY],
|
||||
[_this.startChannel, minY],
|
||||
]
|
||||
lineSeries.
|
||||
lineSeries.data = _this.drawOneRect(rect, color).data
|
||||
// const lineSeries = {
|
||||
// type: 'line',
|
||||
// ..._this.drawOneRect(rect, color),
|
||||
// zlevel: 11,
|
||||
// }
|
||||
// _this.twoDOption.series.splice(1, _this.twoDOption.series.length - 1, ...lineSeries)
|
||||
}
|
||||
// > maxRight ? maxRight : currRight
|
||||
graphic2.shape.height = graphicHeight
|
||||
graphic2.position = [
|
||||
this.myChart.convertToPixel({ xAxisId: '2' }, maxX),
|
||||
this.myChart.convertToPixel({ yAxisId: '3' }, maxY),
|
||||
]
|
||||
graphic2.ondrag = function () {
|
||||
this.position[0] = this.position[0] > maxRight ? maxRight : this.position[0]
|
||||
let [a, lineSeries] = _this.twoDOption.series
|
||||
_this.endChannel = parseInt(_this.myChart.convertFromPixel({ xAxisId: '2' }, this.position[0]))
|
||||
const rect = [
|
||||
[_this.startChannel, minY],
|
||||
[_this.endChannel, minY],
|
||||
[_this.endChannel, maxY],
|
||||
[_this.startChannel, maxY],
|
||||
[_this.startChannel, minY],
|
||||
]
|
||||
lineSeries.data = _this.drawOneRect(rect, color).data
|
||||
}
|
||||
this.myChart.setOption(this.dragOption)
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
this.buttons = buttons
|
||||
return {
|
||||
active: -1,
|
||||
twoDOption,
|
||||
dragOption,
|
||||
gammaOption,
|
||||
betaOption,
|
||||
currCount: 50,
|
||||
boundaryData: [],
|
||||
showROI: true,
|
||||
myChart: null,
|
||||
startChannel: null,
|
||||
|
|
@ -519,6 +261,9 @@ export default {
|
|||
opts: {
|
||||
notMerge: false,
|
||||
},
|
||||
boundaryList: [], // 最终生成的框
|
||||
boundaryContainerPosition: {},
|
||||
isLog: true, // 当前右侧的图表是否是log
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -526,145 +271,109 @@ export default {
|
|||
this.$nextTick(() => {
|
||||
this.opts.notMerge = false
|
||||
this.twoDOption.brush = { toolbox: [] }
|
||||
this.setVisualMapHeight()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
handleTooltipFormat() {
|
||||
console.log(111111)
|
||||
},
|
||||
// Gamma 的折线图数据
|
||||
buildGammaLineList(val) {
|
||||
const gammaSeries = this.gammaOption.series
|
||||
gammaSeries.data = val.map((item, index) => [index, item])
|
||||
},
|
||||
// Beta 的折线图数据
|
||||
buildBetaLineList(val) {
|
||||
const betaSeries = this.betaOption.series
|
||||
betaSeries.data = val.map((item, index) => [index, item])
|
||||
},
|
||||
// 构造scatter列表
|
||||
buildScatterList() {
|
||||
console.log(this.twoDOption)
|
||||
const {
|
||||
xAxis: { min: minX, max: maxX },
|
||||
yAxis: { min: minY, max: maxY },
|
||||
} = this.twoDOption
|
||||
|
||||
//点大小
|
||||
this.twoDOption.series[0].symbolSize = 5
|
||||
this.twoDOption.series[0].data = this.histogramDataList
|
||||
this.twoDOption.series.symbolSize = 5
|
||||
this.twoDOption.series.data = this.histogramDataList
|
||||
.filter(({ b, g, c }) => c && b >= minX && b <= maxX && g >= minY && g <= maxY)
|
||||
.map(({ b, g, c }) => this.buildScatterItem(b, g, c))
|
||||
|
||||
|
||||
this.$nextTick(() => {
|
||||
var _h = this.$refs.TwoChartRef.clientHeight - 80
|
||||
this.twoDOption.visualMap = {
|
||||
type: 'continuous',
|
||||
min: maxY,
|
||||
max: minY,
|
||||
itemWidth: 12,
|
||||
itemHeight: _h,
|
||||
dimension: 1,
|
||||
seriesIndex: 0,
|
||||
zlevel: 0,
|
||||
orient: 'vertical',
|
||||
right: 0,
|
||||
bottom: 20,
|
||||
text: [maxY, minY],
|
||||
textStyle: {
|
||||
color: '#8EC0C8'
|
||||
},
|
||||
calculable: true,
|
||||
inRange: {
|
||||
color: ['#ffffff', '#ff0000']
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
.map(({ b, g }) => this.buildScatterItem(b, g))
|
||||
},
|
||||
|
||||
// 构造一个scatter 的点
|
||||
buildScatterItem(xAxis, yAxis, count) {
|
||||
const { r, g, b } = this.interpolateColor(1 - count / this.currCount)
|
||||
buildScatterItem(xAxis, yAxis) {
|
||||
return {
|
||||
value: [xAxis, yAxis],
|
||||
// itemStyle: {
|
||||
// color: `rgb(${r}, ${g}, ${b})`,
|
||||
// },
|
||||
}
|
||||
},
|
||||
initDrawRectOri() {
|
||||
for (var i = 0; i < 4; i++) {
|
||||
const data = this.boundary[i]
|
||||
if (data) {
|
||||
this.$set(this.roiValues, i * 2, data.minX);
|
||||
this.$set(this.roiValues, i * 2 + 1, data.maxX);
|
||||
}
|
||||
}
|
||||
this.reDrawRect();
|
||||
},
|
||||
// 重绘矩形框区域
|
||||
reDrawRect() {
|
||||
console.log(this.roiValues)
|
||||
const chart = this.$refs.chartTwoDRef.getChartInstance()
|
||||
|
||||
// 得到外层容器四至范围
|
||||
const { min: xMin, max: xMax } = this.twoDOption.xAxis
|
||||
const { min: yMin, max: yMax } = this.twoDOption.yAxis
|
||||
const [containerLeft, containerTop] = chart.convertToPixel({ seriesIndex: 0 }, [xMin, yMax]) // 拿到外层容器左上角坐标
|
||||
const [containerRight, containerBottom] = chart.convertToPixel({ seriesIndex: 0 }, [xMax, yMin]) // 拿到外层容器右下角坐标
|
||||
this.boundaryContainerPosition = {
|
||||
left: containerLeft,
|
||||
top: containerTop,
|
||||
width: containerRight - containerLeft,
|
||||
height: containerBottom - containerTop,
|
||||
}
|
||||
|
||||
if (this.showROI) {
|
||||
// rect 遵循 左下 右下 右上 左上 左下 的顺序
|
||||
const colors = ['#0CB4C1', '#1B88E5', '#43960C', '#D09324']
|
||||
for (var i = 0; i < 4; i++) {
|
||||
const data = this.boundary[i]
|
||||
if (this.roiValues.length > 7) {
|
||||
var _minx = this.roiValues[i*2]
|
||||
var _maxX = this.roiValues[i*2+1]
|
||||
const rect = [[_minx, data.minY], [_maxX, data.minY], [_maxX, data.maxY], [_minx, data.maxY], [_minx, data.minY],]
|
||||
this.twoDOption.series[i + 1].data = this.drawOneRect(rect, colors[i]).data
|
||||
this.boundaryList = this.boundary.map((item, index) => {
|
||||
const color = ColorList[index]
|
||||
const [start, end] = item
|
||||
|
||||
const [left, top] = chart.convertToPixel({ seriesIndex: 0 }, [start, 4096]) // 拿到矩形左上角坐标
|
||||
const [right, bottom] = chart.convertToPixel({ seriesIndex: 0 }, [end, 0]) // 拿到矩形右下角坐标
|
||||
|
||||
// 因为外层容器已经提供了 上/左 边距的定位，把这部分减去
|
||||
return {
|
||||
borderColor: color.borderColor,
|
||||
backgroundColor: color.bgColor,
|
||||
top: top - containerTop,
|
||||
height: bottom - top,
|
||||
left: left - containerLeft,
|
||||
width: right - left,
|
||||
}
|
||||
}
|
||||
// lineSeries2.data = this.drawOneRect(rect2, color2).data
|
||||
})
|
||||
} else {
|
||||
for (var i = 0; i < 4; i++) {
|
||||
this.twoDOption.series[i + 1].data = []
|
||||
}
|
||||
this.boundaryList = []
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 绘制一个矩形框区域
|
||||
* @param {*} rect 左下 右下 右上 左上 左下 的顺序
|
||||
*/
|
||||
drawOneRect(rect, color) {
|
||||
return {
|
||||
data: rect,
|
||||
}
|
||||
|
||||
setVisualMapHeight() {
|
||||
const chartContainerRef = this.$refs.chartContainerRef
|
||||
this.twoDOption.visualMap.itemHeight = chartContainerRef.offsetHeight - 75
|
||||
},
|
||||
// 点击改变 ROI LIMITS
|
||||
|
||||
handleChartResize() {
|
||||
this.reDrawRect()
|
||||
this.setVisualMapHeight()
|
||||
},
|
||||
|
||||
// 弹出gamma或beta弹窗
|
||||
handleChange(index) {
|
||||
this.active = index
|
||||
console.log('%c [ 弹窗 ]-582', 'font-size:13px; background:pink; color:#bf2c9f;', index)
|
||||
},
|
||||
// 点击unzoom
|
||||
handleUnzoom() {
|
||||
const [graphic1, graphic2] = this.dragOption.graphic
|
||||
const { minX, maxX, minY, maxY, color } = this.boundaryData
|
||||
this.twoDOption.xAxis.min = 0
|
||||
this.twoDOption.xAxis.max = 512
|
||||
this.twoDOption.yAxis.min = 0
|
||||
this.twoDOption.yAxis.max = 4096
|
||||
|
||||
// this.emitRangeChange([0, 256, 0, 256])
|
||||
this.buildScatterList()
|
||||
this.$nextTick(() => {
|
||||
const myChart = this.$refs.chartTwoDRef.getChartInstance()
|
||||
graphic1.position = [
|
||||
myChart.convertToPixel({ xAxisId: '2' }, minX),
|
||||
myChart.convertToPixel({ yAxisId: '3' }, maxY),
|
||||
]
|
||||
graphic2.position = [
|
||||
myChart.convertToPixel({ xAxisId: '2' }, maxX),
|
||||
myChart.convertToPixel({ yAxisId: '3' }, maxY),
|
||||
]
|
||||
myChart.setOption(this.dragOption)
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.reDrawRect()
|
||||
})
|
||||
},
|
||||
|
||||
// 点击Log
|
||||
handleLog() {
|
||||
this.isLog = !this.isLog
|
||||
this.$bus.$emit('changeROILimitsYAxisType', this.isLog)
|
||||
},
|
||||
|
||||
// 鼠标按下时开启可刷选状态
|
||||
handleMouseDown() {
|
||||
if (this.boundaryItem) {
|
||||
return
|
||||
}
|
||||
|
||||
const chart = this.$refs.chartTwoDRef.getChartInstance()
|
||||
chart.dispatchAction({
|
||||
type: 'takeGlobalCursor',
|
||||
|
|
@ -685,8 +394,6 @@ export default {
|
|||
},
|
||||
// 刷选完毕时
|
||||
handleBrushEnd(param) {
|
||||
const [graphic1, graphic2] = this.dragOption.graphic
|
||||
const { minX: lineMinX, maxX: lineMaxX, minY: lineMinY, maxY: lineMaxY } = this.boundaryData
|
||||
const chart = this.$refs.chartTwoDRef.getChartInstance()
|
||||
const areas = param.areas[0]
|
||||
if (areas) {
|
||||
|
|
@ -706,43 +413,10 @@ export default {
|
|||
this.twoDOption.yAxis.min = rangeNumberFuncY(y1)
|
||||
this.twoDOption.yAxis.max = rangeNumberFuncY(y2)
|
||||
this.buildScatterList()
|
||||
this.$nextTick(() => {
|
||||
const myChart = this.$refs.chartTwoDRef.getChartInstance()
|
||||
if (lineMinX > rangeNumberFuncX(x1) && lineMinX < rangeNumberFuncX(x2) && lineMaxX > rangeNumberFuncX(x2)) {
|
||||
graphic1.position = [
|
||||
myChart.convertToPixel({ xAxisId: '2' }, lineMinX),
|
||||
myChart.convertToPixel({ yAxisId: '3' }, rangeNumberFuncY(y2)),
|
||||
]
|
||||
myChart.setOption(this.dragOption)
|
||||
} else if (
|
||||
lineMinX < rangeNumberFuncX(x1) &&
|
||||
lineMaxX > rangeNumberFuncX(x1) &&
|
||||
lineMaxX < rangeNumberFuncX(x2)
|
||||
) {
|
||||
graphic2.position = [
|
||||
myChart.convertToPixel({ xAxisId: '2' }, lineMaxX),
|
||||
myChart.convertToPixel({ yAxisId: '3' }, rangeNumberFuncY(y2)),
|
||||
]
|
||||
myChart.setOption(this.dragOption)
|
||||
} else if (
|
||||
lineMinX > rangeNumberFuncX(x1) &&
|
||||
lineMinX < rangeNumberFuncX(x2) &&
|
||||
lineMaxX > rangeNumberFuncX(x1) &&
|
||||
lineMaxX < rangeNumberFuncX(x2)
|
||||
) {
|
||||
graphic1.position = [
|
||||
myChart.convertToPixel({ xAxisId: '2' }, lineMinX),
|
||||
myChart.convertToPixel({ yAxisId: '3' }, rangeNumberFuncY(y2)),
|
||||
]
|
||||
graphic2.position = [
|
||||
myChart.convertToPixel({ xAxisId: '2' }, lineMaxX),
|
||||
myChart.convertToPixel({ yAxisId: '3' }, rangeNumberFuncY(y2)),
|
||||
]
|
||||
myChart.setOption(this.dragOption)
|
||||
}
|
||||
})
|
||||
|
||||
// this.emitRangeChange([x1, x2, y1, y2])
|
||||
this.$nextTick(() => {
|
||||
this.reDrawRect()
|
||||
})
|
||||
}
|
||||
|
||||
this.clearBrush(chart)
|
||||
|
|
@ -763,8 +437,7 @@ export default {
|
|||
// 点击ROI
|
||||
handleROI() {
|
||||
this.showROI = !this.showROI
|
||||
},
|
||||
handleLOG() {
|
||||
this.reDrawRect()
|
||||
},
|
||||
// 点击Update
|
||||
async handleUpdate() {
|
||||
|
|
@ -772,8 +445,7 @@ export default {
|
|||
const { inputFileName } = this.sampleData
|
||||
try {
|
||||
const { success, result, message } = await putAction(
|
||||
`/selfStation/updateROI?sampleFileName=${inputFileName}&startChannel=${this.startChannel}&endChannel=${this.endChannel
|
||||
}&ROINum=${this.currIdx + 1}`
|
||||
`/selfStation/updateROI?sampleFileName=${inputFileName}&startChannel=${this.startChannel}&endChannel=${this.endChannel}&ROINum=1`
|
||||
)
|
||||
if (success) {
|
||||
this.$emit('update:isLoading', false)
|
||||
|
|
@ -791,13 +463,6 @@ export default {
|
|||
}
|
||||
}
|
||||
this.$emit('refreshRoi', obj)
|
||||
// this.$bus.$emit('updateRoi', obj.list)
|
||||
this.boundaryData = {
|
||||
minX: obj.start,
|
||||
maxX: obj.stop,
|
||||
minY: 0,
|
||||
maxY: 4096,
|
||||
}
|
||||
} else {
|
||||
this.$emit('update:isLoading', false)
|
||||
}
|
||||
|
|
@ -806,17 +471,74 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
// 颜色插值算法
|
||||
interpolateColor(percentage) {
|
||||
const color1 = { r: 255, g: 0, b: 0 },
|
||||
color2 = { r: 255, g: 255, b: 255 }
|
||||
|
||||
const r = color1.r + (color2.r - color1.r) * percentage
|
||||
const g = color1.g + (color2.g - color1.g) * percentage
|
||||
const b = color1.b + (color2.b - color1.b) * percentage
|
||||
return { r, g, b }
|
||||
// 矩形周边点击
|
||||
handleBorderMouseDown(boundaryItem, direction, index) {
|
||||
this.boundaryRight = boundaryItem.left + boundaryItem.width
|
||||
this.boundaryItem = boundaryItem
|
||||
this.boundaryIndex = index
|
||||
this.direction = direction
|
||||
},
|
||||
|
||||
// 矩形周边移动
|
||||
handleBorderMouseMove({ movementX }) {
|
||||
if (!this.boundaryItem) {
|
||||
return
|
||||
}
|
||||
|
||||
const prevLeft = this.boundaryItem.left
|
||||
// 移动的形式是在左侧移动，则改变left定位
|
||||
if (this.direction == 'left') {
|
||||
const nextLeft = prevLeft + movementX
|
||||
const nextWidth = this.boundaryItem.width - movementX
|
||||
// 如果移动到的位置将要超过右边线
|
||||
if (nextLeft >= this.boundaryRight) {
|
||||
this.boundaryItem.left = this.boundaryRight
|
||||
this.boundaryItem.width = nextLeft - this.boundaryRight
|
||||
this.direction = 'right'
|
||||
} else {
|
||||
this.boundaryItem.left = nextLeft
|
||||
this.boundaryItem.width = nextWidth
|
||||
this.direction = 'left'
|
||||
}
|
||||
}
|
||||
// 移动的形式是在右侧移动，则改变宽度
|
||||
else {
|
||||
const nextWidth = this.boundaryItem.width + movementX
|
||||
// 如果移动到的位置将要超过左边线
|
||||
if (nextWidth <= 0) {
|
||||
this.direction = 'left'
|
||||
this.boundaryItem.left = prevLeft + nextWidth
|
||||
this.boundaryItem.width = -nextWidth
|
||||
} else {
|
||||
this.boundaryItem.width = nextWidth
|
||||
this.direction = 'right'
|
||||
}
|
||||
}
|
||||
|
||||
this.boundaryRight = this.boundaryItem.left + this.boundaryItem.width
|
||||
},
|
||||
|
||||
// 鼠标离开图表
|
||||
handleBorderMouseLeave() {
|
||||
// 如果是改变矩形范围的情况
|
||||
if (this.boundaryItem) {
|
||||
// 物理坐标转换回坐标系坐标
|
||||
const { left, width } = this.boundaryItem
|
||||
const realLeft = left + this.boundaryContainerPosition.left
|
||||
|
||||
const chart = this.$refs.chartTwoDRef.getChartInstance()
|
||||
|
||||
const [start] = chart.convertFromPixel({ seriesIndex: 0 }, [realLeft, 4096])
|
||||
const [end] = chart.convertFromPixel({ seriesIndex: 0 }, [realLeft + width, 4096])
|
||||
|
||||
this.$emit('boundaryChange', {
|
||||
index: this.boundaryIndex,
|
||||
start: parseInt(start.toFixed()),
|
||||
end: parseInt(end.toFixed()),
|
||||
})
|
||||
this.boundaryItem = null
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -824,12 +546,10 @@ export default {
|
|||
<style lang="less" scoped>
|
||||
.beta-gamma-spectrum-chart {
|
||||
height: 100%;
|
||||
|
||||
&-operators {
|
||||
text-align: right;
|
||||
overflow: auto;
|
||||
height: 26px;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 9px;
|
||||
|
|
@ -844,47 +564,53 @@ export default {
|
|||
text-align: center;
|
||||
height: 100%;
|
||||
line-height: 26px;
|
||||
min-width: 94px;
|
||||
padding: 0 10px;
|
||||
width: 100px;
|
||||
background-color: #406979;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&.active {
|
||||
background-color: #1397a3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
height: calc(100% - 40px);
|
||||
margin-top: 15px;
|
||||
position: relative;
|
||||
|
||||
._2d-chart {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.custom-chart {
|
||||
// width: calc(100% - 45px);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 30px;
|
||||
margin-left: 15px;
|
||||
height: 100%;
|
||||
color: #ade6ee;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 38px;
|
||||
text-align: center;
|
||||
.boundary-list {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&-main {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: calc(100% - 70px);
|
||||
background: linear-gradient(to bottom, #ff0000 0, #fff 100%);
|
||||
}
|
||||
}
|
||||
.boundary-item {
|
||||
position: absolute;
|
||||
border: 1px solid transparent;
|
||||
pointer-events: all;
|
||||
|
||||
&-left,
|
||||
&-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 2px;
|
||||
bottom: 0;
|
||||
cursor: w-resize;
|
||||
}
|
||||
|
||||
&-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&-right {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ const columns = [
|
|||
scopedSlots: {
|
||||
customRender: 'mdc',
|
||||
},
|
||||
// width: 133,
|
||||
width: 133,
|
||||
},
|
||||
]
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,318 +0,0 @@
|
|||
<template>
|
||||
<div class="beta-gamma-spectrum">
|
||||
<div :class="ismax[index] ? 'beta-gamma-spectrum-chart max' : 'beta-gamma-spectrum-chart'" v-for="(item, index) in buttons" :key="item" v-show="!ismaxed || ismax[index]">
|
||||
<div class="beta-gamma-spectrum-chart-operators" ref="operatorsRef">
|
||||
<a-row>
|
||||
<a-col :span="4">
|
||||
<div :style="{ background: colors[index] }" class="beta-gamma-spectrum-chart-operators-button">{{ item }}</div>
|
||||
</a-col>
|
||||
<a-col :span="20">
|
||||
<div style="float: right;width: 40px;">
|
||||
<img v-show="!ismax[index]" src="@/assets/maximize.png" @click="maximize(true, index)" />
|
||||
<img v-show="ismax[index]" src="@/assets/normal.png" @click="maximize(false, index)" />
|
||||
</div>
|
||||
<div style="float: right;color:#AD4140;width: 120px;">{{ 'Energy:' + eValue[index] }}</div>
|
||||
<div style="float: right;color:#8EC0C8;width: 80px;">{{ 'Count:' + yValue[index] }}</div>
|
||||
<div style="float: right;color:#8EC0C8;width: 95px;">{{ 'Channel:' + xValue[index] }}</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="beta-gamma-spectrum-chart-main">
|
||||
<CustomChart ref="containerRef" :option="roiLimitsOptions[index]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomChart from '@/components/CustomChart/index.vue'
|
||||
const buttons = ['ROI1', 'ROI2', 'ROI3', 'ROI4']
|
||||
const colors = ['#0CB4C1', '#1B88E5', '#43960C', '#D09324']
|
||||
|
||||
// 折线图配置
|
||||
export default {
|
||||
components: {
|
||||
CustomChart,
|
||||
},
|
||||
props: {
|
||||
ROILists: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
ROIAnalyzeLists: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
gammaEnergyData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
ROILists: {
|
||||
handler(newVal) {
|
||||
this.newVal = newVal
|
||||
this.buildOneLineList()
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
ROIAnalyzeLists: {
|
||||
handler(newVal) {
|
||||
this.newAnalyzeVal = newVal
|
||||
this.buildAnalyzeList()
|
||||
},
|
||||
immediate: false,
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
// const myChart = this.$refs.roiLimitsRef.getChartInstance()
|
||||
// myChart.dispose()
|
||||
},
|
||||
data() {
|
||||
this.buttons = buttons
|
||||
this.colors = colors
|
||||
return {
|
||||
active: 0,
|
||||
xValue: ['', '', '', ''],
|
||||
yValue: ['', '', '', ''],
|
||||
eValue: ['', '', '', ''],
|
||||
ismax: [false, false, false, false],
|
||||
ismaxed: false,
|
||||
roiLimitsOptions: [
|
||||
this.createRoiLimitsOption(0),
|
||||
this.createRoiLimitsOption(1),
|
||||
this.createRoiLimitsOption(2),
|
||||
this.createRoiLimitsOption(3),
|
||||
],
|
||||
charts: [],
|
||||
newVal: [],
|
||||
newAnalyzeVal: [],
|
||||
opts: {
|
||||
notMerge: true,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
buildOneLineList() {
|
||||
for (var i = 0; i < 4; i++) {
|
||||
var val = this.newVal[i]
|
||||
if (val) {
|
||||
this.roiLimitsOptions[i].series.data = val.map((item) => [item.x, item.y])
|
||||
} else {
|
||||
this.roiLimitsOptions[i].series.data = []
|
||||
}
|
||||
}
|
||||
},
|
||||
buildAnalyzeList() {
|
||||
for (var i = 0; i < 4; i++) {
|
||||
var val = this.newAnalyzeVal[i].allData
|
||||
var newseries = []
|
||||
var _series = this.roiLimitsOptions[i].series
|
||||
newseries.push(_series)
|
||||
val.forEach(item => {
|
||||
if (item.name != 'Count') {
|
||||
var _ser = {
|
||||
type: 'line',
|
||||
data: item.pointlist.map((item) => [item.x, item.y]),
|
||||
color: item.color,
|
||||
symbol: 'none'
|
||||
}
|
||||
newseries.push(_ser)
|
||||
}
|
||||
})
|
||||
this.roiLimitsOptions[i].series = newseries
|
||||
}
|
||||
},
|
||||
handleTooltipFormat(params, index) {
|
||||
if (Number.isInteger(params[0].value[0])) {
|
||||
this.$set(this.xValue, index, params[0].value[0]);
|
||||
this.$set(this.yValue, index, params[0].value[1]);
|
||||
this.$set(this.eValue, index, this.gammaEnergyData[params[0].value[0]].toFixed(3));
|
||||
}
|
||||
|
||||
},
|
||||
maximize(bl, index) {
|
||||
this.$set(this.ismax, index, bl);
|
||||
this.ismaxed = this.ismax.includes(true);
|
||||
this.$nextTick(() => {
|
||||
this.$refs['containerRef'][index].getChartInstance().resize();
|
||||
})
|
||||
},
|
||||
showTooltip(i) {
|
||||
const chartRef = this.$refs['containerRef'][i].getChartInstance();
|
||||
chartRef.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: 0,
|
||||
dataIndex: 110 // 指定要显示 tooltip 的数据索引
|
||||
});
|
||||
},
|
||||
createRoiLimitsOption(index) {
|
||||
const self = this
|
||||
return {
|
||||
grid: {
|
||||
top: 10,
|
||||
left: 60,
|
||||
right: 20,
|
||||
bottom: 50,
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
formatter: (params) => {
|
||||
self.handleTooltipFormat(params, index)
|
||||
// let content = ''
|
||||
// params.forEach((item) => {
|
||||
// // 提示框的内容样式及数据
|
||||
// content += `
|
||||
// <!-- 圆点样式 -->
|
||||
// <span style="color: #424864;">Channel ${item.axisValueLabel}</span><br>
|
||||
// <span style="display: inline-block; margin-right: 10px; border-radius: 50%; width: 8px; height: 8px;background-color: ${item.color};"></span>
|
||||
// <span >${item.value[1]}</span>
|
||||
// `
|
||||
// })
|
||||
// return content
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
min:0,
|
||||
max:4096,
|
||||
name: 'Gamma Channel',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
fontSize: 14,
|
||||
},
|
||||
nameLocation: 'center',
|
||||
nameGap: 30,
|
||||
boundaryGap: false,
|
||||
splitLine: {
|
||||
show: true,
|
||||
interval: 'auto',
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#ade6ee',
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: 'Count',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
fontSize: 14,
|
||||
},
|
||||
nameLocation: 'center',
|
||||
nameGap: 40,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#ade6ee',
|
||||
},
|
||||
},
|
||||
series: {
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
// symbol: 'circle',
|
||||
// symbolSize: 6,
|
||||
data: [],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#baaa3d',
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.beta-gamma-spectrum {
|
||||
height: 100%;
|
||||
|
||||
&-chart {
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
float: left;
|
||||
|
||||
&-operators {
|
||||
overflow: auto;
|
||||
margin-bottom: -16px;
|
||||
font-size: 13px;
|
||||
|
||||
&-button {
|
||||
width: 50px;
|
||||
margin-left: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ant-space-item:first-child {
|
||||
span {
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
line-height: 26px;
|
||||
width: 100px;
|
||||
background-color: #406979;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&.active {
|
||||
background-color: #1397a3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
height: calc(100% - 40px);
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&-chart.max {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transform-origin: right top;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<template>
|
||||
<div class="beta-gamma-spectrum" :class="{ 'has-max': isMax }">
|
||||
<roi-limit-item
|
||||
v-for="(title, index) in RoiTitles"
|
||||
:key="title"
|
||||
:title="title"
|
||||
:title-color="RoiTitleColors[index]"
|
||||
:energys="gammaEnergyData"
|
||||
:roi-list="ROILists[index]"
|
||||
:analyze-result="ROIAnalyzeLists[index]"
|
||||
@toggle="handleToggle"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomChart from '@/components/CustomChart/index.vue'
|
||||
import RoiLimitItem from './components/RoiLimitItem.vue'
|
||||
const RoiTitles = ['ROI1', 'ROI2', 'ROI3', 'ROI4']
|
||||
const RoiTitleColors = ['#0CB4C1', '#1B88E5', '#43960C', '#D09324']
|
||||
|
||||
// 折线图配置
|
||||
export default {
|
||||
components: {
|
||||
CustomChart,
|
||||
RoiLimitItem,
|
||||
},
|
||||
props: {
|
||||
ROILists: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
ROIAnalyzeLists: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
gammaEnergyData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
this.RoiTitles = RoiTitles
|
||||
this.RoiTitleColors = RoiTitleColors
|
||||
|
||||
return {
|
||||
isMax: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleToggle(isMax) {
|
||||
this.isMax = isMax
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.beta-gamma-spectrum {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
column-gap: 36px;
|
||||
row-gap: 11px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&.has-max {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 100%;
|
||||
|
||||
.roi-limit-item:not(.is-max) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,398 @@
|
|||
<template>
|
||||
<div class="roi-limit-item" :class="{ 'is-max': isMax }">
|
||||
<div class="roi-limit-item__header">
|
||||
<div class="roi-limit-item__header-title" :style="{ backgroundColor: titleColor }">{{ title }}</div>
|
||||
<div class="roi-limit-item__header-count">
|
||||
<span>Channel: {{ axisInfo.channel }}</span>
|
||||
<span>Count: {{ axisInfo.count }}</span>
|
||||
<span class="energy">Energy: {{ axisInfo.energy }}</span>
|
||||
</div>
|
||||
<div class="roi-limit-item__header-fullscreen">
|
||||
<img :src="isMax ? normal : maximize" @click="toggleFullScreen" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="roi-limit-item-content">
|
||||
<custom-chart :option="option" autoresize />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomChart from '@/components/CustomChart/index.vue'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import maximize from '@/assets/maximize.png'
|
||||
import normal from '@/assets/normal.png'
|
||||
import {
|
||||
baseLineCtrlPoint,
|
||||
baseLineSeries,
|
||||
lcLineSeries,
|
||||
scacLineSeries,
|
||||
spectrumSeries,
|
||||
} from '@/views/spectrumAnalysis/seriesBuilder'
|
||||
import { buildLineSeries, findSeriesByName } from '@/utils/chartHelper'
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
top: 10,
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 25,
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
formatter: () => {},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
name: 'Gamma Channel',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
fontSize: 14,
|
||||
},
|
||||
nameLocation: 'center',
|
||||
nameGap: 30,
|
||||
boundaryGap: false,
|
||||
splitLine: {
|
||||
show: true,
|
||||
interval: 'auto',
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#ade6ee',
|
||||
},
|
||||
min: 1,
|
||||
max: 'dataMax',
|
||||
},
|
||||
yAxis: {
|
||||
type: 'log',
|
||||
name: 'Count',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
fontSize: 14,
|
||||
},
|
||||
nameLocation: 'center',
|
||||
nameGap: 40,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#ade6ee',
|
||||
formatter: (value) => {
|
||||
return value.toFixed(1)
|
||||
},
|
||||
},
|
||||
min: 1,
|
||||
max: 'dataMax',
|
||||
},
|
||||
series: [spectrumSeries, baseLineSeries, lcLineSeries, scacLineSeries, baseLineCtrlPoint],
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
title: String,
|
||||
titleColor: String,
|
||||
energys: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
roiList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
analyzeResult: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
components: {
|
||||
CustomChart,
|
||||
},
|
||||
data() {
|
||||
this.maximize = maximize
|
||||
this.normal = normal
|
||||
|
||||
this.channelData = {
|
||||
peakGroup: [],
|
||||
spectrumLine: null,
|
||||
baseLine: null,
|
||||
lcLine: null,
|
||||
scacLine: null,
|
||||
all: null,
|
||||
baseLineCP: [],
|
||||
}
|
||||
this.peakList = [] // Peak 列表（非点位）
|
||||
this.baseCtrls = {} // BaseCtrls
|
||||
|
||||
return {
|
||||
option: cloneDeep(option),
|
||||
axisInfo: {
|
||||
channel: 0,
|
||||
count: 0,
|
||||
energy: 0,
|
||||
},
|
||||
isMax: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.option.tooltip.formatter = this.handleTooltipFormat
|
||||
this.$bus.$on('changeROILimitsYAxisType', this.changeYAxisType)
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$bus.$off('changeROILimitsYAxisType', this.changeYAxisType)
|
||||
},
|
||||
methods: {
|
||||
handleTooltipFormat(params) {
|
||||
const [xAxis, count] = params[0].value
|
||||
const channel = xAxis.toFixed() - 1
|
||||
this.axisInfo = {
|
||||
channel: Math.round(xAxis),
|
||||
count: this.channelData.all ? this.channelData.all.pointlist[channel].y : count,
|
||||
energy: this.energys[channel].toFixed(3),
|
||||
}
|
||||
},
|
||||
|
||||
// 切换
|
||||
toggleFullScreen() {
|
||||
this.isMax = !this.isMax
|
||||
|
||||
this.$emit('toggle', this.isMax)
|
||||
},
|
||||
|
||||
/**
|
||||
* 在返回的allData中查找指定的数据
|
||||
* @param {Array} allData
|
||||
* @param {*} name
|
||||
* @param {*} group
|
||||
*/
|
||||
getLineData(allData, name, group, isList = false) {
|
||||
const arrFunc = isList ? Array.prototype.filter : Array.prototype.find
|
||||
return arrFunc.call(allData, (item) => item.name == name && item.group == group) || {}
|
||||
},
|
||||
|
||||
/**
|
||||
* 转换pointlist类型数据到series的data可用的数据
|
||||
*/
|
||||
transformPointListData(pointlist) {
|
||||
if (!pointlist) {
|
||||
return []
|
||||
}
|
||||
return pointlist.map(({ x, y }) => [x, y])
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置图表数据和颜色
|
||||
*/
|
||||
setSeriesData(series, seriesName, data, color) {
|
||||
const find = findSeriesByName(series, seriesName)
|
||||
find.data = data
|
||||
if (color) {
|
||||
find.itemStyle.color = color
|
||||
}
|
||||
},
|
||||
|
||||
// 重绘控制点
|
||||
redrawCtrlPointBySeriesName() {
|
||||
const series = findSeriesByName(this.option.series, 'BaseLine_Ctrl_Point')
|
||||
const data = this.channelData.baseLineCP
|
||||
series.data = data.map(({ size, color, point: { x, y } }) => {
|
||||
return {
|
||||
value: [x, y],
|
||||
itemStyle: {
|
||||
color: 'transparent',
|
||||
borderColor: color,
|
||||
borderWidth: size / 2,
|
||||
},
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 重绘Peak Line
|
||||
redrawPeakLine() {
|
||||
const data = this.channelData.peakGroup
|
||||
const peakLines = []
|
||||
data.forEach((item, index) => {
|
||||
peakLines.push(
|
||||
buildLineSeries(`Peak_${index}`, this.transformPointListData(item.pointlist), item.color, {
|
||||
z: 6,
|
||||
})
|
||||
)
|
||||
})
|
||||
|
||||
this.option.series.push(...peakLines)
|
||||
},
|
||||
|
||||
// 处理分析后的数据
|
||||
handleAnalyzeResult() {
|
||||
const { BaseCtrls, allData, peak, shadowChannelChart, shapeChannelData } = this.analyzeResult
|
||||
|
||||
if (peak) {
|
||||
this.peakList = peak
|
||||
}
|
||||
|
||||
if (BaseCtrls) {
|
||||
this.baseCtrls = BaseCtrls
|
||||
}
|
||||
|
||||
const channelPeakGroup = this.getLineData(allData, 'Peak', 'channel', true)
|
||||
|
||||
const channelBaseLine = this.getLineData(allData, 'BaseLine', 'channel')
|
||||
|
||||
const channelLcLine = this.getLineData(allData, 'Lc', 'channel')
|
||||
|
||||
const channelScacLine = this.getLineData(allData, 'Scac', 'channel')
|
||||
|
||||
const allChannel = this.getLineData(allData, 'Count', 'channel')
|
||||
|
||||
this.channelData = {
|
||||
peakGroup: channelPeakGroup,
|
||||
spectrumLine: shadowChannelChart,
|
||||
baseLine: channelBaseLine,
|
||||
lcLine: channelLcLine,
|
||||
scacLine: channelScacLine,
|
||||
all: allChannel,
|
||||
baseLineCP: shapeChannelData,
|
||||
}
|
||||
|
||||
// 设置 Spectrum Line
|
||||
this.setSeriesData(
|
||||
this.option.series,
|
||||
'Spectrum',
|
||||
this.transformPointListData(shadowChannelChart.pointlist),
|
||||
shadowChannelChart.color
|
||||
)
|
||||
|
||||
// 设置 BaseLine
|
||||
this.setSeriesData(
|
||||
this.option.series,
|
||||
'BaseLine',
|
||||
this.transformPointListData(channelBaseLine.pointlist),
|
||||
channelBaseLine.color
|
||||
)
|
||||
|
||||
// 设置 LcLine
|
||||
this.setSeriesData(
|
||||
this.option.series,
|
||||
'LcLine',
|
||||
this.transformPointListData(channelLcLine.pointlist),
|
||||
channelLcLine.color
|
||||
)
|
||||
|
||||
// 设置 ScacLine
|
||||
this.setSeriesData(
|
||||
this.option.series,
|
||||
'ScacLine',
|
||||
this.transformPointListData(channelScacLine.pointlist),
|
||||
channelScacLine.color
|
||||
)
|
||||
|
||||
// 设置 基线控制点
|
||||
this.redrawCtrlPointBySeriesName()
|
||||
|
||||
// 设置 Peak Line
|
||||
this.redrawPeakLine()
|
||||
},
|
||||
|
||||
// 修改y轴类型
|
||||
changeYAxisType(isLog) {
|
||||
this.option.yAxis.type = isLog ? 'log' : 'value'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
roiList: {
|
||||
handler(val) {
|
||||
this.option.series[0].data = val.map(({ x, y }) => [x, y])
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
analyzeResult: {
|
||||
handler(val) {
|
||||
if (val && Object.keys(val).length) {
|
||||
this.handleAnalyzeResult()
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.roi-limit-item {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
overflow: hidden;
|
||||
|
||||
&__header {
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-title {
|
||||
width: 46px;
|
||||
height: 100%;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
font-family: ArialMT;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&-count {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 28px;
|
||||
font-family: ArialMT;
|
||||
font-size: 12px;
|
||||
color: #ade6ee;
|
||||
|
||||
.energy {
|
||||
color: #ff5656;
|
||||
}
|
||||
}
|
||||
|
||||
&-fullscreen {
|
||||
margin-left: 30px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user