feat:conflict

src/styles/tdesign.css

@@ -261,10 +261,10 @@
   .t-input {
     padding-left: 32px;
     outline: none;
-    border: none;
+    border-color: #0000;
     background: var(--color-background-input);
     z-index: 0;
-    height: 28px;
+    height: 32px;
     input {
       color: var(--color);
       &::placeholder {
@@ -272,6 +272,10 @@
       }
     }
   }
+  .t-is-focused{
+    border: 1px solid var(--color-primary);
+    background-color: #0000;
+  }
 
   .btn {
     position: absolute;

src/views/components/DataSource.vue

@@ -4,44 +4,74 @@
     style="height: calc(100vh - 82px); overflow-y: auto"
     v-if="group === '数据'"
   >
-    <div
-      class="flex mt-16 mb-16"
-      style="justify-content: space-between; padding-right: 8px"
-    >
-      <div style="line-height: 32px">数据列表</div>
-      <t-dropdown :minColumnWidth="168">
-        <div class="icon-box">
-          <AddIcon />
+    <div class="data-header">
+      <div
+        class="flex mb-16"
+        style="justify-content: space-between; padding-right: 8px"
+      >
+        <div style="line-height: 32px">数据列表</div>
+        <div class="flex">
+          <t-tooltip content="批量导入数据图元到画布" placement="top">
+            <div @click="onCheckAllChange" class="icon-box">
+              <DragDropIcon  :style="{
+                  color: data.checkAll ? 'var(--color-primary)' : '',
+                }"/>
+            </div>
+          </t-tooltip>
+          <t-tooltip content="开启全局数据模拟" placement="top">
+            <div  @click="onChangeMock" class="icon-box">
+              <RouterWaveIcon
+                :style="{
+                  color: data.enableMock ? 'var(--color-primary)' : '',
+                }"
+              />
+            </div>
+          </t-tooltip>
+          <t-dropdown :minColumnWidth="168">
+            <div class="icon-box">
+              <AddIcon />
+            </div>
+            <t-dropdown-menu>
+              <t-dropdown-item @click="onShowIot"> 物联网平台 </t-dropdown-item>
+              <t-dropdown-item @click="addSql"> sql数据源 </t-dropdown-item>
+              <t-dropdown-item @click="addNetwork('mqtt')"> MQTT </t-dropdown-item>
+              <t-dropdown-item @click="addNetwork('websocket')"> Websocket </t-dropdown-item>
+              <t-dropdown-item @click="addNetwork('http')"> HTTP </t-dropdown-item>
+              <t-dropdown-item @click="addNetwork('SSE')"> SSE </t-dropdown-item>
+            </t-dropdown-menu>
+          </t-dropdown>
         </div>
-        <t-dropdown-menu>
-          <t-dropdown-item @click="onShowIot"> 物联网平台 </t-dropdown-item>
-          <t-dropdown-item @click="addSql"> sql数据源 </t-dropdown-item>
-          <t-dropdown-item @click="addNetwork('mqtt')"> MQTT </t-dropdown-item>
-          <t-dropdown-item @click="addNetwork('websocket')"> Websocket </t-dropdown-item>
-          <t-dropdown-item @click="addNetwork('http')"> HTTP </t-dropdown-item>
-          <t-dropdown-item @click="addNetwork('SSE')"> SSE </t-dropdown-item>
-        </t-dropdown-menu>
-      </t-dropdown>
-    </div>
-    <div class="flex between mt-8">
-      <t-tooltip content="可批量导入数据图元到画布" placement="top">
-        <t-checkbox v-model="data.checkAll" @change="onCheckAllChange"
-          >批量导入到画布</t-checkbox
-        >
-      </t-tooltip>
-      <!-- <t-tooltip content="开启全局数据模拟" placement="top">
-        <t-checkbox v-model="data.enableMock" @change="onChangeMock"
-          >开启</t-checkbox
-        >
-      </t-tooltip> -->
+      </div>
+      <div class="flex">
+        <!-- <t-tooltip content="可批量导入数据图元到画布" placement="top">
+          <t-checkbox v-model="data.checkAll" @change="onCheckAllChange"
+            >批量导入到画布</t-checkbox
+          >
+        </t-tooltip> -->
+        <!-- <t-tooltip content="开启全局数据模拟" placement="top">
+          <t-checkbox v-model="data.enableMock" @change="onChangeMock"
+            >开启</t-checkbox
+          >
+        </t-tooltip> -->
+        <div class="input-search" style="width: 100%;margin-top: 0px;">
+          <div class="btn">
+            <search-icon class="hover" />
+          </div>
+          <t-input
+            v-model="dataSearch"
+            @change="onSearchData"
+            @enter="onSearchData"
+            placeholder="搜索我的属性列表"
+          />
+        </div>
+      </div>
     </div>
