jfcloud-coldchain/snowy-admin-web/src/views/motoring/query/realtime.vue

<template>
	<div class="table_item">
		<s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.code">
			<template #operator>
				<div class="table-head">
					<div class="head-left">
						剩余刷新时间：<text style="color: #1c8fff">{{ 33 }}</text>
					</div>
					<div class="head-right">
						<a-button>
							<template #icon><search-outlined /></template>搜索
						</a-button>
						<a-button>
							<template #icon><download-outlined /></template>导出
						</a-button>
						<a-button>
							<template #icon><printer-outlined /></template>打印
						</a-button>
					</div>
				</div>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'state'">
					<span>
						<a-tag :color="record.state == '1' ? '#2db7f5' : record.state == '2' ? '#cd201f' : '#87d068'">
							{{ record.stateVlaue }}
						</a-tag>
					</span>
				</template>
			</template>
		</s-table>
	</div>
</template>

<script setup>
	import tool from '@/utils/tool'
	import jobApi from '@/api/dev/jobApi'
	const searchFormState = ref({})
	const tableRef = ref()
	const columns = [
		{
			title: '采集时间',
			dataIndex: 'time',
			align: 'center',
			ellipsis: true,
			sorter: true
		},
		{
			title: '所属部门',
			dataIndex: 'bm',
			align: 'center',
			ellipsis: true,
			sorter: true
		},
		{
			title: '对象名称',
			dataIndex: 'dxmc',
			align: 'center',
			ellipsis: true,
			sorter: true
		},
		{
			title: '设备状态',
			dataIndex: 'state',
			align: 'center',
			ellipsis: true
		},
		{
			title: '监控点',
			dataIndex: 'jkd',
			align: 'center',
			ellipsis: true,
			sorter: true
		},
		{
			title: '上下限',
			dataIndex: 'up',
			align: 'center',
			ellipsis: true
		},
		{
			title: '传感器类型',
			dataIndex: 'type',
			align: 'center',
			ellipsis: true
		},
		{
			title: '采集值1',
			dataIndex: 'cjz1',
			align: 'center',
			ellipsis: true
		},
		{
			title: '采集值2',
			dataIndex: 'cjz2',
			align: 'center',
			ellipsis: true
		},
		{
			title: '对象类型',
			dataIndex: 'dxtype',
			align: 'center',
			ellipsis: true,
			sorter: true
		},
		{
			title: '冷链编号',
			dataIndex: 'code',
			align: 'center',
			ellipsis: true,
			sorter: true
		}
	]

	const loadData = (parameter) => {
		return jobApi.jobPage(Object.assign(parameter, searchFormState.value)).then((res) => {
			// return res
			const obj = {
				current: 1,
				pages: 1,
				records: [
					{
						time: '2024-09-28 07:03:24',
						bm: '广州海关基数中心1',
						dxmc: '-80度超低温冷冻储存箱',
						state: '1',
						stateVlaue: '正常',
						jkd: '监控点1',
						up: '-30~-10℃',
						type: '温度',
						cjz1: '-18.9℃',
						cjz2: '/',
						dxtype: '冰箱',
						code: '6578945621'
					},
					{
						time: '2024-09-28 09:21:51',
						bm: '广州海关基数中心2',
						dxmc: '-81度超低温冷冻储存箱',
						state: '1',
						stateVlaue: '正常',
						jkd: '监控点2',
						up: '-30~-10℃',
						type: '温度',
						cjz1: '-18.9℃',
						cjz2: '/',
						dxtype: '冰箱',
						code: '6578945622'
					},
					{
						time: '2024-09-28 11:06:20',
						bm: '广州海关基数中心3',
						dxmc: '-82度超低温冷冻储存箱',
						state: '1',
						stateVlaue: '正常',
						jkd: '监控点3',
						up: '-30~-10℃',
						type: '温度',
						cjz1: '-18.9℃',
						cjz2: '/',
						dxtype: '冰箱',
						code: '6578945623'
					},
					{
						time: '2024-09-28 11:54:19',
						bm: '广州海关基数中心4',
						dxmc: '-83度超低温冷冻储存箱',
						state: '1',
						stateVlaue: '正常',
						jkd: '监控点4',
						up: '-30~-10℃',
						type: '温度',
						cjz1: '-18.9℃',
						cjz2: '/',
						dxtype: '冰箱',
						code: '6578945624'
					},
					{
						time: '2024-09-28 16:17:36',
						bm: '广州海关基数中心5',
						dxmc: '-84度超低温冷冻储存箱',
						state: '1',
						stateVlaue: '正常',
						jkd: '监控点5',
						up: '-30~-10℃',
						type: '温度',
						cjz1: '-18.9℃',
						cjz2: '/',
						dxtype: '冰箱',
						code: '6578945625'
					},
					{
						time: '2024-09-28 19:35:58',
						bm: '广州海关基数中心6',
						dxmc: '-85度超低温冷冻储存箱',
						state: '1',
						stateVlaue: '正常',
						jkd: '监控点6',
						up: '-30~-10℃',
						type: '温度',
						cjz1: '-18.9℃',
						cjz2: '/',
						dxtype: '冰箱',
						code: '6578945626'
					}
				],
				size: 10,
				total: 6
			}
			return obj
		})
	}
</script>

<style lang="less" scoped>
	.table_item {
		padding: 15px 20px;

		.table-head {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.ant-btn {
				margin-left: 10px;
			}
		}

		:deep(.ant-table-pagination-right) {
			justify-content: center !important;
		}
	}
</style>