vue-dft-vision

Appearance

On this page

dft-model-tree ​

结构树使用虚拟滚动实现

使用提示

tree 组件需要配合 model-view 组件使用,单独使用没有数据。

vue
<template>
  <div style="width: 100vw; height: 100vh; display: flex">
    <dft-model-tree></dft-model-tree>
    <dft-model-view
      :sceneConstructor="DFTCore.Scene"
      :scene-options="sceneOptions"
    ></dft-model-view>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import DFTCore from "dft-vision-core-es6.min.js";
const sceneOptions = reactive({
  // 数据源，默认 DFTCore.OFFLINE
  dataType: DFTCore.OFFLINE,
  // 文件路径
  url: "/pdv/1004",
});
</script>
vue
<template>
  <div style="width: 100vw; height: 100vh; display: flex">
    <dft-model-tree></dft-model-tree>
    <dft-model-view
      :sceneConstructor="DFTCore.Scene"
      :scene-options="sceneOptions"
    ></dft-model-view>
  </div>
</template>
<script>
import DFTCore from "dft-vision-core-es6.min.js";
export default {
  data() {
    return {
      sceneOptions: {
        // 数据源，默认 DFTCore.OFFLINE
        dataType: DFTCore.OFFLINE,
        // 文件路径
        url: "/pdv/1004",
        // 资源文件夹地址
      },
      DFTCore,
    };
  },
};
</script>

分组 ​

默认所有的 vision 组件都是联动的, 可以使用 props.symbol 进行分组联动

vue
<template>
  <div style="width: 100vw; height: 100vh; display: flex">
    <dft-model-tree symbol="theKey"></dft-model-tree>
    <dft-model-view
      symbol="theKey"
      :sceneConstructor="DFTCore.Scene"
      :scene-options="sceneOptions"
    ></dft-model-view>
  </div>
  <div style="width: 100vw; height: 100vh; display: flex">
    <dft-model-tree></dft-model-tree>
    <dft-model-view
      :sceneConstructor="DFTCore.Scene"
      :scene-options="sceneOptions"
    ></dft-model-view>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import DFTCore from "dft-vision-core-es6.min.js";
const sceneOptions = reactive({
  // 数据源，默认 DFTCore.OFFLINE
  dataType: DFTCore.OFFLINE,
  // 文件路径
  url: "/pdv/1004",
});
</script>
vue
<template>
  <div style="width: 100vw; height: 100vh; display: flex">
    <dft-model-tree symbol="theKey"></dft-model-tree>
    <dft-model-view
      symbol="theKey"
      :sceneConstructor="DFTCore.Scene"
      :scene-options="sceneOptions"
    ></dft-model-view>
  </div>
  <div style="width: 100vw; height: 100vh; display: flex">
    <dft-model-tree></dft-model-tree>
    <dft-model-view
      :sceneConstructor="DFTCore.Scene"
      :scene-options="sceneOptions"
    ></dft-model-view>
  </div>
</template>
<script>
import DFTCore from "dft-vision-core-es6.min.js";
export default {
  data() {
    return {
      sceneOptions: {
        // 数据源，默认 DFTCore.OFFLINE
        dataType: DFTCore.OFFLINE,
        // 文件路径
        url: "/pdv/1004",
        // 资源文件夹地址
      },
      DFTCore,
    };
  },
};
</script>

Props ​

props说明类型默认值
symbol分组标识, 同组内组件产生联动交互, 默认所有组件在同一个组string|symbol
getContextMenus右键菜单, 返回数据(defaultContextMenus: ContextMenu[], { node }) => ContextMenu[]
expandedKeys(v-model)展开的节点 keysstring[][]
defaultExpandedKeys默认展开的节点 keysstring[][]
itemSize树节点高度number36
leftSpace左侧层级间距number16

Exposed ​

名称说明方法参数方法返回
scrollTo定位到节点(nodeId: string) => void