490 lines
11 KiB
Vue
490 lines
11 KiB
Vue
<template>
|
|
<custom-modal v-model="visible" :width="1280" title="Interactive Analyse Tools" :footer="null">
|
|
<div class="interactive-analysis-tools">
|
|
<div class="interactive-analysis-tools-left">
|
|
<div class="chart">
|
|
<custom-chart :option="option" />
|
|
</div>
|
|
<div class="thumbnail"></div>
|
|
<div class="table">
|
|
<p class="title">
|
|
<span @click="handleChangeMarkLine('prev')">< </span>
|
|
6 Peaks with Anthro.Nuclides
|
|
<span @click="handleChangeMarkLine('next')">></span>
|
|
</p>
|
|
<custom-table
|
|
:class="list.length ? 'has-data' : ''"
|
|
:list="list"
|
|
:columns="columns"
|
|
:scroll="{ y: 288 }"
|
|
:selectedRowKeys.sync="selectedKeys"
|
|
>
|
|
</custom-table>
|
|
<div class="operators">
|
|
<a-button type="primary" @click="nuclideReviewModalVisible = true">Nuclide Review Window</a-button>
|
|
<a-button type="primary" @click="handleAddComment('Peak')">Add Peak Comment</a-button>
|
|
<a-button type="primary" @click="handleAddComment('General')">Add General Comment</a-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="interactive-analysis-tools-right">
|
|
<title-over-boarder title="Peak">
|
|
<div class="peak-box">
|
|
<!-- 按钮组1 -->
|
|
<template v-if="btnGroupType == 1">
|
|
<div class="peak-box-item">
|
|
<a-button type="primary">Insert</a-button>
|
|
</div>
|
|
<div class="peak-box-item">
|
|
<a-button type="primary">Delete</a-button>
|
|
</div>
|
|
<div class="peak-box-item">
|
|
<a-button type="primary">Fit</a-button>
|
|
</div>
|
|
|
|
<div class="peak-box-item symbol" :key="4">
|
|
<a-button type="primary" @click="handleChangeMarkLine('prev')"><</a-button>
|
|
<a-button type="primary" @click="handleChangeMarkLine('next')">></a-button>
|
|
</div>
|
|
|
|
<div class="peak-box-item base-line">
|
|
<a-button type="primary" @click="btnGroupType = 2">BaseLine</a-button>
|
|
</div>
|
|
</template>
|
|
<!-- 按钮组2 -->
|
|
<template v-if="btnGroupType == 2">
|
|
<div class="peak-box-item">
|
|
<a-button type="primary">(A)dd CP</a-button>
|
|
</div>
|
|
<div class="peak-box-item">
|
|
<a-button type="primary">(R)emove CP</a-button>
|
|
</div>
|
|
<div class="peak-box-item">
|
|
<a-button type="primary">(M)odify CP</a-button>
|
|
</div>
|
|
<div class="peak-box-item">
|
|
<a-button type="primary">Edit (S)lope</a-button>
|
|
</div>
|
|
<div class="peak-box-item">
|
|
<a-button type="primary">Undo</a-button>
|
|
</div>
|
|
<div class="peak-box-item">
|
|
<a-button type="primary">Replot</a-button>
|
|
</div>
|
|
<div class="peak-box-item">
|
|
<a-button type="primary" @click="btnGroupType = 1">Accept</a-button>
|
|
</div>
|
|
<div class="peak-box-item">
|
|
<a-button type="primary" @click="btnGroupType = 1">Cancel</a-button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</title-over-boarder>
|
|
<div class="reset-btn-box">
|
|
<a-button type="primary">Reset Chart</a-button>
|
|
</div>
|
|
<div class="identify-box">
|
|
<title-over-boarder title="Nuclide Identify">
|
|
<a-form-model class="tolerance">
|
|
<a-form-model-item label="Tolerance">
|
|
<a-input-number></a-input-number>
|
|
</a-form-model-item>
|
|
</a-form-model>
|
|
<div class="identify-item">
|
|
<div class="title">
|
|
Possible Nuclide
|
|
</div>
|
|
<div class="content"></div>
|
|
</div>
|
|
<div class="identify-item">
|
|
<div class="title">
|
|
Nuclide Identified
|
|
</div>
|
|
<div class="content"></div>
|
|
</div>
|
|
<div class="identify-operators">
|
|
<a-space>
|
|
<a-input></a-input>
|
|
<a-button type="primary">Add</a-button>
|
|
<a-button type="primary" @click="handleDel">Del</a-button>
|
|
</a-space>
|
|
</div>
|
|
</title-over-boarder>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Comment弹窗 开始 -->
|
|
<comment-modal v-model="commentModalVisible" :type="commentType" />
|
|
<!-- Comment弹窗 结束 -->
|
|
<!-- Fit Peaks and Baseline弹窗 开始 -->
|
|
<fit-peaks-and-base-line-modal v-model="fitPeaksAndBaselineModalVisible" />
|
|
<!-- Fit Peaks and Baseline弹窗 结束 -->
|
|
<!-- Nuclide Review 弹窗开始 -->
|
|
<nuclide-review-modal v-model="nuclideReviewModalVisible" />
|
|
<!-- Nuclide Review 弹窗结束 -->
|
|
</custom-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import CustomChart from '@/components/CustomChart/index.vue'
|
|
import TitleOverBoarder from '../../TitleOverBoarder.vue'
|
|
import CommentModal from './components/CommentModal.vue'
|
|
import FitPeaksAndBaseLineModal from './components/FitPeaksAndBaselineModal.vue'
|
|
import NuclideReviewModal from './components/NuclideReviewModal.vue'
|
|
|
|
const initialOption = {
|
|
grid: {
|
|
top: 20,
|
|
bottom: 20,
|
|
left: 100,
|
|
right: 20
|
|
},
|
|
xAxis: {
|
|
min: 1,
|
|
max: 8192,
|
|
interval: 1143,
|
|
axisLabel: {
|
|
color: '#fff'
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: {
|
|
min: 1,
|
|
max: 994914,
|
|
axisLabel: {
|
|
color: '#fff'
|
|
},
|
|
name: 'Counts',
|
|
nameLocation: 'center',
|
|
nameGap: 60,
|
|
nameTextStyle: {
|
|
fontSize: 16,
|
|
color: '#5b9cba'
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'line',
|
|
data: [],
|
|
itemStyle: {
|
|
color: '#FCFE02'
|
|
},
|
|
markLine: {
|
|
data: [
|
|
{
|
|
xAxis: 1000
|
|
}
|
|
],
|
|
symbol: 'none',
|
|
lineStyle: {
|
|
color: '#f00'
|
|
},
|
|
label: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: 'line',
|
|
data: [],
|
|
itemStyle: {
|
|
color: '#F87E28'
|
|
}
|
|
},
|
|
{
|
|
type: 'line',
|
|
data: [],
|
|
itemStyle: {
|
|
color: '#01F6FE'
|
|
}
|
|
}
|
|
]
|
|
}
|
|
|
|
const columns = [
|
|
{
|
|
title: 'ID',
|
|
dataIndex: 'id',
|
|
width: 60
|
|
},
|
|
{
|
|
title: 'Energy (keV)',
|
|
dataIndex: 'energy',
|
|
width: 120
|
|
},
|
|
{
|
|
title: 'Centroid (C)',
|
|
dataIndex: 'centroid',
|
|
width: 120
|
|
},
|
|
{
|
|
title: 'FWHM (keV)',
|
|
dataIndex: 'fwhm',
|
|
width: 120
|
|
},
|
|
{
|
|
title: 'Area',
|
|
dataIndex: 'area',
|
|
width: 120
|
|
},
|
|
{
|
|
title: 'Detectability',
|
|
dataIndex: 'detectability',
|
|
width: 120
|
|
},
|
|
{
|
|
title: 'Cmnt',
|
|
dataIndex: 'cmnt',
|
|
width: 120
|
|
},
|
|
{
|
|
title: 'Nuclides',
|
|
dataIndex: 'nuclides',
|
|
width: 120
|
|
}
|
|
]
|
|
|
|
export default {
|
|
props: {
|
|
value: {
|
|
type: Boolean
|
|
}
|
|
},
|
|
components: {
|
|
CustomChart,
|
|
TitleOverBoarder,
|
|
CommentModal,
|
|
FitPeaksAndBaseLineModal,
|
|
NuclideReviewModal
|
|
},
|
|
data() {
|
|
this.columns = columns
|
|
return {
|
|
option: initialOption,
|
|
list: [],
|
|
commentModalVisible: false, // Comment 弹窗是否显示
|
|
commentType: 'Peak',
|
|
|
|
btnGroupType: 1, // 右侧 Peak 中的按钮组切换
|
|
|
|
selectedKeys: [], // 选中的列表
|
|
|
|
fitPeaksAndBaselineModalVisible: false, // Fit Peaks And Base Line 弹窗
|
|
nuclideReviewModalVisible: false // Nuclide Review 弹窗
|
|
}
|
|
},
|
|
methods: {
|
|
// 切换图表上的红色竖线
|
|
handleChangeMarkLine(direction) {
|
|
if (direction == 'prev') {
|
|
this.option.series[0].markLine.data[0].xAxis = 900
|
|
} else if (direction == 'next') {
|
|
this.option.series[0].markLine.data[0].xAxis = 1100
|
|
}
|
|
this.list = new Array(20).fill(0).map((_, index) => ({
|
|
id: index.toString(),
|
|
energy: 'energy',
|
|
centroid: 'centroid',
|
|
fwhm: 'fwhm',
|
|
area: 'area',
|
|
detectability: 'detectability',
|
|
cmnt: 'cmnt',
|
|
nuclides: 'nuclides'
|
|
}))
|
|
},
|
|
// 显示comment弹窗
|
|
handleAddComment(type) {
|
|
this.commentType = type
|
|
this.commentModalVisible = true
|
|
},
|
|
|
|
// 删除
|
|
handleDel() {
|
|
if (!this.selectedKeys.length) {
|
|
this.$message.warn('Please Select At Least 1 Peak To Delete')
|
|
return
|
|
}
|
|
|
|
this.$warning({
|
|
title: 'Warning',
|
|
content: 'Are you sure to delete this peak?',
|
|
onOk: () => {
|
|
console.log('%c [ ]-294', 'font-size:13px; background:pink; color:#bf2c9f;', this.selectedKeys)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
computed: {
|
|
visible: {
|
|
get() {
|
|
return this.value
|
|
},
|
|
set(val) {
|
|
this.$emit('input', val)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.interactive-analysis-tools {
|
|
display: flex;
|
|
|
|
&-left {
|
|
width: 75%;
|
|
margin-right: 20px;
|
|
|
|
.chart {
|
|
height: 331px;
|
|
}
|
|
|
|
.thumbnail {
|
|
height: 50px;
|
|
margin-top: 10px;
|
|
margin-bottom: 35px;
|
|
background-color: #255369;
|
|
}
|
|
|
|
.table {
|
|
.title {
|
|
color: #0cebc9;
|
|
font-size: 20px;
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
|
|
span {
|
|
cursor: pointer;
|
|
margin: 0 5px;
|
|
}
|
|
}
|
|
|
|
.custom-table {
|
|
&.has-data {
|
|
::v-deep {
|
|
.ant-table-body {
|
|
height: 288px;
|
|
background-color: #06282a;
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep {
|
|
.ant-table-placeholder {
|
|
height: 289px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.operators {
|
|
display: flex;
|
|
margin-top: 10px;
|
|
gap: 10px;
|
|
|
|
.ant-btn {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-right {
|
|
.peak-box {
|
|
height: 326px;
|
|
|
|
&-item:not(:last-child) {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.symbol {
|
|
display: flex;
|
|
|
|
.ant-btn {
|
|
flex: 1;
|
|
|
|
&:first-child {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.base-line {
|
|
margin-top: 136px;
|
|
}
|
|
|
|
.reset-btn-box {
|
|
margin-top: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.identify-box {
|
|
.tolerance {
|
|
::v-deep {
|
|
.ant-form-item {
|
|
margin-bottom: 10px;
|
|
|
|
&-control-wrapper {
|
|
flex: 1;
|
|
}
|
|
|
|
&-control {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-input-number {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.identify-item {
|
|
.title {
|
|
background-color: #497e9d;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.content {
|
|
height: 80px;
|
|
background-color: #275466;
|
|
margin: 10px 0;
|
|
}
|
|
}
|
|
|
|
.identify-operators {
|
|
display: flex;
|
|
|
|
.ant-btn {
|
|
width: 50px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-btn {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|