feat:数据-文案

src/views/components/Data.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="content" :draggable="false" v-if="group === '列表'">
+  <div class="content" :draggable="false" v-if="group === '属性'">
     <div class="flex between">
-      <div class="title">数据{{ group }}</div>
+      <div class="title">{{ group }}列表</div>
       <div class="flex between">
         <t-dropdown :minColumnWidth="168" :hide-after-item-click="false">
-          <t-tooltip content="导入数据列表" placement="top">
+          <t-tooltip content="导入属性列表" placement="top">
             <div class="icon-box" @mouseenter="getDatasets()">
               <!-- <FileImportIcon /> -->
               <AddIcon />
@@ -13,17 +13,10 @@
 
           <t-dropdown-menu>
             <t-dropdown-item :value="2" :divider="true" @click="showAddData()">
-              新建变量
+              新建属性
             </t-dropdown-item>
             <t-dropdown-item :value="1">
-              <!-- <t-dropdown
-                :minColumnWidth="168"
-                :maxColumnWidth="300"
-                :trigger="'click'"
-                :hide-after-item-click="false"
-               
-              > -->
-              我的变量列表
+              我的属性列表
               <!-- </t-dropdown> -->
               <t-dropdown-menu>
                 <t-dropdown-item v-if="!user.id"> 请先登录! </t-dropdown-item>
@@ -109,7 +102,7 @@
           </t-dropdown-menu>
         </t-dropdown>
         <t-dropdown :minColumnWidth="168">
-          <t-tooltip content="导出数据列表" placement="top">
+          <t-tooltip content="导出属性列表" placement="top">
             <div class="icon-box">
               <!-- <FileExportIcon /> -->
               <Download1Icon />
@@ -123,12 +116,12 @@
               >下载为Excel</t-dropdown-item
             >
             <t-dropdown-item @click="onOkDataset()"
-              >保存为我的数据列表</t-dropdown-item
+              >保存为我的属性列表</t-dropdown-item
             >
           </t-dropdown-menu>
         </t-dropdown>
         <t-popconfirm
-          content="确认清空数据列表吗？"
+          content="确认清空属性列表吗？"
           placement="bottom"
           @confirm="clearData"
         >
@@ -138,7 +131,7 @@
             </div>
           </t-tooltip>
         </t-popconfirm>
-        <!-- <t-tooltip content="新建变量" placement="top">
+        <!-- <t-tooltip content="新建属性" placement="top">
           <div class="icon-box">
             <AddIcon @click="showAddData()" />
           </div>
@@ -164,7 +157,7 @@
         v-model="search"
         @change="onSearch"
         @enter="onSearch"
-        placeholder="搜索我的数据列表"
+        placeholder="搜索我的属性列表"
       />
     </div>
     <div
@@ -264,7 +257,7 @@
                 <div :title="device.label">{{ device.label }}</div>
               </div> -->
               <div class="form-item form-data-item">
-                <label>变量名：</label>
+                <label>属性名：</label>
                 <div :title="device.id">{{ device.id }}</div>
               </div>
               <div class="form-item form-data-item">
@@ -284,15 +277,15 @@
       <img src="/img/no-data.png" />
       <div class="gray center">暂无数据</div>
       <div class="mt-20">
-        <t-button theme="primary" @click="showAddData()"> 新建变量 </t-button>
+        <t-button theme="primary" @click="showAddData()"> 新建属性 </t-button>
       </div>
     </div>
   </div>
-  <div class="content" v-if="group === '获取'">
+  <div class="content" v-if="group === '数据源'">
     <div class="flex between">
-      <div class="title">数据{{ group }}</div>
+      <div class="title">{{ group }}</div>
       <div class="flex between">
-        <t-tooltip content="添加数据获取" placement="top">
+        <t-tooltip content="添加数据源" placement="top">
           <div class="icon-box" @click="addNetwork()">
             <AddIcon />
           </div>
@@ -304,7 +297,7 @@
         v-model="data.networkId"
         filterable
         clearable
-        placeholder="搜索我的数据获取"
+        placeholder="搜索我的数据源"
         @focus="onInputNetwork"
         :on-search="onInputNetwork"
         @change="onSelectNetWork"
