jfcloud-coldchain/snowy-admin-web/src/views/basicset/monitor/setup.vue

<template>
	<div class="table_item">
		<s-table
			ref="tableRef"
			:columns="columns"
			:data="loadData"
			:row-key="(record) => record.id"
			bordered
			@resizeColumn="handleResizeColumn"
		>
			<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="12" :lg="8" :xl="8"
									><a-form-item label="对象名称" name="name">
										<a-input v-model:value="searchFormState.name" placeholder="请输入对象名称" /> </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-left">
						<a-button type="primary" @click="formRef.onOpen()">
							<template #icon><plus-outlined /></template>新增
						</a-button>
					</div>
					<!-- <div class="btn-right">
						<a-button class="xn-mg08">
							<template #icon><CloudUploadOutlined /> </template>导入
						</a-button>
						<a-button>
							<template #icon><download-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 === 'status'">
					<span>
						<a-tag :color="record.status == '1' ? '#87d068' : '#cd201f'">
							{{ record.status == '1' ? '正常' : '停用' }}
						</a-tag>
					</span>
				</template>
				<template v-if="column.dataIndex === 'sensorType'">
					{{ $TOOL.dictTypeData('SENSORTYPE', record.sensorType) }}
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a-button type="link" size="small" @click="formRef.onOpen(record)">编辑</a-button>
					<a-popconfirm title="确定要删除吗？" @confirm="deleteData(record)">
						<a-button type="link" danger size="small">删除</a-button>
					</a-popconfirm>
					<a-button type="link" size="small" @click="leaveFor('/biz/location', record)">监测点配置</a-button>
				</template>
			</template>
			<!-- <template #expandedRowRender="{ record }">
				<a-tabs v-model:activeKey="record.activeKey" size="small" type="card">
					<a-tab-pane key="1" tab="基本信息">
						<div class="list">
							<a-descriptions bordered size="small">
								<a-descriptions-item label="对象名称" :span="2">{{ record.name }}</a-descriptions-item>
								<a-descriptions-item label="对象编号" :span="2">{{ record.dxcode }}</a-descriptions-item>
								<a-descriptions-item label="品牌">{{ record.pp }}</a-descriptions-item>
								<a-descriptions-item label="型号">{{ record.xh }}</a-descriptions-item>
								<a-descriptions-item label="类型">{{ record.type }}</a-descriptions-item>
								<a-descriptions-item label="使用状态">{{ record.syzt }}</a-descriptions-item>
								<a-descriptions-item label="报警状态">{{ record.bjzt }}</a-descriptions-item>
								<a-descriptions-item label="位置">{{ record.wz }}</a-descriptions-item>
							</a-descriptions>
						</div>
					</a-tab-pane>
					<a-tab-pane key="2" tab="冷链设备">
						<div class="list">
							<a-descriptions bordered size="small">
								<a-descriptions-item label="冷链编号" :span="2">{{ record.llcode }}</a-descriptions-item>
								<a-descriptions-item label="对应路数" :span="2">{{ record.dyls }}</a-descriptions-item>
								<a-descriptions-item label="所属中继" :span="2">{{ record.sszj }}</a-descriptions-item>
							</a-descriptions>
						</div>
					</a-tab-pane>
					<a-tab-pane key="3" tab="温湿度设定">
						<div class="list">
							<a-descriptions title="报警上下限" bordered size="small">
								<a-descriptions-item label="温度上限(℃)" :span="2">{{ record.wdsx }}</a-descriptions-item>
								<a-descriptions-item label="温度下限(℃)" :span="2">{{ record.wdxx }}</a-descriptions-item>
								<a-descriptions-item label="湿度上限(%)" :span="2">{{ record.sdsx }}</a-descriptions-item>
								<a-descriptions-item label="湿度下限(%)" :span="2">{{ record.sdxx }}</a-descriptions-item>
							</a-descriptions>

							<a-descriptions title="温湿度修正" bordered size="small">
								<a-descriptions-item label="温度(-10~10)(℃)" :span="2">{{ record.wdxz }}</a-descriptions-item>
								<a-descriptions-item label="湿度(-20~20)(%)" :span="2">{{ record.sdxz }}</a-descriptions-item>
							</a-descriptions>
						</div>
					</a-tab-pane>
					<a-tab-pane key="4" tab="报警信息">
						<div class="list">
							<a-descriptions title="对象信息" bordered size="small">
								<a-descriptions-item label="对象名称" :span="2">{{ record.name }}</a-descriptions-item>
								<a-descriptions-item label="监控点名称" :span="2">{{ record.jkd }}</a-descriptions-item>
								<a-descriptions-item label="报警级别" :span="2">{{ '1' }}</a-descriptions-item>
								<a-descriptions-item label="延时时间" :span="2">{{ '0' }}</a-descriptions-item>
								<a-descriptions-item label="报警频率" :span="2">{{ '1' }}</a-descriptions-item>

								<a-descriptions-item label="执行间隔" :span="2">{{ '10' }}</a-descriptions-item>
								<a-descriptions-item label="是否逐级报警" :span="2">{{ '否' }}</a-descriptions-item>
								<a-descriptions-item label="逐级报警时间间隔" :span="2">{{ '0' }}</a-descriptions-item>
								<a-descriptions-item label="允许报警开始时间" :span="2"></a-descriptions-item>
								<a-descriptions-item label="允许报警结束时间" :span="2"></a-descriptions-item>
							</a-descriptions>

							<a-descriptions title="短信报警" bordered size="small">
								<a-descriptions-item label="提醒人姓名" :span="2">{{ '欧阳天添' }}</a-descriptions-item>
								<a-descriptions-item label="接收电话" :span="2">{{ '13476548750' }}</a-descriptions-item>
							</a-descriptions>
						</div>
					</a-tab-pane>
					<a-tab-pane key="5" tab="温度记录">
						<div class="list">温度记录</div>
					</a-tab-pane>
				</a-tabs>
			</template> -->
		</s-table>
		<Form ref="formRef" @successful="tableRef.refresh(true)" />
	</div>
