From 07a3dc7c3aaf110f2959b385af13f000c457cc8d Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Thu, 29 Feb 2024 17:57:34 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BA=A4=E4=BA=92=E5=88=86=E6=9E=90?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E5=A2=9E=E5=8A=A0=E5=85=A8=E5=B1=8F=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/NuclideReviewModal.vue         |   2 +-
 .../AnalyzeInteractiveToolModal/index.vue     | 434 +++++++++++-------
 2 files changed, 264 insertions(+), 172 deletions(-)

diff --git a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewModal.vue b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewModal.vue
index 33285ab..9fc8b11 100644
--- a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewModal.vue
@@ -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')">&lt;</span>
diff --git a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue
index 03e8b58..e81a4f5 100644
--- a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue
+++ b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue
@@ -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')">&lt; </span>
-              6 Peaks with Anthro.Nuclides
-              <span @click="handleChangeMarkLine('next')">&gt;</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')">&lt;</a-button>
-                  <a-button type="primary" @click="handleChangeMarkLine('next')">&gt;</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')">&lt; </span>
+            6 Peaks with Anthro.Nuclides
+            <span @click="handleChangeMarkLine('next')">&gt;</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')">&lt;</a-button>
+                <a-button type="primary" @click="handleChangeMarkLine('next')">&gt;</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>