-
     <div v-if="data.iotTree?.length">
       <div class="flex mt-16 between" style="height: 32px; line-height: 32px">
-        <div class="flex">
-          <ApplicationIcon class="tree-icon mt-8" />
-          <div class="ml-8">物联网平台</div>
-        </div>
+        <!-- <div class="flex"> -->
+          <!-- <ApplicationIcon class="tree-icon mt-8" /> -->
+          <div class="datasource-title">物联网平台</div>
+        <!-- </div> -->
         <!-- <div>
           <Edit2Icon  class="mr-12 hover" style="width: 14px;height: 14px;" @click="onShowIot" />
         </div> -->
@@ -55,13 +85,13 @@
         <t-tree
           :draggable="false"
           v-model="allChecked"
-          class="ml-16"
           style="overflow-y: hidden"
           activeMultiple
           :data="data.iotTree"
           :expand-parent="true"
           :checkable="data.checkAll"
           :checkStrictly="false"
+          :filter="dataFilter"
         />
       </div>
       <!-- </div> -->
@@ -84,8 +114,8 @@
     </div>
     <div v-if="data.sqls?.length">
       <div class="flex mt-16" style="height: 32px">
-        <DataIcon class="tree-icon" />
-        <div class="ml-8">SQL数据源</div>
+        <!-- <DataIcon class="tree-icon" /> -->
+        <div class="datasource-title">SQL数据源</div>
       </div>
       <div
         :draggable="data.checkAll ? true : false"
@@ -94,7 +124,6 @@
       >
       <t-tree
         :draggable="false"
-        class="ml-16"
         :key="sqlTreeKey"
         hover
         style="overflow-y: hidden"
@@ -238,10 +267,10 @@
     </div> -->
     <div v-if="data.mqtt_networks?.length">
       <div class="flex mt-16 between" style="height: 32px; line-height: 32px">
-        <div class="flex">
-          <ControlPlatformIcon class="tree-icon mt-8" />
-          <div class="ml-8">MQTT</div>
-        </div>
+        <!-- <div class="flex"> -->
+          <!-- <ControlPlatformIcon class="tree-icon mt-8" /> -->
+          <div class="datasource-title">MQTT</div>
+        <!-- </div> -->
         <div>
         </div>
       </div>
@@ -252,7 +281,6 @@
       >
       <t-tree
         :draggable="false"
-        class="ml-16"
         v-model="networksCheked"
         ref="mqttTree"
         :key="mqttTreeKey"
@@ -279,7 +307,7 @@
           </template>
           <template v-else>
             <t-dropdown :minColumnWidth="168" :hide-after-item-click="false">
-              <AddIcon class="mr-12" />
+              <AddIcon class="mr-12 hover" />
               <t-dropdown-menu>
                 <t-dropdown-item
                   :value="2"
@@ -309,7 +337,7 @@
               </t-dropdown-menu>
             </t-dropdown>
             <Edit2Icon
-              class="mr-12"
+              class="mr-12 hover"
               @click="editNetwork(node.data, node.data.tem_index)"
             />
             <DeleteIcon
@@ -342,10 +370,10 @@
     </div>
     <div v-if="data.ws_networks?.length">
       <div class="flex mt-16 between" style="height: 32px; line-height: 32px">
-        <div class="flex">
-          <ControlPlatformIcon class="tree-icon mt-8" />
-          <div class="ml-8">Websocket</div>
-        </div>
+        <!-- <div class="flex"> -->
+          <!-- <ControlPlatformIcon class="tree-icon mt-8" /> -->
+          <div class="datasource-title">Websocket</div>
+        <!-- </div> -->
         <div>
         </div>
       </div>
@@ -356,7 +384,6 @@
       >
       <t-tree
         :draggable="false"
-        class="ml-16"
         v-model="networksCheked"
         ref="wsTree"
         :key="wsTreeKey"
