UPDATE: 布局样式优化。

frontend/src/views/home/components/reportResultPopup.vue

@@ -3,7 +3,7 @@
         v-model="dialogVisible"
         title="报告生成"
         destroy-on-close
-        width="900"
+        width="750"
         draggable
         :close-on-click-modal="false"
     >
@@ -14,34 +14,81 @@
                 :label="`测量回路${result.monitorNum}`"
                 :name="index"
             >
-                <el-descriptions style="padding: 10px" :column="4" border>
+                <el-row :gutter="20" style="margin-top: 10px">
-                    <el-descriptions-item label="总测试次数：" label-align="right">
+                    <el-col :span="8">
-                        <el-text type="primary" tag="b">{{ result.totalNum }}</el-text>
+                        <div
+                            style="
+                                background-color: #f9fafb;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                padding: 15px;
+                                border-radius: 5px;
+                            "
+                        >
+                            <el-text style="margin-right: 10px">总测试次数：</el-text>
+                            <el-text size="large" type="primary" tag="b">
+                                {{ result.totalNum }}
+                            </el-text>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div
+                            style="
+                                background-color: #f9fafb;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                padding: 15px;
+                                border-radius: 5px;
+                            "
+                        >
+                            <el-text style="margin-right: 10px">符合次数：</el-text>
+                            <el-text size="large" type="success" tag="b">{{ result.qualifiedNum }}</el-text>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div
+                            style="
+                                background-color: #f9fafb;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                padding: 15px;
+                                border-radius: 5px;
+                            "
+                        >
+                            <el-text style="margin-right: 10px">不符合次数：</el-text>
+                            <el-text size="large" type="danger" tag="b">{{ result.unQualifiedNum }}</el-text>
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-descriptions :column="1" style="margin-top: 20px">
+                    <el-descriptions-item label-align="right">
+                        <template #label>
+                            <el-text type="info">测试标准：</el-text>
+                        </template>
+                        <el-text>{{ result.errorSysName }}</el-text>
                     </el-descriptions-item>
-                    <el-descriptions-item label="合格次数：" label-align="right">
+                    <el-descriptions-item label-align="right">
-                        <el-text type="success" tag="b">{{ result.qualifiedNum }}</el-text>
+                        <template #label>
-                    </el-descriptions-item>
+                            <el-text type="info">检测结论：</el-text>
-                    <el-descriptions-item label="不合格次数：" label-align="right">
+                        </template>
-                        <el-text type="danger" tag="b">{{ result.unQualifiedNum }}</el-text>
-                    </el-descriptions-item>
-                    <el-descriptions-item label="测试标准：" label-align="right">
-                        <el-text type="info">{{ result.errorSysName }}</el-text>
-                    </el-descriptions-item>
-                    <el-descriptions-item label="检测结论：" label-align="right">
                         <el-tag disable-transitions v-if="result.checkResult === 1" type="success">符合</el-tag>
                         <el-tag disable-transitions v-else-if="result.checkResult === 2" type="danger">不符合</el-tag>
                         <el-tag disable-transitions v-else-if="result.checkResult === 4" type="danger">无法比较</el-tag>
                     </el-descriptions-item>
-                    <el-descriptions-item label="结论来源：" label-align="right">
+                    <el-descriptions-item label-align="right">
-                        <div style="display: flex; align-items: center; justify-content: space-between">
+                        <template #label>
+                            <el-text type="info">结论来源：</el-text>
+                        </template>
                         <el-text>第{{ result.whichTime }}次检测的{{ result.resultOrigin }}</el-text>
-                            <el-button type="primary" size="small" @click="handleChooseClick">重新选择</el-button>
-                        </div>
                     </el-descriptions-item>
                 </el-descriptions>
             </el-tab-pane>
         </el-tabs>
         <template #footer>
+            <el-button type="primary" size="small" @click="handleChooseClick">重新选择</el-button>
             <el-button type="primary">确认生成</el-button>
         </template>
         <!--        选择检测数据源弹框-->