@@ -390,12 +383,12 @@
       <div class="gray center">暂无数据</div>
       <div class="mt-20">
         <t-button theme="primary" @click="addNetwork()">
-          添加数据获取
+          添加数据源
         </t-button>
       </div>
     </div>
   </div>
-  <div class="content" v-if="group === '监听'">
+  <div class="content" v-if="group === '解析'">
     <div class="flex between">
       <div class="title">数据{{ group }}</div>
     </div>
@@ -429,7 +422,7 @@
             :content="
               data.dataset?.devices?.length
                 ? '添加一条数据模拟'
-                : '请先添加数据列表'
+                : '请先添加属性列表'
             "
             placement="top"
           >
@@ -439,7 +432,7 @@
           </t-tooltip>
           <t-dropdown-menu v-if="data.dataset?.devices?.length">
             <t-dropdown-item >
-              <div class="hover-background item" @click="onAddAllMock">导入所有数据列表</div>
+              <div class="hover-background item" @click="onAddAllMock">导入所有属性列表</div>
             </t-dropdown-item>
             <t-dropdown-item v-for="(dataset, i) in data.dataset?.devices">
               <div class="hover-background item" @click="onAddmock(dataset)">
@@ -482,7 +475,7 @@
                 <div :title="item.name">{{ item.name }}</div>
               </div>
               <div class="form-item form-data-item mt-8">
-                <label>变量名</label>
+                <label>属性名</label>
                 <div :title="item.id">{{ item.id }}</div>
               </div>
               <div class="form-item form-data-item form-mock-item mt-8">
@@ -552,15 +545,15 @@
       <t-input
         @change="changeDataLabel($event)"
         :value="addDataDialog.data.label"
-        placeholder="变量简短描述"
+        placeholder="属性简短描述"
       />
     </div>
     <div class="form-item mt-16">
-      <label>变量名</label>
+      <label>属性名</label>
       <t-input
         @change="changeDataID($event)"
         :value="addDataDialog.data.id"
-        placeholder="变量名"
+        placeholder="属性名"
       />
     </div>
     <div class="form-item mt-16">
@@ -616,7 +609,7 @@
     <template #footer>
       <div class="flex mr-8" style="justify-content: end">
         <t-checkbox v-model="networkDialog.save" class="mr-12">
-          同时保存到我的数据获取
+          同时保存到我的数据源
         </t-checkbox>
         <t-button @click="onOkNetwork">确定</t-button>
       </div>
