fix:修改设备告警ui

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
-          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 -->
@@ -213,11 +211,6 @@
       ],
       //滑块样式
       dataZoom: [
-        {
-          type: 'inside',
-          start: 0,
-          end: 100,
-        },
         {
           type: 'slider',
           // backgroundColor: 'yellow',
@@ -225,8 +218,8 @@
           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,
         },
       ],

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;