lijianfu
/
eemcs_ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改添加仪表报警规则参数

dev
selia-zx 2 weeks ago
parent
4e50b6d30e
commit
311836e823
3 changed files with 93 additions and 72 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 98
      src/assets/styles/sidebar.scss
  2. 9
      src/layout/index.vue
  3. 58
      src/views/alarm/alarmRule/index.vue

98
src/assets/styles/sidebar.scss
Unescape View File

@ -1,21 +1,23 @@
:root {
--base-sidebar-width: 232px;
}
#app { #app {
.main-container { .main-container {
height: 100%; height: 100%;
transition: margin-left .28s; transition: margin-left 0.28s;
margin-left: $base-sidebar-width; margin-left: var(--base-sidebar-width);
position: relative; position: relative;
overflow-x: hidden; overflow-x: hidden;
} }
.sidebarHide { .sidebarHide {
margin-left: 0!important; margin-left: 0 !important;
} }
.sidebar-container { .sidebar-container {
-webkit-transition: width .28s; -webkit-transition: width 0.28s;
transition: width 0.28s; transition: width 0.28s;
width: $base-sidebar-width !important; width: var(--base-sidebar-width) !important;
height: 100%; height: 100%;
// background-color: $base-menu-background; // background-color: $base-menu-background;
background-image: url("../images/sidebar-bg.png"); background-image: url("../images/sidebar-bg.png");
@ -28,12 +30,13 @@
left: 0; left: 0;
z-index: 1001; z-index: 1001;
overflow: hidden; overflow: hidden;
-webkit-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,.35); box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
// reset element-ui css // reset element-ui css
.horizontal-collapse-transition { .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 { .scrollbar-wrapper {
@ -72,42 +75,49 @@
border: none; border: none;
height: 100%; height: 100%;
width: 100% !important; 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; overflow: hidden !important;
text-overflow: ellipsis !important; text-overflow: ellipsis !important;
white-space: nowrap !important; white-space: nowrap !important;
background-color: #00477d !important; background-color: #00477d !important;
} }
.el-menu-item.is-active{ .el-menu-item.is-active {
color: #ffffff !important; color: #ffffff !important;
font-weight: bold; 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 // menu hover
.submenu-title-noDropdown, .submenu-title-noDropdown,
.el-submenu__title { .el-submenu__title {
&:hover { &:hover {
background-image: linear-gradient(90deg, background-image: linear-gradient(
#0078cc 0%, 90deg,
#00477d 100%) !important; #0078cc 0%,
color: #ffffff !important; #00477d 100%
) !important;
color: #ffffff !important;
} }
} }
& .theme-dark .is-active > .el-submenu__title { & .theme-dark .is-active > .el-submenu__title {
color: $base-menu-color-active !important; color: $base-menu-color-active !important;
// background-image: linear-gradient(90deg, // background-image: linear-gradient(90deg,
// #0078cc 0%, // #0078cc 0%,
// #00477d 100%) !important; // #00477d 100%) !important;
} }
& .nest-menu .el-submenu>.el-submenu__title, & .nest-menu .el-submenu > .el-submenu__title,
& .el-submenu .el-menu-item { & .el-submenu .el-menu-item {
min-width: $base-sidebar-width !important; min-width: var(--base-sidebar-width) !important;
padding: 0 35px !important; padding: 0 35px !important;
&:hover { &: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 { & .theme-dark .el-submenu .el-menu-item {
&:hover { &:hover {
color: #ffffff !important; color: #ffffff !important;
background-color: #0077ca !important; background-color: #0077ca !important;
@ -153,20 +162,19 @@
.el-submenu { .el-submenu {
overflow: hidden; overflow: hidden;
&>.el-submenu__title { & > .el-submenu__title {
padding: 0 !important; padding: 0 !important;
.svg-icon { .svg-icon {
margin-left: 20px; margin-left: 20px;
} }
} }
} }
.el-menu--collapse { .el-menu--collapse {
.el-submenu { .el-submenu {
&>.el-submenu__title { & > .el-submenu__title {
&>span { & > span {
height: 0; height: 0;
width: 0; width: 0;
overflow: hidden; overflow: hidden;
@ -179,7 +187,7 @@
} }
.el-menu--collapse .el-menu .el-submenu { .el-menu--collapse .el-menu .el-submenu {
min-width: $base-sidebar-width !important; min-width: var(--base-sidebar-width) !important;
} }
// mobile responsive // mobile responsive
@ -189,21 +197,20 @@
} }
.sidebar-container { .sidebar-container {
transition: transform .28s; transition: transform 0.28s;
width: $base-sidebar-width !important; width: var(--base-sidebar-width) !important;
} }
&.hideSidebar { &.hideSidebar {
.sidebar-container { .sidebar-container {
pointer-events: none; pointer-events: none;
transition-duration: 0.3s; transition-duration: 0.3s;
transform: translate3d(-$base-sidebar-width, 0, 0); transform: translate3d(-var(--base-sidebar-width), 0, 0);
} }
} }
} }
.withoutAnimation { .withoutAnimation {
.main-container, .main-container,
.sidebar-container { .sidebar-container {
transition: none; transition: none;
@ -214,10 +221,10 @@
// when menu collapsed // when menu collapsed
.el-menu--vertical { .el-menu--vertical {
background-color: #002c58 !important; background-color: #002c58 !important;
.el-submenu{ .el-submenu {
background-color: #002c58 !important; background-color: #002c58 !important;
} }
&>.el-menu { & > .el-menu {
background-color: #002c58 !important; background-color: #002c58 !important;
.svg-icon { .svg-icon {
margin-right: 16px; margin-right: 16px;
@ -227,7 +234,7 @@
background-color: #002c58 !important; background-color: #002c58 !important;
} }
// 修改侧边栏伸缩的时候，el-menu-item的样式 // 修改侧边栏伸缩的时候，el-menu-item的样式
.nest-menu .el-submenu>.el-submenu__title, .nest-menu .el-submenu > .el-submenu__title,
.el-menu-item { .el-menu-item {
&:hover { &:hover {
// you can use $subMenuHover // you can use $subMenuHover
@ -243,7 +250,7 @@
} }
// the scroll bar appears when the subMenu is too long // the scroll bar appears when the subMenu is too long
>.el-menu--popup { > .el-menu--popup {
max-height: 100vh; max-height: 100vh;
overflow-y: auto; 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;
}
}

9
src/layout/index.vue
Unescape View File

@ -88,15 +88,6 @@ export default {
z-index: 999; 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 { .hideSidebar .fixed-header {
width: calc(100% - 54px); width: calc(100% - 54px);
} }

58
src/views/alarm/alarmRule/index.vue
Unescape View File

@ -158,10 +158,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="设备名称" align="center" prop="deviceName" /> <el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column label="仪表名称" align="center" prop="cpmId"> <el-table-column label="采集点位" align="center" prop="cpmName">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_mt_type" :value="scope.row.cpmId" />
</template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="报警延时时间" label="报警延时时间"
@ -267,18 +264,18 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="仪表名称" prop="cpmId"> <el-form-item label="采集点位" prop="cpmId">
<el-select <el-select
v-model="form.cpmId" v-model="form.cpmId"
placeholder="请选择仪表类型" placeholder="请选择设备类型"
clearable clearable
@change="handleMeter" @change="handleMeter"
> >
<el-option <el-option
v-for="dict in dict.type.sys_mt_type" v-for="item in cpmList"
:key="dict.value" :key="item.id"
:label="dict.label" :label="item.otherName"
:value="dict.value" :value="item.id"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -460,8 +457,8 @@ import {
addAlarmRule, addAlarmRule,
updateAlarmRule, updateAlarmRule,
} from "@/api/alarm/alarmRule"; } from "@/api/alarm/alarmRule";
import { ledgerList } from "@/api/device/ledger";
import { cpmList } from "@/api/device/gather"; import { cpmList } from "@/api/device/gather";
import { ledgerList } from "@/api/device/ledger";
export default { export default {
name: "alarmRule", name: "alarmRule",
dicts: ["alarm_type", "alarm_event_type", "alarm_level", "sys_mt_type"], dicts: ["alarm_type", "alarm_event_type", "alarm_level", "sys_mt_type"],
@ -571,12 +568,11 @@ export default {
threshold2: [{ validator: validateAtLeastOnePair, trigger: "blur" }], threshold2: [{ validator: validateAtLeastOnePair, trigger: "blur" }],
}, },
devices: [], //设备列表 devices: [], //设备列表
meters: [], //仪表列表 cpmList: [], //采集点位列表
}; };
}, },
created() { created() {
this.getDeviceList(); this.getDeviceList();
this.getMeterList();
this.getList(); this.getList();
}, },
methods: { methods: {
@ -601,16 +597,6 @@ export default {
this.devices = response.rows; this.devices = response.rows;
}); });
}, },
// 查询仪表列表
getMeterList() {
let data = {
pageNum: 1,
pageSize: 100000,
};
cpmList(data).then((response) => {
this.meters = response.rows;
});
},
/** 查询报警编码列表 */ /** 查询报警编码列表 */
getList() { getList() {
this.loading = true; this.loading = true;
@ -680,16 +666,36 @@ export default {
// 在这里可以进行其他操作，比如发送请求等 // 在这里可以进行其他操作，比如发送请求等
this.form.ledgerId = selectedValue; this.form.ledgerId = selectedValue;
this.form.deviceName = selectedLabel; 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) { handleMeter(selectedValue) {
// 通过选中的 value 找到对应的 label // 通过选中的 value 找到对应的 label
const selectedItem = this.meters.find( const selectedItem = this.cpmList.find(
(item) => item.id === selectedValue (item) => item.id === selectedValue
); );
if (selectedItem) { if (selectedItem) {
const selectedLabel = selectedItem.mtType; const selectedLabel = selectedItem.otherName;
console.log("选中的 value:", selectedValue); console.log("选中的 value:", selectedValue);
console.log("选中的 label:", selectedLabel); console.log("选中的 label:", selectedLabel);
// 在这里可以进行其他操作，比如发送请求等 // 在这里可以进行其他操作，比如发送请求等

Write Preview
Loading…
Cancel
Save