iot产品管理问题

1.修复物模型列表无限加载的问题
2.修复物模型管理页面添加，TSL，编辑，删除，功能类型选项功能不用问题
3.修复TSL按钮物模型接口没有的问题
4.修复物模型新增编辑页面的属性不能正常编辑修改问题美化显示
iot设备管理问题
1.修复新增编辑页面缺少字段相关组件
2.修复设备详情中子页面不显示问题
3.修复设备详情子页面物模型数据页面不显示问题
4.修复模拟设备右侧不显示问题 右侧溢出，改为上下分栏

Signed-off-by: Administrator <425053404@qq.com>

apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelArrayDataSpecs.vue

@@ -29,8 +29,8 @@ function handleChange(val: any) {
 </script>
 
 <template>
-  <Form.Item label="元素类型" prop="property.dataSpecs.childDataType">
-    <Radio.Group v-model="dataSpecs.childDataType" @change="handleChange">
+  <Form.Item label="元素类型" name="property.dataSpecs.childDataType">
+    <Radio.Group v-model:value="dataSpecs.childDataType" @change="handleChange">
       <template v-for="item in getDataTypeOptions()" :key="item.value">
         <Radio
           v-if="
@@ -50,8 +50,8 @@ function handleChange(val: any) {
       </template>
     </Radio.Group>
   </Form.Item>
-  <Form.Item label="元素个数" prop="property.dataSpecs.size">
-    <Input v-model="dataSpecs.size" placeholder="请输入数组中的元素个数" />
+  <Form.Item label="元素个数" name="property.dataSpecs.size">
+    <Input v-model:value="dataSpecs.size" placeholder="请输入数组中的元素个数" />
   </Form.Item>
   <!-- Struct 型配置-->
   <ThingModelStructDataSpecs

apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelEnumDataSpecs.vue

@@ -2,31 +2,22 @@
 <script lang="ts" setup>
 import type { Ref } from 'vue';
 
-import type { DataSpecsEnumOrBoolData } from '#/api/iot/thingmodel';
-
-import { isEmpty } from '@vben/utils';
-
 import { useVModel } from '@vueuse/core';
 import { Button, Form, Input, message } from 'ant-design-vue';
 
-import { IoTDataSpecsDataTypeEnum } from '#/views/iot/utils/constants';
-
 /** 枚举型的 dataSpecs 配置组件 */
 defineOptions({ name: 'ThingModelEnumDataSpecs' });
 
 const props = defineProps<{ modelValue: any }>();
 const emits = defineEmits(['update:modelValue']);
-const dataSpecsList = useVModel(props, 'modelValue', emits) as Ref<
-  DataSpecsEnumOrBoolData[]
->;
+const dataSpecsList = useVModel(props, 'modelValue', emits) as Ref<any[]>;
 
 /** 添加枚举项 */
 function addEnum() {
   dataSpecsList.value.push({
-    dataType: IoTDataSpecsDataTypeEnum.ENUM,
     name: '', // 枚举项的名称
     value: '', // 枚举值
-  });
+  } as any);
 }
 
 /** 删除枚举项 */
@@ -38,92 +29,10 @@ function deleteEnum(index: number) {
   dataSpecsList.value.splice(index, 1);
 }
 
-/** 校验枚举值 */
-function validateEnumValue(_: any, value: any, callback: any) {
-  if (isEmpty(value)) {
-    callback(new Error('枚举值不能为空'));
-    return;
-  }
-  if (Number.isNaN(Number(value))) {
-    callback(new Error('枚举值必须是数字'));
-    return;
-  }
-  // 检查枚举值是否重复
-  const values = dataSpecsList.value.map((item) => item.value);
-  if (values.filter((v) => v === value).length > 1) {
-    callback(new Error('枚举值不能重复'));
-    return;
-  }
-  callback();
-}
-
-/** 校验枚举描述 */
-function validateEnumName(_: any, value: string, callback: any) {
-  if (isEmpty(value)) {
-    callback(new Error('枚举描述不能为空'));
-    return;
-  }
-  // 检查开头字符
-  if (!/^[\u4E00-\u9FA5a-z0-9]/i.test(value)) {
-    callback(new Error('枚举描述必须以中文、英文字母或数字开头'));
-    return;
-  }
-  // 检查整体格式
-  if (!/^[\u4E00-\u9FA5a-z0-9][\w\u4E00-\u9FA5-]*$/i.test(value)) {
-    callback(new Error('枚举描述只能包含中文、英文字母、数字、下划线和短划线'));
-    return;
-  }
-  // 检查长度（一个中文算一个字符）
-  if (value.length > 20) {
-    callback(new Error('枚举描述长度不能超过20个字符'));
-    return;
-  }
-  callback();
-}
-
-/** 校验整个枚举列表 */
-function validateEnumList(_: any, __: any, callback: any) {
-  if (isEmpty(dataSpecsList.value)) {
-    callback(new Error('请至少添加一个枚举项'));
-    return;
-  }
-
-  // 检查是否存在空值
-  const hasEmptyValue = dataSpecsList.value.some(
-    (item) => isEmpty(item.value) || isEmpty(item.name),
-  );
-  if (hasEmptyValue) {
-    callback(new Error('存在未填写的枚举值或描述'));
-    return;
-  }
-
-  // 检查枚举值是否都是数字
-  const hasInvalidNumber = dataSpecsList.value.some((item) =>
-    Number.isNaN(Number(item.value)),
-  );
-  if (hasInvalidNumber) {
-    callback(new Error('存在非数字的枚举值'));
-    return;
-  }
-
-  // 检查是否有重复的枚举值
-  const values = dataSpecsList.value.map((item) => item.value);
-  const uniqueValues = new Set(values);
-  if (values.length !== uniqueValues.size) {
-    callback(new Error('存在重复的枚举值'));
-    return;
-  }
-  callback();
-}
 </script>
 
 <template>
