采集管理中的配置表单

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

@@ -0,0 +1,23 @@
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/coldchain/monitortarget/` + url, ...arg)
+
+// 监控对象
+export default {
+	// 获取列表数据分页
+	setupPage(data) {
+		return request('page', data, 'get')
+	},
+	// 提交表单 edit为true时为编辑，默认为新增
+	submitForm(data, edit = false) {
+		return request(edit ? 'edit' : 'add', data)
+	},
+	// 删除
+	setupDelete(data) {
+		return request('delete', data)
+	},
+	// 详情
+	setupDetail(data) {
+		return request('detail', data, 'get')
+	}
+}

snowy-admin-web/src/utils/tool.js

@@ -155,6 +155,19 @@ const findNodeByValue = (node, value) => {
 	return null
 }
 
+// 解析数据，用于列表回显，通过字典value值获取name名称
+tool.transform = function (source, value) {
+	if (Array.isArray(source)) {
+		const item = source.find((e) => e.value == value)
+		if (item) {
+			return item.label
+		} else {
+			return value
+		}
+	}
+	return value
+}
+
 // 生成UUID
 tool.snowyUuid = () => {
 	let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
@@ -168,39 +181,41 @@ tool.snowyUuid = () => {
 
 tool.parseTime = (time, cFormat) => {
 	if (time == null || time.length === 0) {
-	  return ''
+		return ''
 	}
 
 	const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
 	let date
 	if (typeof time === 'object') {
-	  date = time
+		date = time
 	} else {
-	  if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
-		time = parseInt(time)
-	  }
-	  if ((typeof time === 'number') && (time.toString().length === 10)) {
-		time = time * 1000
-	  }
-	  date = new Date(time)
+		if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
+			time = parseInt(time)
+		}
+		if (typeof time === 'number' && time.toString().length === 10) {
+			time = time * 1000
+		}
+		date = new Date(time)
 	}
 	const formatObj = {
-	  y: date.getFullYear(),
-	  m: date.getMonth() + 1,
-	  d: date.getDate(),
-	  h: date.getHours(),
-	  i: date.getMinutes(),
-	  s: date.getSeconds(),
-	  a: date.getDay()
+		y: date.getFullYear(),
+		m: date.getMonth() + 1,
+		d: date.getDate(),
+		h: date.getHours(),
+		i: date.getMinutes(),
+		s: date.getSeconds(),
+		a: date.getDay()
 	}
 	const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
-	  let value = formatObj[key]
-	  // Note: getDay() returns 0 on Sunday
-	  if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
-	  if (result.length > 0 && value < 10) {
-		value = '0' + value
-	  }
-	  return value || 0
+		let value = formatObj[key]
+		// Note: getDay() returns 0 on Sunday
+		if (key === 'a') {
+			return ['日', '一', '二', '三', '四', '五', '六'][value]
+		}
+		if (result.length > 0 && value < 10) {
+			value = '0' + value
+		}
+		return value || 0
 	})
 	return time_str
 }

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

@@ -0,0 +1,304 @@
+<template>
+	<xn-form-container title="配置" :width="'60%'" :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' } }"
+		>
+			<div class="form_left">
+				<div class="form_title">网络目标参数</div>
+				<div class="form_row">
+					<a-form-item label="目标端口" name="code">
+						<a-input v-model:value="formData.code" placeholder="请输入目标端口" allow-clear />
+					</a-form-item>
+					<a-form-item label="目标IP(域名)" name="code">
+						<a-input v-model:value="formData.code" placeholder="请输入目标IP" allow-clear />
+					</a-form-item>
+				</div>
+				<div class="form_title">WIFI目标路由器SSID参数</div>
+				<div class="form_row container">
+					<a-form-item label="目标路由器SSID" name="code" :label-col="{ style: { width: '135px' } }">
+						<a-input v-model:value="formData.code" placeholder="请输入目标路由器SSID" allow-clear />
+					</a-form-item>
+					<a-form-item label="目标路由器登录密码" name="code" :label-col="{ style: { width: '135px' } }">
+						<a-input v-model:value="formData.code" placeholder="请输入目标路由器登录密码" allow-clear />
+					</a-form-item>
+				</div>
+				<div class="form_title">WIFI-WAN口参数</div>
+				<div class="form_row">
+					<a-form-item label="IP获取方式" name="code">
+						<a-input v-model:value="formData.code" placeholder="请输入IP获取方式" allow-clear />
+					</a-form-item>
+					<a-form-item label="本地IP" name="code">
+						<a-input v-model:value="formData.code" placeholder="请输入本地IP" allow-clear />
+					</a-form-item>
+					<a-form-item label="子网掩码" name="code">
+						<a-input v-model:value="formData.code" placeholder="请输入子网掩码" allow-clear />
+					</a-form-item>
+					<a-form-item label="网关地址" name="code">
+						<a-input v-model:value="formData.code" placeholder="请输入网关地址" allow-clear />
+					</a-form-item>
+				</div>
+				<div class="form_title">MAC地址</div>
+
+				<div class="form_row">
+					<a-form-item label="MAC地址" name="code">
+						<a-input v-model:value="formData.code" placeholder="请输入MAC地址" allow-clear />
+					</a-form-item>
+				</div>
+			</div>
+			<div class="form_right">
+				<div class="form_title">设备参数</div>
+				<a-form-item label="终端地址" name="code" :label-col="{ style: { width: '130px' } }">
+					<a-input v-model:value="formData.code" allow-clear />
+					<span class="suffix">00000001~99999999</span>
+				</a-form-item>
+				<a-form-item label="登录帧间隔时间" name="code" :label-col="{ style: { width: '130px' } }">
+					<a-input v-model:value="formData.code" allow-clear />
+					<span class="suffix">S（1-600000S）</span>
+				</a-form-item>
+				<a-form-item label="心跳帧间隔时间" name="code" :label-col="{ style: { width: '130px' } }">
+					<a-input v-model:value="formData.code" allow-clear />
+					<span class="suffix">S（1-600000S）</span>
+				</a-form-item>
+				<a-form-item label="主动上送帧间隔时间" name="code" :label-col="{ style: { width: '130px' } }">
+					<a-input v-model:value="formData.code" allow-clear />
+					<span class="suffix">S（1-600000S）</span>
+				</a-form-item>
+
+				<!-- 温度 -->
+				<div class="temp">
+					<div>温度:</div>
+					<div class="temp_data">
+						<div class="data_item">
+							<div>上限</div>
+							<a-form-item>
+								<a-input-number id="inputNumber" v-model:value="formData.code" />
+							</a-form-item>
+						</div>
+						<div class="data_item">
+							<div>下限</div>
+							<a-form-item>
+								<a-input-number id="inputNumber" v-model:value="formData.code" />
+							</a-form-item>
+						</div>
+						<div class="data_item">
+							<div>回差</div>
+							<a-form-item>
+								<a-input-number id="inputNumber" v-model:value="formData.code" />
+							</a-form-item>
+						</div>
+						<div class="data_item">
+							<div>偏差</div>
+							<a-form-item>
+								<a-input-number id="inputNumber" v-model:value="formData.code" />
+							</a-form-item>
+						</div>
+					</div>
+				</div>
+				<!-- 湿度 -->
+				<div class="temp">
+					<div>湿度:</div>
+					<div class="temp_data">
+						<div class="data_item">
+							<div>上限</div>
+							<a-form-item>
+								<a-input-number id="inputNumber" v-model:value="formData.code" />
+							</a-form-item>
+						</div>
+						<div class="data_item">
+							<div>下限</div>
+							<a-form-item>
+								<a-input-number id="inputNumber" v-model:value="formData.code" />
+							</a-form-item>
+						</div>
+						<div class="data_item">
+							<div>回差</div>
+							<a-form-item>
+								<a-input-number id="inputNumber" v-model:value="formData.code" />
+							</a-form-item>
+						</div>
+						<div class="data_item">
+							<div>偏差</div>
+							<a-form-item>
+								<a-input-number id="inputNumber" v-model:value="formData.code" />
+							</a-form-item>
+						</div>
+					</div>
+				</div>
+				<div class="temp">
+					<a-form-item label="温度上限报警使能" name="code" :label-col="{ style: { width: '130px' } }">
+						<a-checkbox v-model:checked="formData.checked" />
+					</a-form-item>
+					<a-form-item label="温度下限报警使能" name="code" :label-col="{ style: { width: '130px' } }">
+						<a-checkbox v-model:checked="formData.checked" />
+					</a-form-item>
+				</div>
+				<div class="temp">
+					<a-form-item label="湿度上限报警使能" name="code" :label-col="{ style: { width: '130px' } }">
+						<a-checkbox v-model:checked="formData.checked" />
+					</a-form-item>
+					<a-form-item label="湿度下限报警使能" name="code" :label-col="{ style: { width: '130px' } }">
+						<a-checkbox v-model:checked="formData.checked" />
+					</a-form-item>
+				</div>
+				<a-form-item label="设备数据记录间隔(分)" name="code" :label-col="{ style: { width: '150px' } }">
+					<a-input v-model:value="formData.code" allow-clear />
+				</a-form-item>
+				<a-form-item label="数据记录模式" name="code" :label-col="{ style: { width: '150px' } }">
+					<a-input v-model:value="formData.code" allow-clear />
+				</a-form-item>
+				<a-form-item label="设备中储存的数据主动上传" name="code" :label-col="{ style: { width: '180px' } }">
+					<a-checkbox v-model:checked="formData.checked" />
+				</a-form-item>
+			</div>
+		</a-form>
+
+		<template #footer>
+			<a-button class="xn-mr8" @click="onClose">退出</a-button>
+			<a-button type="primary" @click="onSubmit">保存</a-button>
+		</template>
+	</xn-form-container>
+</template>
+
+<script setup>
+	import tool from '@/utils/tool'
+	import { message } from 'ant-design-vue'
+	import { required } from '@/utils/formRules'
+	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 formRules = {
+		deviceName: [required('请输入设备名称')],
+		deviceCode: [required('请输入设备编号')],
+		modelName: [required('请选择设备型号')],
+		sensorCount: [required('请输入传感器路数')]
+	}
+
+	// 打开抽屉
+	const onOpen = (record) => {
+		visible.value = true
+		if (record) {
+			formData.value = Object.assign({}, record)
+		} else {
+			formData.value = {}
+		}
+	}
+	// 关闭抽屉
+	const onClose = () => {
+		formRef.value.resetFields()
+		visible.value = false
+	}
+
+	// 验证并提交数据
+	const onSubmit = () => {
+		formRef.value
+			.validate()
+			.then(() => {
+				memApi.submitForm(formData.value, formData.value.id).then(() => {
+					onClose()
+					emit('successful')
+				})
+			})
+			.catch((error) => {
+				console.log(error)
+			})
+	}
+
+	// 调用这个函数将子组件的一些数据和方法暴露出去
+	defineExpose({
+		onOpen
+	})
+</script>
+
+<style lang="less" scoped>
+	.ant-form {
+		width: 100%;
+
+		.form_title {
+			height: 25px;
+			font-weight: bold;
+			line-height: 25px;
+			padding-left: 15px;
+			margin-bottom: 10px;
+			position: relative;
+		}
+		.form_title::before {
+			content: '';
+			position: absolute;
+			top: 5px;
+			left: 0px;
+			height: 15px;
+			border-left: 4px solid #1878ff;
+			border-radius: 8px;
+		}
+
+		// 左边表单
+		.form_left {
+			width: 60%;
+			padding: 0 10px;
+			.form_row {
+				display: flex;
+				align-items: center;
+				flex-wrap: wrap;
+				margin-bottom: 15px;
+				:deep(.ant-form-item) {
+					width: 47%;
+					margin-bottom: 10px;
+				}
+			}
+			.container {
+				:deep(.ant-form-item) {
+					width: 60%;
+					margin-bottom: 10px;
+				}
+			}
+		}
+		// 右边表单
+		.form_right {
+			width: 40%;
+			padding: 0 10px;
+			background-color: #deeeff;
+			.ant-form-item {
+				margin-bottom: 10px;
+				.ant-input-affix-wrapper {
+					width: 150px;
+				}
+				.suffix {
+					font-size: 12px;
+					padding-left: 5px;
+				}
+			}
+
+			.temp {
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: space-around;
+
+				.temp_data {
+					width: 90%;
+					margin-left: 10px;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					.data_item {
+						display: flex;
+						flex-wrap: wrap;
+						align-items: center;
+						justify-content: center;
+						:deep(.ant-form-item) {
+							margin-inline-end: 0 !important;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

snowy-admin-web/src/views/basicset/mem/index.vue

@@ -47,6 +47,10 @@
 				</div>
 			</template>
 			<template #bodyCell="{ column, record }">
+				<!--  -->
+				<template v-if="column.dataIndex === 'modelName'">
+					{{ $TOOL.dictTypeData('COIDCHAIN', record.modelName) }}
+				</template>
 				<template v-if="column.dataIndex === 'status'">
 					<span>
 						<a-tag :color="record.status == '1' ? '#87d068' : '#cd201f'">
@@ -55,22 +59,24 @@
 					</span>
 				</template>
 				<template v-if="column.dataIndex === 'action'">
-					<!-- <a-button type="link" size="small" @click="formRef.onOpen(record)">编辑</a-button> -->
+					<a-button type="link" size="small" @click="configformRef.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">记录</a-button>
 				</template>
 			</template>
-			<!-- <template #expandedRowRender="{ record }">
+			<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">{{ '90160206' }}</a-descriptions-item>
-								<a-descriptions-item label="采集器编码" :span="2">{{ '90160206' }}</a-descriptions-item>
-								<a-descriptions-item label="采集器设备状态" :span="2">{{ '正常' }}</a-descriptions-item>
-								<a-descriptions-item label="创建时间" :span="2">{{ '2024-10-09 09:36:21' }}</a-descriptions-item>
+								<a-descriptions-item label="设备名称" :span="2">{{ record.deviceName }}</a-descriptions-item>
+								<a-descriptions-item label="设备编号" :span="2">{{ record.deviceCode }}</a-descriptions-item>
+								<a-descriptions-item label="设备状态" :span="2">
+									{{ $TOOL.dictTypeData('COIDCHAIN', record.modelName) }}</a-descriptions-item
+								>
+								<a-descriptions-item label="创建时间" :span="2">{{}}</a-descriptions-item>
 							</a-descriptions>
 						</div>
 					</a-tab-pane>
@@ -83,18 +89,20 @@
 						</div>
 					</a-tab-pane>
 				</a-tabs>
-			</template> -->
+			</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 memApi from '@/api/basicset/memApi'
 	import Form from './form.vue'
+	import configForm from './configForm.vue'
 	const formRef = ref()
+	const configformRef = ref()
 	const searchFormRef = ref()
 	const searchFormState = ref({})
 	const tableRef = ref()