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

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;
+  }
+}

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);
   }

src/views/alarm/alarmRule/index.vue

@@ -158,10 +158,7 @@
         </template>
       </el-table-column>
       <el-table-column label="设备名称" align="center" prop="deviceName" />
-      <el-table-column label="仪表名称" align="center" prop="cpmId">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_mt_type" :value="scope.row.cpmId" />
-        </template>
+      <el-table-column label="采集点位" align="center" prop="cpmName">
       </el-table-column>
       <el-table-column
         label="报警延时时间"
@@ -267,18 +264,18 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="仪表名称" prop="cpmId">
+            <el-form-item label="采集点位" prop="cpmId">
               <el-select
                 v-model="form.cpmId"
-                placeholder="请选择仪表类型"
+                placeholder="请选择设备类型"
                 clearable
                 @change="handleMeter"
               >
                 <el-option
-                  v-for="dict in dict.type.sys_mt_type"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
+                  v-for="item in cpmList"
+                  :key="item.id"
+                  :label="item.otherName"
+                  :value="item.id"
                 />
               </el-select>
             </el-form-item>
@@ -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);
         // 在这里可以进行其他操作，比如发送请求等