-  <Form.Item
-    :rules="[
-      { required: true, validator: validateEnumList, trigger: 'change' },
-    ]"
-    label="枚举项"
-  >
+  <Form.Item label="枚举项">
     <div class="flex flex-col">
       <div class="flex items-center">
         <span class="flex-1"> 参数值 </span>
@@ -132,41 +41,27 @@ function validateEnumList(_: any, __: any, callback: any) {
       <div
         v-for="(item, index) in dataSpecsList"
         :key="index"
-        class="mb-5px flex items-center justify-between"
+        class="flex items-center justify-between mb-5px"
       >
-        <Form.Item
-          :prop="`property.dataSpecsList[${index}].value`"
-          :rules="[
-            { required: true, message: '枚举值不能为空' },
-            { validator: validateEnumValue, trigger: 'blur' },
-          ]"
-          class="mb-0 flex-1"
-        >
-          <Input v-model="item.value" placeholder="请输入枚举值,如'0'" />
-        </Form.Item>
+        <div class="flex-1">
+          <Input v-model:value="item.value" placeholder="请输入枚举值,如'0'" />
+        </div>
         <span class="mx-2">~</span>
-        <Form.Item
-          :prop="`property.dataSpecsList[${index}].name`"
-          :rules="[
-            { required: true, message: '枚举描述不能为空' },
-            { validator: validateEnumName, trigger: 'blur' },
-          ]"
-          class="mb-0 flex-1"
-        >
-          <Input v-model="item.name" placeholder="对该枚举项的描述" />
-        </Form.Item>
-        <Button class="ml-10px" link type="primary" @click="deleteEnum(index)">
+        <div class="flex-1">
+          <Input v-model:value="item.name" placeholder="对该枚举项的描述" />
+        </div>
+        <Button class="ml-10px" type="link" @click="deleteEnum(index)">
           删除
         </Button>
       </div>
-      <Button link type="primary" @click="addEnum">+添加枚举项</Button>
+      <Button type="link" @click="addEnum">+添加枚举项</Button>
     </div>
   </Form.Item>
 </template>
 
 <style lang="scss" scoped>
