fix: 交互分析弹窗增加全屏功能
This commit is contained in:
parent
cfebf2b757
commit
07a3dc7c3a
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<custom-modal v-model="visible" :width="1280" title="Nuclide Review" :footer="null" @close="handleCancel">
|
||||
<custom-modal v-model="visible" :width="1280" title="Nuclide Review" :footer="null">
|
||||
<a-spin :spinning="isLoading">
|
||||
<div class="nuclide-review-search">
|
||||
<span @click="handleNuclideChange('prev')"><</span>
|
||||
|
|
|
|||
|
|
@ -1,182 +1,187 @@
|
|||
<template>
|
||||
<custom-modal v-model="visible" :width="1280" title="Interactive Analyse Tools" :footer="null" destroy-on-close>
|
||||
<a-spin :spinning="isLoading">
|
||||
<div class="interactive-analysis-tools">
|
||||
<div class="interactive-analysis-tools-left">
|
||||
<div class="chart">
|
||||
<CustomChart
|
||||
ref="chartRef"
|
||||
:option="option"
|
||||
:opts="opts"
|
||||
@zr:mousedown="handleMouseDown"
|
||||
@zr:mouseup="handleMouseUp"
|
||||
@brushEnd="handleBrushEnd"
|
||||
@zr:click="handleChartClick"
|
||||
/>
|
||||
<rect-list
|
||||
ref="rectListRef"
|
||||
:chartRef="$refs.chartRef"
|
||||
:baseControls="baseCtrls_Copy"
|
||||
:draggable="isModifying"
|
||||
@move="handleMove"
|
||||
@moveEnd="handleMoveEnd"
|
||||
/>
|
||||
</div>
|
||||
<!-- 缩略图 -->
|
||||
<div class="thumbnail">
|
||||
<CustomChart :option="thumbnailOption" />
|
||||
</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
|
||||
ref="tableRef"
|
||||
size="small"
|
||||
:class="list.length ? 'has-data' : ''"
|
||||
:list="list"
|
||||
:columns="columns"
|
||||
:scroll="{ y: 288 }"
|
||||
:selectedRowKeys.sync="selectedKeys"
|
||||
rowKey="index"
|
||||
:canDeselect="false"
|
||||
@rowClick="handleTableRowClick"
|
||||
>
|
||||
</custom-table>
|
||||
<div class="operators">
|
||||
<a-button type="primary" @click="nuclideReviewModalVisible = true">Nuclide Review Window</a-button>
|
||||
<a-button type="primary" @click="handleAddPeakComment()">Add Peak Comment</a-button>
|
||||
<a-button type="primary" @click="handleAddGeneralComment()">Add General Comment</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表格结束 -->
|
||||
<custom-modal
|
||||
v-model="visible"
|
||||
:width="1280"
|
||||
class="interactive-analysis-tools-dialog"
|
||||
:enableFullScreen="true"
|
||||
title="Interactive Analyse Tools"
|
||||
:footer="null"
|
||||
destroy-on-close
|
||||
@fullscreen="handleFullScreenChange"
|
||||
>
|
||||
<div class="interactive-analysis-tools">
|
||||
<div class="interactive-analysis-tools-left">
|
||||
<div class="chart">
|
||||
<CustomChart
|
||||
ref="chartRef"
|
||||
:option="option"
|
||||
:opts="opts"
|
||||
@zr:mousedown="handleMouseDown"
|
||||
@zr:mouseup="handleMouseUp"
|
||||
@brushEnd="handleBrushEnd"
|
||||
@zr:click="handleChartClick"
|
||||
/>
|
||||
<rect-list
|
||||
ref="rectListRef"
|
||||
:chartRef="$refs.chartRef"
|
||||
:baseControls="baseCtrls_Copy"
|
||||
:draggable="isModifying"
|
||||
@move="handleMove"
|
||||
@moveEnd="handleMoveEnd"
|
||||
/>
|
||||
</div>
|
||||
<!-- 缩略图 -->
|
||||
<div class="thumbnail">
|
||||
<CustomChart ref="thumbnailRef" :option="thumbnailOption" />
|
||||
</div>
|
||||
<!-- 缩略图结束 -->
|
||||
|
||||
<!-- 右侧 -->
|
||||
<div class="interactive-analysis-tools-right">
|
||||
<title-over-border :title="btnGroupType == 1 ? 'Peak' : 'Baseline Control Points'">
|
||||
<div class="peak-box">
|
||||
<!-- 按钮组1 -->
|
||||
<template v-if="btnGroupType == 1">
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" @click="handleInsert">Insert</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" @click="handleDel">Delete</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" :class="{ 'is-fitting': isFitting }" @click="handleFit">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="handleSwitchOperation">BaseLine</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 按钮组2 -->
|
||||
<template v-if="btnGroupType == 2">
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" @click="handleAddCP">(A)dd CP</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" @click="handleRemoveCP">(R)emove CP</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button
|
||||
type="primary"
|
||||
key="modify-btn"
|
||||
:class="{ 'is-modify': isModifying }"
|
||||
@click="handleModifyCP"
|
||||
>(M)odify CP</a-button
|
||||
>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" @click="handleEditSlope">Edit (S)lope</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" :disabled="isOperationStackEmpty" @click="handleUndo">Undo</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" :loading="isReploting" @click="handleReplot">Replot</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" :loading="isAccepting" @click="handleAccept">Accept</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" @click="handleSwitchOperation">Cancel</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</title-over-border>
|
||||
<div class="reset-btn-box">
|
||||
<a-button type="primary" @click="handleResetChart">Reset Chart</a-button>
|
||||
<!-- 表格 -->
|
||||
<div class="table">
|
||||
<p class="title">
|
||||
<span @click="handleChangeMarkLine('prev')">< </span>
|
||||
6 Peaks with Anthro.Nuclides
|
||||
<span @click="handleChangeMarkLine('next')">></span>
|
||||
</p>
|
||||
<custom-table
|
||||
ref="tableRef"
|
||||
size="small"
|
||||
:class="list.length ? 'has-data' : ''"
|
||||
:list="list"
|
||||
:columns="columns"
|
||||
:scroll="{ y: 288 }"
|
||||
:selectedRowKeys.sync="selectedKeys"
|
||||
rowKey="index"
|
||||
:canDeselect="false"
|
||||
@rowClick="handleTableRowClick"
|
||||
>
|
||||
</custom-table>
|
||||
<div class="operators">
|
||||
<a-button type="primary" @click="nuclideReviewModalVisible = true">Nuclide Review Window</a-button>
|
||||
<a-button type="primary" @click="handleAddPeakComment()">Add Peak Comment</a-button>
|
||||
<a-button type="primary" @click="handleAddGeneralComment()">Add General Comment</a-button>
|
||||
</div>
|
||||
<div class="identify-box">
|
||||
<title-over-border title="Nuclide Identify">
|
||||
<a-form-model class="tolerance">
|
||||
<a-form-model-item label="Tolerance">
|
||||
<a-input-number
|
||||
v-model="model.tolerance"
|
||||
:step="0.1"
|
||||
:min="0"
|
||||
@change="handleToleranceChange"
|
||||
></a-input-number>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
<div class="identify-item">
|
||||
<div class="title">Possible Nuclide</div>
|
||||
<a-spin :spinning="!!(selectedTableItem && selectedTableItem._loading)">
|
||||
<div class="content">
|
||||
<template v-if="selectedTableItem && selectedTableItem._possible">
|
||||
<div
|
||||
class="item"
|
||||
:class="{ active: possible == model.possibleNuclide }"
|
||||
v-for="(possible, index) in selectedTableItem._possible"
|
||||
:key="index"
|
||||
@click="model.possibleNuclide = possible"
|
||||
>
|
||||
{{ possible }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
<!-- 表格结束 -->
|
||||
|
||||
<resize-observer @notify="handleResize" />
|
||||
</div>
|
||||
|
||||
<!-- 右侧 -->
|
||||
<div class="interactive-analysis-tools-right">
|
||||
<title-over-border class="peak-box-container" :title="btnGroupType == 1 ? 'Peak' : 'Baseline Control Points'">
|
||||
<div class="peak-box">
|
||||
<!-- 按钮组1 -->
|
||||
<template v-if="btnGroupType == 1">
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" @click="handleInsert">Insert</a-button>
|
||||
</div>
|
||||
<div class="identify-item">
|
||||
<div class="title">Nuclide Identified</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" @click="handleDel">Delete</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" :class="{ 'is-fitting': isFitting }" @click="handleFit">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="handleSwitchOperation">BaseLine</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 按钮组2 -->
|
||||
<template v-if="btnGroupType == 2">
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" @click="handleAddCP">(A)dd CP</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" @click="handleRemoveCP">(R)emove CP</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" key="modify-btn" :class="{ 'is-modify': isModifying }" @click="handleModifyCP"
|
||||
>(M)odify CP</a-button
|
||||
>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" @click="handleEditSlope">Edit (S)lope</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" :disabled="isOperationStackEmpty" @click="handleUndo">Undo</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" :loading="isReploting" @click="handleReplot">Replot</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" :loading="isAccepting" @click="handleAccept">Accept</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" @click="handleSwitchOperation">Cancel</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</title-over-border>
|
||||
<div class="reset-btn-box">
|
||||
<a-button type="primary" @click="handleResetChart">Reset Chart</a-button>
|
||||
</div>
|
||||
<div class="identify-box">
|
||||
<title-over-border title="Nuclide Identify">
|
||||
<a-form-model class="tolerance">
|
||||
<a-form-model-item label="Tolerance">
|
||||
<a-input-number
|
||||
v-model="model.tolerance"
|
||||
:step="0.1"
|
||||
:min="0"
|
||||
@change="handleToleranceChange"
|
||||
></a-input-number>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
<div class="identify-item">
|
||||
<div class="title">Possible Nuclide</div>
|
||||
<a-spin :spinning="!!(selectedTableItem && selectedTableItem._loading)">
|
||||
<div class="content">
|
||||
<template v-if="selectedTableItem">
|
||||
<template v-if="selectedTableItem && selectedTableItem._possible">
|
||||
<div
|
||||
class="item"
|
||||
:class="{ active: identified == model.identifiedNuclide }"
|
||||
v-for="(identified, index) in selectedTableItem.nuclides"
|
||||
:class="{ active: possible == model.possibleNuclide }"
|
||||
v-for="(possible, index) in selectedTableItem._possible"
|
||||
:key="index"
|
||||
@click="model.identifiedNuclide = identified"
|
||||
@click="model.possibleNuclide = possible"
|
||||
>
|
||||
{{ identified }}
|
||||
{{ possible }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
<div class="identify-item">
|
||||
<div class="title">Nuclide Identified</div>
|
||||
<div class="content">
|
||||
<template v-if="selectedTableItem">
|
||||
<div
|
||||
class="item"
|
||||
:class="{ active: identified == model.identifiedNuclide }"
|
||||
v-for="(identified, index) in selectedTableItem.nuclides"
|
||||
:key="index"
|
||||
@click="model.identifiedNuclide = identified"
|
||||
>
|
||||
{{ identified }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="identify-operators">
|
||||
<span class="text">{{ model.possibleNuclide }}</span>
|
||||
<a-button type="primary" :disabled="!model.possibleNuclide" @click="handleAddNuclide">Add</a-button>
|
||||
<a-button type="primary" @click="handleDelNuclide">Del</a-button>
|
||||
</div>
|
||||
</title-over-border>
|
||||
</div>
|
||||
</div>
|
||||
<div class="identify-operators">
|
||||
<span class="text">{{ model.possibleNuclide }}</span>
|
||||
<a-button type="primary" :disabled="!model.possibleNuclide" @click="handleAddNuclide">Add</a-button>
|
||||
<a-button type="primary" @click="handleDelNuclide">Del</a-button>
|
||||
</div>
|
||||
</title-over-border>
|
||||
</div>
|
||||
<!-- 右侧结束 -->
|
||||
</div>
|
||||
</a-spin>
|
||||
<!-- 右侧结束 -->
|
||||
</div>
|
||||
<!-- Peak Comment弹窗 开始 -->
|
||||
<peak-comment-modal v-model="peakCommentModalVisible" :curRow="curRow" />
|
||||
<!-- Peak Comment弹窗 结束 -->
|
||||
|
|
@ -450,8 +455,8 @@ export default {
|
|||
},
|
||||
},
|
||||
data() {
|
||||
this.columns = columns
|
||||
return {
|
||||
columns,
|
||||
searchParam: {
|
||||
energy: '',
|
||||
tolerance: '',
|
||||
|
|
@ -459,9 +464,6 @@ export default {
|
|||
option: cloneDeep(initialOption),
|
||||
opts: { notMerge: false },
|
||||
thumbnailOption: cloneDeep(thumbnailOption),
|
||||
|
||||
isLoading: false,
|
||||
|
||||
channelBaseCPChart: [],
|
||||
channelBaseLineChart: [],
|
||||
channelCountChart: [],
|
||||
|
|
@ -1703,6 +1705,15 @@ export default {
|
|||
clearOperationStack() {
|
||||
this.operationStack = []
|
||||
},
|
||||
|
||||
handleResize() {
|
||||
this.$refs.chartRef.resize()
|
||||
this.$refs.thumbnailRef.resize()
|
||||
},
|
||||
|
||||
handleFullScreenChange(isFullScreen) {
|
||||
this.columns[7].width = isFullScreen ? 180 : 120
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
curRow() {
|
||||
|
|
@ -1721,11 +1732,12 @@ export default {
|
|||
<style lang="less" scoped>
|
||||
.interactive-analysis-tools {
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
padding-top: 5px;
|
||||
gap: 20px;
|
||||
|
||||
&-left {
|
||||
width: 75%;
|
||||
margin-right: 20px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.chart {
|
||||
height: 331px;
|
||||
|
|
@ -1785,6 +1797,9 @@ export default {
|
|||
}
|
||||
|
||||
&-right {
|
||||
width: 290px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.peak-box {
|
||||
height: 326px;
|
||||
|
||||
|
|
@ -1836,6 +1851,8 @@ export default {
|
|||
}
|
||||
|
||||
.identify-item {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.title {
|
||||
background-color: #497e9d;
|
||||
height: 30px;
|
||||
|
|
@ -1847,7 +1864,7 @@ export default {
|
|||
.content {
|
||||
height: 80px;
|
||||
background-color: #275466;
|
||||
margin: 10px 0;
|
||||
margin-top: 10px;
|
||||
padding: 5px;
|
||||
overflow: auto;
|
||||
|
||||
|
|
@ -1897,3 +1914,78 @@ export default {
|
|||
color: #f00;
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.interactive-analysis-tools-dialog.fullscreen {
|
||||
.interactive-analysis-tools {
|
||||
height: calc(100vh - 90px);
|
||||
|
||||
&-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.chart {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.table {
|
||||
height: 397px;
|
||||
|
||||
.custom-table {
|
||||
height: calc(100% - 82px);
|
||||
|
||||
.ant-spin-nested-loading,
|
||||
.ant-spin-container,
|
||||
.ant-table,
|
||||
.ant-table-content,
|
||||
.ant-table-scroll {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-table-body {
|
||||
height: calc(100% - 25px) !important;
|
||||
max-height: calc(100% - 25px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.identify-box {
|
||||
flex: 1;
|
||||
padding-top: 5px;
|
||||
overflow: hidden;
|
||||
|
||||
.title-over-border {
|
||||
height: 100%;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.identify-item {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
|
||||
.ant-spin-nested-loading,
|
||||
.content {
|
||||
height: calc(100% - 40px);
|
||||
.ant-spin-container,
|
||||
.content {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user