Merge branch 'master' of http://git.nzklabs.com:3000/huangyuanhao/jfcloud-coldchain

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

@@ -0,0 +1,23 @@
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/coldchain/monitordevice/` + url, ...arg)
+
+// 采集器管理
+export default {
+	// 获取列表数据分页
+	memPage(data) {
+		return request('page', data, 'get')
+	},
+	// 提交表单 edit为true时为编辑，默认为新增
+	submitForm(data, edit = false) {
+		return request(edit ? 'edit' : 'add', data)
+	},
+	// 删除
+	memDelete(data) {
+		return request('delete', data)
+	},
+	// 详情
+	memDetail(data) {
+		return request('detail', data, 'get')
+	}
+}

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/form.vue

@@ -1,7 +1,7 @@
 <template>
 	<xn-form-container
 		:title="formData.id ? '编辑采集器' : '新增采集器'"
-		:width="'60%'"
+		:width="'500px'"
 		:visible="visible"
 		:destroy-on-close="true"
 		@close="onClose"
@@ -13,231 +13,35 @@
 			layout="inline"
 			:label-col="{ style: { width: '100px', justifyContent: 'end' } }"
 		>
-			<a-tabs v-model:activeKey="activeKey" type="editable-card" @edit="onEdit">
-				<a-tab-pane tab="对象信息" key="object" :closable="false">
-					<a-row :gutter="10">
-						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
-							<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="8" :xl="8">
-							<a-form-item label="采集器编号" name="code">
-								<a-input v-model:value="formData.code" placeholder="请输入采集器编号" allow-clear />
-							</a-form-item>
-						</a-col>
-						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
-							<a-form-item label="采集器条码" name="barcode">
-								<a-input v-model:value="formData.barcode" placeholder="请输入采集器条码" allow-clear />
-							</a-form-item>
-						</a-col>
-						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
-							<a-form-item label="品牌" name="brand">
-								<a-input v-model:value="formData.brand" placeholder="请输入品牌" allow-clear />
-							</a-form-item>
-						</a-col>
-
-						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
-							<a-form-item label="状态" name="state">
-								<a-select ref="select" v-model:value="formData.state">
-									<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-option value="4">报废</a-select-option>
-								</a-select>
-							</a-form-item>
-						</a-col>
-						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
-							<a-form-item label="所属部门">
-								<a-input v-model:value="formData.division" placeholder="请输入所属部门" allow-clear />
-							</a-form-item>
-						</a-col>
-						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="12">
-							<a-form-item label="采集时间">
-								<a-time-range-picker v-model:value="formData.collectionTime" style="width: 100%" />
-							</a-form-item>
-						</a-col>
-						<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-							<a-form-item label="位置">
-								<a-input v-model:value="formData.location" placeholder="请输入位置" allow-clear />
-							</a-form-item>
-						</a-col>
-						<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-							<a-form-item label="备注">
-								<a-textarea
-									v-model:value="formData.remarks"
-									placeholder="请输入备注"
-									allow-clear
-									:maxlength="200"
-									:rows="4"
-								/>
-							</a-form-item>
-						</a-col>
-					</a-row>
-				</a-tab-pane>
-				<a-tab-pane tab="报警信息" key="report" :closable="false">
-					<a-form-item :label-col="{ style: { width: '200px' } }">
-						<template #label>
-							<a-tooltip>
-								<template #title>
-									重复通知间隔:同一设备同一故障类型出现报警进行过一次报警通知后，进行下一次报普通知的间隔时间，如果在这个时间间隔内该设备同一故障类型
-									还在产生报警则不再进行通知。
-									最多报警次数:同一设备同一故障类型连续报警最多报警通知次数，在达到最多报警次数后如果报警还未及时处理，系统也不再进行报警通知。
-									延时时间:为屏蔽误报，系统报警在达到延时时间之后才进行报警通知。
-								</template>
-								<question-circle-outlined />
-							</a-tooltip>
-							重复发送通知：
-						</template>
-
-						<a-radio-group v-model:value="formData.repeat">
-							<a-radio value="1">1次</a-radio>
-							<a-radio value="2">多次</a-radio>
-						</a-radio-group>
-					</a-form-item>
-					<a-form-item label="延时报警" :label-col="{ style: { width: '200px' } }">
-						<a-radio-group v-model:value="formData.delayed">
-							<a-radio value="1">是</a-radio>
-							<a-radio value="0">否</a-radio>
-						</a-radio-group>
-					</a-form-item>
-					<a-form-item label="报警关闭发送通知" :label-col="{ style: { width: '200px' } }">
-						<a-radio-group v-model:value="formData.close">
-							<a-radio value="1">是</a-radio>
-							<a-radio value="0">否</a-radio>
-						</a-radio-group>
-					</a-form-item>
-					<a-form-item label="多级报警" :label-col="{ style: { width: '200px' } }">
-						<a-radio-group v-model:value="formData.multistage">
-							<a-radio value="1">是</a-radio>
-							<a-radio value="0">否</a-radio>
-						</a-radio-group>
-					</a-form-item>
-
-					<a-form-item label="报警通知方式" :label-col="{ style: { width: '200px' } }">
-						<a-checkbox-group v-model:value="formData.noticeway" style="width: 100%">
-							<a-checkbox value="1">短信</a-checkbox>
-							<a-checkbox value="2">电话</a-checkbox>
-							<a-checkbox value="3">微信</a-checkbox>
-							<a-checkbox value="4">电子邮件</a-checkbox>
-							<a-checkbox value="5">弹出</a-checkbox>
-							<a-checkbox value="6">音乐</a-checkbox>
-						</a-checkbox-group>
-					</a-form-item>
-
-					<!-- 表格区域 -->
-					<div>
-						<a-button type="primary" style="margin-left: 90%; margin-bottom: 5px" @click="tableAdd">
-							<template #icon><plus-outlined /></template>新增
-						</a-button>
-						<a-table
-							ref="tableRef"
-							bordered
-							:columns="columns"
-							:data-source="formData.loadData"
-							:row-key="(record) => record.startTime"
-							:pagination="false"
-						>
-							<template #headerCell="{ column }">
-								<template v-if="column.dataIndex === 'startTime'">
-									<text style="color: #e74032"> * </text>开始时间
-								</template>
-								<template v-if="column.dataIndex === 'endTime'">
-									<text style="color: #e74032"> * </text>结束时间
-								</template>
-								<template v-if="column.dataIndex === 'name'"> <text style="color: #e74032"> * </text>姓名 </template>
-								<template v-if="column.dataIndex === 'remindType'">
-									<text style="color: #e74032"> * </text>提醒方式
-								</template>
-								<template v-if="column.dataIndex === 'level'"> <text style="color: #e74032"> * </text>级别 </template>
-								<template v-if="column.dataIndex === 'phone'">
-									<text style="color: #e74032"> * </text>电话号码
-								</template>
-							</template>
-							<template #bodyCell="{ column, record, index }">
-								<!-- 表格内容 -->
-								<template v-if="column.dataIndex === 'startTime'">
-									<a-time-picker v-model:value="record.startTime" value-format="HH:mm:ss" style="width: 100%" />
-								</template>
-
-								<template v-if="column.dataIndex === 'endTime'">
-									<a-time-picker v-model:value="record.endTime" value-format="HH:mm:ss" style="width: 100%" />
-								</template>
-
-								<template v-if="column.dataIndex === 'name'">
-									<a-input v-model:value="record.name" placeholder="请输入姓名" />
-								</template>
-
-								<template v-if="column.dataIndex === 'remindType'">
-									<a-select v-model:value="record.remindType" placeholder="请选择提醒方式" style="width: 100%">
-										<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-option value="4">邮件报警</a-select-option>
-										<a-select-option value="5">弹出报警</a-select-option>
-										<a-select-option value="6">音乐报警</a-select-option>
-									</a-select>
-								</template>
-
-								<template v-if="column.dataIndex === 'level'">
-									<a-select v-model:value="record.level" placeholder="请选择级别" style="width: 100px">
-										<a-select-option value="1">1</a-select-option>
-										<a-select-option value="2">2</a-select-option>
-										<a-select-option value="3">3</a-select-option>
-										<a-select-option value="4">4</a-select-option>
-										<a-select-option value="5">5</a-select-option>
-									</a-select>
-								</template>
-
-								<template v-if="column.dataIndex === 'phone'">
-									<a-input v-model:value="record.phone" placeholder="请输入电话号码" />
-								</template>
-
-								<template v-if="column.dataIndex === 'action'">
-									<a-popconfirm title="确定要删除吗？" @confirm="tableDelete(record, index)">
-										<a-button type="link" danger size="small">删除</a-button>
-									</a-popconfirm>
-								</template>
-							</template>
-						</a-table>
-					</div>
-				</a-tab-pane>
-
-				<a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
-					<!-- 新增路数-->
-					<div v-for="(item, index) in formData.list" :key="index">
-						<a-row :gutter="10" v-if="activeKey == item.key">
-							<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="12">
-								<a-form-item label="传感器路数">
-									<a-input v-model:value="item.number" placeholder="请输入传感器路数" allow-clear />
-								</a-form-item>
-							</a-col>
-
-							<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="12">
-								<a-form-item label="传感器类型">
-									<a-select ref="select" v-model:value="item.sensorType" placeholder="请选择传感器类型">
-										<a-select-option value="1">温度</a-select-option>
-										<a-select-option value="2">温湿度</a-select-option>
-									</a-select>
-								</a-form-item>
-							</a-col>
-
-							<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-								<a-form-item label="备注">
-									<a-textarea
-										v-model:value="item.numberRemarks"
-										placeholder="请输入备注"
-										allow-clear
-										:maxlength="200"
-										:rows="4"
-									/>
-								</a-form-item>
-							</a-col>
-						</a-row>
-					</div>
-				</a-tab-pane>
-			</a-tabs>
+			<a-form-item label="设备名称" name="deviceName">
+				<a-input v-model:value="formData.deviceName" placeholder="请输入设备名称" allow-clear />
+			</a-form-item>
+			<a-form-item label="设备编号" name="deviceCode">
+				<a-input v-model:value="formData.deviceCode" 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="status">
+				<a-select ref="select" v-model:value="formData.status">
+					<a-select-option value="1">正常</a-select-option>
+					<a-select-option value="2">闲置</a-select-option>
+				</a-select>
+			</a-form-item>
+			<a-form-item label="传感器路数" name="sensorCount">
+				<a-input-number
+					v-model:value="formData.sensorCount"
+					placeholder="请输入传感器路数"
+					allow-clear
+					:min="1"
+					:max="100000"
+					style="width: 100%"
+					:precision="0"
+				/>
+			</a-form-item>
+			<a-form-item label="排序：" name="sortCode">
+				<a-input-number class="xn-wd" v-model:value="formData.sortCode" :max="100" />
+			</a-form-item>
 		</a-form>
 
 		<template #footer>
@@ -248,83 +52,30 @@
 </template>
 
 <script setup>
+	import tool from '@/utils/tool'
 	import { message } from 'ant-design-vue'
 	import { required } from '@/utils/formRules'
-	import moduleApi from '@/api/sys/resource/moduleApi'
-	// 默认是关闭状态
-	const visible = ref(false)
+	import memApi from '@/api/basicset/memApi'
 	const emit = defineEmits({ successful: null })
+	const visible = ref(false) // 默认是关闭状态
 	const formRef = ref()
-
-	const tableRef = ref()
-
-	const columns = [
-		{
-			title: '开始时间',
-			dataIndex: 'startTime',
-			align: 'center'
-		},
-		{
-			title: '结束时间',
-			dataIndex: 'endTime',
-			align: 'center'
-		},
-		{
-			title: '姓名',
-			dataIndex: 'name',
-			align: 'center'
-		},
-		{
-			title: '提醒方式',
-			dataIndex: 'remindType',
-			align: 'center'
-		},
-		{
-			title: '级别',
-			dataIndex: 'level',
-			align: 'center'
-		},
-		{
-			title: '电话号码',
-			dataIndex: 'phone',
-			align: 'center'
-		},
-		{
-			title: '操作',
-			dataIndex: 'action',
-			align: 'center',
-			scopedSlots: { customRender: 'action' }
-		}
-	]
-	// 表单数据
-	const formData = ref({
-		repeat: '1',
-		delayed: '0',
-		close: '1',
-		multistage: '0',
-		noticeway: ['1'],
-		loadData: [],
-		list: []
-	})
+	const formData = ref({ sortCode: 99 }) // 表单数据
+	const modeOptions = tool.dictList('COIDCHAIN') // 设备型号
+	// 默认要校验的
+	const formRules = {
+		deviceName: [required('请输入设备名称')],
+		deviceCode: [required('请输入设备编号')],
+		modelName: [required('请选择设备型号')],
+		sensorCount: [required('请输入传感器路数')]
+	}
 
 	// 打开抽屉
 	const onOpen = (record) => {
 		visible.value = true
-		activeKey.value = 'object'
-		panes.value = []
-		newTabIndex.value = 1
 		if (record) {
 			formData.value = Object.assign({}, record)
 		} else {
-			formData.value = {
-				repeat: '1',
-				delayed: '0',
-				close: '1',
-				multistage: '0',
-				noticeway: ['1'],
-				loadData: [],
-				list: []
-			}
+			formData.value = { sortCode: 99 }
 		}
 	}
 	// 关闭抽屉
@@ -333,111 +84,21 @@
 		visible.value = false
 	}
 
-	// 默认要校验的
-	const formRules = {
-		name: [required('请输入采集器名称')],
-		code: [required('请输入采集器编号')]
-	}
-
-	// 表格添加一行空数据
-	const tableAdd = () => {
-		const newRow = {
-			startTime: '00:00:00',
-			endTime: '23:59:59',
-			name: '',
-			level: '',
-			phone: ''
-		}
-		formData.value.loadData.push(newRow)
-	}
-
-	// 删除某一行
-	const tableDelete = (record, index) => {
-		formData.value.loadData.splice(index, 1)
-	}
-
 	// 验证并提交数据
 	const onSubmit = () => {
 		formRef.value
 			.validate()
 			.then(() => {
-				// 校验表格信息里面的表单是否有空数据
-				for (let i = 0; i < formData.value.loadData.length; i++) {
-					if (
-						!formData.value.loadData[i].startTime ||
-						!formData.value.loadData[i].endTime ||
-						!formData.value.loadData[i].name ||
-						!formData.value.loadData[i].remindType ||
-						!formData.value.loadData[i].level ||
-						!formData.value.loadData[i].phone
-					) {
-						console.log(i, 'xxxxxx')
-
-						message.warning(`请完善表格中的必填项`)
-					} else {
-						console.log(formData.value.list, '提交数据')
-						// moduleApi.submitForm(formData.value, formData.value.id).then(() => {
-						// 	onClose()
-						// 	emit('successful')
-						// })
-					}
-				}
+				memApi.submitForm(formData.value, formData.value.id).then(() => {
+					onClose()
+					emit('successful')
+				})
 			})
 			.catch((error) => {
 				console.log(error)
 			})
 	}
 
-	// 新增或删除路数
-	const onEdit = (targetKey, action) => {
-		if (action === 'add') {
-			add()
-		} else {
-			remove(targetKey)
-		}
-	}
-	const activeKey = ref('object') //选中的tabs
-	const panes = ref([]) //tabs数组
-	const newTabIndex = ref(1)
-	// 添加tabs
-	const add = () => {
-		const newIndex = newTabIndex.value++
-		if (panes.value.length >= 5) return //最多只能5路
-		panes.value.push({
-			title: `${newIndex}路`,
-			key: newIndex
-		})
-
-		formData.value.list.push({
-			title: `${newIndex}路`,
-			key: newIndex
-		})
-	}
-
-	// 删除tabs
-	const remove = (targetKey) => {
-		let lastIndex = 0
-		panes.value.forEach((pane, i) => {
-			if (pane.key === targetKey) {
-				lastIndex = i - 1
-			}
-		})
-		panes.value = panes.value.filter((pane) => pane.key !== targetKey)
-		if (panes.value.length && activeKey.value === targetKey) {
-			if (lastIndex >= 0) {
-				activeKey.value = panes.value[lastIndex].key
-			} else {
-				activeKey.value = panes.value[0].key
-			}
-		}
-
-		if (panes.value.length == 0) {
-			activeKey.value = 'object'
-		}
-
-		formData.value.list = formData.value.list.filter((item) => item.key !== targetKey) //删除表单
-	}
-
 	// 调用这个函数将子组件的一些数据和方法暴露出去
 	defineExpose({
 		onOpen
@@ -448,7 +109,8 @@
 	.ant-tabs {
 		width: 100%;
 	}
-	:deep(.ant-col) {
+	:deep(.ant-form-item) {
+		width: 100%;
 		margin-bottom: 10px;
 	}
 </style>

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

@@ -1,6 +1,6 @@
 <template>
 	<div class="table_item">
-		<s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.code">
+		<s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.id">
 			<template #operator>
 				<!-- 搜索区域 -->
 				<div class="table-search">
@@ -14,41 +14,14 @@
 								:model="searchFormState"
 								class="ant-advanced-search-form"
 							>
-								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
-									<a-form-item label="冷链编号" name="code">
-										<a-input v-model:value="searchFormState.code" placeholder="请输入冷链编号" /> </a-form-item
-								></a-col>
-								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
-									<a-form-item label="所属中继" name="sszj">
-										<a-select v-model:value="searchFormState.sszj" placeholder="请选择所属中继">
-											<a-select-option value="1">虚拟中继</a-select-option>
-										</a-select>
-									</a-form-item></a-col
-								>
-								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
-									<a-form-item label="运行状态" name="yxzt">
-										<a-select v-model:value="searchFormState.yxzt" 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-option value="4">闲置维修</a-select-option>
-										</a-select>
-									</a-form-item></a-col
-								>
 								<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-form-item label="设备名称" name="deviceName">
+										<a-input v-model:value="searchFormState.deviceName" placeholder="请输入设备名称" /> </a-form-item
 								></a-col>
 								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
-									<a-form-item label="型号" name="xh">
-										<a-select v-model:value="searchFormState.xh" 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-option value="4">wifi采集</a-select-option>
-										</a-select>
-									</a-form-item></a-col
-								>
+									<a-form-item label="设备编号" name="deviceCode">
+										<a-input v-model:value="searchFormState.deviceCode" placeholder="请输入设备编号" /> </a-form-item
+								></a-col>
 							</a-form>
 						</a-row>
 					</div>
@@ -74,15 +47,19 @@
 				</div>
 			</template>
 			<template #bodyCell="{ column, record }">
-				<template v-if="column.dataIndex === 'state'">
+				<!--  -->
+				<template v-if="column.dataIndex === 'modelName'">
+					{{ $TOOL.dictTypeData('COIDCHAIN', record.modelName) }}
+				</template>
+				<template v-if="column.dataIndex === 'status'">
 					<span>
-						<a-tag :color="record.state == '1' ? '#87d068' : record.state == '2' ? '#cd201f' : '#50cd7c'">
-							{{ record.stateValue }}
+						<a-tag :color="record.status == '1' ? '#87d068' : '#cd201f'">
+							{{ record.status == '1' ? '正常' : '闲置' }}
 						</a-tag>
 					</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>
@@ -94,10 +71,12 @@
 					<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>
@@ -114,79 +93,70 @@
 		</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 jobApi from '@/api/dev/jobApi'
+	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()
 
 	const columns = [
 		{
-			title: '所属部门',
-			dataIndex: 'ssbm',
-			align: 'center',
-			ellipsis: true,
-
-			width: 200
-		},
-		{
-			title: '采集器编号',
-			dataIndex: 'code',
+			title: '设备名称',
+			dataIndex: 'deviceName',
 			align: 'center',
 			ellipsis: true
 		},
 		{
-			title: '采集器名称',
-			dataIndex: 'name',
+			title: '设备编号',
+			dataIndex: 'deviceCode',
 			align: 'center',
-			ellipsis: true,
-
-			width: 200
+			ellipsis: true
 		},
 		{
-			title: '型号',
-			dataIndex: 'xh',
+			title: '设备型号',
+			dataIndex: 'modelName',
 			align: 'center',
 			ellipsis: true
 		},
 		{
 			title: '最后心跳时间',
-			dataIndex: 'date',
+			dataIndex: 'lastHeartbeatTime',
 			align: 'center',
-			ellipsis: true,
-
-			width: 200
+			ellipsis: true
 		},
 		{
 			title: '设备状态',
-			dataIndex: 'state',
+			dataIndex: 'status',
 			align: 'center',
 			ellipsis: true
 		},
 
 		{
 			title: '传感器路数',
-			dataIndex: 'bjsxx',
+			dataIndex: 'sensorCount',
 			align: 'center',
 			ellipsis: true
 		},
 		{
-			title: '对应监控对象',
-			dataIndex: 'dyjkdx',
+			title: '最近登录时间',
+			dataIndex: 'lastLoginTime',
 			align: 'center',
 			ellipsis: true
 		},
 		{
-			title: '监控对象位置',
-			dataIndex: 'jkdxwz',
+			title: '排序码',
+			dataIndex: 'sortCode',
 			align: 'center',
-			ellipsis: true
+			ellipsis: true,
+			sorter: true
 		},
 
 		{
@@ -198,95 +168,8 @@
 	]
 
 	const loadData = (parameter) => {
-		return jobApi.jobPage(Object.assign(parameter, searchFormState.value)).then((res) => {
-			// return res
-			const obj = {
-				current: 1,
-				pages: 1,
-				records: [
-					{
-						id: '11111',
-						ssbm: '广州海关技术中心',
-						code: 'Y6578945621',
-						name: 'ABSL-3超低温冰箱123456',
-						xh: '三代GPRS采集-VH',
-						date: '2024-09-28 07:03:24',
-						state: '1',
-						stateValue: '正常',
-						bjsxx: '1',
-						dyjkdx: 'BSL-3超低温冰箱',
-						jkdxwz: 'ABCLSY冰箱三层'
-					},
-					{
-						id: '22222',
-						ssbm: '广州海关技术中心',
-						code: 'Y6578945622',
-						name: 'ABSL-3超低温冰箱123456',
-						xh: '三代GPRS采集-VH',
-						date: '2024-11-05 07:12:42',
-						state: '1',
-						stateValue: '正常',
-						bjsxx: '1',
-						dyjkdx: 'BSL-3超低温冰箱',
-						jkdxwz: 'ABCLSY冰箱三层'
-					},
-					{
-						id: '33333',
-						ssbm: '广州海关技术中心',
-						code: 'Y6578945623',
-						name: 'ABSL-3超低温冰箱123456',
-						xh: '三代GPRS采集-VH',
-						date: '2024-11-05 09:22:45',
-						state: '1',
-						stateValue: '正常',
-						bjsxx: '1',
-						dyjkdx: 'BSL-3超低温冰箱',
-						jkdxwz: 'ABCLSY冰箱三层'
-					},
-					{
-						id: '44444',
-						ssbm: '广州海关技术中心',
-						code: 'Y6578945624',
-						name: 'ABSL-3超低温冰箱123456',
-						xh: '三代GPRS采集-VH',
-						date: '2024-11-05 09:27:55',
-						state: '1',
-						stateValue: '正常',
-						bjsxx: '1',
-						dyjkdx: 'BSL-3超低温冰箱',
-						jkdxwz: 'ABCLSY冰箱三层'
-					},
-					{
-						id: '55555',
-						ssbm: '广州海关技术中心',
-						code: 'Y6578945625',
-						name: 'ABSL-3超低温冰箱123456',
-						xh: '三代GPRS采集-VH',
-						date: '2024-11-05 10:16:11',
-						state: '2',
-						stateValue: '异常',
-						bjsxx: '1',
-						dyjkdx: 'BSL-3超低温冰箱',
-						jkdxwz: 'ABCLSY冰箱三层'
-					},
-					{
-						id: '66666',
-						ssbm: '广州海关技术中心',
-						code: 'Y6578945626',
-						name: 'ABSL-3超低温冰箱123456',
-						xh: '三代GPRS采集-VH',
-						date: '2024-11-05 14:57:31',
-						state: '2',
-						stateValue: '异常',
-						bjsxx: '1',
-						dyjkdx: 'BSL-3超低温冰箱',
-						jkdxwz: 'ABCLSY冰箱三层'
-					}
-				],
-				size: 10,
-				total: 6
-			}
-			return obj
+		return memApi.memPage(Object.assign(parameter, searchFormState.value)).then((res) => {
+			return res
 		})
 	}
 	// 重置
@@ -296,7 +179,15 @@
 	}
 	// 删除
 	const deleteData = (record) => {
-		console.log(record, '删除')
+		let params = [
+			{
+				id: record.id
+			}
+		]
+		memApi.memDelete(params).then(() => {
+			tableRef.value.refresh(true)
+			reset()
+		})
 	}
 </script>