fix:修改设备告警ui

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;
+    background: rgba(191, 205, 226, 0.3);
-    margin-left: 20px;
     border-radius: 4px; /* 设置圆角半径 */
     padding: 12px;
+    margin-left: 8px;
     .card-title {
       width: 100%;
       height: 30px;
       display: flex;
       position: relative;
       .card-title-tag {
-        width: 60px;
+        width: 50px;
-        height: 20px;
+        height: 24px;
         text-align: center;
+        line-height: 24px;
+        margin-left: 12px;
       }
     }
   }
   .name {
-    position: absolute;
+    left: 12px;
-    left: 35%;
     top: -2px;
-    transform: translateX(-50%);
+    font-size: 16px;
-    color: #3a3a3a;
+    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;

hx-ai-intelligent/src/icon/del.svg

@@ -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>

hx-ai-intelligent/src/view/alarmManagement/alarmSettings/energyAlarm/editConfigureEnergyAlarm.vue

@@ -92,27 +92,53 @@
             :showSearch="false"
             placeholder="请选择对比类型" />
         </a-form-item>
+        <div class="card-log">
           <template v-for="index in infoObject.alarmList?.length" :key="index">
-          <div style="width: 100%; display: flex; margin-left: 42px; padding: 12px">
+            <div style="width: 100%; display: flex; margin-left: 22px; padding: 12px 14px 12px 0px">
-            <span style="line-height: 32px">{{ `逻辑${index}:` }}</span>
+              <span class="title-name" style="line-height: 32px">{{ `逻辑${index}:` }}</span>
               <a-select
                 v-model:value="infoObject.alarmList[index - 1].logic"
-              style="width: 70px; margin-left: 12px"
+                style="width: 110px; margin-left: 12px"
+                placeholder="请选择逻辑"
                 :options="logicEnum" />
-            <span style="line-height: 32px; margin-left: 32px">{{ `数值${index}:` }}</span>
+              <span class="title-name" style="line-height: 32px; margin-left: 32px">{{
+                `数值${index}:`
+              }}</span>
               <a-input
-              style="width: 65px; margin-left: 6px"
+                style="width: 110px; margin-left: 6px"
                 type="number"
+                placeholder="请输入数值"
                 v-model:value="infoObject.alarmList[index - 1].num" />
               <div
-              style="width: 70px; align-items: center; cursor: pointer"
+                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: 14px; margin: 0 12px" src="../../../../../src/icon/del.svg" />
+                <img style="width: 16px" src="../../../../../src/icon/del.png" />
               </div>
             </div>
             <div
               v-if="
-              infoObject.alarmList[index - 1]?.num === null ||
+                infoObject.alarmList[index - 1]?.num === '' ||
                 infoObject.alarmList[index - 1]?.logic === null
               "
               style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
@@ -124,8 +150,6 @@
             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,18 +404,24 @@
       },
     ],
   };