@@ -647,7 +640,7 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, defineComponent, ref, onMounted, toRaw } from 'vue';
+import { reactive, defineComponent, ref, onMounted, toRaw, watch } from 'vue';
 import {
   FileImportIcon,
   FileExportIcon,
@@ -682,6 +675,8 @@ import Network from '@/views/components/Network.vue';
 import CodeEditor from '@/views/components/common/CodeEditor.vue';
 import { s8 } from '@/services/random';
 import { useUser } from '@/services/user';
+// import { doSqlCode, subscribeProperties } from '@/services/iot';
+// import * as mqtt from 'mqtt/dist/mqtt.min.js';
 
 const props = defineProps<{
   group: string;
@@ -784,12 +779,12 @@ const changeDataLabel = (value) => {
 
 const changeDataID = (value) => {
   if (!value) {
-    MessagePlugin.error('变量名不能为空！');
+    MessagePlugin.error('属性名不能为空！');
     return;
   }
   let item = data.dataset.devices?.filter((item) => item.id === value);
   if (item && item.length) {
-    MessagePlugin.error('变量名重复！');
+    MessagePlugin.error('属性名重复！');
     return;
   }
   addDataDialog.data.id = value;
@@ -841,7 +836,7 @@ const importDataset = async () => {
       key: 'label',
     },
     {
-      header: '变量名',
+      header: '属性名',
       key: 'id',
     },
     {
@@ -866,7 +861,7 @@ const importDataset = async () => {
 
 const downloadAsExcel = () => {
   if (!(data.dataset.devices && data.dataset.devices.length)) {
-    MessagePlugin.error('变量列表不能为空！');
+    MessagePlugin.error('属性列表不能为空！');
     return;
   }
   const name = meta2d.store.data.name;
@@ -877,7 +872,7 @@ const downloadAsExcel = () => {
     },
     {
       key: 'id',
-      header: '变量名',
+      header: '属性名',
     },
     {
       key: 'type',
@@ -893,7 +888,7 @@ const downloadAsExcel = () => {
 
 const downloadAsJson = () => {
   if (!(data.dataset.devices && data.dataset.devices.length)) {
-    MessagePlugin.error('变量列表不能为空！');
+    MessagePlugin.error('属性列表不能为空！');
     return;
   }
   import('file-saver').then(({ saveAs }) => {
@@ -912,7 +907,7 @@ const onOkDataset = async (saveas = false) => {
   //   return;
   // }
   if (!(data.dataset.devices && data.dataset.devices.length)) {
-    MessagePlugin.error('变量列表不能为空');
+    MessagePlugin.error('属性列表不能为空');
     return;
   }
   const dataset = JSON.parse(JSON.stringify(data.dataset));
@@ -1204,7 +1199,7 @@ const editNetwork = (network: any, index: number) => {
   networkDialog.network = JSON.parse(JSON.stringify(network));
   networkDialog.editNetwork = 2;
   networkDialog.editNetworkIndex = index;
-  networkDialog.header = '编辑数据获取';
+  networkDialog.header = '编辑数据源';
   networkDialog.show = true;
 };
 
@@ -1222,14 +1217,39 @@ const addNetwork = () => {
     },
   };
   networkDialog.editNetwork = 1;
-  networkDialog.header = '添加数据获取';
+  networkDialog.header = '添加数据源';
   networkDialog.show = true;
 };
 
 const onOkNetwork = async () => {
   const _data = transformData(networkDialog.network, 'toNetwork');
+  // if(_data.data.protocol === 'sql'){
+  //   console.log("data",_data.data);
+  //     await doSqlCode('list',_data.data.dbId,_data.data.sql);
+  //   // return
+  // }else if(_data.data.protocol === 'device'){
+  //   console.log("data",_data.data);
+  //  const res =  await subscribeProperties(_data.data.devices);
+  //  let token = res.token;
+  //  const websocket = new WebSocket(
+  //       'ws://192.168.110.6/api/ws/iot/properties',
+  //       token
+  //     );
+  // websocket.onmessage = (e) => {
+  //    console.log("消息",e);      
+  //  };
+  //  let mqttClient = mqtt.connect('ws://192.168.110.9:8083/mqtt', {
+  //         // clientId: '',
+  //         // username: '',
+  //         // password: '',
+  //       });
+  //       mqttClient.on('message', (topic: string, message: Buffer) => {
+  //         console.log('mqttClient message', topic, message.toString());
+  //       })
+  //       mqttClient.subscribe(`le5le-iot/properties/${token}`);
+  // }
   if (networkDialog.editNetwork === 1) {
-    if (!networkDialog.network.url) {
+    if (['mqtt','websocket','http'].includes(networkDialog.network.protocol)&& !networkDialog.network.url) {
       MessagePlugin.error('URL地址不能为空！');
       return;
     }

src/views/components/Graphics.vue

@@ -539,17 +539,17 @@ const userGroups = [
 const dataGroups = [
   {
     icon: 'data',
-    name: '列表',
+    name: '数据源',
     key: '',
   },
   {
     icon: 'install',
-    name: '获取',
+    name: '属性',
     key: '',
   },
   {
     icon: 'code',
-    name: '监听',
+    name: '解析',
     key: 'chart',
   },
   // {
@@ -620,7 +620,7 @@ const assetsChange = (value) => {
     activedGroup.value = userLastName;
   }else if(value === 'data'){
     groups = dataGroups;
-    activedGroup.value = '列表';
+    activedGroup.value = '数据源';
   }else if(value === 'structure'){
     groups = structureGroups;
     activedGroup.value = '图层';
@@ -2455,9 +2455,10 @@ onUnmounted(() => {
         line-height: 1;
         cursor: pointer;
         span{
-          width: 4ch;
+          width: 6ch;
           line-height: 15px;
           padding-left: 2px;
+          text-align: center;
         }
         .t-icon {
           font-size: 20px;