fix：修复绑定数据相关bug

src/services/utils.ts

@@ -221,3 +221,61 @@ export function checkData(data: Meta2dData) {
     data.mqttOptions = {};
   }
 }
+export const transformData = (obj,operation) => {
+  let newObj:any = null;
+  if(operation == 'toMetaNetwork') {
+    newObj = {
+      name:obj.name,
+      id:obj.id,
+      type:obj.type,
+      ...obj.data
+    }
+  } else {
+    newObj = {
+      name:obj.name,
+      type:obj.type,
+      data:{}
+    }
+    if(obj.id) {
+      newObj.id = obj.id;
+    }
+    if(obj.type == 'dataset') {
+      newObj.data = {
+        devices:obj.devices,
+        mode: obj.mode,
+        url: obj.url
+      }
+    } else {
+      if( obj.protocol == 'http') {
+        newObj.data = {
+          body: obj.body,
+          headers: obj.headers,
+          httpTimeInterval: obj.httpTimeInterval,
+          method: obj.method,
+          url: obj.url,
+          protocol: obj.protocol
+        }
+      } else {
+        newObj.data = {
+          options:obj.options,
+          protocol: obj.protocol,
+          topics: obj.topics,
+          url: obj.url
+        }
+      }
+    } 
+    // return {
+    //   data:{
+    //     body: obj.body,
+    //     headers: obj.headers,
+    //     httpTimeInterval: obj.httpTimeInterval,
+    //     method: obj.method,
+    //     options:obj.options,
+    //     protocol: obj.protocol,
+    //     topics: obj.topics,
+    //     url: obj.url
+    //   }
+    // }
+  }
+  return newObj;
+}

src/views/components/Actions.vue

