Merge branch 'ft_local_dev' into 'main'

pref:优化物模型相关代码

See merge request huang/yun-teng-iot-front!389

@@ -17,7 +17,7 @@
         <div>
           <Typography>
             <TypographyParagraph>
-              <blockquote style="background: #f2f2f2">{{ blockContent }}</blockquote>
+              <blockquote style="background: #f2f2f2">{{ useBlockPhysicalContent }}</blockquote>
             </TypographyParagraph>
           </Typography>
         </div>
@@ -50,23 +50,38 @@
   import Service from './cpns/Service.vue';
   import Events from './cpns/Events.vue';
   import { mockData } from '../physical/cpns/components/mock';
+  import useCommon from './hook/useCommon';
+  import { IAllData } from './types';
 
   defineEmits(['register']);
+
   const attrDisable = ref(false);
+
   const serveiceDisable = ref(false);
+
   const eventDisable = ref(false);
-  const blockContent = `属性一般是设备的运行状态，如当前温度等；服务是设备可被调用的方法，支持定义参数，如执行某项任务；事件则是设备上报的
-  通知，如告警，需要被及时处理。`;
+
+  const { useBlockPhysicalContent } = useCommon();
+
   const activeKey = ref('1');
+
   const size = ref('small');
+
   const AttrRef = ref<InstanceType<typeof Attribute>>();
+
   const ServiceRef = ref<InstanceType<typeof Service>>();
+
   const EventsRef = ref<InstanceType<typeof Events>>();
+
   const isUpdate = ref(false);
+
   const isViewDetail = ref('');
+
   const isText = ref('');
+
   const dType = ref('');
-  const allData: any = reactive({
+
+  const allData = reactive<IAllData>({
     properties: [],
     events: [],
     services: [],
@@ -75,26 +90,33 @@
   });
 
   const setAttrFormData = (data: {}) => AttrRef.value?.setFormData(data);
+
   const setServiceFormData = (data: {}) => ServiceRef.value?.setFormData(data);
+
   const setEventsFormData = (data: {}) => EventsRef.value?.setFormData(data);
+
   const enums = {
     attr: setAttrFormData,
     service: setServiceFormData,
     events: setEventsFormData,
   };
+
   function action(val, data) {
     let F = enums[val];
     F(data);
   }
+
   function dynamicDisable(a, s, e) {
     attrDisable.value = a;
     serveiceDisable.value = s;
     eventDisable.value = e;
   }
+
   function dynamicActive(n, callback) {
     activeKey.value = n;
     callback;
   }
+
   const dynamicData = (t, a, s, e) => {
     switch (t) {
       case 'attr':
@@ -111,6 +133,7 @@
         break;
     }
   };
+
   const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
     setModalProps({ loading: true });
     handleCancel(false);
@@ -134,6 +157,7 @@
     }
     setModalProps({ loading: false });
   });
+
   const handleCancel = (flag) => {
     AttrRef.value?.resetFormData();
     ServiceRef.value?.resetFormData();
@@ -149,6 +173,7 @@
       closeModal();
     }
   };
