vue-dft-vision

Appearance

On this page

snapshots-view ​

视图组件: 保存 ModelView 某一刻的截图, 并保留摄像机视角快照, 点击时可以恢复到当时的摄像机视角。

视图组件必须要配合 modelView 组件进行使用。

注册组件 ​

javascript
...
import { DftSnapshotsView } from "vue3-dft-vision";
const app = createApp(App);
app.use(DftSnapshotsView);
...
javascript
...
import { DftSnapshotsView } from "vue2-dft-vision";
Vue.component('DftSnapshotsView',DftSnapshotsView)
...

使用方式 ​

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

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

props ​

属性说明类型默认值
symbol分组标识, 同组内组件产生联动交互, 默认所有组件在同一个组string | symbol
snapshots(v-model)视图快照列表Snapshot[][]
editable是否可编辑booleantrue
showAddButton是否展示新增按钮booleantrue
bgColor每个视图的背景颜色string#97A3BF
initialViewSnapshot视图的初始位置Object{}
viewNodeTipsStyle视图提示信息弹窗样式Object{ height: '100%', top: 0, right: 0, zIndex: 9 }
beforeAdd添加之前调用, 返回 false 阻止添加(snapshot: Snapshot, { snapshots: Snapshot[] }) => false | void
beforeRename重命名之前调用, 返回 false 阻止重命名(newName: string, { targetSnapshot: Snapshot }) => false | void
beforeDelete删除之前调用, 返回 false 阻止删除(snapshot: Snapshot, { snapshots: Snapshot[] }) => false | void

events ​

事件名说明类型
click视图点击事件(snapshot: Snapshot) => void
add新增视图(snapshot: Snapshot, { snapshots: Snapshot[] }) => void
delete删除视图(snapshot: Snapshot, { snapshots: Snapshot[] }) => void
rename重命名(newName: string, { targetSnapshot: Snapshot }) => void
sort排序{ currentView: Snapshot, nextView: Snapshot | ''}) => void