@@ -497,7 +497,7 @@ const onChangeAction = (action: any) => {
       action.targetType = 'id';
       break;
     case 15:
-      action.network = {data:{ protocol: 'mqtt', options: {}},type: 'publish', };
+      action.network = {type: 'publish',protocol: 'mqtt', options: {}};
       action.params = '';
       action.value = {};
       action.targetType = 'id';

src/views/components/Dataset.vue

@@ -7,14 +7,14 @@
 
     <div class="form-item mt-8">
       <label>数据方式</label>
-      <t-radio-group v-model="modelValue.data.mode">
+      <t-radio-group v-model="modelValue.mode">
         <t-radio value="api">HTTP请求</t-radio>
         <t-radio value="">自定义</t-radio>
       </t-radio-group>
     </div>
-    <div v-if="modelValue.data.mode === 'api'" class="form-item mt-8">
+    <div v-if="modelValue.mode === 'api'" class="form-item mt-8">
       <label>URL地址</label>
-      <t-input v-model="modelValue.data.url" @blur="getDatas" @enter="getDatas" />
+      <t-input v-model="modelValue.url" @blur="getDatas" @enter="getDatas" />
     </div>
     <template v-else>
       <div class="form-item mt-8">
@@ -43,7 +43,7 @@
     <t-table
       class="mt-16"
       row-key="id"
-      :data="modelValue.data.devices"
+      :data="modelValue.devices"
       :columns="datasetColumns"
       size="small"
     >
@@ -53,7 +53,7 @@
       <template v-if="!modelValue.mode" #actions="{ row, rowIndex }">
         <edit-icon class="hover" @click="showAddData(row, rowIndex)"/>
         <delete-icon class="ml-12 hover"
-          @click="modelValue.data.devices.splice(rowIndex, 1)"/>
+          @click="modelValue.devices.splice(rowIndex, 1)"/>
         <!-- <t-icon name="edit" class="hover" @click="showAddData(row, rowIndex)" />
         <t-icon
           name="delete"
@@ -182,22 +182,20 @@ const datasetColumns = ref([
 const addDataDialog = reactive<any>({});
 
 onBeforeMount(() => {
-  if (!modelValue.data) {
-    modelValue.data = {
-      devices:[]
-    }
+  if (!modelValue.devices) {
+    modelValue.devices = []
   }
 
   getDatas();
 });
 
 const getDatas = async () => {
-  if (!modelValue.data.url) {
+  if (!modelValue.url) {
     return;
   }
-  const ret = await axios.get(modelValue.data.url);
+  const ret = await axios.get(modelValue.url);
   if (ret) {
-    modelValue.data.devices = Array.isArray(ret) ? ret: [];
+    modelValue.devices = ret;
   }
 };
 
@@ -225,7 +223,7 @@ const importDataset = async () => {
     },
   ];
   const data: any = await importExcel(columns);
-  modelValue.data.devices = data;
+  modelValue.devices = data;
   emit('update:modelValue', modelValue);
   emit('change', modelValue);
 };
@@ -253,9 +251,9 @@ const onOkAddData = () => {
     return;
   }
   if (addDataDialog.header === '添加数据') {
-    modelValue.data.devices.push(addDataDialog.data);
+    modelValue.devices.push(addDataDialog.data);
   } else {
-    modelValue.data.devices[addDataDialog.index] = addDataDialog.data;
+    modelValue.devices[addDataDialog.index] = addDataDialog.data;
 
     //更新所有绑定该id的pen label
     let binds = meta2d.store.bind[addDataDialog.data.id];
@@ -280,7 +278,7 @@ const changeDataID = (value) => {
     MessagePlugin.error('数据点id 不能为空！');
     return;
   }
-  let item = modelValue.data.devices.filter((item) => item.id === value);
+  let item = modelValue.devices.filter((item) => item.id === value);
   if (item && item.length) {
     MessagePlugin.error('数据点id重复！');
     return;

src/views/components/Network.vue

@@ -30,7 +30,7 @@
               @click="() => onSelect(item)"
             >
               名称: {{ item.name }}
-              <div class="desc">地址: {{ item.data.url }}</div>
+              <div class="desc">地址: {{ item.url }}</div>
 
               <span class="del" @click.stop="onDelNetWork(item, i)">
                 <delete-icon />
@@ -60,7 +60,7 @@
     <div class="form-item mt-8">
       <label>通信方式</label>
       <t-select
-        v-model="modelValue.data.protocol"
+        v-model="modelValue.protocol"
         placeholder="MQTT"
         @change="protocolChange"
       >
@@ -74,25 +74,25 @@
       <t-input
         :format="urlFormat"
         :placeholder="
-          modelValue.data.protocol !== 'http'
+          modelValue.protocol !== 'http'
             ? isSafeProtocol()
               ? '必须是wss协议'
               : '必须是ws协议'
             : '请输入'
         "
-        v-model="modelValue.data.url"
+        v-model="modelValue.url"
       />
     </div>
-    <template v-if="modelValue.data.protocol === 'websocket'">
+    <template v-if="modelValue.protocol === 'websocket'">
       <div class="form-item mt-8">
         <label>protocols</label>
-        <t-input v-model="modelValue.data.options.protocols" />
+        <t-input v-model="modelValue.options.protocols" />
       </div>
     </template>
-    <template v-else-if="modelValue.data.protocol === 'http'">
+    <template v-else-if="modelValue.protocol === 'http'">
       <div class="form-item mt-8">
         <label>请求方式</label>
-        <t-select v-model="modelValue.data.method" @change="httpMethodChange">
+        <t-select v-model="modelValue.method" @change="httpMethodChange">
           <t-option key="GET" value="GET" label="GET" />
           <t-option key="POST" value="POST" label="POST" />
         </t-select>
@@ -106,7 +106,7 @@
         /> -->
         <CodeEditor
           :json="true"
-          v-model="modelValue.data.headers"
+          v-model="modelValue.headers"
           class="mt-4"
           style="height: 50px"
         />
@@ -115,7 +115,7 @@
         <label></label>
         支持设置动态参数，例如：{"Authorization": "Bearer ${token}"}
       </div>
-      <div v-if="!mode && modelValue.data.method === 'POST'" class="form-item mt-8">
+      <div v-if="!mode && modelValue.method === 'POST'" class="form-item mt-8">
         <label>请求体</label>
         <!-- <t-textarea
           v-model="modelValue.body"
@@ -124,13 +124,13 @@
         /> -->
         <CodeEditor
           :json="true"
-          v-model="modelValue.data.body"
+          v-model="modelValue.body"
           class="mt-4"
           style="height: 50px"
         />
       </div>
       <div
-        v-if="!mode && modelValue.data.method === 'POST'"
+        v-if="!mode && modelValue.method === 'POST'"
         class="form-item mt-8 desc"
       >
         <label></label>
@@ -140,27 +140,27 @@
     <template v-else>
       <div class="form-item mt-8">
         <label>Client Id</label>
-        <t-input v-model="modelValue.data.options.clientId" />
+        <t-input v-model="modelValue.options.clientId" />
       </div>
       <div class="form-item mt-8">
         <label>自动生成</label>
         <t-switch
           class="mt-8 ml-8"
-          v-model="modelValue.data.options.customClientId"
+          v-model="modelValue.options.customClientId"
           size="small"
         />
       </div>
       <div class="form-item mt-8">
         <label>用户名</label>
-        <t-input v-model="modelValue.data.options.username" />
+        <t-input v-model="modelValue.options.username" />
       </div>
       <div class="form-item mt-8">
         <label>密码</label>
-        <t-input v-model="modelValue.data.options.password" />
+        <t-input v-model="modelValue.options.password" />
       </div>
       <div class="form-item mt-8">
         <label>Topics</label>
-        <t-input v-model="modelValue.data.topics" />
+        <t-input v-model="modelValue.topics" />
       </div>
     </template>
     <div class="form-item mt-8" v-if="mode">
@@ -179,6 +179,7 @@ import { debounce } from '@/services/debouce';
 import { MessagePlugin } from 'tdesign-vue-next';
 import CodeEditor from '@/views/components/common/CodeEditor.vue';
 import { DeleteIcon } from 'tdesign-icons-vue-next';
+import { transformData } from '@/services/utils';
 
 const { modelValue, mode } = defineProps<{
   modelValue: any;
@@ -198,7 +199,7 @@ onBeforeMount(() => {
 
 const protocolChange = (protocol: string) => {
   if (protocol === 'http') {
-    Object.assign(modelValue.data, {
+    Object.assign(modelValue, {
       httpTimeInterval: 1000,
       headers: '',
       method: 'GET',
@@ -207,7 +208,7 @@ const protocolChange = (protocol: string) => {
   } else if (protocol === 'websocket') {
     // modelValue.url = '';
   } else {
-    Object.assign(modelValue.data, {
+    Object.assign(modelValue, {
       options: {
         clientId: '',
         username: '',
@@ -220,7 +221,7 @@ const protocolChange = (protocol: string) => {
 
 const httpMethodChange = (method: string) => {
   if (method === 'GET') {
-    modelValue.data.body = undefined;
+    modelValue.body = undefined;
   }
 };
 
@@ -229,12 +230,12 @@ const onSave = async () => {
   emit('change', modelValue);
 
   let ret: any;
-
+  const data = transformData(modelValue,'toNetwork');
   // 保存到我的数据源
   if (modelValue.id) {
-    ret = await axios.post(`/api/data/datasource/update`, modelValue);
+    ret = await axios.post(`/api/data/datasource/update`, data);
   } else {
-    ret = await axios.post(`/api/data/datasource/add`, modelValue);
+    ret = await axios.post(`/api/data/datasource/add`, data);
   }
 
   if (ret) {
@@ -250,7 +251,7 @@ const onInput = (text: string) => {
 const getNetworks = async () => {
   const body: any = {
     type: modelValue.type,
-    projection: "id,data,name",
+    projection: "id,data,name,type",
   };
   if (modelValue.name) {
     body.name = modelValue.name;
@@ -262,10 +263,12 @@ const getNetworks = async () => {
     },
   });
   if (ret?.list) {
+    const list = [];
     for (const item of ret.list) {
       item.id = item.id || item._id;
+      list.push(transformData(item,'toMetaNetwork'));
     }
-    networkList.value = ret.list;
+    networkList.value = list;
   }
 };
 

src/views/components/PenDatas.vue

@@ -1006,8 +1006,8 @@ const getDataset = async () => {
   }
 
   dataBindDialog.loading = true;
-  if (data.dataset.data?.url) {
-    const ret: any = await axios.get(data.dataset.data.url, {
+  if (data.dataset.url) {
+    const ret: any = await axios.get(data.dataset.url, {
       params: {
         device: dataBindDialog.device || '',
         q: dataBindDialog.input,
@@ -1021,12 +1021,12 @@ const getDataset = async () => {
   } else {
     dataBindDialog.url = false;
     if (!dataBindDialog.datasetList) {
-      const ret = await axios.post(`/api/data/datasource/get`, {
+      const ret:any = await axios.post(`/api/data/datasource/get`, {
         id: data.dataset.id,
       });
-      if (ret?.data) {
-        data.dataset.data = ret.data;
-        dataBindDialog.datasetList = data.dataset.data.devices;
+      if (ret?.data?.devices) {
+        data.dataset.data = ret.data.devices;
+        dataBindDialog.datasetList = data.dataset.data;
         const set = new Set<string>();
         for (const item of dataBindDialog.datasetList) {
           set.add(item.device);

src/views/components/View.vue

@@ -463,10 +463,10 @@
                 size="small"
               >
                 <template #protocol="{ row, rowIndex }">
-                  {{ row.data.protocol || 'MQTT' }}
+                  {{ row.protocol || 'MQTT' }}
                 </template>
                 <template #url="{ row, rowIndex }">
-                  {{ row.data.url }}
+                  {{ row.url }}
                 </template>
                 <template #actions="{ row, rowIndex }">
                   <a @click="editNetwork(row, rowIndex)"> 编辑 </a>
@@ -558,7 +558,7 @@
               <t-table
                 class="mt-12"
                 row-key="id"
-                :data="dataDialog.dataset.data?.devices"
+                :data="dataDialog.dataset.devices"
                 :columns="datasetColumns"
                 size="small"
                 :max-height="280"
@@ -789,7 +789,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, watch, ref, reactive } from 'vue';
+import { onMounted, onUnmounted, watch, ref, reactive, toRaw } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import {
   Meta2d,
@@ -835,7 +835,7 @@ import Network from './Network.vue';
 import Dataset from './Dataset.vue';
 import ChargeCloudPublish from './ChargeCloudPublish.vue';
 import { AddIcon,SaveIcon, RootListIcon,SlashIcon, RefreshIcon, ServerIcon, CaretRightIcon, ShareIcon, QrcodeIcon, CloudIcon, DeleteIcon, SearchIcon, RollbackIcon, LaptopIcon, StopCircleIcon , PlayCircleIcon, PlayCircleStrokeIcon, LayersIcon } from 'tdesign-icons-vue-next';
-
+import {transformData} from '@/services/utils';
 
 const router = useRouter();
 const route = useRoute();
@@ -1343,15 +1343,7 @@ const networkColumns = ref([
 
 const onShowDataDialog = async () => {
   dataDialog.input = '';
-  if(meta2d.store.data.networks) {
-    const list = [];
-    for(const tem of meta2d.store.data.networks) {
-      list.push(transformData(tem,'toNetwork'))
-    }
-    dataDialog.networks = list;
-  } else {
-    dataDialog.networks = [];
-  }
+  dataDialog.networks = meta2d.store.data.networks || [];
   // @ts-ignore
   dataDialog.dataset = meta2d.store.data.dataset || {};
   dataDialog.datasetId = dataDialog.dataset.id;
@@ -1393,13 +1385,7 @@ const onSelectNetWork = (item: any) => {
   );
   if (!network) {
     dataDialog.networks.push(item);
-    if(!meta2d.store.data.networks) {
-      meta2d.store.data.networks = [];
-    }
-    const networkBak = JSON.parse(JSON.stringify(dataDialog.networks));
-    for(const tem of networkBak) {
-      meta2d.store.data.networks.push(transformData(tem,'toMetaNetwork'))
-    }
+    meta2d.store.data.networks = toRaw(dataDialog.networks);
     meta2d.connectNetwork();
     setDot(true);
   }
@@ -1439,57 +1425,24 @@ const getNetworks = async () => {
     }
   );
   if (ret?.list) {
+    const list = [];
     for (const item of ret.list) {
       item.id = item.id || item._id;
+      list.push(transformData(item,'toMetaNetwork'));
     }
-    dataDialog.networkList = ret.list;
-  }
-  if(meta2d.store.data.networks && meta2d.store.data.networks.length > 0) {
-    const list = []
-    for(let item  of meta2d.store.data.networks as any) {
-      if(item.data) {
-        const data = ret.list.find(tem => tem.id == item.id || tem.id == item._id);
-        list.push(transformData(data,'toMetaNetwork'));
-      }
-    }
-    meta2d.store.data.networks = list;
+    dataDialog.networkList = list;
   }
 };
 
 const onInputDatasets = (name: string) => {
   debounce(getDatasets, 300, name);
 };
-const transformData = (obj,operation) => {
-  if(operation == 'toMetaNetwork') {
-    return {
-      name:obj.name,
-      id:obj.id,
-      type:obj.type,
-      ...obj.data
-    }
-  } else {
-    return {
-      name:obj.name,
-      id:obj.id,
-      type:obj.type,
-      data:{
-        body: obj.body,
-        headers: obj.headers,
-        httpTimeInterval: obj.httpTimeInterval,
-        method: obj.method,
-        options:obj.options,
-        protocol: obj.protocol,
-        topics: obj.topics,
-        url: obj.url
-      }
-    }
-  }
-}
+
 // 请求我的数据模型
 const getDatasets = async (name?: string) => {
   const body: any = {
     type: 'dataset',
-    projection: "id,data,name",
+    projection: "id,data,name,type",
   };
   if (name) {
     body.name = name;
@@ -1501,18 +1454,20 @@ const getDatasets = async (name?: string) => {
     },
   });
   if (ret?.list) {
+    const list = [];
     let found = false;
     for (const item of ret.list) {
       item.id = item.id || item._id;
+      list.push(transformData(item,'toMetaNetwork'));
       if (dataDialog.dataset?.id === item.id) {
         found = true;
       }
     }
     if (dataDialog.dataset?.id && !found) {
-      ret.list.push(dataDialog.dataset);
+      list.push(dataDialog.dataset);
     }
 
-    dataDialog.datasetList = ret.list;
+    dataDialog.datasetList = list;
   }
 };
 
@@ -1520,16 +1475,14 @@ const addNetwork = () => {
   dataDialog.network = {
     name: '',
     type: 'subscribe',
-    data:{
-      protocol: 'mqtt',
-      url: '',
-      options: {
-        clientId: '',
-        username: '',
-        password: '',
-        customClientId: false,
-      },
-    }
+    protocol: 'mqtt',
+    url: '',
+    options: {
+      clientId: '',
+      username: '',
+      password: '',
+      customClientId: false,
+    },
   };
   dataDialog.editNetwork = 1;
 };
@@ -1543,21 +1496,18 @@ const editNetwork = (data: any, index: number) => {
 
 const deleteNetwork = (index: number) => {
   dataDialog.networks.splice(index, 1);
-  const list = [];
-  for(const tem of dataDialog.networks) {
-    list.push(transformData(tem,'toMetaNetwork'))
-  }
-  meta2d.store.data.networks = list;
+  meta2d.store.data.networks = toRaw(dataDialog.networks);
   meta2d.connectNetwork();
   setDot(true);
 };
 
 const onOkNetwork = async () => {
+  const data = transformData(dataDialog.network,'toNetwork');
   if (dataDialog.editNetwork === 1) {
     if (dataDialog.save) {
       const ret: any = await axios.post(
         `/api/data/datasource/add`,
-        dataDialog.network
+        data
       );
       if (!ret) {
         return;
@@ -1571,7 +1521,7 @@ const onOkNetwork = async () => {
     if (dataDialog.save) {
       const ret: any = await axios.post(
         `/api/data/datasource/update`,
-        dataDialog.network
+        data
       );
       if (!ret) {
         return;
@@ -1585,11 +1535,7 @@ const onOkNetwork = async () => {
     }
   }
   dataDialog.editNetwork = false;
-  const list = [];
-  for(const tem of dataDialog.networks) {
-    list.push(transformData(tem,'toMetaNetwork'))
-  }
-  meta2d.store.data.networks = list;
+  meta2d.store.data.networks =  toRaw(dataDialog.networks);
   meta2d.connectNetwork();
   setDot(true);
 
@@ -1628,11 +1574,9 @@ const addDataset = () => {
   dataDialog.dataset = {
     name: '',
     type: 'dataset',
-    data: {
-      devices:[],
-      mode: 'api',
-      url: '',
-    },
+    devices:[],
+    mode: 'api',
+    url: '',
   };
   dataDialog.editDataset = 1;
 };
@@ -1659,13 +1603,15 @@ const onOkDataset = async (saveas = false) => {
   }
 
   const dataset = JSON.parse(JSON.stringify(dataDialog.dataset));
-
+  let data = dataset;
+  data.type = 'dataset';
+  data = transformData(dataset,'toNetwork');
   // 保存到我的数据源
   if (saveas || dataDialog.editDataset === 1) {
     delete dataset.id;
     delete dataset._id;
     dataset.type = 'dataset';
-    const ret: any = await axios.post(`/api/data/datasource/add`, dataset);
+    const ret: any = await axios.post(`/api/data/datasource/add`, data);
     if (!ret) {
       return;
     }
@@ -1674,7 +1620,7 @@ const onOkDataset = async (saveas = false) => {
     dataset.id = ret.id;
     dataDialog.datasetList.push(dataset);
   } else {
-    const ret: any = await axios.post(`/api/data/datasource/update`, dataset);
+    const ret: any = await axios.post(`/api/data/datasource/update`, data);
     if (!ret) {
       return;
     }
@@ -1684,9 +1630,7 @@ const onOkDataset = async (saveas = false) => {
       }
     });
   }
-  delete dataset.data.devices;
-  delete dataset.data.updatedAt;
-  delete dataset.data.createdAt;
+  delete dataset.devices;
   // @ts-ignore
   meta2d.store.data.dataset = dataset;
 
@@ -1727,14 +1671,14 @@ const onSelDataset = async (init = false) => {
     if (dataset.url) {
       const ret = await axios.get(dataset.url);
       if (ret) {
-        dataset.data.devices = ret;
+        dataset.devices = ret;
       }
     } else {
       const ret = await axios.post(`/api/data/datasource/get`, {
         id: dataset.id,
       });
       if (ret?.data) {
-        dataset.data = ret.data;
+        Object.assign(dataset,{...ret.data});
       }
     }
 
@@ -1742,9 +1686,7 @@ const onSelDataset = async (init = false) => {
 
     if (!init) {
       const d = JSON.parse(JSON.stringify(dataset));
-      delete d.data.devices;
-      delete dataset.data.updatedAt;
-      delete dataset.data.createdAt;
+      delete d.devices;
       // @ts-ignore
       meta2d.store.data.dataset = d;