+
   const handleSubmit = async () => {
     if (activeKey.value == '1') {
       const valueAttr = await AttrRef.value?.getFormData();

@@ -17,18 +17,21 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, unref } from 'vue';
+  import { unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { attrSchemas } from './config';
   import { useModal } from '/@/components/Modal';
-  import { validateValueStruct } from '../hook/useValidateParital';
-  import { useChangeTypeGetTypeForm, useGetInOrOutData } from '../hook/useTypeGetForm';
+  import useParitalValid from '../hook/useParitalValid';
+  import useCommon from '../hook/useCommon';
   import AddParamsModal from './components/AddParamsModal.vue';
   import CommomParam from './components/CommomParam.vue';
+  import useDefineVar from '../hook/useDefineVar';
 
-  const inputParamData: any = ref([]);
+  const { useChangeTypeGetTypeForm, useGetInOrOutData } = useCommon();
 
-  const CommomParamInParamRef = ref<InstanceType<typeof CommomParam>>();
+  const { validateValueStruct } = useParitalValid();
+
+  const { inputParamData, CommomParamInParamRef } = useDefineVar();
 
   const [registerModal, { openModal }] = useModal();
 

@@ -17,17 +17,18 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, unref } from 'vue';
+  import { unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { eventSchemas } from './config';
   import { useModal } from '/@/components/Modal';
   import AddParamsModal from './components/AddParamsModal.vue';
   import CommomParam from './components/CommomParam.vue';
-  import { useGetInOrOutData } from '../hook/useTypeGetForm';
+  import useCommon from '../hook/useCommon';
+  import useDefineVar from '../hook/useDefineVar';
 
-  const inputParamData: any = ref([]);
+  const { useGetInOrOutData } = useCommon();
 
-  const CommomParamInParamRef = ref<InstanceType<typeof CommomParam>>();
+  const { inputParamData, CommomParamInParamRef } = useDefineVar();
 
   const [registerModal, { openModal }] = useModal();
 

@@ -28,21 +28,19 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, unref } from 'vue';
+  import { unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { serviceSchemas } from './config';
   import { useModal } from '/@/components/Modal';
   import AddParamsModal from './components/AddParamsModal.vue';
   import CommomParam from './components/CommomParam.vue';
-  import { useGetInOrOutData } from '../hook/useTypeGetForm';
+  import useCommon from '../hook/useCommon';
+  import useDefineVar from '../hook/useDefineVar';
 
-  const inputParamData: any = ref([]);
+  const { inputParamData, outputParamData, CommomParamInParamRef, CommomParamOutParamRef } =
+    useDefineVar();
 
-  const outputParamData: any = ref([]);
-
-  const CommomParamInParamRef = ref<InstanceType<typeof CommomParam>>();
-
-  const CommomParamOutParamRef = ref<InstanceType<typeof CommomParam>>();
+  const { useGetInOrOutData } = useCommon();
 
   const [registerModal, { openModal }] = useModal();
 

@@ -3,7 +3,7 @@
     <div>
       <Typography>
         <TypographyParagraph>
-          <blockquote style="background: #f2f2f2">{{ blockContent }}</blockquote>
+          <blockquote style="background: #f2f2f2">{{ useBlockContent }}</blockquote>
         </TypographyParagraph>
       </Typography>
     </div>
@@ -38,14 +38,18 @@
   import 'jsoneditor/dist/jsoneditor.min.css';
   import { Button, Typography, TypographyParagraph } from 'ant-design-vue';
   import { defaultTslContent } from './config';
+  import useCommon from '../hook/useCommon';
 
   const { createMessage } = useMessage();
-  const blockContent = `物模型是对设备在云端的功能描述，包括设备的属性、服务和事件。物联网平台通过定义一种物的描述语言来描述物模型，称之为 TSL（即 Thing 
-Specification Language），采用 JSON 格式，您可以根据 TSL 组装上报设备的数据。您可以导出完整物模型，用于云端应用开发；您也可以只导出
-精简物模型，配合设备端 SDK 实现设备开发。`;
+
+  const { useBlockContent } = useCommon();
+
   const jsonValue = ref(defaultTslContent);
+
   const jsonInstance = ref();
+
   const jsoneditorRef = ref();
+
   onMounted(() => {
     nextTick(() => {
       let options = {
@@ -58,7 +62,9 @@ Specification Language），采用 JSON æ ¼å¼ï¼Œæ‚¨å¯ä»¥æ ¹æ® TSL 组装上æŠ
       jsonInstance.value = editor;
     });
   });
+
   const { clipboardRef, copiedRef } = useCopyToClipboard();
+
   const handleCopy = () => {
     try {
       const valueRef = unref(jsonInstance).get();
@@ -81,9 +87,11 @@ Specification Language），采用 JSON æ ¼å¼ï¼Œæ‚¨å¯ä»¥æ ¹æ® TSL 组装上æŠ
     if (!value) return;
     return value;
   };
+
   const resetFormData = () => {
     unref(jsonInstance).set(defaultTslContent);
   };
+
   const handlePremitter = () => {
     const value = unref(jsonInstance).get();
     return unref(jsonInstance).set(value);

@@ -17,23 +17,20 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, unref } from 'vue';
+  import { unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { addParamsSchemas } from '../config';
   import { useModal } from '/@/components/Modal';
-  import {
-    useChangeTypeGetTypeForm,
-    useGetInOrOutData,
-    useUpdateFormExcludeStruct,
-  } from '../../hook/useTypeGetForm';
+  import useCommon from '../../hook/useCommon';
   import AddParamsModal from './AddParamsModal.vue';
   import CommomParam from './CommomParam.vue';
+  import useDefineVar from '../../hook/useDefineVar';
 
   defineEmits(['register']);
 
-  const inputParamData: any = ref([]);
+  const { inputParamData, CommomParamInParamRef } = useDefineVar();
 
-  const CommomParamInParamRef = ref<InstanceType<typeof CommomParam>>();
+  const { useChangeTypeGetTypeForm, useGetInOrOutData, useUpdateFormExcludeStruct } = useCommon();
 
   const [registerModal, { openModal }] = useModal();
 

@@ -17,16 +17,24 @@
   import { ref, computed, reactive } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import AddParamForm from './AddParamForm.vue';
-  import { validateValueStruct } from '../../hook/useValidateParital';
+  import useParitalValid from '../../hook/useParitalValid';
 
   const emits = defineEmits(['register', 'data']);
+
+  const { validateValueStruct } = useParitalValid();
+
   const setEditData: any = reactive({
     getEditData: {},
   });
+
   const AddParamFormRef = ref<InstanceType<typeof AddParamForm>>();
+
   const isUpdate = ref(false);
+
   const isFlag = ref('');
+
   const excludeStruct = ref(false);
+
   const getTitle = computed(() => (!isUpdate.value ? '编辑参数' : '新增参数'));
 
   const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {

@@ -15,6 +15,7 @@
 </template>
 <script lang="ts" setup>
   const emit = defineEmits(['delete', 'edit']);
+
   const props = defineProps({
     index: {
       type: Number,

 import { buildUUID } from '/@/utils/uuid';
 
-//模拟阿里云属性服务事件服务端格式
+//模拟的阿里云（属性、服务、事件）服务端格式
 export const mockData = {
   _ppk: {},
   events: [

-import { validateValueBool, validateValueRangeAndStep } from './useValidateParital';
+import useParitalValid from './useParitalValid';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { buildUUID } from '/@/utils/uuid';
 
-///根据不同数据类型得到不同表单数据
+///根据不同数据类型得到不同表单数据（模拟的阿里云数据结构）
 type TForm = {
   dataType: string;
   max?: string;
@@ -17,100 +17,120 @@ type TForm = {
     max: string;
   };
 };
-export const useChangeTypeGetTypeForm = (type, options: TForm) => {
-  switch (type) {
-    //INT和DOUBLE收集表单一样
-    case 'INT':
-      validateValueRangeAndStep(
-        Number(options?.valueRange?.min),
-        Number(options?.step),
-        Number(options?.valueRange?.max)
-      );
-      return {
-        dataType: options?.dataType,
-        max: options?.valueRange?.max,
-        min: options?.valueRange?.min,
-        step: options?.step,
-        unit: options?.unit,
-      };
-    case 'DOUBLE':
-      validateValueRangeAndStep(
-        Number(options?.valueRange?.min),
-        Number(options?.step),
-        Number(options?.valueRange?.max)
-      );
-      return {
-        dataType: options?.dataType,
-        max: options?.valueRange?.max,
-        min: options?.valueRange?.min,
-        step: options?.step,
-        unit: options?.unit,
-      };
-    case 'BOOL':
-      validateValueBool(Number(options?.boolClose), Number(options?.boolOpen));
-      return [
-        {
+
+export default () => {
+  const { validateValueRangeAndStep, validateValueBool } = useParitalValid();
+
+  const useChangeTypeGetTypeForm = (type, options: TForm) => {
+    switch (type) {
+      //INT和DOUBLE收集表单一样
+      case 'INT':
+        validateValueRangeAndStep(
+          Number(options?.valueRange?.min),
+          Number(options?.step),
+          Number(options?.valueRange?.max)
+        );
+        return {
           dataType: options?.dataType,
-          name: options?.boolClose,
-          value: 0,
-        },
-        {
+          max: options?.valueRange?.max,
+          min: options?.valueRange?.min,
+          step: options?.step,
+          unit: options?.unit,
+        };
+      case 'DOUBLE':
+        validateValueRangeAndStep(
+          Number(options?.valueRange?.min),
+          Number(options?.step),
+          Number(options?.valueRange?.max)
+        );
+        return {
           dataType: options?.dataType,
-          name: options?.boolOpen,
-          value: 1,
-        },
-      ];
-    case 'TEXT':
-      return {
-        dataType: options?.dataType,
-        length: Number(options?.length),
-      };
-  }
-};
+          max: options?.valueRange?.max,
+          min: options?.valueRange?.min,
+          step: options?.step,
+          unit: options?.unit,
+        };
+      case 'BOOL':
+        validateValueBool(Number(options?.boolClose), Number(options?.boolOpen));
+        return [
+          {
+            dataType: options?.dataType,
+            name: options?.boolClose,
+            value: 0,
+          },
+          {
+            dataType: options?.dataType,
+            name: options?.boolOpen,
+            value: 1,
+          },
+        ];
+      case 'TEXT':
+        return {
+          dataType: options?.dataType,
+          length: Number(options?.length),
+        };
+    }
+  };
 
-//是否排除结构体
-export const useUpdateFormExcludeStruct = async (F, U) => {
-  const res: any = await findDictItemByCode({ dictCode: 'data_type' });
-  const optionTrue = res
-    .map((m) => {
-      if (F) {
-        if (m.itemValue !== 'STRUCT') {
+  //是否排除结构体
+  const useUpdateFormExcludeStruct = async (F, U) => {
+    const res: any = await findDictItemByCode({ dictCode: 'data_type' });
+    const optionTrue = res
+      .map((m) => {
+        if (F) {
+          if (m.itemValue !== 'STRUCT') {
+            return {
+              value: m.itemValue,
+              label: m.itemText,
+            };
+          }
+        } else {
           return {
             value: m.itemValue,
             label: m.itemText,
           };
         }
+      })
+      .filter(Boolean);
+    U({
+      field: 'dataType',
+      componentProps: {
+        options: optionTrue,
+      },
+    });
+  };
+
+  //获取输入参数或者输出参数弹窗数据
+  const useGetInOrOutData = (d, f, inputData, outputData) => {
+    if (f == 'input') {
+      if (d.id !== null) {
+        const findIndex = inputData.findIndex((f) => f.id == d.id);
+        if (findIndex !== -1) inputData.splice(findIndex, 1, d);
       } else {
-        return {
-          value: m.itemValue,
-          label: m.itemText,
-        };
+        inputData.push({ ...d, id: buildUUID() });
       }
-    })
-    .filter(Boolean);
-  U({
-    field: 'dataType',
-    componentProps: {
-      options: optionTrue,
-    },
-  });
-};
-
-//获取输入参数或者输出参数弹窗数据
-export const useGetInOrOutData = (d, f, inputData, outputData) => {
-  if (f == 'input') {
-    if (d.id !== null) {
-      const findIndex = inputData.findIndex((f) => f.id == d.id);
-      if (findIndex !== -1) inputData.splice(findIndex, 1, d);
     } else {
-      inputData.push({ ...d, id: buildUUID() });
-    }
-  } else {
-    if (d.id !== null) {
-      const findIndex = outputData.findIndex((f) => f.id == d.id);
-      if (findIndex !== -1) outputData.splice(findIndex, 1, d);
-    } else {
-      outputData.push({ ...d, id: buildUUID() });
+      if (d.id !== null) {
+        const findIndex = outputData.findIndex((f) => f.id == d.id);
+        if (findIndex !== -1) outputData.splice(findIndex, 1, d);
+      } else {
+        outputData.push({ ...d, id: buildUUID() });
+      }
     }
-  }
+  };
+
+  const useBlockContent = `物模型是对设备在云端的功能描述，包括设备的属性、服务和事件。物联网平台通过定义一种物的描述语言来描述物模型，称之为 TSL（即 Thing 
+  Specification Language），采用 JSON 格式，您可以根据 TSL 组装上报设备的数据。您可以导出完整物模型，用于云端应用开发；您也可以只导出
+  精简物模型，配合设备端 SDK 实现设备开发。`;
+
+  const useBlockPhysicalContent = `属性一般是设备的运行状态，如当前温度等；服务是设备可被调用的方法，支持定义参数，如执行某项任务；事件则是设备上报的
+  通知，如告警，需要被及时处理。`;
+
+  return {
+    useChangeTypeGetTypeForm,
+    useUpdateFormExcludeStruct,
+    useGetInOrOutData,
+    useBlockContent,
+    useBlockPhysicalContent,
+  };
 };

+import { ref } from 'vue';
+import CommomParam from './components/CommomParam.vue';
+
+export default () => {
+  const inputParamData: any = ref([]);
+  const outputParamData: any = ref([]);
+  const CommomParamInParamRef = ref<InstanceType<typeof CommomParam>>();
+  const CommomParamOutParamRef = ref<InstanceType<typeof CommomParam>>();
+
+  return {
+    inputParamData,
+    outputParamData,
+    CommomParamInParamRef,
+    CommomParamOutParamRef,
+  };
+};

@@ -4,27 +4,34 @@
 import { useMessage } from '/@/hooks/web/useMessage';
 const { createMessage } = useMessage();
 
-export const validateValueRangeAndStep = (min, step, max) => {
-  if (min > max) {
-    createMessage.error('最大值必须大于最小值，整数型不能有小数位，单精度有效位为7，双精度为16');
-    throw '最大值必须大于最小值，整数型不能有小数位，单精度有效位为7，双精度为16';
-  }
-  if (step > max - min) {
-    createMessage.error('步长不能大于取值范围的差值');
-    throw '步长不能大于取值范围的差值';
-  }
-};
+export default () => {
+  const validateValueRangeAndStep = (min, step, max) => {
+    if (min > max) {
+      createMessage.error('最大值必须大于最小值，整数型不能有小数位，单精度有效位为7，双精度为16');
+      throw '最大值必须大于最小值，整数型不能有小数位，单精度有效位为7，双精度为16';
+    }
+    if (step > max - min) {
+      createMessage.error('步长不能大于取值范围的差值');
+      throw '步长不能大于取值范围的差值';
+    }
+  };
 
-export const validateValueBool = (boolClose, boolOpen) => {
-  if (boolClose == boolOpen) {
-    createMessage.error('布尔值不能相同');
-    throw '布尔值不能相同';
-  }
-};
+  const validateValueBool = (boolClose, boolOpen) => {
+    if (boolClose == boolOpen) {
+      createMessage.error('布尔值不能相同');
+      throw '布尔值不能相同';
+    }
+  };
 
-export const validateValueStruct = (data: []) => {
-  if (data.length === 0) {
-    createMessage.error('struct不能为空');
-    throw 'struct不能为空';
-  }
+  const validateValueStruct = (data: []) => {
+    if (data.length === 0) {
+      createMessage.error('struct不能为空');
+      throw 'struct不能为空';
+    }
+  };
+  return {
+    validateValueRangeAndStep,
+    validateValueBool,
+    validateValueStruct,
+  };
 };

+export interface IAllData {
+  properties: string[];
+  events: string[];
+  services: string[];
+  productKey: '';
+  _ppk: {};
+}