新增区域，新增监控设备

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

@@ -0,0 +1,30 @@
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/coldchain/monitortargetregion/` + url, ...arg)
+
+// 区域管理
+export default {
+	// 获取列表数据分页
+	locationPage(data) {
+		return request('page', 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)
+	},
+	// 详情
+	locationDetail(data) {
+		return request('detail', data, 'get')
+	}
+}

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

@@ -8,6 +8,10 @@ export default {
 	memPage(data) {
 		return request('page', data, 'get')
 	},
+	// 获取监控设备列表 -仅状态值为正常的数据
+	memList(data) {
+		return request('list', data, 'get')
+	},
 	// 提交表单 edit为true时为编辑，默认为新增
 	submitForm(data, edit = false) {
 		return request(edit ? 'edit' : 'add', data)

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

@@ -20,4 +20,6 @@ export default {
 	setupDetail(data) {
 		return request('detail', data, 'get')
 	}
+
+	
 }

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

@@ -53,7 +53,6 @@
 
 <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 })

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

@@ -47,7 +47,6 @@
 				</div>
 			</template>
 			<template #bodyCell="{ column, record }">
-				<!--  -->
 				<template v-if="column.dataIndex === 'modelName'">
 					{{ $TOOL.dictTypeData('COIDCHAIN', record.modelName) }}
 				</template>

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

@@ -0,0 +1,255 @@
+<template>
+	<xn-form-container
+		:title="formData.id ? '编辑区域' : '新增区域'"
+		:width="'800px'"
+		:visible="visible"
+		:destroy-on-close="true"
+		@close="onClose"
+	>
+		<a-form
+			ref="formRef"
+			:model="formData"
+			:rules="formRules"
+			layout="inline"
+			:label-col="{ style: { width: '110px', justifyContent: 'end' } }"
+		>
+			<a-row :gutter="10">
+				<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="parentId">
+						<a-tree-select
+							v-model:value="formData.parentId"
+							v-model:treeExpandedKeys="defaultExpandedKeys"
+							class="xn-wd"
+							:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+							placeholder="请选择区域"
+							allow-clear
+							:tree-data="treeData"
+							:field-names="{
+								children: 'children',
+								label: 'name',
+								value: 'id'
+							}"
+							selectable="false"
+							treeLine
+						/>
+					</a-form-item>
+				</a-col>
+
+				<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="monitorDeviceId">
+						<a-select
+							ref="select"
+							v-model:value="formData.monitorDeviceId"
+							:options="memListOptions"
+							placeholder="请选择监控设备"
+							@change="monitorTargetChange"
+						/>
+					</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" 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="请选择传感器类型"
+						/>
+					</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" />
+					</a-form-item>
+				</a-col>
+
+				<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+					<a-form-item label="报警上限℃">
+						<a-input-number
+							id="inputNumber"
+							v-model:value="formData.limitUp"
+							placeholder="请输入报警上限"
+							allow-clear
+							style="width: 100%"
+						/>
+					</a-form-item>
+				</a-col>
+				<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+					<a-form-item label="报警下限℃">
+						<a-input-number
+							id="inputNumber"
+							v-model:value="formData.limitDown"
+							placeholder="请输入报警下限"
+							allow-clear
+							style="width: 100%"
+						/>
+					</a-form-item>
+				</a-col>
+
+				<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+					<a-form-item label="排序：" name="sortCode">
+						<a-input-number class="xn-wd" v-model:value="formData.sortCode" :max="100" />
+					</a-form-item>
+				</a-col>
+			</a-row>
+		</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 { 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({ sortCode: 99 }) // 表单数据
+	const sensorOptions = tool.dictList('SENSORTYPE') // 传感器类型
+	const monitorTargetOptions = ref([]) // 监控目标对象
+	const memListOptions = ref([]) // 监控设备数据
+
+	const sensorRouteMax = ref(1) //传感器最大值默认1
+
+	// 默认要校验的
+	const formRules = {
+		name: [required('请输入区域名称')],
+		parentId: [required('请选择上级区域')],
+		monitorTargetId: [required('请选择监控目标对象')],
+		monitorDeviceId: [required('请选择监控设备')],
+		sensorRoute: [required('请输入传感器路数')],
+		limitUp: [required('请选择报警上限')],
+		limitDown: [required('请选择报警下限')]
+	}
+	// 默认展开的节点(顶级)
+	const defaultExpandedKeys = ref([0])
+	// 定义树元素
+	const treeData = ref([])
+	// 打开抽屉
+	const onOpen = (record, parentId) => {
+		loadData()
+		visible.value = true
+		formData.value = {
+			sortCode: 99
+		}
+		if (parentId) {
+			formData.value.parentId = parentId
+		}
+		if (record) {
+			formData.value = Object.assign({}, record)
+		}
+		locationApi.locationTree().then((res) => {
+			treeData.value = [
+				{
+					id: 0,
+					parentId: '-1',
+					name: '顶级',
+					children: res
+				}
+			]
+		})
+	}
+
+	const loadData = () => {
+		// 获取采集器监控列表
+		memApi.memList().then((res) => {
+			if (res) {
+				memListOptions.value = (res || []).map((item) => {
+					// 状态为正常的数据
+					if (item.status && item.status == 1)
+						return {
+							value: item['id'],
+							label: item['deviceName'],
+							modelName: item['modelName'],
+							deviceCode: item['deviceCode'],
+							sensorCount: item['sensorCount']
+						}
+				})
+			}
+		})
+		// 获取监控对象列表
+		setupApi.setupPage({ current: 1, size: 99999 }).then((res) => {
+			if (res.records) {
+				monitorTargetOptions.value = (res.records || []).map((item) => {
+					return {
+						value: item['id'],
+						label: item['name']
+					}
+				})
+			}
+		})
+	}
+
+	// 选中监控设备
+	const monitorTargetChange = (value) => {
+		console.log(value, '1')
+		if (value) {
+			const data = memListOptions.value.find((item) => item.value === value)
+			formData.value.modelName = data.modelName //监控设备型号
+			formData.value.code = data.deviceCode //冷链编号
+			sensorRouteMax.value = data.sensorCount //传感器路数的最大值
+		}
+	}
+
+	// 关闭抽屉
+	const onClose = () => {
+		formRef.value.resetFields()
+		visible.value = false
+	}
+
+	// 验证并提交数据
+	const onSubmit = () => {
+		formRef.value
+			.validate()
+			.then(() => {
+				locationApi.submitForm(formData.value, formData.value.id).then(() => {
+					onClose()
+					emit('successful')
+				})
+			})
+			.catch((error) => {
+				console.log(error)
+			})
+	}
+
+	// 调用这个函数将子组件的一些数据和方法暴露出去
+	defineExpose({
+		onOpen
+	})
+</script>
+
+<style lang="less" scoped>
+	:deep(.ant-form-item) {
+		width: 100%;
+		margin-bottom: 10px;
+	}
+</style>

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

@@ -1,130 +1,170 @@
 <template>
 	<div class="table_item">
-		<div class="table_left">
-			<a-input-search v-model:value="searchValue" style="margin-bottom: 8px" placeholder="请输入采集名称" />
-			<a-tree
-				:expanded-keys="expandedKeys"
-				:auto-expand-parent="autoExpandParent"
-				:tree-data="gData"
-				@expand="onExpand"
-			>
-				<template #title="{ title }">
-					<span v-if="title.indexOf(searchValue) > -1">
-						{{ title.substring(0, title.indexOf(searchValue)) }}
-						<span style="color: #f50">{{ searchValue }}</span>
-						{{ title.substring(title.indexOf(searchValue) + searchValue.length) }}
-					</span>
-					<span v-else>{{ title }}</span>
+		<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="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>
+							<template #icon><download-outlined /></template>导出
+						</a-button>
+					</div>
+				</div>
+			</template>
+			<template #bodyCell="{ column, record }">
+				<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">记录</a-button>
 				</template>
-			</a-tree>
-		</div>
-		<div class="table_right">地图</div>
+			</template>
+		</s-table>
+		<Form ref="formRef" @successful="tableRef.refresh(true)" />
 	</div>
 </template>
-<script lang="ts" setup>
-	import type { TreeProps } from 'ant-design-vue'
 
-	const x = 3
-	const y = 2
-	const z = 1
-	const genData: TreeProps['treeData'] = []
+<script setup>
+	import tool from '@/utils/tool'
+	import locationApi from '@/api/basicset/locationApi.js'
+	import Form from './form.vue'
+	const formRef = ref()
+	const searchFormRef = ref()
+	const searchFormState = ref({})
+	const tableRef = ref()
+	const columns = [
+		{
+			title: '区域名称',
+			dataIndex: 'name',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '上级区域',
+			dataIndex: 'parentId',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '监控对象',
+			dataIndex: 'monitorTargetId',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '传感器编号',
+			dataIndex: 'sensorCode',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '传感器类型',
+			dataIndex: 'sensorType',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '传感器路数',
+			dataIndex: 'sensorRoute',
+			align: 'center',
+			ellipsis: true
+		},
 
-	const generateData = (_level: number, _preKey?: string, _tns?: TreeProps['treeData']) => {
-		const preKey = _preKey || '0'
-		const tns = _tns || genData
+		{
+			title: '监控设备型号',
+			dataIndex: 'modelName',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '监控设备编号',
+			dataIndex: 'monitorDeviceId',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '冷链编号',
+			dataIndex: 'code',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '报警上限',
+			dataIndex: 'limitUp',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '报警下限',
+			dataIndex: 'limitDown',
+			align: 'center',
+			ellipsis: true
+		},
 
-		const children = []
-		for (let i = 0; i < x; i++) {
-			const key = `${preKey}-${i}`
-			tns.push({ title: key, key })
-			if (i < y) {
-				children.push(key)
-			}
-		}
-		if (_level < 0) {
-			return tns
+		{
+			title: '操作',
+			dataIndex: 'action',
+			align: 'center',
+			width: 150
 		}
-		const level = _level - 1
-		children.forEach((key, index) => {
-			tns[index].children = []
-			return generateData(level, key, tns[index].children)
-		})
-	}
-	generateData(z)
+	]
 
-	const dataList: TreeProps['treeData'] = []
-	const generateList = (data: TreeProps['treeData']) => {
-		for (let i = 0; i < data.length; i++) {
-			const node = data[i]
-			const key = node.key
-			dataList.push({ key, title: key })
-			if (node.children) {
-				generateList(node.children)
+	const loadData = (parameter) => {
+		return locationApi.locationTree(Object.assign(searchFormState.value)).then((data) => {
+			if (data) {
+				return data
 			}
-		}
+			return []
+		})
 	}
-	generateList(genData)
-
-	const getParentKey = (key: string | number, tree: TreeProps['treeData']): string | number | undefined => {
-		let parentKey
-		for (let i = 0; i < tree.length; i++) {
-			const node = tree[i]
-			if (node.children) {
-				if (node.children.some((item) => item.key === key)) {
-					parentKey = node.key
-				} else if (getParentKey(key, node.children)) {
-					parentKey = getParentKey(key, node.children)
-				}
-			}
-		}
-		return parentKey
+	// 重置
+	const reset = () => {
+		searchFormRef.value.resetFields()
+		tableRef.value.refresh(true)
 	}
-	const expandedKeys = ref<(string | number)[]>([])
-	const searchValue = ref<string>('')
-	const autoExpandParent = ref<boolean>(true)
-	const gData = ref<TreeProps['treeData']>(genData)
-
-	const onExpand = (keys: string[]) => {
-		expandedKeys.value = keys
-		autoExpandParent.value = false
+	// 删除
+	const deleteData = (record) => {
+		console.log(record, '删除')
 	}
-
-	watch(searchValue, (value) => {
-		const expanded = dataList
-			.map((item: TreeProps['treeData'][number]) => {
-				if (item.title.indexOf(value) > -1) {
-					return getParentKey(item.key, gData.value)
-				}
-				return null
-			})
-			.filter((item, i, self) => item && self.indexOf(item) === i)
-		expandedKeys.value = expanded
-
-		searchValue.value = value
-		autoExpandParent.value = true
-	})
 </script>
 
 <style lang="less" scoped>
 	.table_item {
-		width: 100%;
-		display: flex;
 		padding: 15px 20px;
-
-		.table_left {
-			width: 25%;
-			padding: 10px;
-			margin-right: 10px;
-			background-color: #ffffff;
-		}
-		.table_right {
-			width: 70%;
+		background-color: #ffffff;
+		:deep(.ant-table-pagination-right) {
+			justify-content: center !important;
 		}
 	}
-	:deep(.ant-card-body) {
-		text-align: center;
-	}
-	:deep(.ant-card-head) {
-		border-bottom: 1px solid #f0f0f0 !important;
-	}
 </style>

snowy-admin-web/tsconfig.json

@@ -8,5 +8,5 @@
 			"@/*": ["./src/*"]
 		}
 	},
-	"include": ["src/**/*", "src/views/motoring/analyse/statistics.vue"]
+	"include": ["src/**/*", "src/views/motoring/analyse/statistics.vue", "src/api/basicset/locationApi.js"]
 }