jfcloud-coldchain/snowy-admin-web/src/views/basicset/mem/collector.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">
						<a-button type="primary">显示新设备</a-button>
						<a-form
							ref="searchFormRef"
							name="advanced_search"
							:model="searchFormState"
							layout="inline"
							class="ant-advanced-search-form"
						>
							<a-form-item label="冷链编号" name="code">
								<a-input v-model:value="searchFormState.code" placeholder="请输入冷链编号" />
							</a-form-item>
						</a-form>
						<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
						<a-button class="xn-mg08" @click="reset">重置</a-button>
					</div>
					<div class="head-right">
						<a-button>
							<template #icon><download-outlined /></template>导出
						</a-button>
						<a-select ref="select" v-model:value="value1" style="width: 120px" @focus="focus" @change="handleChange">
							<a-select-option value="1">搜索模式</a-select-option>
						</a-select>
					</div>
				</div>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'state'">
					<span>
						<a-tag :color="record.state == '1' ? '#87d068' : record.state == '2' ? '#cd201f' : '#50cd7c'">
							{{ record.stateValue }}
						</a-tag>
					</span>
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a-button type="link" size="small">编辑</a-button>
					<a-button type="link" size="small">删除</a-button>
					<a-button type="link" size="small">记录</a-button>
				</template>
			</template>
		</s-table>
	</div>
</template>

<script setup>
	import tool from '@/utils/tool'
	import jobApi from '@/api/dev/jobApi'
	const searchFormRef = ref()
	const searchFormState = ref({})
	const tableRef = ref()
	const value1 = ref('1')
	const columns = [
		{
			title: '所属部门',
			dataIndex: 'ssbm',
			align: 'center',
			ellipsis: true,

			width: 200
		},
		{
			title: '采集器编号',
			dataIndex: 'code',
			align: 'center',
			ellipsis: true
		},
		{
			title: '采集器名称',
			dataIndex: 'name',
			align: 'center',
			ellipsis: true,

			width: 200
		},
		{
			title: '型号',
			dataIndex: 'xh',
			align: 'center',
			ellipsis: true
		},
		{
			title: '最后心跳时间',
			dataIndex: 'date',
			align: 'center',
			ellipsis: true,

			width: 200
		},
		{
			title: '设备状态',
			dataIndex: 'state',
			align: 'center',
			ellipsis: true
		},

		{
			title: '传感器路数',
			dataIndex: 'bjsxx',
			align: 'center',
			ellipsis: true
		},
		{
			title: '对应监控对象',
			dataIndex: 'dyjkdx',
			align: 'center',
			ellipsis: true
		},
		{
			title: '监控对象位置',
			dataIndex: 'jkdxwz',
			align: 'center',
			ellipsis: true
		},

		{
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: 150
		}
	]

	const loadData = (parameter) => {
		return jobApi.jobPage(Object.assign(parameter, searchFormState.value)).then((res) => {
			// return res
			const obj = {
				current: 1,
				pages: 1,
				records: [
					{
						ssbm: '广州海关技术中心',
						code: 'Y6578945621',
						name: 'ABSL-3超低温冰箱123456',
						xh: '三代GPRS采集-VH',
						date: '2024-09-28 07:03:24',
						state: '1',
						stateValue: '正常',
						bjsxx: '1',
						dyjkdx: 'BSL-3超低温冰箱',
						jkdxwz: 'ABCLSY冰箱三层',
						children: [
							{
								ssbm: '广州海关技术中心',
								code: 'Y-01-6578945621',
								name: 'ABSL-3超低温冰箱123456',
								xh: '三代GPRS采集-VH',
								date: '2024-09-28 07:03:24',
								state: '2',
								stateValue: '异常',
								bjsxx: '1',
								dyjkdx: 'BSL-3超低温冰箱',
								jkdxwz: 'ABCLSY冰箱三层一格'
							}
						]
					},
					{
						ssbm: '广州海关技术中心',
						code: 'Y6578945622',
						name: 'ABSL-3超低温冰箱123456',
						xh: '三代GPRS采集-VH',
						date: '2024-11-05 07:12:42',
						state: '1',
						stateValue: '正常',
						bjsxx: '1',
						dyjkdx: 'BSL-3超低温冰箱',
						jkdxwz: 'ABCLSY冰箱三层',
						children: [
							{
								ssbm: '广州海关技术中心',
								code: 'Y-01-6578945622',
								name: 'ABSL-3超低温冰箱123456',
								xh: '三代GPRS采集-VH',
								date: '2024-09-28 07:03:24',
								state: '2',
								stateValue: '异常',
								bjsxx: '1',
								dyjkdx: 'BSL-3超低温冰箱',
								jkdxwz: 'ABCLSY冰箱三层'
							}
						]
					},
					{
						ssbm: '广州海关技术中心',
						code: 'Y6578945623',
						name: 'ABSL-3超低温冰箱123456',
						xh: '三代GPRS采集-VH',
						date: '2024-11-05 09:22:45',
						state: '1',
						stateValue: '正常',
						bjsxx: '1',
						dyjkdx: 'BSL-3超低温冰箱',
						jkdxwz: 'ABCLSY冰箱三层'
					},
					{
						ssbm: '广州海关技术中心',
						code: 'Y6578945624',
						name: 'ABSL-3超低温冰箱123456',
						xh: '三代GPRS采集-VH',
						date: '2024-11-05 09:27:55',
						state: '1',
						stateValue: '正常',
						bjsxx: '1',
						dyjkdx: 'BSL-3超低温冰箱',
						jkdxwz: 'ABCLSY冰箱三层'
					},
					{
						ssbm: '广州海关技术中心',
						code: 'Y6578945625',
						name: 'ABSL-3超低温冰箱123456',
						xh: '三代GPRS采集-VH',
						date: '2024-11-05 10:16:11',
						state: '2',
						stateValue: '异常',
						bjsxx: '1',
						dyjkdx: 'BSL-3超低温冰箱',
						jkdxwz: 'ABCLSY冰箱三层'
					},
					{
						ssbm: '广州海关技术中心',
						code: 'Y6578945626',
						name: 'ABSL-3超低温冰箱123456',
						xh: '三代GPRS采集-VH',
						date: '2024-11-05 14:57:31',
						state: '2',
						stateValue: '异常',
						bjsxx: '1',
						dyjkdx: 'BSL-3超低温冰箱',
						jkdxwz: 'ABCLSY冰箱三层'
					}
				],
				size: 10,
				total: 6
			}
			return obj
		})
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		tableRef.value.refresh(true)
	}
</script>

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

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

			.head-left {
				width: 60%;
				display: flex;
			}

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

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