-:deep(.el-form-item) {
-  .el-form-item {
+:deep(.ant-form-item) {
+  .ant-form-item {
     margin-bottom: 0;
   }
 }

apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelNumberDataSpecs.vue

@@ -1,14 +1,55 @@
 <!-- dataType：number 数组类型 -->
+<template>
+  <Form.Item label="取值范围">
+    <div class="flex items-center justify-between">
+      <div class="flex-1">
+        <Input v-model:value="dataSpecs.min" placeholder="请输入最小值" />
+      </div>
+      <span class="mx-2">~</span>
+      <div class="flex-1">
+        <Input v-model:value="dataSpecs.max" placeholder="请输入最大值" />
+      </div>
+    </div>
+  </Form.Item>
+  <Form.Item label="步长">
+    <Input v-model:value="dataSpecs.step" placeholder="请输入步长" />
+  </Form.Item>
+  <Form.Item label="单位">
+    <Select
+      :model-value="
+        dataSpecs.unit ? `${dataSpecs.unitName}-${dataSpecs.unit}` : ''
+      "
+      show-search
+      placeholder="请选择单位"
+      class="w-1/1"
+      @change="unitChange"
+    >
+      <Select.Option
+        v-for="(item, index) in getDictOptions(
+          DICT_TYPE.IOT_THING_MODEL_UNIT,
+          'string',
+        )"
+        :key="index"
+        :value="`${item.label}-${item.value}`"
+      >
+        {{ `${item.label}-${item.value}` }}
+      </Select.Option>
+    </Select>
+  </Form.Item>
+</template>
+
 <script lang="ts" setup>
 import type { Ref } from 'vue';
 
 import type { DataSpecsNumberData } from '#/api/iot/thingmodel';
 
+import { useVModel } from '@vueuse/core';
+
+import { Form, Input, Select } from 'ant-design-vue';
+
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
-import { useVModel } from '@vueuse/core';
-
 /** 数值型的 dataSpecs 配置组件 */
 defineOptions({ name: 'ThingModelNumberDataSpecs' });
 
@@ -21,132 +62,17 @@ const dataSpecs = useVModel(
 ) as Ref<DataSpecsNumberData>;
 
 /** 单位发生变化时触发 */
-const unitChange = (UnitSpecs: string) => {
-  const [unitName, unit] = UnitSpecs.split('-');
+const unitChange = (UnitSpecs: any) => {
+  if (!UnitSpecs) return;
+  const [unitName, unit] = String(UnitSpecs).split('-');
   dataSpecs.value.unitName = unitName;
   dataSpecs.value.unit = unit;
 };
-
-/** 校验最小值 */
-const validateMin = (_: any, __: any, callback: any) => {
-  const min = Number(dataSpecs.value.min);
-  const max = Number(dataSpecs.value.max);
-  if (Number.isNaN(min)) {
-    callback(new Error('请输入有效的数值'));
-    return;
-  }
-  if (max !== undefined && !Number.isNaN(max) && min >= max) {
-    callback(new Error('最小值必须小于最大值'));
-    return;
-  }
-
-  callback();
-};
-
-/** 校验最大值 */
-const validateMax = (_: any, __: any, callback: any) => {
-  const min = Number(dataSpecs.value.min);
-  const max = Number(dataSpecs.value.max);
-  if (Number.isNaN(max)) {
-    callback(new Error('请输入有效的数值'));
-    return;
-  }
-  if (min !== undefined && !Number.isNaN(min) && max <= min) {
-    callback(new Error('最大值必须大于最小值'));
-    return;
-  }
-
-  callback();
-};
-
-/** 校验步长 */
-const validateStep = (_: any, __: any, callback: any) => {
-  const step = Number(dataSpecs.value.step);
-  if (Number.isNaN(step)) {
-    callback(new Error('请输入有效的数值'));
-    return;
-  }
-  if (step <= 0) {
-    callback(new Error('步长必须大于0'));
-    return;
-  }
-  const min = Number(dataSpecs.value.min);
-  const max = Number(dataSpecs.value.max);
-  if (!Number.isNaN(min) && !Number.isNaN(max) && step > max - min) {
-    callback(new Error('步长不能大于最大值和最小值的差值'));
-    return;
-  }
-
-  callback();
-};
 </script>
 
-<template>
-  <el-form-item label="取值范围">
-    <div class="flex items-center justify-between">
-      <el-form-item
-        :rules="[
-          { required: true, message: '最小值不能为空' },
-          { validator: validateMin, trigger: 'blur' },
-        ]"
-        class="mb-0"
-        prop="property.dataSpecs.min"
-      >
-        <el-input v-model="dataSpecs.min" placeholder="请输入最小值" />
-      </el-form-item>
-      <span class="mx-2">~</span>
-      <el-form-item
-        :rules="[
-          { required: true, message: '最大值不能为空' },
-          { validator: validateMax, trigger: 'blur' },
-        ]"
-        class="mb-0"
-        prop="property.dataSpecs.max"
-      >
-        <el-input v-model="dataSpecs.max" placeholder="请输入最大值" />
-      </el-form-item>
-    </div>
-  </el-form-item>
-  <el-form-item
-    :rules="[
-      { required: true, message: '步长不能为空' },
-      { validator: validateStep, trigger: 'blur' },
-    ]"
-    label="步长"
-    prop="property.dataSpecs.step"
-  >
-    <el-input v-model="dataSpecs.step" placeholder="请输入步长" />
-  </el-form-item>
-  <el-form-item
-    :rules="[{ required: true, message: '请选择单位' }]"
-    label="单位"
-    prop="property.dataSpecs.unit"
-  >
-    <el-select
-      :model-value="
-        dataSpecs.unit ? `${dataSpecs.unitName}-${dataSpecs.unit}` : ''
-      "
-      filterable
-      placeholder="请选择单位"
-      class="w-1/1"
-      @change="unitChange"
-    >
-      <el-option
-        v-for="(item, index) in getDictOptions(
-          DICT_TYPE.IOT_THING_MODEL_UNIT,
-          'string',
-        )"
-        :key="index"
-        :label="`${item.label}-${item.value}`"
-        :value="`${item.label}-${item.value}`"
-      />
-    </el-select>
-  </el-form-item>
-</template>
-
 <style lang="scss" scoped>
