Просмотр исходного кода

填加历史温度对话框高度限制

ljx 5 месяцев назад
Родитель
Сommit
7ef031b613
1 измененных файлов с 49 добавлено и 13 удалено
  1. 49 13
      src/views/disaster/overview/components/WeatherCard.vue

+ 49 - 13
src/views/disaster/overview/components/WeatherCard.vue

@@ -45,27 +45,28 @@
 
           <!-- 表格 -->
           <div v-else class="dialog-content">
-            <el-table :data="historyTemperatureList" border stripe style="width: 100%;">
-              <el-table-column label="日期" align="center" width="180">
+            <el-table :data="historyTemperatureList" border stripe style="width: 100%;" max-height="calc(80vh - 120px)">
+              <el-table-column label="日期" align="center" width="170">
                 <template #default="scope">
                   {{ scope.row.dataTime ? scope.row.dataTime.slice(0, 10) : '--' }}
                 </template>
               </el-table-column>
-              <el-table-column label="最高温度(℃)" prop="maxTemperature" align="center" width="180">
+              <el-table-column label="最高温度(℃)" prop="maxTemperature" align="center" width="170">
                 <template #default="scope">
                   <span> {{ scope.row.maxTemperature ?? "--" }} </span>
                 </template>
               </el-table-column>
-              <el-table-column label="最低温度(℃)" prop="minTemperature" align="center" width="180" />
+              <el-table-column label="最低温度(℃)" prop="minTemperature" align="center" width="170">
+                <template #default="scope">
+                  <span> {{ scope.row.minTemperature ?? "--" }} </span>
+                </template>
+              </el-table-column>
             </el-table>
-
             <!-- 无数据提示 -->
             <div v-if="historyTemperatureList.length === 0" class="no-data">
               <el-empty description="暂无历史温度数据" />
             </div>
           </div>
-
-
         </el-dialog>
       </div>
 
@@ -87,7 +88,8 @@ import fireIcon from '@/assets/images/weather-icons/fire.png'
 import historyTemperatureIcon from '@/assets/images/weather-icons/history-temperature.png'
 import {
   ElButton,
-  ElDialog
+  ElDialog,
+  ElMessage
 } from 'element-plus';
 
 import { Calendar, Download } from "@element-plus/icons-vue"
@@ -176,6 +178,11 @@ const getHistoryTempDataAndOpenDialog = async () => {
     historyTemperatureList.value = res || [];
     isDialogOpen.value = true;
   } catch (error) {
+    ElMessage.error({
+      message: "请求后端数据失败",
+      showClose: true,
+      duration: 2000
+    });
     console.error("获取历史温度数据失败", error);
     isLoading.value = false;
     historyTemperatureList.value = [];
@@ -306,8 +313,6 @@ onUnmounted(() => {
     display: flex;
     gap: 6px;
     margin-top: 40px;
-
-
   }
 
   .icon-fire {
@@ -319,7 +324,7 @@ onUnmounted(() => {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-top: 20px;
+    margin-top: 15px;
 
     .temperature {
       font-family: Helvetica, Helvetica;
@@ -354,7 +359,7 @@ onUnmounted(() => {
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-top: 20px;
+    margin-top: 15px;
   }
 
   .icon-history-temperature {
@@ -386,9 +391,9 @@ onUnmounted(() => {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
 
   .el-dialog__header {
-    background: transparent !important;
     padding: 16px 0px !important;
     border: none !important;
+    position: relative;
   }
 
   .el-dialog__title {
@@ -412,6 +417,37 @@ onUnmounted(() => {
       font-style: normal !important;
     }
   }
+
+  .el-table__body {
+    .el-table__cell {
+      font-family: 'PingFang SC' !important;
+      font-weight: 400 !important;
+      font-size: 14px !important;
+      color: #303133 !important;
+      line-height: 22px !important;
+      text-align: left !important;
+      font-style: normal !important;
+    }
+  }
+
+  .el-dialog__headerbtn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-top: 0;
+    margin-right: -15px;
+  }
+
+  .el-dialog__close {
+    font-size: 16px !important;
+  }
+
+  .no-data {
+    width: 100%;
+    padding: 40px 0;
+    text-align: center;
+  }
+
 }
 
 .disaster-emergency-tips {