feat(逆变器状态): 添加自定义对话框并优化布局

添加自定义对话框组件用于显示逆变器状态详情，包含背景渐变和图片展示。优化栅格布局结构，使用el-col组件规范间距。将对话框样式抽离到独立scss文件以便维护。

src/assets/styles/dialog.scss

@@ -0,0 +1,16 @@
+#custom-dialog {
+    padding: 0;
+
+    .el-dialog__header {
+        display: none;
+    }
+
+    .el-dialog__body {
+        padding: 0 !important;
+    }
+
+    .alert-content {
+        padding: 80px;
+        background: linear-gradient(180deg, rgba(0, 119, 255, 0.23) 0%, rgba(255, 255, 255, 0) 100%);
+    }
+}

src/assets/styles/index.scss

@@ -7,6 +7,8 @@
 @use './ruoyi.scss';
 @use 'animate.css';
 @use 'element-plus/dist/index.css';
+@use './dialog.scss';
+
 
 body {
   height: 100%;
@@ -208,4 +210,4 @@ aside {
     vertical-align: middle;
     margin-bottom: 10px;
   }
-}
+}

src/views/pvSystem/siteOverview/components/status.vue

@@ -1,4 +1,5 @@
 <template>
+
     <el-card shadow="never" style="border-radius: 10px;">
         <el-form :inline="true" :model="formInline" label-width="120" style="display: flex; justify-content: center;">
             <el-form-item label="规则编号">
@@ -53,11 +54,37 @@
         <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
             @pagination="getList" />
     </el-card>
+    <el-dialog v-model="dialogVisible" width="1000" id="custom-dialog" class="no-header-dialog normal">
+        <div class="alert-content">
+            <div class="img">
+                <img src="/assets/dialog1.png" alt="">
+            </div>
+        </div>
+    </el-dialog>
 </template>
+<style lang="scss" scoped></style>
+<style lang="scss">
+// #custom-dialog {
+//     padding: 0;
+
+//     .el-dialog__header {
+//         display: none;
+//     }
+
+//     .el-dialog__body {
+//         padding: 0 !important;
+//     }
+
+//     .alert-content {
+//         padding: 80px;
+//         background: linear-gradient(180deg, rgba(0, 119, 255, 0.23) 0%, rgba(255, 255, 255, 0) 100%);
+//     }
+// }</style>
 <script setup>
 const formInline = ref({})
 const total = ref(0);
 const loading = ref(false);
+const dialogVisible = ref(true);
 const listData = [
     { id: "INV-2023-001", shuchu: "12.8kw", xiaolv: "98.2%", wendu: "42℃", fadian: "158.5kWh", status: 1 },
     { id: "INV-2023-001", shuchu: "12.8kw", xiaolv: "98.2%", wendu: "42℃", fadian: "158.5kWh", status: 1 },

src/views/pvSystem/siteOverview/index.vue

@@ -177,11 +177,15 @@
                 <QiXiang />
             </el-col>
         </el-row>
-        <el-row>
+        <el-row :gutter="20"> <!-- gutter：列之间的间距（单位px），控制垂直/水平间距 -->
-            <div>
+            <!-- 标题列：占满12列（栅格系统默认12列） -->
+            <el-col> <!-- span=12 表示占满一行宽度 -->
                 <TitleComponent title="逆变器运行状态" :fontLevel="2" />
-            </div>
+            </el-col>
-            <status style="width: 100%;" />
+            <!-- status组件列：同样占满12列，与标题垂直排列 -->
+            <el-col>
+                <status style="width: 100%;" /> <!-- 确保组件宽度100%，不溢出 -->
+            </el-col>
         </el-row>
         <el-row style="display: flex;">
             <el-col :span="6" style="display: flex;flex-direction: column;">