From 311836e823e3047fdf84874310438a096badd817 Mon Sep 17 00:00:00 2001
From: selia-zx <1771203023@qq.com>
Date: Tue, 22 Apr 2025 09:59:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=B7=BB=E5=8A=A0=E4=BB=AA?=
=?UTF-8?q?=E8=A1=A8=E6=8A=A5=E8=AD=A6=E8=A7=84=E5=88=99=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/styles/sidebar.scss | 98 ++++++++++++++++++-----------
src/layout/index.vue | 9 ---
src/views/alarm/alarmRule/index.vue | 58 +++++++++--------
3 files changed, 93 insertions(+), 72 deletions(-)
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index c7a910c..0e799b8 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -1,21 +1,23 @@
+:root {
+ --base-sidebar-width: 232px;
+}
#app {
-
.main-container {
height: 100%;
- transition: margin-left .28s;
- margin-left: $base-sidebar-width;
+ transition: margin-left 0.28s;
+ margin-left: var(--base-sidebar-width);
position: relative;
overflow-x: hidden;
}
.sidebarHide {
- margin-left: 0!important;
+ margin-left: 0 !important;
}
.sidebar-container {
- -webkit-transition: width .28s;
+ -webkit-transition: width 0.28s;
transition: width 0.28s;
- width: $base-sidebar-width !important;
+ width: var(--base-sidebar-width) !important;
height: 100%;
// background-color: $base-menu-background;
background-image: url("../images/sidebar-bg.png");
@@ -28,12 +30,13 @@
left: 0;
z-index: 1001;
overflow: hidden;
- -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
- box-shadow: 2px 0 6px rgba(0,21,41,.35);
+ -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+ box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
// reset element-ui css
.horizontal-collapse-transition {
- transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+ transition: 0s width ease-in-out, 0s padding-left ease-in-out,
+ 0s padding-right ease-in-out;
}
.scrollbar-wrapper {
@@ -72,42 +75,49 @@
border: none;
height: 100%;
width: 100% !important;
- background-color: transparent!important;
+ background-color: transparent !important;
}
- .el-menu-item, .el-submenu__title {
+ .el-menu-item,
+ .el-submenu__title {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
background-color: #00477d !important;
}
- .el-menu-item.is-active{
+ .el-menu-item.is-active {
color: #ffffff !important;
font-weight: bold;
- background-image: linear-gradient(90deg, #0078cc 0%, #00477d 100%) !important;
+ background-image: linear-gradient(
+ 90deg,
+ #0078cc 0%,
+ #00477d 100%
+ ) !important;
}
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
&:hover {
- background-image: linear-gradient(90deg,
- #0078cc 0%,
- #00477d 100%) !important;
- color: #ffffff !important;
+ background-image: linear-gradient(
+ 90deg,
+ #0078cc 0%,
+ #00477d 100%
+ ) !important;
+ color: #ffffff !important;
}
}
& .theme-dark .is-active > .el-submenu__title {
color: $base-menu-color-active !important;
- // background-image: linear-gradient(90deg,
- // #0078cc 0%,
- // #00477d 100%) !important;
+ // background-image: linear-gradient(90deg,
+ // #0078cc 0%,
+ // #00477d 100%) !important;
}
- & .nest-menu .el-submenu>.el-submenu__title,
+ & .nest-menu .el-submenu > .el-submenu__title,
& .el-submenu .el-menu-item {
- min-width: $base-sidebar-width !important;
+ min-width: var(--base-sidebar-width) !important;
padding: 0 35px !important;
&:hover {
@@ -115,9 +125,8 @@
}
}
- & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
+ & .theme-dark .nest-menu .el-submenu > .el-submenu__title,
& .theme-dark .el-submenu .el-menu-item {
-
&:hover {
color: #ffffff !important;
background-color: #0077ca !important;
@@ -153,20 +162,19 @@
.el-submenu {
overflow: hidden;
- &>.el-submenu__title {
+ & > .el-submenu__title {
padding: 0 !important;
.svg-icon {
margin-left: 20px;
}
-
}
}
.el-menu--collapse {
.el-submenu {
- &>.el-submenu__title {
- &>span {
+ & > .el-submenu__title {
+ & > span {
height: 0;
width: 0;
overflow: hidden;
@@ -179,7 +187,7 @@
}
.el-menu--collapse .el-menu .el-submenu {
- min-width: $base-sidebar-width !important;
+ min-width: var(--base-sidebar-width) !important;
}
// mobile responsive
@@ -189,21 +197,20 @@
}
.sidebar-container {
- transition: transform .28s;
- width: $base-sidebar-width !important;
+ transition: transform 0.28s;
+ width: var(--base-sidebar-width) !important;
}
&.hideSidebar {
.sidebar-container {
pointer-events: none;
transition-duration: 0.3s;
- transform: translate3d(-$base-sidebar-width, 0, 0);
+ transform: translate3d(-var(--base-sidebar-width), 0, 0);
}
}
}
.withoutAnimation {
-
.main-container,
.sidebar-container {
transition: none;
@@ -214,10 +221,10 @@
// when menu collapsed
.el-menu--vertical {
background-color: #002c58 !important;
- .el-submenu{
+ .el-submenu {
background-color: #002c58 !important;
}
- &>.el-menu {
+ & > .el-menu {
background-color: #002c58 !important;
.svg-icon {
margin-right: 16px;
@@ -227,7 +234,7 @@
background-color: #002c58 !important;
}
// 修改侧边栏伸缩的时候，el-menu-item的样式
- .nest-menu .el-submenu>.el-submenu__title,
+ .nest-menu .el-submenu > .el-submenu__title,
.el-menu-item {
&:hover {
// you can use $subMenuHover
@@ -243,7 +250,7 @@
}
// the scroll bar appears when the subMenu is too long
- >.el-menu--popup {
+ > .el-menu--popup {
max-height: 100vh;
overflow-y: auto;
@@ -261,3 +268,20 @@
}
}
}
+
+// 固定的顶部样式
+.fixed-header {
+ position: fixed;
+ top: 0;
+ right: 0;
+ z-index: 999 !important;
+ width: calc(100% - var(--base-sidebar-width));
+ transition: width 0.28s;
+}
+
+// 媒体查询，适配大于2000px分辨率的大屏样式
+@media (min-width: 2000px) {
+ :root {
+ --base-sidebar-width: 232px;
+ }
+}
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 42906f0..44ccf17 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -88,15 +88,6 @@ export default {
z-index: 999;
}
- .fixed-header {
- position: fixed;
- top: 0;
- right: 0;
- z-index: 999 !important;
- width: calc(100% - #{$base-sidebar-width});
- transition: width 0.28s;
- }
-
.hideSidebar .fixed-header {
width: calc(100% - 54px);
}
diff --git a/src/views/alarm/alarmRule/index.vue b/src/views/alarm/alarmRule/index.vue
index 125c1d5..2db5229 100644
--- a/src/views/alarm/alarmRule/index.vue
+++ b/src/views/alarm/alarmRule/index.vue
@@ -158,10 +158,7 @@
-
-
-
-
+
-
+
@@ -460,8 +457,8 @@ import {
addAlarmRule,
updateAlarmRule,
} from "@/api/alarm/alarmRule";
-import { ledgerList } from "@/api/device/ledger";
import { cpmList } from "@/api/device/gather";
+import { ledgerList } from "@/api/device/ledger";
export default {
name: "alarmRule",
dicts: ["alarm_type", "alarm_event_type", "alarm_level", "sys_mt_type"],
@@ -571,12 +568,11 @@ export default {
threshold2: [{ validator: validateAtLeastOnePair, trigger: "blur" }],
},
devices: [], //设备列表
- meters: [], //仪表列表
+ cpmList: [], //采集点位列表
};
},
created() {
this.getDeviceList();
- this.getMeterList();
this.getList();
},
methods: {
@@ -601,16 +597,6 @@ export default {
this.devices = response.rows;
});
},
- // 查询仪表列表
- getMeterList() {
- let data = {
- pageNum: 1,
- pageSize: 100000,
- };
- cpmList(data).then((response) => {
- this.meters = response.rows;
- });
- },
/** 查询报警编码列表 */
getList() {
this.loading = true;
@@ -680,16 +666,36 @@ export default {
// 在这里可以进行其他操作，比如发送请求等
this.form.ledgerId = selectedValue;
this.form.deviceName = selectedLabel;
+ // 请求采集位点
+ this.getCpmIdList(this.form.ledgerId);
}
},
- // 弹框选择仪表名称
+ //采集参数列表
+ getCpmIdList(id) {
+ let data = {
+ pageNum: 1,
+ pageSize: 10000,
+ beginTime: "",
+ endTime: "",
+ mtType: "",
+ mtNum: "",
+ deviceLedgerId: id,
+ systemType: "",
+ paramType: "",
+ };
+ cpmList(data).then((response) => {
+ this.cpmList = response.rows;
+ console.log("this.cpmList", this.cpmList);
+ });
+ },
+ // 弹框选择采集类型
handleMeter(selectedValue) {
// 通过选中的 value 找到对应的 label
- const selectedItem = this.meters.find(
+ const selectedItem = this.cpmList.find(
(item) => item.id === selectedValue
);
if (selectedItem) {
- const selectedLabel = selectedItem.mtType;
+ const selectedLabel = selectedItem.otherName;
console.log("选中的 value:", selectedValue);
console.log("选中的 label:", selectedLabel);
// 在这里可以进行其他操作，比如发送请求等