snowy-admin-web/src/views/biz/monitor/object/form.vue

@@ -1,7 +1,7 @@
 <template>
 	<xn-form-container
 		:title="formData.id ? '编辑冰箱' : '新增冰箱'"
-		:width="'500px'"
+		:width="'800px'"
 		:visible="visible"
 		:destroy-on-close="true"
 		@close="onClose"
@@ -13,35 +13,39 @@
 			layout="inline"
 			:label-col="{ style: { width: '100px', justifyContent: 'end' } }"
 		>
-			<a-form-item label="所属房间" name="roomId">
-				<a-select
-					ref="select"
-					v-model:value="formData.roomId"
-					:options="roomOptions"
-					allowClear
-					style="width: 100%"
-					placeholder="请选择您要绑定的房间"
-					:field-names="{ label: 'name', value: 'id' }"
-				/>
-			</a-form-item>
-
-			<a-form-item label="冰箱名称" name="name">
-				<a-input v-model:value="formData.name" placeholder="请输入冰箱名称" allow-clear />
-			</a-form-item>
-
-			<a-form-item label="报警接收人" name="alarmUsers">
-				<a-select
-					v-model:value="formData.alarmUsers"
-					mode="multiple"
-					style="width: 100%"
-					placeholder="请选择报警接收人"
-					:options="alarmUsersOptions"
-					:field-names="{ label: 'name', value: 'openId' }"
-				></a-select>
-			</a-form-item>
-			<a-form-item label="冰箱位置区域">
-				<a-input v-model:value="formData.monitorPoint" placeholder="请输入冰箱位置区域" allow-clear />
-			</a-form-item>
+			<a-row :gutter="10">
+				<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+					<a-form-item label="所属房间" name="roomId">
+						<a-radio-group class="dict" v-model:value="formData.roomId" name="name" option-type="button">
+							<a-radio-button v-for="item in roomOptions" :key="item.id" :value="item.id">{{
+								item.name
+							}}</a-radio-button>
+						</a-radio-group>
+					</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="冰箱位置区域">
+						<a-input v-model:value="formData.monitorPoint" placeholder="请输入冰箱位置区域" allow-clear />
+					</a-form-item>
+				</a-col>
+				<a-col :xs="24" :sm="24" :md="12" :lg="24" :xl="24">
+					<a-form-item label="报警接收人" name="alarmUsers">
+						<a-select
+							v-model:value="formData.alarmUsers"
+							mode="multiple"
+							style="width: 100%"
+							placeholder="请选择报警接收人"
+							:options="alarmUsersOptions"
+							:field-names="{ label: 'name', value: 'openId' }"
+						></a-select>
+					</a-form-item>
+				</a-col>
+			</a-row>
 		</a-form>
 
 		<template #footer>
@@ -135,6 +139,19 @@
 </script>
 
 <style lang="less" scoped>
+	.dict {
+		width: 100%;
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+		gap: 10px;
+		:deep(.ant-radio-button-wrapper) {
+			text-align: center;
+		}
+		:deep(.ant-radio-button-wrapper-checked) {
+			color: #2b61ff;
+			background-color: #e6f3ff;
+		}
+	}
 	:deep(.ant-form-item) {
 		width: 100%;
 		margin-bottom: 10px;

snowy-admin-web/src/views/biz/monitor/point/form.vue

@@ -84,6 +84,20 @@
 					</a-form-item>
 				</a-col>
 
+				<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+					<a-form-item label="勿扰设置">
+						<a-time-range-picker v-model:value="formData.time" value-format="HH:mm:ss" style="width: 100%" show-time />
+					</a-form-item>
+				</a-col>
+				<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+					<a-form-item label="离线预警" name="deviceOfflineAlarm" size="small">
+						<a-radio-group v-model:value="formData.deviceOfflineAlarm" button-style="solid">
+							<a-radio-button :value="false">否</a-radio-button>
+							<a-radio-button :value="true">是</a-radio-button>
+						</a-radio-group>
+					</a-form-item>
+				</a-col>
+
 				<!-- 报警接收人 -->
 				<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
 					<a-form-item label="报警接收人" name="alarmUsers">
@@ -229,12 +243,6 @@
 						/>
 					</a-form-item>
 				</a-col>
-
-				<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-					<a-form-item label="勿扰设置">
-						<a-time-range-picker v-model:value="formData.time" value-format="HH:mm:ss" style="width: 80%" show-time />
-					</a-form-item>
-				</a-col>
 			</a-row>
 		</a-form>
 
@@ -257,7 +265,7 @@
 	const emit = defineEmits({ successful: null })
 	const visible = ref(false) // 默认是关闭状态
 	const formRef = ref()
-	const formData = ref({ alarmUsers: [], time: [] }) // 表单数据
+	const formData = ref({ deviceOfflineAlarm: true, alarmUsers: [], time: [] }) // 表单数据
 	const pointOptions = tool.dictList('MONITORPOINT') // 点位名称
 	const pointName = ref('上层')
 	const currentMonitorObj = ref({}) //当前的监测冰箱
@@ -343,7 +351,7 @@
 		isFridgeDisabled()
 		visible.value = true
 		if (!record) {
-			formData.value = ref({ alarmUsers: [], time: [] })
+			formData.value = ref({ deviceOfflineAlarm: true, alarmUsers: [], time: [] })
 			memListData()
 		}
 	}
@@ -384,6 +392,7 @@
 
 				if (type == 'add') {
 					formData.value.name = currentMonitorObj.value.name + '-' + pointName.value
+					formData.value.deviceOfflineAlarm = true
 				} else {
 					pointName.value = '' // 编辑取消回显
 					formData.value.time = [