add:添加告警管理内容 告警统揽和告警设置 修改公共组件 适配多种情况

hx-ai-intelligent/src/view/alarmManagement/alarmOverview/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="box">
+    <div class="box-top">
+      <div v-for="index in 3" :key="index" class="box-top-item">
+        <div class="item-box">
+          <div class="item-box-left">
+            <div class="item-box-left-title">设备告警 (今日处理 / 总数) </div>
+            <div class="iem-box-left-number">
+              10 / 13
+              <span
+                style="
+                  color: #04d919;
+                  font-size: 14px;
+                  margin-left: 5px;
+                  font-weight: 700;
+                  font-style: normal;
+                "
+                >+10%</span
+              >
+            </div>
+          </div>
+          <div class="item-box-right">
+            <img width="54px" height="54px" src="../../../../src/icon/gaojingguanli.svg" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div style="flex: 4; width: 100%">2</div>
+    <div style="flex: 4; width: 100%">3</div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue'; // 从 Vue 中导入 ref、onMounted 和 watchEffect
+
+  defineOptions({
+    name: 'alarmOverview', // 与页面路由name一致缓存才可生效
+  });
+
+  const info = ref({});
+  onMounted(() => {});
+</script>
+<style lang="less" scoped>
+  .box {
+    width: 100%;
+    height: 100%;
+    // border: 1px solid red;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    background-color: #f0f1f4;
+    box-sizing: border-box;
+    .box-top {
+      flex: 1;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: row;
+      gap: 5px;
+      .box-top-item {
+        height: 100%;
+        flex: 1;
+        gap: 5px;
+        background-color: white;
+        border-radius: 4px;
+        padding: 20px;
+        .item-box {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          .item-box-left {
+            flex: 9;
+            height: 100%;
+            padding: 0px !important;
+            .item-box-left-title {
+              color: rgba(0, 0, 0, 0.45);
+              font-weight: 400;
+              font-style: normal;
+              font-size: 14px;
+              color: #aaaaaa;
+              font-kerning: normal;
+              font-family: '微软雅黑', sans-serif;
+            }
+            .iem-box-left-number {
+              color: #000000;
+              font-weight: 700;
+              font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
+              font-style: normal;
+              font-size: 30px;
+            }
+          }
+          .item-box-right {
+            flex: 1;
+            height: 100%;
+            display: grid;
+            place-items: center;
+          }
+        }
+      }
+    }
+  }
+</style>