|
|
@@ -0,0 +1,167 @@
|
|
|
+<template>
|
|
|
+ <div class="home-container">
|
|
|
+ <el-row :gutter="15" class="home-card-three">
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <div class="home-card-item" style="height: auto">
|
|
|
+ <div class="home-card-item-title">
|
|
|
+ <span>告警消息</span>
|
|
|
+ <el-button size="small" text type="primary" @click="toMore()">更多信息</el-button>
|
|
|
+ </div>
|
|
|
+ <el-table :data="tableData.data" style="width: 100%" v-loading="loading">
|
|
|
+ <el-table-column label="ID" align="center" prop="id" width="100" v-col="'ID'" />
|
|
|
+ <el-table-column label="告警类型" width="120" prop="type" align="center" show-overflow-tooltip v-col="'type'">
|
|
|
+ <template #default="scope">
|
|
|
+ <span v-if="scope.row.type == 1">规则告警</span>
|
|
|
+ <span v-else-if="scope.row.type == 2">设备自主告警</span>
|
|
|
+ <span v-else-if="scope.row.type == 3">规侧告警升级</span>
|
|
|
+ <span v-else>设备自主告警</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="规则级别" width="120" align="center" prop="alarmLevel.name" show-overflow-tooltip v-col="'alarmLevel'" />
|
|
|
+ <el-table-column label="规则名称" prop="ruleName" show-overflow-tooltip v-col="'ruleName'" />
|
|
|
+ <el-table-column label="产品标识" prop="productKey" show-overflow-tooltip v-col="'productKey'" />
|
|
|
+ <el-table-column label="设备标识" prop="deviceKey" show-overflow-tooltip v-col="'deviceKey'" />
|
|
|
+
|
|
|
+ <el-table-column prop="status" label="告警状态" width="100" align="center" v-col="'status'">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag type="success" size="small" v-if="scope.row.status">已处理</el-tag>
|
|
|
+ <el-tag type="info" size="small" v-else>未处理</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="createdAt" label="告警时间" align="center" width="170" v-col="'createdAt'"></el-table-column>
|
|
|
+ <el-table-column label="操作" width="130" align="center" fixed="right" v-col="'handle'">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button v-auth="'detail'" size="small" text type="primary" @click="onOpenDetailDic(scope.row)">详情</el-button>
|
|
|
+ <el-button v-auth="'edit'" size="small" text type="warning" @click="onOpenEditDic(scope.row)" v-if="scope.row.status == 0"
|
|
|
+ >处理</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <EditDic ref="editDicRef" @dataList="getAlarmList" />
|
|
|
+ <DetailDic ref="detailRef" @dataList="getAlarmList" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { toRefs, reactive, onMounted, ref } from 'vue'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+import api from '/@/api/datahub'
|
|
|
+import EditDic from '../log/component/edit.vue'
|
|
|
+import DetailDic from '../log/component/detail.vue'
|
|
|
+
|
|
|
+const editDicRef = ref()
|
|
|
+const detailRef = ref()
|
|
|
+const router = useRouter()
|
|
|
+const state = reactive({
|
|
|
+ loading: false,
|
|
|
+ tableData: {
|
|
|
+ data: [],
|
|
|
+ total: 0,
|
|
|
+ loading: false,
|
|
|
+ param: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ status: '',
|
|
|
+ dateRange: [],
|
|
|
+ },
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+const { loading, tableData } = toRefs(state)
|
|
|
+
|
|
|
+const getAlarmList = () => {
|
|
|
+ api.iotManage.getAlarmList(state.tableData.param).then((res: any) => {
|
|
|
+ state.tableData.data = res.list
|
|
|
+ state.tableData.total = res.Total
|
|
|
+ })
|
|
|
+}
|
|
|
+//打开详情页
|
|
|
+const onOpenDetailDic = (row: any) => {
|
|
|
+ detailRef.value.openDialog(row)
|
|
|
+}
|
|
|
+// 打开修改产品弹窗
|
|
|
+const onOpenEditDic = (row: any) => {
|
|
|
+ editDicRef.value.openDialog(row)
|
|
|
+}
|
|
|
+// 告警信息-更多信息
|
|
|
+const toMore = () => {
|
|
|
+ router.push({ path: '/iotmanager/alarm/log' })
|
|
|
+}
|
|
|
+// 页面加载时
|
|
|
+onMounted(() => {
|
|
|
+ getAlarmList()
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+
|
|
|
+.home-container {
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .home-card-one,
|
|
|
+ .home-card-two,
|
|
|
+ .home-card-three {
|
|
|
+ .icoimg {
|
|
|
+ width: 75px;
|
|
|
+ height: 75px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title_status {
|
|
|
+ width: 7px;
|
|
|
+ height: 7px;
|
|
|
+ background: #c1bbbb;
|
|
|
+ border-radius: 50px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-card-item,
|
|
|
+ .home-card-top {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 8px;
|
|
|
+ transition: all ease 0.3s;
|
|
|
+ padding: 10px 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: var(--el-color-white);
|
|
|
+ color: var(--el-text-color-primary);
|
|
|
+
|
|
|
+ // border: 1px solid var(--next-border-color-light);
|
|
|
+ &:hover {
|
|
|
+ // box-shadow: 0 2px 12px var(--next-color-dark-hover);
|
|
|
+ transition: all ease 0.3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-icon {
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ border-radius: 100%;
|
|
|
+ flex-shrink: 1;
|
|
|
+
|
|
|
+ i {
|
|
|
+ color: var(--el-text-color-placeholder);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: bold;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-card-three {
|
|
|
+ .home-card-item-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ // span:nth-child(2) {
|
|
|
+ // color: #409eff;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
