代码初始化

src/views/components/module/AlarmInformation.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="alarm-wrapper">
+    <div class="table-header">
+      <div
+        class="header-item"
+        v-for="item in headerList"
+        :key="item.id"
+        :style="{ width: item.width }"
+      >
+        <div class="name">{{ item.name }}</div>
+        <div class="img"></div>
+      </div>
+    </div>
+    <div class="table-body">
+      <div
+        class="table-row"
+        v-for="(item, index) in tableList"
+        :key="item.id"
+        :class="index % 2 === 0 ? 'active-bg' : ''"
+      >
+        <div style="width: 35%" class="title">
+          {{ item.alarmStartTime }}
+        </div>
+        <div style="width: 25%" class="title title-overflow">
+          {{ item.deviceName }}
+        </div>
+        <div style="width: 22%" class="title">{{ item.alarmTypeLabel }}</div>
+        <div
+          style="width: 18%"
+          class="title"
+          :class="
+            item.state === '2'
+              ? 'color-two'
+              : item.state === '3'
+              ? 'color-three'
+              : item.state === '4'
+              ? 'color-four'
+              : 'color-one'
+          "
+        >
+          {{ item.stateLabel }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { alarmManage } from "@/api/largeScreen";
+import { getDicts } from "@/api/index";
+
+const props = defineProps(["buildingId"]);
+
+const headerList = ref([
+  { id: 0, name: "告警时间", width: "35%" },
+  { id: 1, name: "设备名称", width: "25%" },
+  { id: 2, name: "告警类型", width: "22%" },
+  { id: 3, name: "告警状态", width: "18%" },
+]);
+const tableList = ref([]);
+
+const alarmTypeList = ref([]);
+const alarmStateList = ref([]);
+
+onMounted(async () => {
+  alarmTypeList.value = await getDicts("alarm_type");
+  alarmStateList.value = await getDicts("alarm_state");
+
+  alarmManage({ buildingIdList: props.buildingId }).then((res) => {
+    tableList.value = res.rows.map((item) => {
+      return {
+        ...item,
+        alarmTypeLabel: alarmTypeList.value.data.find(
+          (v) => v.dictValue === item.alarmType
+        )?.dictLabel,
+        stateLabel: alarmStateList.value.data.find(
+          (v) => v.dictValue === item.state
+        )?.dictLabel,
+      };
+    });
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+</style>