admin-ui/src/views/iot/alarm/list/index.vue

<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>{{ $t('message.alarmList.title') }}</span>
						<el-button size="small" text type="primary" @click="toMore()">{{ $t('message.alarmList.moreInfo') }}</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="$t('message.alarmCenter.columns.alarmType')" width="120" prop="type" align="center" show-overflow-tooltip v-col="'type'">
							<template #default="scope">
								<!-- 规则告警 -->
								<span v-if="scope.row.type == 1">{{ $t('message.alarmCenter.ruleAlarm') }}</span>
								<!-- 设备自主告警 -->
								<span v-else-if="scope.row.type == 2">{{ $t('message.alarmCenter.deviceSelfAlarm') }}</span>
								<!--  规则侧告警升级 -->
								<span v-else-if="scope.row.type == 3">{{ $t('message.alarmCenter.ruleAlarmUpgrade') }}</span>
								<!-- 设备自主告警 -->
								<span v-else>{{ $t('message.alarmCenter.deviceSelfAlarm') }}</span>
							</template>
						</el-table-column>
						<!-- 规则级别 -->
						<el-table-column :label="$t('message.alarmCenter.columns.alarmLevel')" width="120" align="center" prop="alarmLevel.name" show-overflow-tooltip v-col="'alarmLevel'" />
						<!-- 规则名称 -->
						<el-table-column :label="$t('message.alarmCenter.columns.ruleName')" prop="ruleName" show-overflow-tooltip v-col="'ruleName'" />
						<!-- 产品标识 -->
						<el-table-column :label="$t('message.alarmCenter.columns.productKey')" prop="productKey" show-overflow-tooltip v-col="'productKey'" />
						<!-- 设备标识 -->
						<el-table-column :label="$t('message.alarmCenter.columns.deviceKey')" prop="deviceKey" show-overflow-tooltip v-col="'deviceKey'" />
						<!-- 告警状态 -->
						<el-table-column prop="status" :label="$t('message.alarmCenter.columns.alarmStatus')" width="120" align="center" v-col="'status'">
							<template #default="scope">
								<!-- 已处理 -->
								<el-tag type="success" size="small" v-if="scope.row.status">{{ $t('message.alarmCenter.status.processed') }}</el-tag>
								<!-- 未处理 -->
								<el-tag type="info" size="small" v-else>{{ $t('message.alarmCenter.status.unprocessed') }}</el-tag>
							</template>
						</el-table-column>
						<!-- 告警时间 -->
						<el-table-column prop="createdAt" :label="$t('message.alarmCenter.columns.alarmTime')" align="center" width="170" v-col="'createdAt'"></el-table-column>
						<!-- 操作 -->
						<el-table-column :label="$t('message.alarmCenter.columns.action')" 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)">{{ $t('message.alarmCenter.actions.detail') }}</el-button>
								<!-- 处理 -->
								<el-button v-auth="'edit'" size="small" text type="warning" @click="onOpenEditDic(scope.row)" v-if="scope.row.status == 0">{{ $t('message.alarmCenter.actions.handle') }}</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>