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" bordered>
			<template #operator>
				<!-- 搜索区域 -->
				<div class="table-search">
					<div class="table-search-form">
						<a-row :gutter="10">
							<a-form
								ref="searchFormRef"
								name="advanced_search"
								layout="inline"
								:label-col="{ style: { width: '70px', justifyContent: 'end' } }"
								:model="searchFormState"
								class="ant-advanced-search-form"
							>
								<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
									<a-form-item label="生成时间" name="searchKey">
										<a-range-picker
											v-model:value="searchFormState.searchKey"
											value-format="YYYY/MM/DD"
											style="width: 100%"
										/>
									</a-form-item>
								</a-col>

								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="12">
									<a-form-item label="采集类型" name="type">
										<a-select v-model:value="searchFormState.type" placeholder="请选择采集类型">
											<a-select-option value="wd">温度</a-select-option>
											<a-select-option value="2">湿度</a-select-option>
											<a-select-option value="3">氧气浓度</a-select-option>
											<a-select-option value="4">二氧化碳浓度</a-select-option>
											<a-select-option value="5">液味</a-select-option>
										</a-select>
									</a-form-item></a-col
								>
							</a-form>
						</a-row>
					</div>
					<div class="table-search-buttons">
						<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
						<a-button class="xn-mg08" @click="reset">重置</a-button>
					</div>
				</div>

				<!-- 其他操作区域 -->
				<div class="table-head-btn">
					<div class="btn-right">
						<a-button class="xn-mg08">
							<template #icon><download-outlined /></template>导出
						</a-button>
						<a-button>
							<template #icon><printer-outlined /></template>打印
						</a-button>
					</div>
				</div>
			</template>

			<template #bodyCell="{ column, record, index }">
				<!-- 序号 -->
				<template v-if="column.dataIndex === 'index'">{{ index + 1 }} </template>
				<template v-if="column.dataIndex === 'state'">
					<span>
						<a-tag :color="record.state == '1' ? '#87d068' : record.state == '2' ? '#cd201f' : '#50cd7c'">
							{{ 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: 'index',
			align: 'center',
			width: 50
		},
		{
			title: '采集时间',
			dataIndex: 'time',
			align: 'center',
			ellipsis: true
		},
		{
			title: '对象名称',
			dataIndex: 'dxmc',
			align: 'center',
			ellipsis: true
		},
		{
			title: '报警最小值',
			dataIndex: 'bjzxz',
			align: 'center',
			ellipsis: true
		},
		{
			title: '报警最大值',
			dataIndex: 'bjzdz',
			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: '/',
						bjzdz: '/',
						state: '2',
						stateVlaue: '异常',
						bmmc: '上海海关基数中心1'
					},
					{
						time: '2024-08-28 09:21:51',
						dxmc: '-71度超低温冷冻储存箱',
						bjzxz: '/',
						bjzdz: '/',
						state: '1',
						stateVlaue: '正常',
						bmmc: '上海海关基数中心2'
					},
					{
						time: '2024-08-28 11:06:20',
						dxmc: '-72度超低温冷冻储存箱',
						bjzxz: '/',
						bjzdz: '/',
						state: '2',
						stateVlaue: '异常',
						bmmc: '上海海关基数中心2'
					},
					{
						time: '2024-08-28 11:54:19',
						dxmc: '-73度超低温冷冻储存箱',
						bjzxz: '/',
						bjzdz: '/',
						state: '2',
						stateVlaue: '异常',
						bmmc: '上海海关基数中心4'
					},
					{
						time: '2024-08-28 16:17:36',
						dxmc: '-74度超低温冷冻储存箱',
						bjzxz: '/',
						bjzdz: '/',
						state: '1',
						stateVlaue: '正常',
						bmmc: '上海海关基数中心5'
					},
					{
						time: '2024-08-28 19:35:58',
						dxmc: '-75度超低温冷冻储存箱',
						bjzxz: '/',
						bjzdz: '/',
						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%;
		}

		// 右边的搜索区域
		.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 !important;
		border: 1px solid #eaeaea;
	}

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