jfcloud-coldchain/snowy-admin-web/src/components/HomeCard/SysWarningCard/index.vue

<template>
	<div class="home_count">
		<div class="warning-title">
			<div>报警管理</div>
			<a-button type="link" @click="leaveFor('/motoring/report')">更多</a-button>
		</div>
		<a-table :columns="columns" :data-source="dataSource" size="small" :pagination="false" :scroll="{ y: 260 }">
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'state'">
					<span>
						<a-tag :color="record.state == '1' ? '#cd201f' : record.state == '2' ? '#2db7f5' : '#87d068'">
							{{ record.stateVlaue }}
						</a-tag>
					</span>
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a-button type="link" size="small">编辑</a-button>
					<a-divider type="vertical" />
					<a-popconfirm title="删除此数据？" @confirm="deleteData(record)">
						<a-button type="link" danger size="small">删除</a-button>
					</a-popconfirm>
					<a-divider type="vertical" />
					<a-button type="link" size="small">记录</a-button>
				</template>
			</template>
		</a-table>
	</div>
</template>

<script setup name="SysWarningCard">
	import bizIndexApi from '@/api/biz/bizIndexApi'
	import router from '@/router'
	const columns = [
		{
			title: '时间',
			dataIndex: 'createTime',
			ellipsis: true
		},
		{
			title: '名称',
			dataIndex: 'title',
			ellipsis: true
		},
		{
			title: '报警原因',
			dataIndex: 'reason',
			ellipsis: true
		},
		{
			title: '状态',
			dataIndex: 'state',
			ellipsis: true
		},
		{
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: '200px'
		}
	]
	const dataSource = ref([
		{
			createTime: '2024-09-28 07:03:24',
			title: 'ABSL-1超低温冰箱',
			reason: '温度异常',
			state: '1',
			stateVlaue: '异常'
		},
		{
			createTime: '2024-09-28 09:21:51',
			title: 'ABSL-2超低温冰箱',
			reason: '温度异常',
			state: '1',
			stateVlaue: '异常'
		},
		{
			createTime: '2024-09-28 11:06:20',
			title: 'ABSL-3超低温冰箱',
			reason: '温度异常',
			state: '1',
			stateVlaue: '异常'
		},
		{
			createTime: '2024-09-28 11:54:19',
			title: 'ABSL-4超低温冰箱',
			reason: '温度异常',
			state: '1',
			stateVlaue: '异常'
		},
		{
			createTime: '2024-09-28 16:17:36',
			title: 'ABSL-5超低温冰箱',
			reason: '温度异常',
			state: '1',
			stateVlaue: '异常'
		},
		{
			createTime: '2024-09-28 19:35:58',
			title: 'ABSL-6超低温冰箱',
			reason: '温度异常',
			state: '1',
			stateVlaue: '异常'
		}
	])
	const apiLoading = ref(false)
	onMounted(() => {})
	const leaveFor = (url = '/') => {
		router.replace({
			path: url
		})
	}

	// 删除
	const deleteData = (record) => {
		console.log(record.title, 'params')
	}
</script>

<style lang="less" scoped>
	.home_count {
		width: 100%;
		padding: 15px 25px;
		background-color: #ffffff;

		.warning-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 10px;
		}
	}
</style>