@@ -446,10 +473,10 @@
     </div>
     <div v-if="data.http_networks?.length">
       <div class="flex mt-16 between" style="height: 32px; line-height: 32px">
-        <div class="flex">
-          <ControlPlatformIcon class="tree-icon mt-8" />
-          <div class="ml-8">HTTP</div>
-        </div>
+        <!-- <div class="flex"> -->
+          <!-- <ControlPlatformIcon class="tree-icon mt-8" /> -->
+          <div class="datasource-title">HTTP</div>
+        <!-- </div> -->
         <div>
         </div>
       </div>
@@ -460,7 +487,6 @@
       >
       <t-tree
         :draggable="false"
-        class="ml-16"
         v-model="networksCheked"
         ref="httpTree"
         :key="httpTreeKey"
@@ -470,6 +496,7 @@
         :expand-parent="true"
         :checkable="data.checkAll"
         :checkStrictly="false"
+        :filter="dataFilter"
       >
         <template #operations="{ node }">
           <template v-if="node.getParent()">
@@ -550,10 +577,10 @@
     </div>
     <div v-if="data.SSE_networks?.length">
       <div class="flex mt-16 between" style="height: 32px; line-height: 32px">
-        <div class="flex">
-          <ControlPlatformIcon class="tree-icon mt-8" />
-          <div class="ml-8">SSE</div>
-        </div>
+        <!-- <div class="flex"> -->
+          <!-- <ControlPlatformIcon class="tree-icon mt-8" /> -->
+          <div class="datasource-title">SSE</div>
+        <!-- </div> -->
         <div>
         </div>
       </div>
@@ -564,7 +591,6 @@
       >
       <t-tree
         :draggable="false"
-        class="ml-16"
         v-model="networksCheked"
         ref="SSETree"
         :key="SSETreeKey"
@@ -950,6 +976,7 @@ import {
   ApplicationIcon,
   DataIcon,
   ControlPlatformIcon,
+  DragDropIcon
 } from 'tdesign-icons-vue-next';
 import { typeOptions } from '@/services/common';
 import { MessagePlugin } from 'tdesign-vue-next';
@@ -1058,6 +1085,12 @@ onMounted(() => {
   getThirdNetwork();
 });
 