</template>

<script setup>
	import router from '@/router'
	import setupApi from '@/api/basicset/setupApi'
	import Form from './form.vue'
	const formRef = ref()

	const searchFormRef = ref()
	const searchFormState = ref({})
	const tableRef = ref()
	const columns = [
		{
			title: '序号',
			dataIndex: 'index',
			align: 'center',
			width: 50
		},
		{
			title: '对象名称',
			dataIndex: 'name',
			align: 'center',
			ellipsis: true,
			resizable: true
		},
		{
			title: '对象状态',
			dataIndex: 'status',
			align: 'center',
			ellipsis: true,
			resizable: true
		},
		{
			title: '监控位置区域',
			dataIndex: 'monitorPoint',
			align: 'center',
			ellipsis: true,
			resizable: true
		},
		{
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: 200
		}
	]
	// 可伸缩列
	const handleResizeColumn = (w, col) => {
		col.width = w
	}

	const loadData = (parameter) => {
		return setupApi.setupPage(Object.assign(parameter, searchFormState.value)).then((res) => {
			return res
		})
	}

	// 跳转到监测点界面
	const leaveFor = (url, record) => {
		router.push({
			path: url,
			query: {
				id: record.id
			}
		})
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		tableRef.value.refresh(true)
	}
	// 删除
	const deleteData = (record) => {
		let params = [
			{
				id: record.id
			}
		]
		setupApi.setupDelete(params).then(() => {
			tableRef.value.refresh(true)
			reset()
		})
	}
</script>

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

		:deep(.ant-table-pagination-right) {
			justify-content: center !important;
		}
	}
	.list {
		width: 60%;
		padding: 10px 20px;
		border-radius: 10px;
		background-color: #ffffff;

		:deep(.ant-descriptions) {
			margin-bottom: 10px;
		}
		:deep(.ant-descriptions-header) {
			margin: 0;
			padding: 10px;
			border: 1px solid #f0f0f0;
			border-bottom: none;
		}
	}
</style>