diff --git a/hx-ai-intelligent/src/components/ns-steps.vue b/hx-ai-intelligent/src/components/ns-steps.vue
index 54c8ce3..57627d0 100644
--- a/hx-ai-intelligent/src/components/ns-steps.vue
+++ b/hx-ai-intelligent/src/components/ns-steps.vue
@@ -1,18 +1,33 @@
 <template>
   <a-steps direction="vertical" :current="size">
     <template v-for="(item, index) in dataSource" :key="index">
-      <a-step>
+      <a-step title="">
         <template #icon>
           <ns-icon size="20" :name="item.src" />
         </template>
         <template #description>
           <div class="card">
             <div class="card-title">
-              <a-tag class="card-title-tag" :color="item.color">{{ item.stateName }}</a-tag>
               <div class="name">{{ item.realName }}</div>
+              <a-tag
+                class="card-title-tag"
+                :style="{
+                  background: item.bgColor,
+                  border: '1px solid ' + item.color,
+                  color: item.color,
+                }"
+                >{{ item.stateName }}</a-tag
+              >
               <div class="time">{{ item.createTime }}</div>
             </div>
-            <div style="width: 100%; color: #3a3a3a; height: 25px; overflow: auto">
+            <div
+              style="
+                width: 100%;
+                color: rgba(0, 0, 0, 0.45);
+                height: 27px;
+                overflow: auto;
+                padding: 7px 0px;
+              ">
               {{ item.remarks }}</div
             >
           </div>
