feat: 调整智能化验室数据table滚动条

src/views/data/ComparisonView.vue

@@ -37,7 +37,7 @@ const dateThemeOverrides = {
 }
 
 const dateRange = computed(() => {
-  const [ begin, end ] = timeRangeValue.value || [];
+  const [begin, end] = timeRangeValue.value || [];
   let timeBegin = '';
   let timeEnd = '';
 
@@ -74,16 +74,16 @@ const handlePageChange = (page) => {
 // 初始化ecahrt数据
 const initEchartData = async () => {
   dataApi.getForecastEchart({ category: selectValue.value, ...dateRange.value }).then(({ data }) => {
-
+    if ( data?.code == 500 ) return;
     Object.keys(data).forEach(key => {
       const len = data[key].data.length;
-      if ( !data[key].data[len - 1] ) {
+      if (!data[key].data[len - 1]) {
         data[key].data.pop()
       }
     })
 
     const reusltData = data.hs.data.splice(data.real.data.length, data.hs.data.length - data.real.data.length);
-    
+
     let xAxisData = [];
 
     xAxisData = [...data.yy.time];
@@ -94,9 +94,9 @@ const initEchartData = async () => {
       { name: '机理预测值', val: data.jl.data.map(item => formatTofixed(item)) }
     ]
 
-    const specificData = new Array(data.hs.data.length).fill(null).concat( reusltData );
+    const specificData = new Array(data.hs.data.length).fill(null).concat(reusltData);
 
-    const option = getEchartMultiLineOption({ xAxisData, echartData, specificData:specificData });
+    const option = getEchartMultiLineOption({ xAxisData, echartData, specificData: specificData });
 
     echart.setOption(option);
 
@@ -151,12 +151,14 @@ const handleSelectOptions = (val) => {
           <div class="header">
             <h4 class="title">预测数据</h4>
             <div class="flex items-center space-x-[10px]">
-              <NSelect class="w-[150px]" :options="selectOptions" :value="selectValue" :on-update:value="handleSelectOptions" size="small" />
-              <NDatePicker type="daterange" size="small" clearable input-readonly :themeOverrides="dateThemeOverrides" :on-confirm="onDatePickerConfirm" :on-clear="onDatePickerClear" />
+              <NSelect class="w-[150px]" :options="selectOptions" :value="selectValue"
+                :on-update:value="handleSelectOptions" size="small" />
+              <NDatePicker type="daterange" size="small" clearable input-readonly :themeOverrides="dateThemeOverrides"
+                :on-confirm="onDatePickerConfirm" :on-clear="onDatePickerClear" />
             </div>
           </div>
-          <div class="main">
-            <NScrollbar style="height: 100%;">
+          <NScrollbar style="height: 100%;">
+            <div class="main">
               <div class="echart-box">
                 <p class="title">数据趋势图「小时」</p>
                 <div class="h-full w-full" ref="echartRef"></div>
@@ -164,7 +166,7 @@ const handleSelectOptions = (val) => {
               <div class="table-box w-full">
                 <p class="title">表格数据</p>
                 <div class="pt-[12px]">
-                  <n-data-table size="small" :columns="ForecastColumns" :data="tableData" :bordered="false" :scroll-x="1700"
+                  <n-data-table size="small" :columns="ForecastColumns" :data="tableData" :bordered="false"
                     layout="table" />
                 </div>
                 <div class="flex justify-center mt-[14px] mb-[10px]">
@@ -172,8 +174,8 @@ const handleSelectOptions = (val) => {
                     :on-update:page="handlePageChange"></NPagination>
                 </div>
               </div>
-            </NScrollbar>
-          </div>
+            </div>
+          </NScrollbar>
         </div>
       </template>
     </TheChatView>
@@ -184,6 +186,7 @@ const handleSelectOptions = (val) => {
 .comparison-wrapper {
   width: calc(100vw - 240px);
 }
+
 .comparison-container {
   display: flex;
   flex-flow: column;
@@ -204,12 +207,13 @@ const handleSelectOptions = (val) => {
   :deep(.n-base-selection__border) {
     border: none;
   }
-  
+
   :deep(.n-base-selection__state-border),
   :deep(.n-base-selection__border) {
     display: none;
     border: 0 !important;
   }
+
   :deep(.n-base-selection-input__content) {
     color: #333;
   }
@@ -232,8 +236,8 @@ const handleSelectOptions = (val) => {
 }
 
 .main {
-  flex: 1;
-  height: 100%;
+  // flex: 1;
+  // height: 100%;
   padding: 0 16px;
   overflow: hidden;