feat: 自建台站增加各自控制各自ROI展示状态功能
This commit is contained in:
parent
99ddd642e0
commit
c478ad46ae
|
|
@ -230,6 +230,8 @@ export default {
|
|||
this.getDetailFromFile()
|
||||
}
|
||||
}
|
||||
|
||||
this.$bus.$emit('resetROIRectState')
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
|
|
@ -626,7 +628,7 @@ export default {
|
|||
|
||||
const { success, message, result } = await getAction('/selfStation/saveToDB', {
|
||||
fileName,
|
||||
comment: sampleData.data.comment
|
||||
comment: sampleData.data.comment,
|
||||
})
|
||||
if (success) {
|
||||
Object.entries(result).forEach(([k, v]) => {
|
||||
|
|
|
|||
|
|
@ -54,25 +54,33 @@
|
|||
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>
|
||||
<template v-for="(boundaryItem, index) in boundaryList">
|
||||
<div
|
||||
:class="['boundary-item-right']"
|
||||
@mousedown="handleBorderMouseDown(boundaryItem, 'right', index)"
|
||||
></div>
|
||||
</div>
|
||||
v-if="showState[index]"
|
||||
class="boundary-item"
|
||||
: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>
|
||||
</template>
|
||||
</div>
|
||||
<!-- 图表上面的四边形结束 -->
|
||||
</div>
|
||||
|
|
@ -392,7 +400,6 @@ export default {
|
|||
this.buttons = buttons
|
||||
|
||||
return {
|
||||
showROI: true,
|
||||
startChannel: null,
|
||||
endChannel: null,
|
||||
boundaryList: [], // 最终生成的框
|
||||
|
|
@ -417,15 +424,22 @@ export default {
|
|||
},
|
||||
|
||||
btnActive: 2,
|
||||
|
||||
showState: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.scatterList = []
|
||||
this.boundary = []
|
||||
this.setAllShowState(true)
|
||||
this.$bus.$on('roiLimitItemChange', this.handleLimitItemChange)
|
||||
this.$bus.$on('toggleROIRect', this.handleToggleROIRect)
|
||||
this.$bus.$on('resetROIRectState', this.resetROIRectState)
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$bus.$off('roiLimitItemChange', this.handleLimitItemChange)
|
||||
this.$bus.$off('toggleROIRect', this.handleToggleROIRect)
|
||||
this.$bus.$off('resetROIRectState', this.resetROIRectState)
|
||||
},
|
||||
mounted() {
|
||||
const newOption = cloneDeep(TwoDOption)
|
||||
|
|
@ -608,27 +622,23 @@ export default {
|
|||
height: containerBottom - containerTop,
|
||||
}
|
||||
|
||||
if (this.showROI) {
|
||||
this.boundaryList = this.boundary.map((item, index) => {
|
||||
const color = ColorList[index]
|
||||
const [start, end] = item
|
||||
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]) // 拿到矩形右下角坐标
|
||||
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,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.boundaryList = []
|
||||
}
|
||||
// 因为外层容器已经提供了 上/左 边距的定位，把这部分减去
|
||||
return {
|
||||
borderColor: color.borderColor,
|
||||
backgroundColor: color.bgColor,
|
||||
top: top - containerTop,
|
||||
height: bottom - top,
|
||||
left: left - containerLeft,
|
||||
width: right - left,
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
handleChartResize() {
|
||||
|
|
@ -781,8 +791,12 @@ export default {
|
|||
|
||||
// 点击ROI
|
||||
handleROI() {
|
||||
this.showROI = !this.showROI
|
||||
this.reDrawRect()
|
||||
// 如果有某些Rect处于显示状态，则都隐藏
|
||||
if (this.showState.some((state) => state)) {
|
||||
this.setAllShowState(false)
|
||||
} else {
|
||||
this.setAllShowState(true)
|
||||
}
|
||||
},
|
||||
|
||||
// 矩形周边点击
|
||||
|
|
@ -876,6 +890,22 @@ export default {
|
|||
this.currBoundaryItem = null
|
||||
}
|
||||
},
|
||||
|
||||
setAllShowState(state) {
|
||||
this.showState = new Array(4).fill(state)
|
||||
},
|
||||
|
||||
// 切换显示隐藏状态
|
||||
handleToggleROIRect(index) {
|
||||
this.$set(this.showState, index, !this.showState[index])
|
||||
},
|
||||
|
||||
// 重置显示隐藏状态
|
||||
resetROIRectState() {
|
||||
this.setAllShowState(true)
|
||||
this.boundary = []
|
||||
this.boundaryList = []
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
<template>
|
||||
<div class="beta-gamma-spectrum" :class="{ 'has-max': isMax }">
|
||||
<roi-limit-item
|
||||
v-for="(title, index) in RoiTitles"
|
||||
:key="title"
|
||||
:title="title"
|
||||
v-for="(_, index) in 4"
|
||||
:key="index"
|
||||
:title="`ROI${index + 1}`"
|
||||
:title-color="RoiTitleColors[index]"
|
||||
:energys="gammaEnergyData"
|
||||
:roi-list="ROILists[index]"
|
||||
:analyze-result="ROIAnalyzeLists[index]"
|
||||
@toggle="handleToggle"
|
||||
@title-click="handleToggleROIRect(index)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -16,7 +17,6 @@
|
|||
<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']
|
||||
|
||||
// 折线图配置
|
||||
|
|
@ -40,7 +40,6 @@ export default {
|
|||
},
|
||||
},
|
||||
data() {
|
||||
this.RoiTitles = RoiTitles
|
||||
this.RoiTitleColors = RoiTitleColors
|
||||
|
||||
return {
|
||||
|
|
@ -51,6 +50,11 @@ export default {
|
|||
handleToggle(isMax) {
|
||||
this.isMax = isMax
|
||||
},
|
||||
|
||||
// 切换ROI显隐
|
||||
handleToggleROIRect(index) {
|
||||
this.$bus.$emit('toggleROIRect', index)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
<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-title" :style="{ backgroundColor: titleColor }" @click="handleTitleClick">
|
||||
{{ title }}
|
||||
</div>
|
||||
<div class="roi-limit-item__header-count">
|
||||
<span>Channel: {{ axisInfo.channel }}</span>
|
||||
<span>Count: {{ axisInfo.count }}</span>
|
||||
|
|
@ -120,7 +122,7 @@ const option = {
|
|||
brush: {},
|
||||
}
|
||||
|
||||
const initialAxisInfo = {
|
||||
const InitialAxisInfo = {
|
||||
channel: 0,
|
||||
count: 0,
|
||||
energy: 0,
|
||||
|
|
@ -167,7 +169,7 @@ export default {
|
|||
opts: {
|
||||
notMerge: false,
|
||||
},
|
||||
axisInfo: cloneDeep(initialAxisInfo),
|
||||
axisInfo: cloneDeep(InitialAxisInfo),
|
||||
isMax: false,
|
||||
}
|
||||
},
|
||||
|
|
@ -200,7 +202,7 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
// 切换
|
||||
// 切换全屏
|
||||
toggleFullScreen() {
|
||||
this.isMax = !this.isMax
|
||||
|
||||
|
|
@ -453,7 +455,12 @@ export default {
|
|||
},
|
||||
|
||||
resetAxiosInfo() {
|
||||
this.axisInfo = cloneDeep(initialAxisInfo)
|
||||
this.axisInfo = cloneDeep(InitialAxisInfo)
|
||||
},
|
||||
|
||||
// 切换四个黄色的圈
|
||||
handleTitleClick() {
|
||||
this.$emit('title-click')
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -504,6 +511,8 @@ export default {
|
|||
text-align: center;
|
||||
font-family: ArialMT;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&-count {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user