@@ -41,36 +56,37 @@
     margin-top: 10px;
   }
   .card {
-    width: 400px;
+    width: 450px;
     min-height: 0px;
-    background-color: #f8fafc;
-    margin-left: 20px;
+    background: rgba(191, 205, 226, 0.3);
     border-radius: 4px; /* 设置圆角半径 */
     padding: 12px;
+    margin-left: 8px;
     .card-title {
       width: 100%;
       height: 30px;
       display: flex;
       position: relative;
       .card-title-tag {
-        width: 60px;
-        height: 20px;
+        width: 50px;
+        height: 24px;
         text-align: center;
+        line-height: 24px;
+        margin-left: 12px;
       }
     }
   }
   .name {
-    position: absolute;
-    left: 35%;
+    left: 12px;
     top: -2px;
-    transform: translateX(-50%);
-    color: #3a3a3a;
+    font-size: 16px;
+    color: rgba(153, 153, 153, 1);
   }
   .time {
     position: absolute;
     right: 10px;
     top: -2px;
-    color: #ff7602;
+    color: rgba(0, 0, 0, 0.45);
   }
   :deep(.ant-steps-item-tail) {
     position: absolute !important;
diff --git a/hx-ai-intelligent/src/icon/add.png b/hx-ai-intelligent/src/icon/add.png
new file mode 100644
index 0000000..9315e78
Binary files /dev/null and b/hx-ai-intelligent/src/icon/add.png differ
diff --git a/hx-ai-intelligent/src/icon/del.png b/hx-ai-intelligent/src/icon/del.png
new file mode 100644
index 0000000..06264d3
Binary files /dev/null and b/hx-ai-intelligent/src/icon/del.png differ
diff --git a/hx-ai-intelligent/src/icon/del.svg b/hx-ai-intelligent/src/icon/del.svg
deleted file mode 100644
index c8c2fcf..0000000
--- a/hx-ai-intelligent/src/icon/del.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="12px" xmlns="http://www.w3.org/2000/svg">
-  <g transform="matrix(1 0 0 1 -347 -469 )">
-    <path d="M 10.684322033898304 5.219491525423729  C 10.685593220338983 4.930932203389831  10.452966101694914 4.698305084745764  10.165677966101695 4.698305084745764  C 9.878389830508475 4.698305084745764  9.644491525423728 4.930932203389831  9.644491525423728 5.219491525423729  L 9.644491525423728 10.426271186440678  C 9.644491525423728 10.7135593220339  9.410593220338983 10.947457627118645  9.123305084745763 10.947457627118645  L 2.8754237288135593 10.947457627118645  C 2.588135593220339 10.947457627118645  2.354237288135593 10.7135593220339  2.354237288135593 10.426271186440678  L 2.354237288135593 5.219491525423729  C 2.354237288135593 4.932203389830509  2.1216101694915253 4.698305084745764  1.833050847457627 4.698305084745764  C 1.5444915254237288 4.698305084745764  1.3118644067796608 4.930932203389831  1.3118644067796608 5.219491525423729  L 1.3118644067796608 10.426271186440678  C 1.3118644067796608 11.288135593220339  2.01228813559322 11.988559322033899  2.8741525423728818 11.988559322033899  L 9.122033898305085 11.988559322033899  C 9.983898305084745 11.988559322033899  10.684322033898304 11.288135593220339  10.684322033898304 10.426271186440678  L 10.684322033898304 5.219491525423729  Z M 11.98728813559322 2.8766949152542374  C 11.98728813559322 2.589406779661017  11.753389830508475 2.3555084745762715  11.467372881355931 2.3555084745762715  L 9.12457627118644 2.3555084745762715  L 9.12457627118644 1.314406779661017  C 9.12457627118644 0.5961864406779662  8.539830508474576 0.012711864406779662  7.8228813559322035 0.012711864406779662  L 4.177118644067797 0.012711864406779662  C 3.458898305084746 0.012711864406779662  2.87542372881356 0.5961864406779662  2.87542372881356 1.314406779661017  L 2.87542372881356 2.3555084745762715  L 0.5326271186440679 2.3555084745762715  C 0.24661016949152548 2.3555084745762715  0.011440677966101768 2.589406779661017  0.011440677966101768 2.8766949152542374  C 0.011440677966101768 3.1627118644067798  0.2453389830508475 3.3978813559322036  0.5326271186440679 3.3978813559322036  L 11.466101694915254 3.3978813559322036  C 11.752118644067796 3.3978813559322036  11.98728813559322 3.163983050847458  11.98728813559322 2.8766949152542374  Z M 8.083474576271188 2.3555084745762715  L 3.917796610169492 2.3555084745762715  L 3.917796610169492 1.314406779661017  C 3.917796610169492 1.1707627118644068  4.034745762711864 1.053813559322034  4.1783898305084755 1.053813559322034  L 7.822881355932205 1.053813559322034  C 7.966525423728815 1.053813559322034  8.083474576271188 1.1707627118644068  8.083474576271188 1.314406779661017  L 8.083474576271188 2.3555084745762715  Z M 4.698305084745764 9.385169491525422  C 4.985593220338984 9.385169491525422  5.219491525423729 9.149999999999999  5.219491525423729 8.863983050847457  L 5.219491525423729 5.739406779661016  C 5.219491525423729 5.453389830508475  4.985593220338984 5.21822033898305  4.698305084745764 5.21822033898305  C 4.411016949152542 5.21822033898305  4.177118644067797 5.452118644067796  4.177118644067797 5.739406779661016  L 4.177118644067797 8.863983050847457  C 4.177118644067797 9.149999999999999  4.411016949152542 9.385169491525422  4.698305084745764 9.385169491525422  Z M 7.301694915254236 9.385169491525422  C 7.58771186440678 9.383898305084745  7.8228813559322035 9.149999999999999  7.8228813559322035 8.863983050847457  L 7.8228813559322035 5.739406779661016  C 7.8228813559322035 5.453389830508475  7.5889830508474585 5.21822033898305  7.301694915254236 5.21822033898305  C 7.015677966101695 5.21822033898305  6.780508474576271 5.452118644067796  6.780508474576271 5.739406779661016  L 6.780508474576271 8.863983050847457  C 6.780508474576271 9.149999999999999  7.014406779661017 9.385169491525422  7.301694915254236 9.385169491525422  Z " fill-rule="nonzero" fill="#d9001b" stroke="none" transform="matrix(1 0 0 1 347 469 )" />
-  </g>
-</svg>
\ No newline at end of file
diff --git a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/energyAlarm/editConfigureEnergyAlarm.vue b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/energyAlarm/editConfigureEnergyAlarm.vue
index 7431126..58f4291 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/energyAlarm/editConfigureEnergyAlarm.vue
+++ b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/energyAlarm/editConfigureEnergyAlarm.vue
@@ -92,40 +92,64 @@
             :showSearch="false"
             placeholder="请选择对比类型" />
         </a-form-item>
-        <template v-for="index in infoObject.alarmList?.length" :key="index">
-          <div style="width: 100%; display: flex; margin-left: 42px; padding: 12px">
-            <span style="line-height: 32px">{{ `逻辑${index}:` }}</span>
-            <a-select
-              v-model:value="infoObject.alarmList[index - 1].logic"
-              style="width: 70px; margin-left: 12px"
-              :options="logicEnum" />
-            <span style="line-height: 32px; margin-left: 32px">{{ `数值${index}:` }}</span>
-            <a-input
-              style="width: 65px; margin-left: 6px"
-              type="number"
-              v-model:value="infoObject.alarmList[index - 1].num" />
+        <div class="card-log">
+          <template v-for="index in infoObject.alarmList?.length" :key="index">
+            <div style="width: 100%; display: flex; margin-left: 22px; padding: 12px 14px 12px 0px">
+              <span class="title-name" style="line-height: 32px">{{ `逻辑${index}:` }}</span>
+              <a-select
+                v-model:value="infoObject.alarmList[index - 1].logic"
+                style="width: 110px; margin-left: 12px"
+                placeholder="请选择逻辑"
+                :options="logicEnum" />
+              <span class="title-name" style="line-height: 32px; margin-left: 32px">{{
+                `数值${index}:`
+              }}</span>
+              <a-input
+                style="width: 110px; margin-left: 6px"
+                type="number"
+                placeholder="请输入数值"
+                v-model:value="infoObject.alarmList[index - 1].num" />
+              <div
+                v-if="index > 1 && index === infoObject.alarmList?.length"
+                style="
+                  cursor: pointer;
+                  width: 20px;
+                  height: 32px;
+                  display: flex;
+                  align-items: center;
+                  margin-left: 16px;
+                "
+                @click="addAlarmList">
+                <img style="width: 16px" src="../../../../../src/icon/add.png" />
+              </div>
+              <div
+                v-if="index > 1 && infoObject.alarmList?.length > 2"
+                style="
+                  cursor: pointer;
+                  width: 20px;
+                  height: 32px;
+                  display: flex;
+                  align-items: center;
+                  margin-left: 16px;
+                "
+                @click="deleteAlarmList(index - 1)">
+                <img style="width: 16px" src="../../../../../src/icon/del.png" />
+              </div>
+            </div>
             <div
-              style="width: 70px; align-items: center; cursor: pointer"
-              @click="deleteAlarmList(index - 1)">
-              <img style="width: 14px; margin: 0 12px" src="../../../../../src/icon/del.svg" />
+              v-if="
+                infoObject.alarmList[index - 1]?.num === '' ||
+                infoObject.alarmList[index - 1]?.logic === null
+              "
+              style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
+              请选择正确的逻辑{{ index }} 或 输入正确的数值{{ index }}
             </div>
-          </div>
+          </template>
           <div
-            v-if="
-              infoObject.alarmList[index - 1]?.num === null ||
-              infoObject.alarmList[index - 1]?.logic === null
-            "
+            v-if="infoObject.alarmList?.length < 2"
             style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
-            请选择正确的逻辑{{ index }} 或 输入正确的数值{{ index }}
+            逻辑至少2条
           </div>
-        </template>
-        <div
-          v-if="infoObject.alarmList?.length < 2"
-          style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
-          逻辑至少2条
-        </div>
-        <div style="width: 100%; margin-top: 12px; display: flex; justify-content: flex-end">
-          <a-button type="primary" @click="addAlarmList"> 新增</a-button>
         </div>
       </a-form>
     </div>
@@ -157,7 +181,10 @@
     abnormalDescription: null,
     dataSources: null,
     enableRules: 0,
-    alarmList: [{ id: null, logic: null, num: null, isDelete: 0 }],
+    alarmList: [
+      { id: null, logic: null, num: '', isDelete: 0 },
+      { id: null, logic: null, num: '', isDelete: 0 },
+    ],
   });
   const emit = defineEmits(['editObject']);
   //删除的逻辑列表
