监测对象界面，点击监测点配置按钮，跳转到监测点管理界面，根据当前对应的监控对象查询监测点位

snowy-admin-web/src/api/basicset/locationApi.js

@@ -2,23 +2,22 @@ import { baseRequest } from '@/utils/request'
 
 const request = (url, ...arg) => baseRequest(`/coldchain/monitortargetregion/` + url, ...arg)
 
-// 区域管理
+// 监测点管理
 export default {
 	// 获取列表数据分页
 	locationPage(data) {
 		return request('page', data, 'get')
 	},
+	// 根据监控对象id获取监控点位列表
+	listByTargetIdData(data) {
+		return request('listByTargetId', data, 'get')
+	},
+
 	// 提交表单 edit为true时为编辑，默认为新增
 	submitForm(data, edit = false) {
 		return request(edit ? 'edit' : 'add', data)
 	},
 
-	// 获取树结构
-	locationTree(data) {
-		return request('tree', data, 'get')
-	},
-
-
 	// 删除
 	locationDelete(data) {
 		return request('delete', data)

snowy-admin-web/src/views/basicset/monitor/configForm.vue

@@ -1,21 +1,162 @@
 <template>
-	<xn-form-container title="区域配置" :width="'500px'" :visible="visible" :destroy-on-close="true" @close="onClose">
+	<xn-form-container title="监测点配置" :width="'800px'" :visible="visible" :destroy-on-close="true" @close="onClose">
 		<a-form
 			ref="formRef"
 			:model="formData"
 			:rules="formRules"
 			layout="inline"
-			:label-col="{ style: { width: '85px', justifyContent: 'end' } }"
+			:label-col="{ style: { width: '110px', justifyContent: 'end' } }"
 		>
-			<!-- <a-form-item label="目标端口" name="code">
-				<a-input v-model:value="formData.code" placeholder="请输入目标端口" allow-clear />
-			</a-form-item>
-			<a-form-item label="设备型号" name="modelName">
-				<a-select ref="select" v-model:value="formData.modelName" :options="modeOptions"> </a-select>
-			</a-form-item>
-			<a-form-item label="目标端口" name="code">
-				<a-input-number id="inputNumber" v-model:value="formData.code" style="width: 100%" />
-			</a-form-item> -->
+			<a-row :gutter="10">
+				<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+					<a-form-item label="监控对象" name="monitorTargetId">
+						<a-select
+							ref="select"
+							v-model:value="formData.monitorTargetId"
+							:options="monitorTargetOptions"
+							placeholder="请选择监控对象"
+						/>
+					</a-form-item>
+				</a-col>
+				<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+					<a-form-item label="点位名称" name="name">
+						<a-input v-model:value="formData.name" placeholder="请输入点位名称" allow-clear />
+					</a-form-item>
+				</a-col>
+				<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+					<a-form-item label="传感器类型" name="sensorType">
+						<a-select
+							ref="select"
+							v-model:value="formData.sensorType"
+							:options="sensorOptions"
+							placeholder="请选择传感器类型"
+							@change="sensorTypeChange"
+						/>
+					</a-form-item>
+				</a-col>
+
+				<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+					<a-form-item label="监控设备" name="monitorDeviceId">
+						<a-select
+							ref="select"
+							v-model:value="formData.monitorDeviceId"
+							:options="memListOptions"
+							placeholder="请选择监控设备"
+							@change="monitorDeviceIdChange"
+						/>
+					</a-form-item>
+				</a-col>
+
+				<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+					<a-form-item label="传感器编号" name="sensorCode">
+						<a-input v-model:value="formData.sensorCode" disabled placeholder="请输入传感器编号" allow-clear />
+					</a-form-item>
+				</a-col>
+
+				<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+					<a-form-item label="传感器路数" name="sensorRoute">
+						<a-input-number
+							v-model:value="formData.sensorRoute"
+							style="width: 100%"
+							:min="1"
+							:max="sensorRouteMax"
+							placeholder="请输入传感器路数"
+						/>
+					</a-form-item>
+				</a-col>
+
+				<div
+					class="form_item"
+					v-if="formData.sensorType == 'W' || formData.sensorType == 'WS' || formData.sensorType == 'WSC'"
+				>
+					<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+						<a-form-item label="温度上限" name="temperatureUp">
+							<a-input-number
+								id="inputNumber"
+								v-model:value="formData.temperatureUp"
+								placeholder="请输入温度上限"
+								allow-clear
+								:min="temperatureMax.downMax"
+								:max="temperatureMax.upMax"
+								style="width: 100%"
+								:disabled="temperatureMax.upMax == null || temperatureMax.upMax == undefined"
+							/>
+						</a-form-item>
+					</a-col>
+					<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+						<a-form-item label="温度下限" name="temperatureDown">
+							<a-input-number
+								id="inputNumber"
+								v-model:value="formData.temperatureDown"
+								placeholder="请输入温度下限"
+								allow-clear
+								:min="temperatureMax.downMax"
+								:max="temperatureMax.upMax"
+								style="width: 100%"
+								:disabled="!temperatureMax.downMax == null || temperatureMax.downMax == undefined"
+							/>
+						</a-form-item>
+					</a-col>
+				</div>
+
+				<div class="form_item" v-if="formData.sensorType == 'WS' || formData.sensorType == 'WSC'">
+					<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+						<a-form-item label="湿度上限" name="humidityUp">
+							<a-input-number
+								id="inputNumber"
+								v-model:value="formData.humidityUp"
+								placeholder="请输入湿度上限"
+								allow-clear
+								:min="humidityMax.downMax"
+								:max="humidityMax.upMax"
+								style="width: 100%"
+								:disabled="!humidityMax.upMax"
+							/>
+						</a-form-item>
+					</a-col>
+					<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+						<a-form-item label="湿度下限" name="humidityDown">
+							<a-input-number
+								id="inputNumber"
+								v-model:value="formData.humidityDown"
+								placeholder="请输入湿度下限"
+								allow-clear
+								:min="humidityMax.downMax"
+								:max="humidityMax.upMax"
+								style="width: 100%"
+								:disabled="!humidityMax.downMax"
+							/>
+						</a-form-item>
+					</a-col>
+				</div>
+
+				<div class="form_item" v-if="formData.sensorType == 'WSC'">
+					<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+						<a-form-item label="CO2上限" name="co2Up">
+							<a-input-number
+								id="inputNumber"
+								v-model:value="formData.co2Up"
+								placeholder="请输入CO2上限"
+								allow-clear
+								:max="co2Max.upMax"
+								style="width: 100%"
+							/>
+						</a-form-item>
+					</a-col>
+					<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+						<a-form-item label="CO2下限" name="co2Down">
+							<a-input-number
+								id="inputNumber"
+								v-model:value="formData.co2Down"
+								placeholder="请输入CO2下限"
+								allow-clear
+								:max="co2Max.downMax"
+								style="width: 100%"
+							/>
+						</a-form-item>
+					</a-col>
+				</div>
+			</a-row>
 		</a-form>
 
 		<template #footer>
@@ -28,26 +169,171 @@
 <script setup>
 	import tool from '@/utils/tool'
 	import { required } from '@/utils/formRules'
+	import locationApi from '@/api/basicset/locationApi.js'
+	import setupApi from '@/api/basicset/setupApi'
 	import memApi from '@/api/basicset/memApi'
 	const emit = defineEmits({ successful: null })
 	const visible = ref(false) // 默认是关闭状态
 	const formRef = ref()
-	const formData = ref({}) // 表单数据
-	const modeOptions = tool.dictList('COIDCHAIN') // 设备型号
+	const formData = ref() // 表单数据
+	const sensorOptions = tool.dictList('SENSORTYPE') // 传感器类型
+	const monitorTargetOptions = ref([]) // 监控对象
+	const memListOptions = ref([]) // 监控设备数据
+
+	const temperatureMax = ref({ upMax: Infinity, downMax: Infinity }) // 温度最大值
+	const humidityMax = ref({ upMax: Infinity, downMax: Infinity }) // 湿度最大值
+	const co2Max = ref({ upMax: Infinity, downMax: Infinity }) // CO2最大值
+
+	const sensorRouteMax = ref(1) //传感器最大值默认1
+
 	// 默认要校验的
 	const formRules = {
-		code: [required('请输入设备名称')]
+		name: [required('请输入区域名称')],
+		monitorTargetId: [required('请选择监控对象')],
+		monitorDeviceId: [required('请选择监控设备')],
+		sensorType: [required('请选择传感器类型')],
+		sensorRoute: [required('请输入传感器路数')],
+		temperatureUp: [{ validator: validateTemperature, trigger: ['change', 'blur'] }],
+		temperatureDown: [{ validator: validateTemperature, trigger: ['change', 'blur'] }],
+		humidityUp: [{ validator: validateHumidity, trigger: ['change', 'blur'] }],
+		humidityDown: [{ validator: validateHumidity, trigger: ['change', 'blur'] }],
+		co2Up: [{ validator: validateCo2, trigger: ['change', 'blur'] }],
+		co2Down: [{ validator: validateCo2, trigger: ['change', 'blur'] }]
+	}
+
+	// 温度上下限校验
+	function validateTemperature(rule, value, callback) {
+		if (rule.field == 'temperatureDown') {
+			if (formData.value.temperatureUp !== null && value >= formData.value.temperatureUp) {
+				callback(new Error('温度下限不能大于或等于温度上限'))
+			} else {
+				callback()
+			}
+		} else if (rule.field == 'temperatureUp') {
+			if (formData.value.temperatureDown !== null && value <= formData.value.temperatureDown) {
+				callback(new Error('温度上限不能小于或等于温度下限'))
+			} else {
+				callback()
+			}
+		}
+	}
+
+	// 湿度上下限校验
+	function validateHumidity(rule, value, callback) {
+		if (rule.field == 'humidityDown') {
+			if (formData.value.humidityUp !== null && value >= formData.value.humidityUp) {
+				callback(new Error('湿度下限不能大于或等于湿度上限'))
+			} else {
+				callback()
+			}
+		} else if (rule.field == 'humidityUp') {
+			if (formData.value.humidityDown !== null && value <= formData.value.humidityDown) {
+				callback(new Error('湿度上限不能小于或等于湿度下限'))
+			} else {
+				callback()
+			}
+		}
+	}
+
+	// CO2上下限校验
+	function validateCo2(rule, value, callback) {
+		if (rule.field == 'co2Down') {
+			if (formData.value.co2Up !== null && value >= formData.value.co2Up) {
+				callback(new Error('CO2下限不能大于或等于CO2上限'))
+			} else {
+				callback()
+			}
+		} else if (rule.field == 'co2Up') {
+			if (formData.value.co2Down !== null && value <= formData.value.co2Down) {
+				callback(new Error('CO2上限不能小于或等于CO2下限'))
+			} else {
+				callback()
+			}
+		}
 	}
 
 	// 打开抽屉
 	const onOpen = (record) => {
+		setupListData()
 		visible.value = true
 		if (record) {
 			formData.value = Object.assign({}, record)
+			sensorType.value = formData.value.sensorType
+			memListData(sensorType.value)
 		} else {
 			formData.value = {}
+			memListData()
 		}
 	}
+	// 获取监控对象
+	const setupListData = () => {
+		setupApi.setupList({ isAll: false }).then((res) => {
+			monitorTargetOptions.value = (res || []).map((item) => {
+				return {
+					...item,
+					value: item['id'],
+					label: item['name']
+				}
+			})
+		})
+	}
+	const sensorType = ref() //选中的传感器类型
+	// 监控设备通过传感器类型来获取， sensorType可为空
+	const memListData = (value) => {
+		memApi.memList({ isAll: false, sensorType: value }).then((res) => {
+			memListOptions.value = (res || []).map((item) => {
+				return {
+					...item,
+					value: item['id'],
+					label: item['deviceName'],
+					modelName: item['modelName'],
+					deviceCode: item['deviceCode'],
+					sensorCount: item['sensorCount']
+				}
+			})
+		})
+	}
+
+	// 选中传感器类型
+	const sensorTypeChange = (value) => {
+		if (value) {
+			sensorType.value = value
+			memListData(value)
+		}
+	}
+
+	// 选中监控设备
+	const monitorDeviceIdChange = (value) => {
+		if (value) {
+			const data = memListOptions.value.find((item) => item.value === value)
+			modeData.value = data
+
+			formData.value.sensorCode = data.deviceCode //传感器编号
+			formData.value.modelName = data.modelName //监控设备型号
+			formData.value.deviceCode = data.deviceCode //冷链编号
+			formData.value.temperatureUp = data.temperatureUp //温度上限
+			formData.value.temperatureDown = data.temperatureDown //温度下限
+			formData.value.humidityUp = data.humidityUp //湿度上限
+			formData.value.humidityDown = data.humidityDown //湿度下限
+			formData.value.co2Up = data.co2Up //CO2上限
+			formData.value.co2Down = data.co2Down //CO2下限
+			sensorRouteMax.value = data.sensorCount //传感器路数的最大值
+
+			temperatureMax.value = {
+				upMax: data.temperatureUp,
+				downMax: data.temperatureDown
+			}
+			humidityMax.value = {
+				upMax: data.humidityUp,
+				downMax: data.humidityDown
+			}
+			co2Max.value = {
+				upMax: data.co2Up,
+				downMax: data.co2Down
+			}
+		}
+	}
+
 	// 关闭抽屉
 	const onClose = () => {
 		formRef.value.resetFields()
@@ -59,7 +345,7 @@
 		formRef.value
 			.validate()
 			.then(() => {
-				memApi.submitForm(formData.value, formData.value.id).then(() => {
+				locationApi.submitForm(formData.value, formData.value.id).then(() => {
 					onClose()
 					emit('successful')
 				})
@@ -80,4 +366,12 @@
 		width: 100%;
 		margin-bottom: 10px;
 	}
+
+	.form_item {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-wrap: wrap;
+	}
 </style>

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

@@ -66,7 +66,7 @@
 					<a-popconfirm title="确定要删除吗？" @confirm="deleteData(record)">
 						<a-button type="link" danger size="small">删除</a-button>
 					</a-popconfirm>
-					<a-button type="link" size="small" @click="configformRef.onOpen(record)">监测点配置</a-button>
+					<a-button type="link" size="small" @click="leaveFor('/motoring/location', record)">监测点配置</a-button>
 				</template>
 			</template>
 			<!-- <template #expandedRowRender="{ record }">
@@ -138,17 +138,14 @@
 			</template> -->
 		</s-table>
 		<Form ref="formRef" @successful="tableRef.refresh(true)" />
-		<configForm ref="configformRef" @successful="tableRef.refresh(true)" />
 	</div>
 </template>
 
 <script setup>
-	import tool from '@/utils/tool'
+	import router from '@/router'
 	import setupApi from '@/api/basicset/setupApi'
 	import Form from './form.vue'
-	import configForm from './configForm.vue'
 	const formRef = ref()
-	const configformRef = ref()
 
 	const searchFormRef = ref()
 	const searchFormState = ref({})
@@ -192,6 +189,16 @@
 			return res
 		})
 	}
+
+	// 跳转到监测点界面
+	const leaveFor = (url, record) => {
+		router.push({
+			path: url,
+			query: {
+				id: record.id
+			}
+		})
+	}
 	// 重置
 	const reset = () => {
 		searchFormRef.value.resetFields()

snowy-admin-web/src/views/motoring/location/index.vue

@@ -1,5 +1,6 @@
 <template>
 	<div class="table_item">
+		<a-page-header title="返回" sub-title="监测点配置" @back="goBack" style="padding: 20px 0" />
 		<s-table
 			ref="tableRef"
 			:columns="columns"
@@ -36,7 +37,7 @@
 				<!-- 其他操作区域 -->
 				<div class="table-head-btn">
 					<div class="btn-left">
-						<a-button type="primary" @click="formRef.onOpen()">
+						<a-button type="primary" @click="formRef.onOpen({ monitorTargetId: queryId })">
 							<template #icon><plus-outlined /></template>新增
 						</a-button>
 					</div>
@@ -57,11 +58,14 @@
 
 <script setup>
 	import locationApi from '@/api/basicset/locationApi.js'
+	import { useRoute } from 'vue-router'
+	import router from '@/router'
 	import Form from './form.vue'
 	const formRef = ref()
 	const searchFormRef = ref()
 	const searchFormState = ref({})
 	const tableRef = ref()
+	const Route = useRoute()
 
 	const columns = [
 		{
@@ -119,10 +123,26 @@
 	const handleResizeColumn = (w, col) => {
 		col.width = w
 	}
+
+	const queryId = ref() //监控对象的id
+	onBeforeMount(() => {
+		if (Route.query.id) {
+			queryId.value = Route.query.id
+		}
+	})
+
+	// 返回上一页
+	const goBack = () => {
+		router.go(-1)
+	}
+
 	const loadData = (parameter) => {
-		return locationApi.locationPage(Object.assign(parameter, searchFormState.value)).then((res) => {
-			return res
-		})
+		if (queryId.value) {
+			parameter.monitorTargetId = queryId.value
+			return locationApi.locationPage(Object.assign(parameter, searchFormState.value)).then((res) => {
+				return res
+			})
+		}
 	}
 	// 重置
 	const reset = () => {
@@ -147,6 +167,7 @@
 	.table_item {
 		padding: 15px 20px;
 		background-color: #ffffff;
+
 		:deep(.ant-table-pagination-right) {
 			justify-content: center !important;
 		}