From c027533d4ff421c4b6e412d0dfee22357f6081d3 Mon Sep 17 00:00:00 2001 From: tcy <1193318383@qq.com> Date: Mon, 22 Sep 2025 16:49:50 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=AF=B9=E8=AF=9D=E6=A1=86=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F):=20=E9=87=8D=E6=9E=84=E5=AF=B9=E8=AF=9D=E6=A1=86?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=B9=B6=E6=B7=BB=E5=8A=A0=E8=AF=A6=E7=BB=86?= =?UTF-8?q?=E4=BF=A1=E6=81=AF=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 调整对话框布局和样式，增加顶部对齐 - 添加设备状态、运行信息等详细展示区域 - 实现不同状态的颜色区分显示 - 默认隐藏对话框，改为点击触发显示 --- src/assets/styles/dialog.scss | 101 +++++++++++++++++- .../siteOverview/components/status.vue | 89 ++++++++++++++- 2 files changed, 185 insertions(+), 5 deletions(-) diff --git a/src/assets/styles/dialog.scss b/src/assets/styles/dialog.scss index a00f472..5e92c76 100644 --- a/src/assets/styles/dialog.scss +++ b/src/assets/styles/dialog.scss @@ -1,8 +1,12 @@ #custom-dialog { padding: 0; + top: 0; .el-dialog__header { - display: none; + // display: none; + border: none; + padding: 0; + margin: 0; } .el-dialog__body { @@ -10,7 +14,100 @@ } .alert-content { - padding: 80px; background: linear-gradient(180deg, rgba(0, 119, 255, 0.23) 0%, rgba(255, 255, 255, 0) 100%); + display: flex; + align-items: center; + justify-content: space-between; + padding-left: 20px; + padding-right: 50px; + + .info { + display: flex; + flex-direction: column; + gap: 10px; + + .title { + color: rgba(0, 30, 59, 1); + font-size: 20px; + font-weight: bold; + } + + .name { + color: rgba(0, 30, 59, 1); + font-weight: bold; + } + + .icon { + display: flex; + align-items: center; + font-size: 12px; + + .last-update { + // font-size: ; + color: rgba(113, 128, 150, 1); + margin-left: 15px; + } + + svg { + width: 15px; + height: 15px; + } + + .text { + font-size: 12px; + margin-left: 10px; + } + + + } + + + } + + .img { + width: 240px; + height: 240px; + + img { + width: 100%; + height: 100%; + display: block; + } + } + + .info-box { + font-size: 12px; + display: flex; + gap: 40px; + margin-left: 30px; + + .item { + display: flex; + flex-direction: column; + gap: 20px; + } + + .title { + color: rgba(113, 128, 150, 1); + margin-bottom: 10px; + } + + .text { + font-weight: bold; + color: rgba(0, 30, 59, 1); + } + } + } + + .alert-content .success { + color: rgba(0, 184, 122, 1) !important; + } + + .alert-content .orange { + color: rgba(255, 153, 0, 1) !important; + } + + .alert-content .red { + color: rgba(227, 39, 39, 1) !important; } } \ No newline at end of file diff --git a/src/views/pvSystem/siteOverview/components/status.vue b/src/views/pvSystem/siteOverview/components/status.vue index f99e9e3..db31309 100644 --- a/src/views/pvSystem/siteOverview/components/status.vue +++ b/src/views/pvSystem/siteOverview/components/status.vue @@ -54,11 +54,94 @@ - -
+ +
+
+
INV-2023-001
+
华为 SUN2000-60KTL-M0
+
+
+ + + + + + + + + + + + + + + + + +
正常运行
+
最后更新：刚刚
+
+
+
+
+
+
+
安装位置
+
光伏区A区-3排-08号
+
+
+
运行时长
+
402天18小时
+
+
+
+
+
安装日期
+
2022-06-15
+
+
+
上次维护
+
2025-05-20
+
+
+
+
+
通讯状态
+
正常
+
+
+
固件版本
+
V200R001CC00SPC105
+
+
+
+
+
IP地址
+
192.168.1.1
+
+
+
累计发电量
+
128,562.4Kwh
+
+
+
@@ -84,7 +167,7 @@ const formInline = ref({}) const total = ref(0); const loading = ref(false); -const dialogVisible = ref(true); +const dialogVisible = ref(false); 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 },