@@ -346,7 +373,10 @@
         abnormalDescription: null,
         dataSources: null,
         enableRules: 0,
-        alarmList: [{ id: null, logic: null, num: null, isDelete: 0 }],
+        alarmList: [
+          { id: null, logic: null, num: '', isDelete: 0 },
+          { id: null, logic: null, num: '', isDelete: 0 },
+        ],
       };
       infoObject.value.site = orgId.value;
     }
@@ -374,61 +404,68 @@
       },
     ],
   };
-  // 确认按钮
-  const btnClick = () => {
-    infoObject.value.alarmList.forEach((item) => {
-      if (item.logic === null || item.num === null) {
-        return;
+  const getBoolean = () => {
+    for (const item of infoObject.value.alarmList) {
+      if (item.logic === null || item.num === '') {
+        return false;
       }
-    });
+    }
+
     if (infoObject.value.alarmList.length < 2) {
       NsMessage.error('请选择逻辑和数值');
-      return;
+      return false;
     }
+    return true;
+  };
+  // 确认按钮
+  const btnClick = async () => {
+    let formBoolean = await getBoolean();
     //数据是否验证通过
-    formRef.value.validate().then(() => {
-      //处理数据
-      let data = { ...infoObject.value };
-      if (!data.orgId) {
-        data.orgId = orgId.value;
-      }
-      //关联能耗告警id
-      data.energyConsumptionAlarmId = energyAlarm.value.id;
-      data.errorCode = energyAlarm.value.errorCode;
-      data.dataSourcesType = data.dataSources[0];
-      data.dataSourcesWay = data.dataSources[1];
-      delete data.dataSources;
-      data.hxAlarmRuleLogicList = [...infoObject.value.alarmList, ...delAlarmList.value];
-      data.comparisonType = data.comparisonType.toString();
-      data.hxAlarmRuleLogicList.forEach((item) => {
-        const num = Number(item.num);
-        if (!isNaN(num)) {
-          item.num = Number(num.toFixed(2));
-        } else {
-          item.num = 0; // 可以设置为0或其他默认值
+    if (formBoolean) {
+      formRef.value.validate().then(() => {
+        //处理数据
+        let data = { ...infoObject.value };
+        if (!data.orgId) {
+          data.orgId = orgId.value;
         }
-      });
-      data.ruleType = Number(data.ruleType);
-      delete data.alarmList;
-      http
-        .post(energyAlarms.configAddOrUpNewData, data)
-        .then((res) => {
-          if (res.msg === 'success') {
-            // 操作成功时的处理
-            if (data.id) {
-              NsMessage.success('告警规则编辑成功');
-            } else {
-              NsMessage.success('告警规则新增成功');
-            }
-            emit('editObject', null);
-            handleClose();
+        //关联能耗告警id
+        data.energyConsumptionAlarmId = energyAlarm.value.id;
+        data.errorCode = energyAlarm.value.errorCode;
+        data.dataSourcesType = data.dataSources[0];
+        data.dataSourcesWay = data.dataSources[1];
+        delete data.dataSources;
+        data.hxAlarmRuleLogicList = [...infoObject.value.alarmList, ...delAlarmList.value];
+        data.comparisonType = data.comparisonType.toString();
+        data.hxAlarmRuleLogicList.forEach((item) => {
+          const num = Number(item.num);
+          if (!isNaN(num)) {
+            item.num = Number(num.toFixed(2));
+          } else {
+            item.num = 0; // 可以设置为0或其他默认值
           }
-        })
-        .catch((error) => {
-          // 错误处理
-          console.error('请求失败：', error);
         });
-    });
+        data.ruleType = Number(data.ruleType);
+        delete data.alarmList;
+        http
+          .post(energyAlarms.configAddOrUpNewData, data)
+          .then((res) => {
+            if (res.msg === 'success') {
+              // 操作成功时的处理
+              if (data.id) {
+                NsMessage.success('告警规则编辑成功');
+              } else {
+                NsMessage.success('告警规则新增成功');
+              }
+              emit('editObject', null);
+              handleClose();
+            }
+          })
+          .catch((error) => {
+            // 错误处理
+            console.error('请求失败：', error);
+          });
+      });
+    }
   };
   //取消按钮
   const handleClose = () => {
@@ -443,7 +480,10 @@
       abnormalDescription: null,
       dataSources: null,
       enableRules: 0,
-      alarmList: [{ id: null, logic: null, num: null, isDelete: 0 }],
+      alarmList: [
+        { id: null, logic: null, num: '', isDelete: 0 },
+        { id: null, logic: null, num: '', isDelete: 0 },
+      ],
     };
     visible.value = false;
     delAlarmList.value = [];
@@ -451,9 +491,9 @@
   // 新增逻辑列表
   const addAlarmList = () => {
     if (infoObject.value.alarmList) {
-      infoObject.value.alarmList.push({ id: null, logic: null, num: null, isDelete: 0 });
+      infoObject.value.alarmList.push({ id: null, logic: null, num: '', isDelete: 0 });
     } else {
-      infoObject.value.alarmList = [{ id: null, logic: null, num: null, isDelete: 0 }];
+      infoObject.value.alarmList = [{ id: null, logic: null, num: '', isDelete: 0 }];
     }
   };
   // 删除 逻辑列表、
@@ -522,4 +562,20 @@
     text-align: right;
     width: 20%;
   }
+  .card-log {
+    width: 100%;
+    height: auto;
+    border-radius: 4px;
+    background: rgba(250, 250, 250, 1);
+    padding-bottom: 12px;
+    .title-name::before {
+      display: inline-block;
+      margin-right: 4px;
+      color: #ff4d4f;
+      font-size: 14px;
+      font-family: SimSun, sans-serif;
+      line-height: 1;
+      content: '*';
+    }
+  }
 </style>
diff --git a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editConfigureDeviceAlarm.vue b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editConfigureDeviceAlarm.vue
index 1b70726..6cf7cf6 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editConfigureDeviceAlarm.vue
+++ b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editConfigureDeviceAlarm.vue
@@ -103,48 +103,64 @@
             <a-radio value="2">或 (or) </a-radio>
           </a-radio-group>
         </a-form-item>
-        <template v-for="index in infoObject.alarmList?.length" :key="index">
-          <div
-            style="
-              width: 100%;
-              display: flex;
-              margin-left: 42px;
-              padding: 12px;
-              border-color: #ff4d4f !important;
-            ">
-            <span style="line-height: 32px">{{ `逻辑${index}:` }}</span>
-            <a-select
-              v-model:value="infoObject.alarmList[index - 1].logic"
-              style="width: 70px; margin-left: 12px"
-              :options="logicEnum" />
-            <span style="line-height: 32px; margin-left: 32px">{{ `数值${index}:` }}</span>
-            <a-input
-              style="width: 65px; margin-left: 6px"
-              type="number"
-              status="error"
-              v-model:value="infoObject.alarmList[index - 1].num" />
+        <div class="card-log">
+          <template v-for="index in infoObject.alarmList?.length" :key="index">
+            <div style="width: 100%; display: flex; margin-left: 22px; padding: 12px 14px 12px 0px">
+              <span class="title-name" style="line-height: 32px">{{ `逻辑${index}:` }}</span>
+              <a-select
+                v-model:value="infoObject.alarmList[index - 1].logic"
+                style="width: 110px; margin-left: 12px"
+                placeholder="请选择逻辑"
+                :options="logicEnum" />
+              <span class="title-name" style="line-height: 32px; margin-left: 32px">{{
+                `数值${index}:`
+              }}</span>
+              <a-input
+                style="width: 110px; margin-left: 6px"
+                type="number"
+                placeholder="请输入数值"
+                v-model:value="infoObject.alarmList[index - 1].num" />
+              <div
+                v-if="index > 1 && index === infoObject.alarmList?.length"
+                style="
+                  cursor: pointer;
+                  width: 20px;
+                  height: 32px;
+                  display: flex;
+                  align-items: center;
+                  margin-left: 16px;
+                "
+                @click="addAlarmList">
+                <img style="width: 16px" src="../../../../../src/icon/add.png" />
+              </div>
+              <div
+                v-if="index > 1 && infoObject.alarmList?.length > 2"
+                style="
+                  cursor: pointer;
+                  width: 20px;
+                  height: 32px;
+                  display: flex;
+                  align-items: center;
+                  margin-left: 16px;
+                "
+                @click="deleteAlarmList(index - 1)">
+                <img style="width: 16px" src="../../../../../src/icon/del.png" />
+              </div>
+            </div>
             <div
-              style="width: 70px; align-items: center; cursor: pointer"
-              @click="deleteAlarmList(index - 1)">
-              <img style="width: 14px; margin: 0 12px" src="../../../../../src/icon/del.svg" />
+              v-if="
+                infoObject.alarmList[index - 1]?.num === '' ||
+                infoObject.alarmList[index - 1]?.logic === null
+              "
+              style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
+              请选择正确的逻辑{{ index }} 或 输入正确的数值{{ index }}
             </div>
-          </div>
+          </template>
           <div
-            v-if="
-              infoObject.alarmList[index - 1]?.num === null ||
-              infoObject.alarmList[index - 1]?.logic === null
-            "
+            v-if="infoObject?.alarmList?.length < 2"
             style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
-            请选择正确的逻辑{{ index }} 或 输入正确的数值{{ index }}
+            逻辑至少2条
           </div>
-        </template>
-        <div
-          v-if="infoObject?.alarmList?.length < 2"
-          style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
-          逻辑至少2条
-        </div>
-        <div style="width: 100%; margin-top: 12px; display: flex; justify-content: flex-end">
-          <a-button type="primary" @click="addAlarmList"> 新增</a-button>
         </div>
       </a-form>
     </div>
@@ -173,7 +189,10 @@
     valueType: null,
     deviceInfoCode: null,
     enableRules: 0,
-    alarmList: [{ logic: null, num: null, isDelete: 0 }],
+    alarmList: [
+      { logic: null, num: '', isDelete: 0 },
+      { id: null, logic: null, num: '', isDelete: 0 },
+    ],
   });
   //删除的逻辑列表
   const delAlarmList = ref([]);
@@ -363,7 +382,10 @@
         valueType: null,
         deviceInfoCode: null,
         enableRules: 0,
-        alarmList: [{ logic: null, num: null, isDelete: 0 }],
+        alarmList: [
+          { logic: null, num: '', isDelete: 0 },
+          { logic: null, num: '', isDelete: 0 },
+        ],
       };
       infoObject.value.site = orgId.value;
     }
@@ -396,60 +418,67 @@
     alarm: [{ required: true, message: '请选择逻辑', trigger: 'blur' }],
     number: [{ required: true, message: '请输入数值', trigger: 'blur' }],
   };
