fix: 交互分析弹窗增加全屏功能

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>

src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue

@@ -1,6 +1,14 @@
 <template>
-  <custom-modal v-model="visible" :width="1280" title="Interactive Analyse Tools" :footer="null" destroy-on-close>
-    <a-spin :spinning="isLoading">
+  <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">
@@ -24,7 +32,7 @@
         </div>
         <!-- 缩略图 -->
         <div class="thumbnail">
-            <CustomChart :option="thumbnailOption" />
+          <CustomChart ref="thumbnailRef" :option="thumbnailOption" />
         </div>
         <!-- 缩略图结束 -->
 
@@ -55,11 +63,13 @@
           </div>
         </div>
         <!-- 表格结束 -->
+
+        <resize-observer @notify="handleResize" />
       </div>
 
       <!-- 右侧 -->
       <div class="interactive-analysis-tools-right">
-          <title-over-border :title="btnGroupType == 1 ? 'Peak' : 'Baseline Control Points'">
+        <title-over-border class="peak-box-container" :title="btnGroupType == 1 ? 'Peak' : 'Baseline Control Points'">
           <div class="peak-box">
             <!-- 按钮组1 -->
             <template v-if="btnGroupType == 1">
@@ -91,11 +101,7 @@
                 <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"
+                <a-button type="primary" key="modify-btn" :class="{ 'is-modify': isModifying }" @click="handleModifyCP"
                   >(M)odify CP</a-button
                 >
               </div>
@@ -176,7 +182,6 @@
       </div>
       <!-- 右侧结束 -->
     </div>
-    </a-spin>
     <!-- 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>