🌷 UI(内容): 给企业端子断路器设备信息添加告警配置

src/views/profile/DeviceDetailsView/index.vue

@@ -8,13 +8,14 @@
       @changeEvent="viewDeviceChange($event)"
       @wsRealTImeMsg="wsRealTImeMsg($event)"
     ></device-select>
-    <div :class="infoData.deviceType === 'GATEWAY_CONTROLLER' ? 'link-to-list is-widening': 'link-to-list'" class="main-device-card">
+    <div class="main-device-card">
+      <div :class="infoData.deviceType === 'GATEWAY_CONTROLLER' ? 'link-to-list is-widening': 'link-to-list'">
         <el-button circle icon="el-icon-d-arrow-left" style="margin-left: 10px;" title="返回列表" @click="toTableClick"
         >返回列表</el-button
         >
         <el-button v-if="infoData.deviceType === 'GATEWAY_CONTROLLER'" circle title="批量升级" @click="batchUpgradeOpen">批量升级</el-button>
       </div>
-    <div class="info-tabs-circuit main-device-card">
+      <div class="info-tabs-circuit">
         <div v-show="breadcrumbList.length > 1" class="breadcrumb-wrap">
           <el-breadcrumb separator-class="el-icon-arrow-right">
             <el-breadcrumb-item
@@ -72,15 +73,15 @@
               ></child-device>
             </div>
           </el-tab-pane>
-<!--        <el-tab-pane label="触发器" name="trigger">-->
+          <!--        <el-tab-pane label="触发器" name="trigger">-->
-<!--          <div class="tabs-body protocol-wrap">-->
+          <!--          <div class="tabs-body protocol-wrap">-->
-<!--            <trigger-wrap-->
+          <!--            <trigger-wrap-->
-<!--              v-if="activeName === 'trigger'"-->
+          <!--              v-if="activeName === 'trigger'"-->
-<!--              :deviceInfo="infoData"-->
+          <!--              :deviceInfo="infoData"-->
-<!--              :sourceId="infoData.deviceId"-->
+          <!--              :sourceId="infoData.deviceId"-->
-<!--            ></trigger-wrap>-->
+          <!--            ></trigger-wrap>-->
-<!--          </div>-->
+          <!--          </div>-->
-<!--        </el-tab-pane>-->
+          <!--        </el-tab-pane>-->
           <el-tab-pane label="固件" name="oat">
             <div class="tabs-body protocol-wrap">
               <model-oat
@@ -121,6 +122,7 @@
           </el-tab-pane>
         </el-tabs>
       </div>
+    </div>
     <div style="height: 0;">
       <!-- 添加或修改建筑类型对话框 -->
       <dialog-template
@@ -434,29 +436,29 @@ export default {
   .link-to-list {
     display: flex;
     color: #656363;
-    justify-content: flex-end;
     font-size: 20px;
-    //height: 0;
+    height: 0;
-    //background: #e4eaf3;
+    background: #e4eaf3;
+    display: flex;
     position: relative;
     top: 10px;
     z-index: 100;
-    //width: 120px;
+    width: 120px;
-    //left: calc(100% - 120px);
+    left: calc(100% - 120px);
     cursor: default;
     justify-content: flex-start;
     flex-wrap: nowrap;
     flex-direction: row-reverse;
     .el-button--medium.is-circle {
-      //width: 25px;
+      width: 25px;
-      //height: 20px;
+      height: 20px;
-      padding: 10px;
+      padding: 0;
       background: #0d8afd;
       color: #fff;
       font-size: 16px;
       border-radius: 5px;
-      //height: 30px;
+      height: 30px;
-      //width: 100%;
+      width: 100%;
       font-size: 14px;
     }
   }
@@ -466,8 +468,8 @@ export default {
   }
 
   .is-widening {
-    //width: 220px;
+    width: 220px;
-    //left: calc(100% - 220px);
+    left: calc(100% - 220px);
   }
 
   .info-tabs-circuit {
@@ -1075,23 +1077,23 @@ export default {
   }
 }
 .iot-circuit-breaker-details-warp
-  .info-tabs-circuit
+.info-tabs-circuit
-  .el-tabs__content::-webkit-scrollbar {
+.el-tabs__content::-webkit-scrollbar {
   /*滚动条整体样式*/
   width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
   height: 3px;
 }
 .iot-circuit-breaker-details-warp
-  .info-tabs-circuit
+.info-tabs-circuit
-  .el-tabs__content::-webkit-scrollbar-thumb {
+.el-tabs__content::-webkit-scrollbar-thumb {
   /*滚动条里面小方块*/
   border-radius: 10px;
   box-shadow: inset 0 0 5px #9e9d9d;
   background: #ffffff;
 }
 .iot-circuit-breaker-details-warp
-  .info-tabs-circuit
+.info-tabs-circuit
-  .el-tabs__content::-webkit-scrollbar-track {
+.el-tabs__content::-webkit-scrollbar-track {
   /*滚动条里面轨道*/
   box-shadow: inset 0 0 5px #f6f6f6;
   border-radius: 10px;

src/views/tenant/device/profile/info.vue

@@ -135,13 +135,26 @@
         </div>
       </div>
     </div>
+    <div v-if="infoData.deviceType === 'MINIATURE_BREAKER' || infoData.deviceType === 'MOLDED_BREAKER'" class="group-list-info" style="margin-top: 15px;">
+      <div class="top">
+        <div class="top-label">
+          <svg-icon icon-class="A_product1" style="margin-right: 2px; height: 20px; width: 20px;" />告警配置
+        </div>
+      </div>
+    </div>
+
+    <div v-if="infoData.deviceType === 'MINIATURE_BREAKER' || infoData.deviceType === 'MOLDED_BREAKER'" class="group-list-table" style="border: 0;">
+      <device-alarm-config v-if="infoData.deviceType === 'MINIATURE_BREAKER' || infoData.deviceType === 'MOLDED_BREAKER'" :deviceId="infoData.deviceId" :deviceKey="infoData.deviceKey" />
+    </div>
   </div>
 </template>
 <script>
 import { updateDevice } from "@/api/iot/device";
+import DeviceAlarmConfig from '@/views/profile/DeviceAlarmConfig/DeviceAlarmConfig'
 export default {
   name: "DeviceInfo",
   props: ["infoData"],
+  components: {DeviceAlarmConfig},
   data() {
     return {
       updateState: false,