-  // 确认按钮
-  const btnClick = () => {
-    infoObject.value.alarmList.forEach((item) => {
-      if (item.logic === null || item.num === null) {
-        return;
+  const getBoolean = () => {
+    for (const item of infoObject.value.alarmList) {
+      if (item.logic === null || item.num === '') {
+        return false;
       }
-    });
+    }
+
     if (infoObject.value.alarmList.length < 2) {
       NsMessage.error('请选择逻辑和数值');
-      return;
+      return false;
     }
+    return true;
+  };
+  // 确认按钮
+  const btnClick = async () => {
+    let formBoolean = await getBoolean();
     //数据是否验证通过
-    formRef.value.validate().then(() => {
-      let data = { ...infoObject.value };
-      if (!data.orgId) {
-        data.orgId = orgId.value;
-      }
-      // 配置关联id
-      data.equipmentAlarmId = equipmentAlarm.value.id;
-      // 逻辑列表
-      data.hxAlarmRuleLogicList = [...infoObject.value.alarmList, ...delAlarmList.value];
-      data.hxAlarmRuleLogicList.forEach((item) => {
-        const num = Number(item.num);
-        if (!isNaN(num)) {
-          item.num = Number(num.toFixed(2));
-        } else {
-          item.num = 0; // 可以设置为0或其他默认值
+    if (formBoolean) {
+      formRef.value.validate().then(() => {
+        let data = { ...infoObject.value };
+        if (!data.orgId) {
+          data.orgId = orgId.value;
         }
-      });
-      // 设备类型 只取最后一级的id
-      data.deviceType = infoObject.value.deviceType[infoObject.value.deviceType.length - 1];
-      data.ruleType = Number(data.ruleType);
-      data.errorCode = equipmentAlarm.value.errorCode;
-      delete data.alarmList;
-      // 发起 HTTP POST 请求
-      http
-        .post(deviceAlarms.configAddOrUpNewData, data)
-        .then((res) => {
-          if (res.msg === 'success') {
-            // 操作成功时的处理
-            if (data.id) {
-              NsMessage.success('告警规则编辑成功');
-            } else {
-              NsMessage.success('告警规则新增成功');
-            }
-            emit('editObject', null);
-            handleClose();
+        // 配置关联id
+        data.equipmentAlarmId = equipmentAlarm.value.id;
+        // 逻辑列表
+        data.hxAlarmRuleLogicList = [...infoObject.value.alarmList, ...delAlarmList.value];
+        data.hxAlarmRuleLogicList.forEach((item) => {
+          const num = Number(item.num);
+          if (!isNaN(num)) {
+            item.num = Number(num.toFixed(2));
+          } else {
+            item.num = 0; // 可以设置为0或其他默认值
           }
-        })
-        .catch((error) => {
-          // 错误处理
-          console.error('请求失败：', error);
         });
-    });
+        // 设备类型 只取最后一级的id
+        data.deviceType = infoObject.value.deviceType[infoObject.value.deviceType.length - 1];
+        data.ruleType = Number(data.ruleType);
+        data.errorCode = equipmentAlarm.value.errorCode;
+        delete data.alarmList;
+        // 发起 HTTP POST 请求
+        http
+          .post(deviceAlarms.configAddOrUpNewData, data)
+          .then((res) => {
+            if (res.msg === 'success') {
+              // 操作成功时的处理
+              if (data.id) {
+                NsMessage.success('告警规则编辑成功');
+              } else {
+                NsMessage.success('告警规则新增成功');
+              }
+              emit('editObject', null);
+              handleClose();
+            }
+          })
+          .catch((error) => {
+            // 错误处理
+            console.error('请求失败：', error);
+          });
+      });
+    }
   };
   //取消按钮
   const handleClose = () => {
@@ -466,7 +495,10 @@
       valueType: null,
       deviceInfoCode: null,
       enableRules: 0,
-      alarmList: [{ logic: null, num: null, isDelete: 0 }],
+      alarmList: [
+        { logic: null, num: '', isDelete: 0 },
+        { logic: null, num: '', isDelete: 0 },
+      ],
     };
     visible.value = false;
     //清空删除列表
@@ -475,9 +507,9 @@
   // 新增逻辑列表
   const addAlarmList = () => {
     if (infoObject.value.alarmList) {
-      infoObject.value.alarmList.push({ logic: null, num: null, isDelete: 0 });
+      infoObject.value.alarmList.push({ logic: null, num: '', isDelete: 0 });
     } else {
-      infoObject.value.alarmList = [{ logic: null, num: null, isDelete: 0 }];
+      infoObject.value.alarmList = [{ logic: null, num: '', isDelete: 0 }];
     }
   };
   // 删除 逻辑列表、
@@ -550,4 +582,20 @@
     width: 20%;
     position: relative;
   }
+  .card-log {
+    width: 100%;
+    height: auto;
+    border-radius: 4px;
+    background: rgba(250, 250, 250, 1);
+    padding-bottom: 12px;
+    .title-name::before {
+      display: inline-block;
+      margin-right: 4px;
+      color: #ff4d4f;
+      font-size: 14px;
+      font-family: SimSun, sans-serif;
+      line-height: 1;
+      content: '*';
+    }
+  }
 </style>
diff --git a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editeEquipmentAlarm.vue b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editeEquipmentAlarm.vue
index f3edf29..b906d12 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editeEquipmentAlarm.vue
+++ b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editeEquipmentAlarm.vue
@@ -326,8 +326,6 @@
         data.intervalDuration = null;
         data.intervalDurationUnit = null;
       }
-      console.log(data, '数据');
-
       if (!data.orgId) {
         data.orgId = orgId.value;
       }
diff --git a/hx-ai-intelligent/src/view/alarmManagement/energyAlarm/index.vue b/hx-ai-intelligent/src/view/alarmManagement/energyAlarm/index.vue
index 9533b35..90eddfd 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/energyAlarm/index.vue
+++ b/hx-ai-intelligent/src/view/alarmManagement/energyAlarm/index.vue
@@ -14,7 +14,7 @@
     </template>
   </ns-view-list-table>
   <!-- 详情页面 -->
-  <Look ref="look" />
+  <Look class="look-energy" ref="look" />
   <!-- 状态页面 -->
   <Status ref="status" @logAdd="logAdd" />
 </template>
@@ -46,3 +46,10 @@
     },
   };
 </script>
+<style lang="less">
+  .look-energy {
+    .ant-drawer-body {
+      padding: 24px 40px !important;
+    }
+  }
+</style>
diff --git a/hx-ai-intelligent/src/view/alarmManagement/energyAlarm/look.vue b/hx-ai-intelligent/src/view/alarmManagement/energyAlarm/look.vue
index 2db8129..81d7136 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/energyAlarm/look.vue
+++ b/hx-ai-intelligent/src/view/alarmManagement/energyAlarm/look.vue
@@ -11,9 +11,7 @@
     <div style="width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden">
       <!-- top -->
       <div class="boxstyle">
-        <div
-          class="ns-title-extra-box"
-          style="left: 5px; position: absolute; height: 35px; line-height: 30px">
+        <div class="ns-title-extra-box" style="position: absolute; height: 35px; line-height: 30px">
           告警编号：{{ infoObject.alarmCode }}
         </div>
         <div style="right: 20px; position: absolute; height: 35px; line-height: 30px">
@@ -21,7 +19,7 @@
         </div>
       </div>
       <!-- center -->
-      <div style="width: 100%; height: 400px">
+      <div style="width: 100%; height: 300px">
         <div style="width: 100%; height: 100%" ref="graphChart"></div>
       </div>
       <!-- bottom -->
@@ -214,19 +212,14 @@
       //滑块样式
       dataZoom: [
         {
-          type: 'inside',
-          start: 0,
-          end: 100,
-        },
-        {
           type: 'slider',
           // backgroundColor: 'yellow',
           // fillerColor: 'yellow',
           height: 12, // 设置slider的高度为15
           start: 0,
           end: 100,
-          right: 60,
-          left: 60,
+          right: 11,
+          left: 10,
           bottom: 10,
           handleIcon:
             'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 使用类似 axisPointer 的图标
@@ -257,15 +250,20 @@
           name: '电压值',
           type: 'line',
           itemStyle: {
+            color: '#fff',
+            borderColor: 'rgba(67, 136, 251, 1)',
+            borderWidth: 2,
+          },
+          lineStyle: {
             normal: {
-              barBorderRadius: 0,
-              color: '#2778FF',
+              color: 'rgba(67, 136, 251, 1)',
+              width: 2,
             },
           },
           symbol: 'circle', // 数据点的形状，这里设置为圆形
           symbolSize: 8,
           label: {
-            show: true,
+            show: false,
             color: 'rgb(89, 89, 89)',
             position: 'top',
             top: '10',
@@ -273,6 +271,29 @@
               return Number(energyAlarm[value.dataIndex]) + 'V';
             },
           },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: 'rgba(22, 127, 255, 0.4)',
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(22, 127, 255, 0)',
+                  },
+                ],
+                false,
+              ),
+              shadowColor: 'rgba(22, 127, 255, 0.4)',
+              shadowBlur: 20,
+            },
+          },
           data: energyAlarm,
         },
       ],