-:deep(.el-form-item) {
-  .el-form-item {
+:deep(.ant-form-item) {
+  .ant-form-item {
     margin-bottom: 0;
   }
 }

apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelStructDataSpecs.vue

@@ -29,6 +29,7 @@ const formData = ref<any>({
     dataSpecs: {
       dataType: IoTDataSpecsDataTypeEnum.INT,
     },
+    dataSpecsList: [],
   },
 });
 
@@ -40,16 +41,22 @@ function openStructForm(val: any) {
     return;
   }
   // 编辑时回显数据
+  const valData = val as any;
   formData.value = {
-    identifier: val.identifier,
-    name: val.name,
-    description: val.description,
+    identifier: valData?.identifier || '',
+    name: valData?.name || '',
+    description: valData?.description || '',
     property: {
-      dataType: val.childDataType,
-      dataSpecs: val.dataSpecs,
-      dataSpecsList: val.dataSpecsList,
+      dataType: valData?.childDataType || IoTDataSpecsDataTypeEnum.INT,
+      dataSpecs: valData?.dataSpecs ?? {},
+      dataSpecsList: valData?.dataSpecsList ?? [],
     },
   };
+
+  // 确保 property.dataType 有值
+  if (!formData.value.property.dataType) {
+    formData.value.property.dataType = IoTDataSpecsDataTypeEnum.INT;
+  }
 }
 
 /** 删除 struct 项 */
@@ -102,19 +109,12 @@ function resetForm() {
       dataSpecs: {
         dataType: IoTDataSpecsDataTypeEnum.INT,
       },
+      dataSpecsList: [],
     },
   };
   structFormRef.value?.resetFields();
 }
 
-/** 校验 struct 不能为空 */
-function validateList(_: any, __: any, callback: any) {
-  if (isEmpty(dataSpecsList.value)) {
-    callback(new Error('struct 不能为空'));
-    return;
-  }
-  callback();
-}
 
 /** 组件初始化 */
 onMounted(async () => {
@@ -126,51 +126,49 @@ onMounted(async () => {
 
 <template>
   <!-- struct 数据展示 -->
-  <Form.Item
-    :rules="[{ required: true, validator: validateList, trigger: 'change' }]"
-    label="JSON 对象"
-  >
+  <Form.Item label="属性对象">
     <div
       v-for="(item, index) in dataSpecsList"
       :key="index"
       class="px-10px mb-10px flex w-full justify-between bg-gray-100"
     >
-      <span>参数名称：{{ item.name }}</span>
+      <span>参数：{{ item.name }}</span>
       <div class="btn">
-        <Button link type="primary" @click="openStructForm(item)">
+        <Button type="link" @click="openStructForm(item)">
           编辑
         </Button>
-        <Divider direction="vertical" />
-        <Button link danger @click="deleteStructItem(index)"> 删除 </Button>
+        <Divider type="vertical" />
+        <Button type="link" danger @click="deleteStructItem(index)">
+          删除
+        </Button>
       </div>
     </div>
-    <Button link type="primary" @click="openStructForm(null)">
+    <Button type="link" @click="openStructForm(null)">
       +新增参数
     </Button>
   </Form.Item>
 
   <!-- struct 表单 -->
-  <Modal v-model="dialogVisible" :title="dialogTitle" append-to-body>
+  <Modal
+    v-model:open="dialogVisible"
+    :title="dialogTitle"
+    :confirm-loading="formLoading"
+    @ok="submitForm"
+  >
     <Form
       ref="structFormRef"
-      v-loading="formLoading"
       :model="formData"
-      label-width="100px"
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
     >
-      <Form.Item label="参数名称" prop="name">
-        <Input v-model="formData.name" placeholder="请输入功能名称" />
+      <Form.Item label="参数名称" name="name">
+        <Input v-model:value="formData.name" placeholder="请输入功能名称" />
       </Form.Item>
-      <Form.Item label="标识符" prop="identifier">
-        <Input v-model="formData.identifier" placeholder="请输入标识符" />
+      <Form.Item label="标识符" name="identifier">
+        <Input v-model:value="formData.identifier" placeholder="请输入标识符" />
       </Form.Item>
       <!-- 属性配置 -->
       <ThingModelProperty v-model="formData.property" is-struct-data-specs />
     </Form>
-    <template #footer>
-      <Button :disabled="formLoading" type="primary" @click="submitForm">
-        确 定
-      </Button>
-      <Button @click="dialogVisible = false">取 消</Button>
-    </template>
   </Modal>
 </template>