feat:事件-发送数据

src/views/components/common/MoreModal.vue

@@ -87,7 +87,7 @@ const activedProp = ref([]);
 
 const confirm = ()=>{
   emit("change", activeObj);
-  activeObj.value = {};
+  activeObj = {};
 }
 function getList(){
 //   let arr = [];
@@ -156,6 +156,26 @@ const penProps =[
         "value": "name",
         "type": "string"
     },
+    {
+        "label": "X坐标",
+        "value": "x",
+        "type": "float"
+    },
+    {
+        "label": "Y坐标",
+        "value": "y",
+        "type": "float"
+    },
+    {
+        "label": "宽度",
+        "value": "width",
+        "type": "float"
+    },
+    {
+        "label": "高度",
+        "value": "height",
+        "type": "float"
+    },
     {
         "label": "连线类型名",
         "value": "lineName",

src/views/components/common/PropModal.vue

@@ -0,0 +1,170 @@
+<template>
+  <t-dialog
+    v-model:visible="props.visible"
+    header="设备属性"
+    :width="470"
+    @close="close"
+    @confirm="confirm"
+  >
+    <div class="input-search">
+      <div class="btn">
+        <search-icon class="hover" />
+      </div>
+      <t-input
+        v-model="search"
+        @change="onSearch"
+        @enter="onSearch"
+        placeholder="搜索属性"
+      />
+    </div>
+    <div class="props mt-8">
+      <t-tree
+        v-model:actived="activedProp"
+        activable
+        hover
+        :data="bindTreeData"
+        :expand-level="1"
+        :filter="bindFilter"
+        @click="onClick"
+      />
+    </div>
+  </t-dialog>
+</template>
+
+<script lang="ts" setup>
+import { SearchIcon } from 'tdesign-icons-vue-next';
+import { ref, toRaw, onMounted } from 'vue';
+
+const props = defineProps<{
+  visible: boolean;
+}>();
+const emit = defineEmits(['update:visible', 'change']);
+const activedProp = ref([]);
+
+onMounted(() => {
+  getBindTreeData();
+});
+
+function close() {
+  emit('update:visible', false);
+}
+
+const bindTreeData = ref<any>([]);
+
+const getBindTreeData = () => {
+  let data: any = [];
+  const iotTree = meta2d.store.data.iot?.tree || [];
+  if (iotTree.length) {
+    iotTree.forEach((item: any) => {
+      item.checkable = false;
+    });
+    data.push({
+      label: '物联网平台',
+      value: 'iot',
+      checkable: false,
+      children: iotTree,
+    });
+  }
+  const sqlTree = meta2d.store.data.sqls || [];
+  if (sqlTree.length) {
+    data.push({
+      label: 'sql数据源',
+      value: 'sql',
+      checkable: false,
+      children: sqlTree,
+    });
+  }
+  const networks = meta2d.store.data.networks || [];
+  if (networks.length) {
+    networks.forEach((item: any) => {
+      item.checkable = false;
+    });
+    const mqttNets = meta2d.store.data.networks.filter(
+      (item) => item.protocol === 'mqtt'
+    );
+    const wsNets = meta2d.store.data.networks.filter(
+      (item) => item.protocol === 'websocket'
+    );
+    const httpNets = meta2d.store.data.networks.filter(
+      (item) => item.protocol === 'http'
+    );
+    const SSENets = meta2d.store.data.networks.filter(
+      (item) => item.protocol === 'SSE'
+    );
+    if (mqttNets.length) {
+      data.push({
+        label: 'MQTT',
+        value: 'network',
+        checkable: false,
+        children: mqttNets,
+      });
+    }
+    if (wsNets.length) {
+      data.push({
+        label: 'Websocket',
+        value: 'network',
+        checkable: false,
+        children: wsNets,
+      });
+    }
+    if (httpNets.length) {
+      data.push({
+        label: 'HTTP',
+        value: 'network',
+        checkable: false,
+        children: httpNets,
+      });
+    }
+    if (SSENets.length) {
+      data.push({
+        label: 'SSE',
+        value: 'network',
+        checkable: false,
+        children: SSENets,
+      });
+    }
+  }
+  bindTreeData.value = data;
+};
+
+const search = ref('');
+const bindFilter = ref<any>(null);
+const onSearch = () => {
+  bindFilter.value = search.value
+    ? (node) => {
+        return node.value?.indexOf(search.value) >= 0;
+      }
+    : null;
+};
+
+const selectedIds = ref([]);
+
+const onClick = (context) => {
+  const { node } = context;
+  // activeObj = JSON.parse(JSON.stringify(node.data));
+};
+
+const confirm = () => {
+  emit('change', activedProp.value[0]);
+  // activeObj.value = {};
+};
+
+const doBind = () => {};
+</script>
+
+<style lang="postcss" scoped>
+.props {
+  height: 300px;
+  overflow-y: auto;
+}
+
+.input-search {
+  width: 100%;
+  margin-top: 0px;
+  padding: 4px 0px;
+
+  .btn {
+    left: 14px;
+  }
+}
+</style>