diff --git a/hx-ai-intelligent/src/view/alarmManagement/energyAlarm/status.vue b/hx-ai-intelligent/src/view/alarmManagement/energyAlarm/status.vue
index 5ea73a5..5a7975d 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/energyAlarm/status.vue
+++ b/hx-ai-intelligent/src/view/alarmManagement/energyAlarm/status.vue
@@ -142,15 +142,23 @@
               infoObject.value = { ...logList.value[0] };
               infoObject.value.state = infoObject.value.state.value;
               let colorMap = {
-                1: '#ff7602',
-                2: '#00a1e6',
-                3: '#04d919',
-                4: '#d9001b',
-                5: '#a6a6a6',
+                1: 'rgba(191, 205, 226, 1)',
+                2: 'rgba(243, 97, 99, 1)',
+                3: 'rgba(41, 196, 154, 1)',
+                4: 'rgba(217, 0, 27,1)',
+                5: 'rgba(166, 166, 166,1)',
+              };
+              let bgColorMap = {
+                1: 'rgba(191, 205, 226, 0.1)',
+                2: 'rgba(243, 97, 99, 0.1)',
+                3: 'rgba(41, 196, 154, 0.1)',
+                4: 'rgba(217, 0, 27, 0.1)',
+                5: 'rgba(166, 166, 166,0.1)',
               };
               logList.value.forEach((item) => {
                 item.stateName = item.state.label;
                 item.color = colorMap[item.state.value];
+                item.bgColor = bgColorMap[item.state];
                 item.src = 'state-' + item.state.value;
               });
               config.value.dataSource = logList.value;
