From 89c3b3047bc1d04462b6eeb32a97de1cb0652f39 Mon Sep 17 00:00:00 2001
From: fhysy <1149505133@qq.com>
Date: Fri, 9 May 2025 16:56:55 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=B7=20UI(=E5=86=85=E5=AE=B9):=20?=
 =?UTF-8?q?=E7=BB=99=E4=BC=81=E4=B8=9A=E7=AB=AF=E5=AD=90=E6=96=AD=E8=B7=AF?=
 =?UTF-8?q?=E5=99=A8=E8=AE=BE=E5=A4=87=E4=BF=A1=E6=81=AF=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=91=8A=E8=AD=A6=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/profile/DeviceDetailsView/index.vue | 284 +++++++++---------
 src/views/tenant/device/profile/info.vue      |  13 +
 2 files changed, 156 insertions(+), 141 deletions(-)

diff --git a/src/views/profile/DeviceDetailsView/index.vue b/src/views/profile/DeviceDetailsView/index.vue
index 2f5ee183..8f29fead 100644
--- a/src/views/profile/DeviceDetailsView/index.vue
+++ b/src/views/profile/DeviceDetailsView/index.vue
@@ -8,19 +8,20 @@
       @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">
-      <el-button circle icon="el-icon-d-arrow-left" style="margin-left: 10px;" title="返回列表" @click="toTableClick"
+    <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 v-show="breadcrumbList.length > 1" class="breadcrumb-wrap">
-        <el-breadcrumb separator-class="el-icon-arrow-right">
-          <el-breadcrumb-item
-            v-for="(item, index) in breadcrumbList"
-            :key="index"
-          >
+        >
+        <el-button v-if="infoData.deviceType === 'GATEWAY_CONTROLLER'" circle title="批量升级" @click="batchUpgradeOpen">批量升级</el-button>
+      </div>
+      <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
+              v-for="(item, index) in breadcrumbList"
+              :key="index"
+            >
             <span
               :class="
                 item.deviceId === deviceId
@@ -28,123 +29,124 @@
                   : 'breadcrumb-span'
               "
               @click="deviceClick(item, index)"
-              >{{ item.deviceName }}</span
+            >{{ item.deviceName }}</span
             >
-          </el-breadcrumb-item>
-        </el-breadcrumb>
-      </div>
-      <el-tabs
-        v-model="activeName"
-        :class="breadcrumbList.length > 1 ? 'children-wrap' : ''"
-      >
-        <el-tab-pane label="运行状态" name="runingState">
-          <div class="tabs-body protocol-wrap">
-            <state-management
-              v-if="devudeRunState"
-              :deviceInfo="infoData"
-              :realTimeData="realTimeData"
-            ></state-management>
-          </div>
-        </el-tab-pane>
-
-        <el-tab-pane label="设备信息" name="info">
-          <div class="tabs-body">
-            <info-wrap
-              v-if="activeName === 'info'"
-              :infoData="infoData"
-              :isTenant="isTenant"
-              @updateInfo="updateInfo($event)"
-            />
-          </div>
-        </el-tab-pane>
-        <el-tab-pane
-          v-if="infoData.deviceType === 'GATEWAY_CONTROLLER' && !isTenant"
-          label="子设备"
-          name="child"
+            </el-breadcrumb-item>
+          </el-breadcrumb>
+        </div>
+        <el-tabs
+          v-model="activeName"
+          :class="breadcrumbList.length > 1 ? 'children-wrap' : ''"
         >
