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

<template>
	<div class="table_item">
		<s-table ref="tableRef" :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="12">
									<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="12">
									<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="12">
									<a-form-item label="报表类型" name="type">
										<a-select v-model:value="searchFormState.type" placeholder="请选择报警类型">
											<a-select-option value="qst">趋势图</a-select-option>
										</a-select>
									</a-form-item></a-col
								>
								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="12">
									<a-form-item
										label="是否展示全部区间"
										name="isshow"
										:label-col="{ style: { width: '120px', justifyContent: 'end' } }"
									>
										<a-select v-model:value="searchFormState.isshow" placeholder="请选择是否展示全部区间">
											<a-select-option value="1">是</a-select-option>
											<a-select-option value="1">否</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>
			</template>

			<template #headerCell="{ title, column }">
				<template v-if="column.dataIndex === 'type'">
					<text>{{ title }}</text>
					<a-select ref="select" v-model:value="value1" style="width: 250px; margin-left: 10px">
						<a-select-option value="1">二氧化碳浓度</a-select-option>
					</a-select>
				</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 value1 = ref('1') //选择器

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

	// 搜索表单
	const searchFormState = ref({
		type: 'qst',
		isshow: '1'
	})
	const tableRef = ref()

	const columns = [
		{
			title: '采集类型',
			dataIndex: 'type'
		}
	]

	const loadData = (parameter) => {
		return jobApi.jobPage(Object.assign(parameter, searchFormState.value)).then((res) => {
			// return res
			const obj = {
				current: 1,
				pages: 1,
				records: [],
				size: 10,
				total: 0
			}
			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>