diff --git a/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/index.vue b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/index.vue
index 9533b35..ce60a91 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/index.vue
+++ b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/index.vue
@@ -14,7 +14,7 @@
     </template>
   </ns-view-list-table>
   <!-- 详情页面 -->
-  <Look ref="look" />
+  <Look class="look-equipment" ref="look" />
   <!-- 状态页面 -->
   <Status ref="status" @logAdd="logAdd" />
 </template>
@@ -46,3 +46,10 @@
     },
   };
 </script>
+<style lang="less">
+  .look-equipment {
+    .ant-drawer-body {
+      padding: 24px 40px !important;
+    }
+  }
+</style>
diff --git a/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/look.vue b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/look.vue
index af94130..f1058a7 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/look.vue
+++ b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/look.vue
@@ -11,9 +11,7 @@
     <div style="width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden">
       <!-- top -->
       <div class="boxstyle">
-        <div
-          class="ns-title-extra-box"
-          style="left: 5px; position: absolute; height: 35px; line-height: 30px">
+        <div class="ns-title-extra-box" style="position: absolute; height: 35px; line-height: 30px">
           告警编号：{{ infoObject.alarmCode }}
         </div>
         <div style="right: 20px; position: absolute; height: 35px; line-height: 30px">
@@ -21,7 +19,7 @@
         </div>
       </div>
       <!-- center -->