-          <div class="tabs-body">
-            <child-device
-              v-if="activeName === 'child'"
-              :pDevcieInfo="infoData"
-              :sourceId="infoData.deviceId"
-              @EventUpload="handleUpload"
-              @toChildEvent="toNewDevice"
-            ></child-device>
-          </div>
-        </el-tab-pane>
-<!--        <el-tab-pane label="触发器" name="trigger">-->
-<!--          <div class="tabs-body protocol-wrap">-->
-<!--            <trigger-wrap-->
-<!--              v-if="activeName === 'trigger'"-->
-<!--              :deviceInfo="infoData"-->
-<!--              :sourceId="infoData.deviceId"-->
-<!--            ></trigger-wrap>-->
-<!--          </div>-->
-<!--        </el-tab-pane>-->
-        <el-tab-pane label="固件" name="oat">
-          <div class="tabs-body protocol-wrap">
-            <model-oat
-              v-if="activeName === 'oat'"
-              :deviceInfo="infoData"
-              :isTenant="isTenant"
-              @updateInfo="updateInfo($event)"
-            ></model-oat>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="日志" name="devLog">
-          <div class="tabs-body">
-            <device-log
-              v-if="activeName === 'devLog'"
-              :pDevcieInfo="infoData"
-              :sourceId="infoData.deviceId"
-            ></device-log>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="场景" name="scene">
-          <div class="tabs-body">
-            <e-device-scene
-              v-if="activeName === 'scene'"
-              :sourceId="infoData.deviceId"
-            />
-          </div>
-        </el-tab-pane>
+          <el-tab-pane label="运行状态" name="runingState">
+            <div class="tabs-body protocol-wrap">
+              <state-management
+                v-if="devudeRunState"
+                :deviceInfo="infoData"
+                :realTimeData="realTimeData"
+              ></state-management>
+            </div>
+          </el-tab-pane>
 
-        <el-tab-pane v-if="infoData.deviceId === pInfo.deviceId" label="升级进度" name="batchUpgradeRate">
-          <div class="tabs-body">
-            <batch-upgrade-rate v-if="activeName === 'batchUpgradeRate'" ref="batchUpgradeRate" :sourceKey="pInfo.deviceKey"></batch-upgrade-rate>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="功能" name="function">
-          <div class="tabs-body">
-            <function-wrap :deviceInfo="infoData" :sourceId="deviceId"></function-wrap>
-          </div>
-        </el-tab-pane>
-      </el-tabs>
+          <el-tab-pane label="设备信息" name="info">
+            <div class="tabs-body">
+              <info-wrap
+                v-if="activeName === 'info'"
+                :infoData="infoData"
+                :isTenant="isTenant"
+                @updateInfo="updateInfo($event)"
+              />
+            </div>
+          </el-tab-pane>
+          <el-tab-pane
+            v-if="infoData.deviceType === 'GATEWAY_CONTROLLER' && !isTenant"
+            label="子设备"
+            name="child"
+          >
+            <div class="tabs-body">
+              <child-device
+                v-if="activeName === 'child'"
+                :pDevcieInfo="infoData"
+                :sourceId="infoData.deviceId"
+                @EventUpload="handleUpload"
+                @toChildEvent="toNewDevice"
+              ></child-device>
+            </div>
+          </el-tab-pane>
+          <!--        <el-tab-pane label="触发器" name="trigger">-->
+          <!--          <div class="tabs-body protocol-wrap">-->
+          <!--            <trigger-wrap-->
+          <!--              v-if="activeName === 'trigger'"-->
+          <!--              :deviceInfo="infoData"-->
+          <!--              :sourceId="infoData.deviceId"-->
+          <!--            ></trigger-wrap>-->
+          <!--          </div>-->
+          <!--        </el-tab-pane>-->
+          <el-tab-pane label="固件" name="oat">
+            <div class="tabs-body protocol-wrap">
+              <model-oat
+                v-if="activeName === 'oat'"
+                :deviceInfo="infoData"
+                :isTenant="isTenant"
+                @updateInfo="updateInfo($event)"
+              ></model-oat>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="日志" name="devLog">
+            <div class="tabs-body">
+              <device-log
+                v-if="activeName === 'devLog'"
+                :pDevcieInfo="infoData"
+                :sourceId="infoData.deviceId"
+              ></device-log>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="场景" name="scene">
+            <div class="tabs-body">
+              <e-device-scene
+                v-if="activeName === 'scene'"
+                :sourceId="infoData.deviceId"
+              />
+            </div>
+          </el-tab-pane>
+
+          <el-tab-pane v-if="infoData.deviceId === pInfo.deviceId" label="升级进度" name="batchUpgradeRate">
+            <div class="tabs-body">
+              <batch-upgrade-rate v-if="activeName === 'batchUpgradeRate'" ref="batchUpgradeRate" :sourceKey="pInfo.deviceKey"></batch-upgrade-rate>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="功能" name="function">
+            <div class="tabs-body">
+              <function-wrap :deviceInfo="infoData" :sourceId="deviceId"></function-wrap>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
     </div>
     <div style="height: 0;">