-  // 确认按钮
+  const getBoolean = () => {
-  const btnClick = () => {
+    for (const item of infoObject.value.alarmList) {
-    infoObject.value.alarmList.forEach((item) => {
+      if (item.logic === null || item.num === '') {
-      if (item.logic === null || item.num === null) {
+        return false;
-        return;
       }
-    });
+    }
+
     if (infoObject.value.alarmList.length < 2) {
       NsMessage.error('请选择逻辑和数值');
-      return;
+      return false;
     }
+    return true;
+  };
+  // 确认按钮
+  const btnClick = async () => {
+    let formBoolean = await getBoolean();
     //数据是否验证通过
+    if (formBoolean) {
       formRef.value.validate().then(() => {
         //处理数据
         let data = { ...infoObject.value };
@@ -429,6 +465,7 @@
             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>

hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editConfigureDeviceAlarm.vue

@@ -103,35 +103,53 @@
             <a-radio value="2">或 (or) </a-radio>
           </a-radio-group>
         </a-form-item>
+        <div class="card-log">
           <template v-for="index in infoObject.alarmList?.length" :key="index">
-          <div
+            <div style="width: 100%; display: flex; margin-left: 22px; padding: 12px 14px 12px 0px">
-            style="
+              <span class="title-name" style="line-height: 32px">{{ `逻辑${index}:` }}</span>
-              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"
+                style="width: 110px; margin-left: 12px"
+                placeholder="请选择逻辑"
                 :options="logicEnum" />
-            <span style="line-height: 32px; margin-left: 32px">{{ `数值${index}:` }}</span>
+              <span class="title-name" style="line-height: 32px; margin-left: 32px">{{
+                `数值${index}:`
+              }}</span>
               <a-input
-              style="width: 65px; margin-left: 6px"
+                style="width: 110px; margin-left: 6px"
                 type="number"
-              status="error"
+                placeholder="请输入数值"
                 v-model:value="infoObject.alarmList[index - 1].num" />
               <div
-              style="width: 70px; align-items: center; cursor: pointer"
+                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: 14px; margin: 0 12px" src="../../../../../src/icon/del.svg" />
+                <img style="width: 16px" src="../../../../../src/icon/del.png" />
               </div>
             </div>
             <div
               v-if="
-              infoObject.alarmList[index - 1]?.num === null ||
+                infoObject.alarmList[index - 1]?.num === '' ||
                 infoObject.alarmList[index - 1]?.logic === null
               "
               style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
@@ -143,8 +161,6 @@
             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,18 +418,24 @@
     alarm: [{ required: true, message: '请选择逻辑', trigger: 'blur' }],
     number: [{ required: true, message: '请输入数值', trigger: 'blur' }],
   };
-  // 确认按钮
+  const getBoolean = () => {
-  const btnClick = () => {
+    for (const item of infoObject.value.alarmList) {
-    infoObject.value.alarmList.forEach((item) => {
+      if (item.logic === null || item.num === '') {
-      if (item.logic === null || item.num === null) {
+        return false;
-        return;
       }
-    });
+    }
+
     if (infoObject.value.alarmList.length < 2) {
       NsMessage.error('请选择逻辑和数值');
-      return;
+      return false;
     }
+    return true;
+  };
+  // 确认按钮
+  const btnClick = async () => {
+    let formBoolean = await getBoolean();
     //数据是否验证通过
+    if (formBoolean) {
       formRef.value.validate().then(() => {
         let data = { ...infoObject.value };
         if (!data.orgId) {
@@ -450,6 +478,7 @@
             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>

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

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>

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
+        <div class="ns-title-extra-box" style="position: absolute; height: 35px; line-height: 30px">
-          class="ns-title-extra-box"
-          style="left: 5px; 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,
+          right: 11,
-          left: 60,
+          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: 'rgba(67, 136, 251, 1)',
-              color: '#2778FF',
+              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,
         },
       ],

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',
+                1: 'rgba(191, 205, 226, 1)',
-                2: '#00a1e6',
+                2: 'rgba(243, 97, 99, 1)',
-                3: '#04d919',
+                3: 'rgba(41, 196, 154, 1)',
-                4: '#d9001b',
+                4: 'rgba(217, 0, 27,1)',
-                5: '#a6a6a6',
+                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;

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>

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
+        <div class="ns-title-extra-box" style="position: absolute; height: 35px; line-height: 30px">
-          class="ns-title-extra-box"
-          style="left: 5px; 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%', // 设置图表距离左边的距离
+        left: '9%', // 设置图表距离左边的距离
-        right: '4%', // 设置图表距离右边的距离
+        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,
+          right: 10,
-          left: 60,
+          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: 'rgba(67, 136, 251, 1)',
-              color: '#2778FF',
+              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,
         },
       ],

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',
+                1: 'rgba(191, 205, 226, 1)',
-                2: '#00a1e6',
+                2: 'rgba(243, 97, 99, 1)',
-                3: '#04d919',
+                3: 'rgba(41, 196, 154, 1)',
-                4: '#d9001b',
+                4: 'rgba(217, 0, 27,1)',
-                5: '#a6a6a6',
+                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;

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>

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
+        <div class="ns-title-extra-box" style="position: absolute; height: 35px; line-height: 30px">
-          class="ns-title-extra-box"
-          style="left: 25px; 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%', // 设置图表距离左边的距离
+        left: '3%', // 设置图表距离左边的距离
-        right: '4%', // 设置图表距离右边的距离
+        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,
+          right: 11,
-          left: 60,
+          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: 'rgba(67, 136, 251, 1)',
-              color: '#2778FF',
+              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,
         },
       ],

hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/status.vue

@@ -60,15 +60,23 @@
           5: '已关闭',
         };
         let colorMap = {
-          1: '#ff7602',
+          1: 'rgba(191, 205, 226, 1)',
-          2: '#00a1e6',
+          2: 'rgba(243, 97, 99, 1)',
-          3: '#04d919',
+          3: 'rgba(41, 196, 154, 1)',
-          4: '#d9001b',
+          4: 'rgba(217, 0, 27,1)',
-          5: '#a6a6a6',
+          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;