-      <div style="width: 100%; height: 400px">
+      <div style="width: 100%; height: 300px">
         <div style="width: 100%; height: 100%" ref="graphChart"></div>
       </div>
       <!-- bottom -->
@@ -134,8 +132,8 @@
         },
       },
       grid: {
-        left: '10%', // 设置图表距离左边的距离
-        right: '4%', // 设置图表距离右边的距离
+        left: '9%', // 设置图表距离左边的距离
+        right: '3%', // 设置图表距离右边的距离
         top: '6%',
         borderWidth: 0,
         y2: 60, // 距离底边
@@ -213,19 +211,14 @@
       //滑块样式
       dataZoom: [
         {
-          type: 'inside',
-          start: 0,
-          end: 100,
-        },
-        {
           type: 'slider',
           // backgroundColor: 'yellow',
           // fillerColor: 'yellow',
           height: 12, // 设置slider的高度为15
           start: 0,
           end: 100,
-          right: 60,
-          left: 60,
+          right: 10,
+          left: 10,
           bottom: 10,
           handleIcon:
             'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 使用类似 axisPointer 的图标
@@ -256,15 +249,20 @@
           name: '电压值',
           type: 'line',
           itemStyle: {
+            color: '#fff',
+            borderColor: 'rgba(67, 136, 251, 1)',
+            borderWidth: 2,
+          },
+          lineStyle: {
             normal: {
-              barBorderRadius: 0,
-              color: '#2778FF',
+              color: 'rgba(67, 136, 251, 1)',
+              width: 2,
             },
           },
           symbol: 'circle', // 数据点的形状，这里设置为圆形
           symbolSize: 8,
           label: {
-            show: true,
+            show: false,
             color: 'rgb(89, 89, 89)',
             position: 'top',
             top: '10',
@@ -272,6 +270,29 @@
               return Number(energyAlarm[value.dataIndex]) + 'V';
             },
           },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: 'rgba(22, 127, 255, 0.4)',
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(22, 127, 255, 0)',
+                  },
+                ],
+                false,
+              ),
+              shadowColor: 'rgba(22, 127, 255, 0.4)',
+              shadowBlur: 20,
+            },
+          },
           data: energyAlarm,
         },
       ],