-        <!-- 添加或修改建筑类型对话框 -->
-        <dialog-template
-          :title="dialogTitle"
-          :visible="dialogOpen"
-          style=""
-          width="880px"
-          @close="dialogOpen = false"
-        >
-          <e-batch-firmware-upgrade
-            slot="dialog-center"
-            :sourceData="this.form.data"
-            :sourceId="this.pInfo.deviceId"
-            @handleChange="handleFirmwareChange"
-          ></e-batch-firmware-upgrade>
-          <div slot="dialog-footer" class="dialog-footer">
-            <el-button size="mini" type="primary" @click="submitForm"
-              >确 定</el-button
-            >
-            <el-button size="mini" @click="() => {dialogOpen = false}">取 消</el-button>
-          </div>
+      <!-- 添加或修改建筑类型对话框 -->
+      <dialog-template
+        :title="dialogTitle"
+        :visible="dialogOpen"
+        style=""
+        width="880px"
+        @close="dialogOpen = false"
+      >
+        <e-batch-firmware-upgrade
+          slot="dialog-center"
+          :sourceData="this.form.data"
+          :sourceId="this.pInfo.deviceId"
+          @handleChange="handleFirmwareChange"
+        ></e-batch-firmware-upgrade>
+        <div slot="dialog-footer" class="dialog-footer">
+          <el-button size="mini" type="primary" @click="submitForm"
+          >确 定</el-button
+          >
+          <el-button size="mini" @click="() => {dialogOpen = false}">取 消</el-button>
+        </div>
 
-        </dialog-template>
-      </div>
+      </dialog-template>
+    </div>
   </div>
 </template>
 <script>
@@ -434,29 +436,29 @@ export default {
   .link-to-list {
     display: flex;
     color: #656363;
-    justify-content: flex-end;
     font-size: 20px;
-    //height: 0;
-    //background: #e4eaf3;
+    height: 0;
+    background: #e4eaf3;
+    display: flex;
     position: relative;
     top: 10px;
     z-index: 100;
-    //width: 120px;
-    //left: calc(100% - 120px);
+    width: 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;
-      //height: 20px;
-      padding: 10px;
+      width: 25px;
+      height: 20px;
+      padding: 0;
       background: #0d8afd;
       color: #fff;
       font-size: 16px;
       border-radius: 5px;
-      //height: 30px;
-      //width: 100%;
+      height: 30px;
+      width: 100%;
       font-size: 14px;
     }
   }
@@ -466,8 +468,8 @@ export default {
   }
 
   .is-widening {
-    //width: 220px;
-    //left: calc(100% - 220px);
+    width: 220px;
+    left: calc(100% - 220px);
   }
 
   .info-tabs-circuit {
@@ -1075,23 +1077,23 @@ export default {
   }
 }
 .iot-circuit-breaker-details-warp
-  .info-tabs-circuit
-  .el-tabs__content::-webkit-scrollbar {
+.info-tabs-circuit
+.el-tabs__content::-webkit-scrollbar {
   /*滚动条整体样式*/
   width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
   height: 3px;
 }
 .iot-circuit-breaker-details-warp
-  .info-tabs-circuit
-  .el-tabs__content::-webkit-scrollbar-thumb {
+.info-tabs-circuit
+.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
-  .el-tabs__content::-webkit-scrollbar-track {
+.info-tabs-circuit
+.el-tabs__content::-webkit-scrollbar-track {
   /*滚动条里面轨道*/
   box-shadow: inset 0 0 5px #f6f6f6;
   border-radius: 10px;
diff --git a/src/views/tenant/device/profile/info.vue b/src/views/tenant/device/profile/info.vue
index 93c9f6bb..4684b28e 100644
--- a/src/views/tenant/device/profile/info.vue
+++ b/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,