jfcloud-coldchain/snowy-admin-web/src/views/motoring/analyse/daily.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-form
							ref="searchFormRef"
							name="advanced_search"
							layout="inline"
							:model="searchFormState"
							class="ant-advanced-search-form"
						>
							<a-form-item label="" name="searchKey">
								<a-range-picker v-model:value="searchFormState.searchKey" value-format="YYYY/MM/DD" />
							</a-form-item>

							<a-form-item label="采集类型" name="type">
								<a-select v-model:value="searchFormState.type" placeholder="请选择报警类型">
									<a-select-option value="wd">温度</a-select-option>
								</a-select>
							</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-button>
							<template #icon><printer-outlined /></template>打印
						</a-button>
						<a-button>
							<template #icon><setting-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 class="item-right">
			<!-- 单位 -->
			<div class="unit">
				<unitSearch ref="unitSearchRef" />
			</div>
			<!-- 监控点 -->
			<div class="monitor">
				<monitorSearch ref="monitorSearchRef" />
			</div>
		</div>
	</div>
</template>

<script setup>
	import jobApi from '@/api/dev/jobApi'
	import unitSearch from './unitSearch.vue'
	import monitorSearch from './monitorSearch.vue'

	const unitSearchRef = ref(null)
	const monitorSearchRef = ref(null)
	const searchFormState = ref({
		type: 'wd'
	})

	onMounted(() => {
		unitSearchRef.value.onOpen() //获取单位数据
		monitorSearchRef.value.onOpen() //获取监控点数据
	})

	const tableRef = ref()
	const columns = [
		{
			title: '采集时间',
			dataIndex: 'time',
			align: 'center',
			ellipsis: true
		},
		{
			title: '对象名称',
			dataIndex: 'dxmc',
			align: 'center',
			ellipsis: true
		},
		{
			title: '报警最小值',
			dataIndex: 'bjzxz',
			align: 'center',
			ellipsis: true
		},
		{
			title: '采集状态',
			dataIndex: 'state',
			align: 'center',
			ellipsis: true
		},

		{
			title: '部门名称',
			dataIndex: 'bmmc',
			align: 'center',
			ellipsis: 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-08-28 07:03:24',
						dxmc: '-70度超低温冷冻储存箱',
						bjzxz: '/',
						state: '2',
						stateVlaue: '异常',
						bmmc: '上海海关基数中心1'
					},
					{
						time: '2024-08-28 09:21:51',
						dxmc: '-71度超低温冷冻储存箱',
						bjzxz: '/',
						state: '1',
						stateVlaue: '正常',
						bmmc: '上海海关基数中心2'
					},
					{
						time: '2024-08-28 11:06:20',
						dxmc: '-72度超低温冷冻储存箱',
						bjzxz: '/',
						state: '2',
						stateVlaue: '异常',
						bmmc: '上海海关基数中心2'
					},
					{
						time: '2024-08-28 11:54:19',
						dxmc: '-73度超低温冷冻储存箱',
						bjzxz: '/',
						state: '2',
						stateVlaue: '异常',
						bmmc: '上海海关基数中心4'
					},
					{
						time: '2024-08-28 16:17:36',
						dxmc: '-74度超低温冷冻储存箱',
						bjzxz: '/',
						state: '1',
						stateVlaue: '正常',
						bmmc: '上海海关基数中心5'
					},
					{
						time: '2024-08-28 19:35:58',
						dxmc: '-75度超低温冷冻储存箱',
						bjzxz: '/',
						state: '2',
						stateVlaue: '异常',
						bmmc: '上海海关基数中心6'
					}
				],
				size: 10,
				total: 6
			}
			return obj
		})
	}
</script>

<style lang="less" scoped>
	.table_item {
		width: 100%;
		display: flex;
		padding: 15px 20px;

		// 表格区域
		.table-wrapper {
			width: 75%;

			// 搜索及操作按钮区域
			.table-head {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.head-left {
					display: flex;
				}

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

		// 右边的搜索区域
		.item-right {
			width: 25%;
			padding: 5px 10px;

			.unit,
			.monitor {
				width: 100%;
				height: 350px;
				padding: 10px;
				margin-bottom: 10px;
				border-radius: 5px;
				border: 1px solid #eaeaea;
				overflow-y: auto;
			}
		}
	}

	// 树形结构的样式
	:deep(.ant-tree-treenode) {
		width: 100%;
		margin-bottom: 5px;
		border-radius: 5px;
		padding: 5px 0;
		border: 1px solid #eaeaea;
	}

	// 分页居中显示
	:deep(.ant-table-pagination-right) {
		justify-content: center !important;
	}
</style>