diff --git a/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/status.vue b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/status.vue
index 40c73c5..b92981c 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/status.vue
+++ b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/status.vue
@@ -143,15 +143,23 @@
               infoObject.value = { ...logList.value[0] };
               infoObject.value.state = infoObject.value.state.value;
               let colorMap = {
-                1: '#ff7602',
-                2: '#00a1e6',
-                3: '#04d919',
-                4: '#d9001b',
-                5: '#a6a6a6',
+                1: 'rgba(191, 205, 226, 1)',
+                2: 'rgba(243, 97, 99, 1)',
+                3: 'rgba(41, 196, 154, 1)',
+                4: 'rgba(217, 0, 27,1)',
+                5: 'rgba(166, 166, 166,1)',
+              };
+              let bgColorMap = {
+                1: 'rgba(191, 205, 226, 0.1)',
+                2: 'rgba(243, 97, 99, 0.1)',
+                3: 'rgba(41, 196, 154, 0.1)',
+                4: 'rgba(217, 0, 27, 0.1)',
+                5: 'rgba(166, 166, 166,0.1)',
               };
               logList.value.forEach((item) => {
                 item.stateName = item.state.label;
                 item.color = colorMap[item.state.value];
+                item.bgColor = bgColorMap[item.state];
                 item.src = 'state-' + item.state.value;
               });
               config.value.dataSource = logList.value;
diff --git a/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/index.vue b/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/index.vue
index 186d7f0..437e9d6 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/index.vue
+++ b/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/index.vue
@@ -10,7 +10,7 @@
     </template>
   </ns-view-list-table>
   <!-- 详情页面 -->
-  <Look ref="look" />
+  <Look class="look-gateWay" ref="look" />
   <!-- 状态页面 -->
   <Status ref="status" />
 </template>
@@ -36,3 +36,10 @@
     },
   };
 </script>
+<style lang="less">
+  .look-gateWay {
+    .ant-drawer-body {
+      padding: 24px 40px !important;
+    }
+  }
+</style>
diff --git a/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/look.vue b/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/look.vue
index 73256ae..dae7b8e 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/look.vue
+++ b/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/look.vue
@@ -11,9 +11,7 @@
     <div style="width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden">
       <!-- top -->
       <div class="boxstyle">
-        <div
-          class="ns-title-extra-box"
-          style="left: 25px; position: absolute; height: 35px; line-height: 30px">
+        <div class="ns-title-extra-box" style="position: absolute; height: 35px; line-height: 30px">
           告警编号：{{ infoObject.alarmCode }}
         </div>
         <div style="right: 30px; position: absolute; height: 35px; line-height: 30px">
@@ -21,7 +19,7 @@
         </div>
       </div>
       <!-- center -->
-      <div style="width: 100%; height: 400px">
+      <div style="width: 100%; height: 300px">
         <div style="width: 100%; height: 100%" ref="graphChart"></div>
       </div>
       <!-- bottom -->
@@ -127,8 +125,8 @@
         },
       },
       grid: {
-        left: '10%', // 设置图表距离左边的距离
-        right: '4%', // 设置图表距离右边的距离
+        left: '3%', // 设置图表距离左边的距离
+        right: '3%', // 设置图表距离右边的距离
         top: '6%',
         borderWidth: 0,
         y2: 60, // 距离底边
@@ -201,19 +199,14 @@
       //滑块样式
       dataZoom: [
         {
-          type: 'inside',
-          start: 0,
-          end: 100,
-        },
-        {
           type: 'slider',
           // backgroundColor: 'yellow',
           // fillerColor: 'yellow',
           height: 12, // 设置slider的高度为15
           start: 0,
           end: 100,
-          right: 60,
-          left: 60,
+          right: 11,
+          left: 10,
           bottom: 10,
           handleIcon:
             'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 使用类似 axisPointer 的图标
@@ -244,9 +237,14 @@
           name: '状态',
           type: 'line',
           itemStyle: {
+            color: '#fff',
+            borderColor: 'rgba(67, 136, 251, 1)',
+            borderWidth: 2,
+          },
+          lineStyle: {
             normal: {
-              barBorderRadius: 0,
-              color: '#2778FF',
+              color: 'rgba(67, 136, 251, 1)',
+              width: 2,
             },
           },
           symbol: 'circle', // 数据点的形状，这里设置为圆形
@@ -260,6 +258,29 @@
           //     return Number(energyAlarm[value.dataIndex]) ;
           //   },
           // },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: 'rgba(22, 127, 255, 0.4)',
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(22, 127, 255, 0)',
+                  },
+                ],
+                false,
+              ),
+              shadowColor: 'rgba(22, 127, 255, 0.4)',
+              shadowBlur: 20,
+            },
+          },
           data: energyAlarm,
         },
       ],
diff --git a/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/status.vue b/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/status.vue
index f160c3f..ff65aea 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/status.vue
+++ b/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/status.vue
@@ -60,15 +60,23 @@
           5: '已关闭',
         };
         let colorMap = {
-          1: '#ff7602',
-          2: '#00a1e6',
-          3: '#04d919',
-          4: '#d9001b',
-          5: '#a6a6a6',
+          1: 'rgba(191, 205, 226, 1)',
+          2: 'rgba(243, 97, 99, 1)',
+          3: 'rgba(41, 196, 154, 1)',
+          4: 'rgba(217, 0, 27,1)',
+          5: 'rgba(166, 166, 166,1)',
+        };
+        let bgColorMap = {
+          1: 'rgba(191, 205, 226, 0.1)',
+          2: 'rgba(243, 97, 99, 0.1)',
+          3: 'rgba(41, 196, 154, 0.1)',
+          4: 'rgba(217, 0, 27, 0.1)',
+          5: 'rgba(166, 166, 166,0.1)',
         };
         logList.value.forEach((item) => {
           item.stateName = stateMap[item.state];
           item.color = colorMap[item.state];
+          item.bgColor = bgColorMap[item.state];
           item.src = 'state-' + item.state;
         });
         visible.value = true;