jfcloud-coldchain/snowy-admin-web/src/views/motoring/analyse/assess.vue

<template>
	<div class="table_item">
		<s-table ref="tableRef" bordered :columns="columns" :data="loadData" :row-key="(record) => record.code">
			<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="8">
									<a-form-item label="开始时间" name="searchKey">
										<a-date-picker
											v-model:value="searchFormState.searchKey"
											show-time
											format="YYYY-MM-DD HH:mm:ss"
											value-format="YYYY-MM-DD HH:mm:ss"
											style="width: 100%"
										/>
									</a-form-item>
								</a-col>
								<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
									<a-form-item label="结束时间" name="jssj">
										<a-date-picker
											v-model:value="searchFormState.jssj"
											show-time
											format="YYYY-MM-DD HH:mm:ss"
											value-format="YYYY-MM-DD HH:mm:ss"
											style="width: 100%"
										/>
									</a-form-item>
								</a-col>
								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="searchFormState.type == 'qst'">
									<a-form-item label="采集类型" name="cjlx">
										<a-select v-model:value="searchFormState.cjlx" placeholder="请选择采集类型">
											<a-select-option value="1">温度</a-select-option>
											<a-select-option value="2">湿度</a-select-option>
											<a-select-option value="3">氧气浓度</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, index }">
				<!-- 序号 -->
				<template v-if="column.dataIndex === 'index'">{{ index + 1 }} </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)
	onMounted(() => {
		unitSearchRef.value.onOpen() //获取单位数据
		monitorSearchRef.value.onOpen() //获取监控点数据
	})

	const tableRef = ref()
	const searchFormState = ref({})
	const columns = [
		{
			title: '序号',
			dataIndex: 'index',
			align: 'center',
			width: 50
		},
		{
			title: '部门名称',
			dataIndex: 'bmmc',
			align: 'center',
			ellipsis: true
		},
		{
			title: '监控点',
			dataIndex: 'jkd',
			align: 'center',
			ellipsis: true
		},
		{
			title: '冷链编号',
			dataIndex: 'llcode',
			align: 'center',
			ellipsis: true
		},
		{
			title: '品牌',
			dataIndex: 'pp',
			align: 'center',
			ellipsis: true
		},
		{
			title: '温度情况',
			dataIndex: 'wdqk',
			align: 'center',
			ellipsis: true,
			children: [
				{
					title: '平均温度',
					dataIndex: 'pjwd',
					align: 'center',
					ellipsis: true
				},
				{
					title: '最高温度',
					dataIndex: 'zgwd',
					align: 'center',
					ellipsis: true
				},
				{
					title: '最低温度',
					dataIndex: 'zdwd',
					align: 'center',
					ellipsis: true
				}
			]
		},

		{
			title: '报警情况',
			dataIndex: 'bjqk',
			align: 'center',
			ellipsis: true,
			children: [
				{
					title: '超温报警次数',
					dataIndex: 'cwbjcs',
					align: 'center',
					ellipsis: true
				},
				{
					title: '采集报警次数',
					dataIndex: 'cjbjcs',
					align: 'center',
					ellipsis: true
				}
			]
		},

		{
			title: '温度评估值',
			dataIndex: 'wdpgz',
			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: [
					{
						bmmc: '上海海关基数中心1',
						jkd: '监控点',
						llcode: 'LL-20241112',
						pp: '海尔',
						pjwd: 33,
						zgwd: 1,
						zdwd: 0,
						cwbjcs: 0,
						cjbjcs: 20,
						wdpgz: 0
					},
					{
						bmmc: '上海海关基数中心2',
						jkd: '监控点',
						llcode: 'LL-20241112',
						pp: '海尔',
						pjwd: 21,
						zgwd: 0,
						zdwd: 2,
						cwbjcs: 0,
						cjbjcs: 34,
						wdpgz: 0
					},
					{
						bmmc: '上海海关基数中心2',
						jkd: '监控点',
						llcode: 'LL-20241112',
						pp: '海尔',
						pjwd: 4,
						zgwd: 6,
						zdwd: 1,
						cwbjcs: 1,
						cjbjcs: 10,
						wdpgz: 0
					},
					{
						bmmc: '上海海关基数中心4',
						jkd: '监控点',
						llcode: 'LL-20241112',
						pp: '海尔',
						pjwd: 24,
						zgwd: 3,
						zdwd: 3,
						cwbjcs: 0,
						cjbjcs: 16,
						wdpgz: 0
					},
					{
						bmmc: '上海海关基数中心5',
						jkd: '监控点',
						llcode: 'LL-20241112',
						pp: '海尔',
						pjwd: 15,
						zgwd: 0,
						zdwd: 0,
						cwbjcs: 1,
						cjbjcs: 12,
						wdpgz: 0
					},
					{
						bmmc: '上海海关基数中心6',
						jkd: '监控点',
						llcode: 'LL-20241112',
						pp: '海尔',
						pjwd: 2,
						zgwd: 0,
						zdwd: 1,
						cwbjcs: 1,
						cjbjcs: 31,
						wdpgz: 0
					}
				],
				size: 10,
				total: 6
			}
			return obj
		})
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		tableRef.value.refresh(true)
	}
</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>