+const dataSearch = ref('');
+const dataFilter = ref(null);
+const onSearchData = () => {
+  dataFilter.value = dataSearch.value ? (node) => { return node.data.label?.indexOf(dataSearch.value) >= 0|| node.data.value?.indexOf(dataSearch.value) >= 0 }: null;
+};
+
 const getThirdNetwork = (key?:string)=>{
   if(!meta2d.store.data.networks?.length){
     return;
@@ -1445,13 +1478,19 @@ const onOkAddData = () => {
     }
   } else {
     // addDataDialog.network.children[addDataDialog.index] = addDataDialog.data;
+    let beforeId =  addDataDialog.network.children[addDataDialog.index].id;
+    
     addDataDialog.network.children.splice(
       addDataDialog.index,
       1,
       addDataDialog.data
     );
-    addDataDialog.node?.insertAfter(deepClone(addDataDialog.data));
-    addDataDialog.node?.remove();
+    if(beforeId !== addDataDialog.data.id){
+      addDataDialog.node?.insertAfter(deepClone(addDataDialog.data));
+      addDataDialog.node?.remove();
+    }else{
+      addDataDialog.node?.setData(deepClone(addDataDialog.data));
+    }
     // mqttTreeKey.value = s8();
     // wsTreeKey.value = s8();
     // httpTreeKey.value = s8();
@@ -2009,11 +2048,20 @@ const onChangeMock = () => {
 };
 
 const onCheckAllChange = (e) => {
-  if (!e) {
-    data.dataset?.devices?.forEach((item) => {
-      item.checked = false;
-    });
-  }
+  if(data.checkAll){
+    allChecked.value = [];
+    networksCheked.value = [];
+    sqlsCheked.value = [];
+    console.log("进入",allChecked.value,networksCheked.value, sqlsCheked.value)
+  }
+  data.checkAll =!data.checkAll;
+  console.log("data.checkAll",data.checkAll);
+  
+  // if (!e) {
+  //   data.dataset?.devices?.forEach((item) => {
+  //     item.checked = false;
+  //   });
+  // }
 };
 
 const allChecked = ref([]);
@@ -2022,6 +2070,8 @@ const sqlsCheked = ref([]);
 const onAddShape = (e, _data,type) => {
   e.stopPropagation();
   let data: any;
+  console.log("_data",_data);
+
   if (Array.isArray(_data)) {
     const dragElem = document.getElementById(`dragElem-${type}`);
     let width = dragElem.offsetWidth;
@@ -2029,7 +2079,7 @@ const onAddShape = (e, _data,type) => {
     const checked = [];
     if(type === 'iot'){
       _data.forEach((item) => {
-        item.children.forEach((_item) => {
+        item.children?.forEach((_item) => {
           if (allChecked.value.includes(_item.value)) {
             checked.push(_item);
           }
@@ -2037,7 +2087,7 @@ const onAddShape = (e, _data,type) => {
       });
     }else if(type === 'network'){
       _data.forEach((item) => {
-        item.children.forEach((_item) => {
+        item.children?.forEach((_item) => {
           if (networksCheked.value.includes(_item.value)) {
             checked.push(_item);
           }
@@ -2045,7 +2095,7 @@ const onAddShape = (e, _data,type) => {
       });
     }else if(type === 'sql'){
       _data.forEach((item) => {
-        item.children.forEach((_item) => {
+        item.children?.forEach((_item) => {
           if (sqlsCheked.value.includes(_item.value)) {
             checked.push(_item);
           }
@@ -2290,13 +2340,23 @@ const deleteMock = (index: number) => {
 } */
 .content {
   background: var(--color-background-active);
-  padding: 16px;
-
+  padding: 0px 16px;
+  .data-header{
+    position: sticky;
+    top:0;
+    background: var(--color-background-active);
+    z-index: 2;
+    padding-top: 16px;
+  }
   .tree-icon {
     width: 14px;
     height: 14px;
   }
 
+  .datasource-title{
+    color: #6e7e99;
+  }
+
   .prop-title {
     white-space: nowrap;
     overflow: hidden;
@@ -2577,11 +2637,16 @@ const deleteMock = (index: number) => {
   .t-tree__item[data-level='1'] {
     padding: 0 0 0 16px;
     .t-checkbox__label {
-      /* max-width: 50px; */
+      max-width: 148px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
     }
+    &:hover{
+      .t-checkbox__label {
+        max-width: 94px;
+      }
+    }
   }
   .t-tree__item[data-level='2'] {
     padding: 0 0 0 16px;
@@ -2592,7 +2657,17 @@ const deleteMock = (index: number) => {
       text-overflow: ellipsis;
     }
   }
+  .t-tree__item{
+    .t-tree__operations{
+      display: none;
+    }
+  }
 
+  .t-tree__item:hover{
+    .t-tree__operations{
+      display: block;
+    }
+  }
   .t-tree__item .t-icon {
     color: #bdc7db;
   }

src/views/components/Header.vue

@@ -199,7 +199,7 @@
             </div>
           </a>
         </t-dropdown-item>
-        <t-dropdown-item  divider="true">
+        <t-dropdown-item>
           <a @click="onToggleAnchor">
             <div
               class="flex"
@@ -210,14 +210,14 @@
             </div>
           </a>
         </t-dropdown-item>
-        <t-dropdown-item>
+        <!-- <t-dropdown-item>
           <a @click="onChangeMock">
             <div class="flex middle">
               开启全局数据模拟 <span class="flex-grow"></span>
               <check-icon v-show="data.enableMock" />
             </div>
           </a>
-        </t-dropdown-item>
+        </t-dropdown-item> -->
       </t-dropdown-menu>
     </t-dropdown>
     <t-dropdown
@@ -3028,16 +3028,16 @@ const nosaveNewfile = ()=>{
   newFileDialog.value.show = false;
 }
 
-const onChangeMock = () => {
-  // @ts-ignore
-  data.enableMock = !data.enableMock;
-  meta2d.store.data.enableMock = data.enableMock;
-  if (data.enableMock) {
-    meta2d.startDataMock();
-  } else {
-    meta2d.stopDataMock();
-  }
-};
+// const onChangeMock = () => {
+//   // @ts-ignore
+//   data.enableMock = !data.enableMock;
+//   meta2d.store.data.enableMock = data.enableMock;
+//   if (data.enableMock) {
+//     meta2d.startDataMock();
+//   } else {
+//     meta2d.stopDataMock();
+//   }
+// };
 
 </script>
 <style lang="postcss" scoped>