ThingOrigin.js

2D 标签参数 ​

可以给模型添加 2D 元素标签。

静态文本标签 ​

javascript
let markerInfo = {
    name: '标签1',
    modelName: 'ABB机器人-1',
    id: '1751263270247OhW46mIqyfEtBzs5Kjg4bWuQJSL4VBLw',
    type: 'text',
    bg: 'bg3',
    bgSrc: 'https://124.70.30.193:8443/image/load/1680',
    configs: {
        title: 'ABB机械臂',
        content: 'ABB机械臂内容',
        visible: true,
        html: '<div data-v-5ded49b6="" style="width: 240px; height: 210px; position: relative;"><img data-v-5ded49b6="" src="https://124.70.30.193:8443/image/load/1680" alt="" style="width: 100%; height: 100%;"><div data-v-5ded49b6="" id="marker-text"><div data-v-5ded49b6="" style="color: rgb(255, 255, 255); display: block; font-weight: bold; text-align: center; font-size: 15px; line-height: 30px; letter-spacing: 2px;">ABB机械臂</div><div data-v-5ded49b6="" style="color: rgb(255, 255, 255); display: block; white-space: pre-wrap; line-height: 25px; font-size: 14px; padding-left: 2em; letter-spacing: 1px;">ABB机械臂内容</div></div></div>'
    },
    style: {
        headVisible: true,
        contentVisible: true,
        width: 240,
        headColor: '#FFFFFF',
        contentColor: '#FFFFFF',
        height: 210
    },
    markerName: 'ABB机器人-1/marker-1751263315018',
    selected: false,
    position: {
        x: 5,
        y: 39,
        z: 0
    },
    base: {
        offset: {
            x: 0,
            y: 0,
            z: 0
        },
        intervalY: 40,
        relative: 'model',
        ratio: 1.1
    },
    code: ''
}
参数名说明类型必填默认值
name标签列表的标签名称（可选）string--
modelName标签绑定的模型名称string--
id标签 id（唯一标识）string--
type标签类型（text：静态文本；interface：接口数据；video：视频；iframe：内嵌网页；custom：自定义）string--
bg标签背景图片标识string--
bgSrc标签背景图片 URLstring--
configs标签配置项，包含 title（标签题目）、content（内容）、visible（是否显示）、html（html 元素）object--
style标签样式配置，包含 headVisible（标题可见性）、contentVisible（内容可见性）、width（宽度）、headColor（标题颜色）、contentColor（内容颜色）、height（高度）object--
markerName标签名称string--
selected是否被选中boolean-false
position标签位置（x, y, z）object--
base标签基础信息，包含 offset（偏移量）、intervalY（多个标签 y 轴间隔距离）、relative（相对定位类型）、ratio（缩放比例）object--
code自定义代码string--

视频标签 ​

javascript
let markerInfo = {
    //...
    type: 'video',
    configs: {
        visible: false, // 是否显示
        videoUrl: 'https://124.70.30.193:8443/file-info/videos/98', // 视频地址
        name: '铣.mp4', // 视频名称
        videoId: 'thingOrigin-video-98', // 视频元素ID
        type: 'upload', // 视频类型 upload:上传 custom:自定义
        html: '<div data-v-5ded49b6="" style="width: 330px; height: 210px; position: relative;"><img data-v-5ded49b6="" src="https://124.70.30.193:8443/image/load/10" alt="" style="width: 100%; height: 100%;"><!--v-if--><!--v-if--><div style="position: absolute;inset: 10% 6% 10% 4%;text-align: center;font-size: 20px;color: #c9f627ff;">铣床正在加工</div><div data-v-5ded49b6="" style="position: absolute; inset: 25% 6% 10% 4%; width: 92%; height: 65%;"><video data-v-5ded49b6="" src="https://124.70.30.193:8443/file-info/videos/98" id="thingOrigin-video-98" preload="auto" style="height: 100%; width: 100%; border: none; transform-origin: left top;"></video></div><!--v-if--></div>'
    }
}

其他参数与静态文本标签一致，只是 type 和 configs 参数不同

参数名说明类型必填默认值
configs.visible是否显示boolean-false
configs.videoUrl视频地址string--
configs.name视频名称string--
configs.videoId视频元素 ID，用于唯一标识视频元素string--
configs.type视频类型（upload：上传，custom：自定义）string-upload
configs.htmlHTML 元素内容string--

iframe 标签 ​

javascript
let markerInfo = {
    //...
    type: "iframe",
    configs: {
        visible: true,// 是否显示
        url: "http://localhost:8084/mom/#/login?redirect=/" // iframe地址
        html: "<div data-v-5ded49b6=\"\" style=\"width: 460px; height: 180px; position: relative;\"><img data-v-5ded49b6=\"\" src=\"https://124.70.30.193:8443/image/load/10\" alt=\"\" style=\"width: 100%;\"><!--v-if--><div data-v-5ded49b6=\"\" class=\"marker-innerDiv\"><iframe data-v-5ded49b6=\"\" class=\"marker-iframe\" src=\"http://114.115.165.12:8080/mom/#/login?redirect=/\"></iframe></div><!--v-if--><!--v-if--></div>"
    },
}

其他参数与静态文本标签一致，只是 type 和 configs 参数不同

参数名说明类型必填默认值
configsiframe 标签配置项，其中 url 为 iframe 地址---

接口数据标签 ​

javascript
let markerInfo = {
    //...
    type: 'interface',
    configs: {
        visible: true, // 是否显示
        headData: [], // 表格表头数据
        tableData: [], // 表格数据
        html: '<div id="markerDiv" style="width:460px;height:180px;position:relative"><img src="https://124.70.30.193:8443/image/load/10" alt="" style="width: 100%"><div class="marker-innerDiv"><div class="marker-interface-title">MB270R01</div><table class="marker-table" style="border-collapse: collapse;opacity: 0.8; width: 100%;"><thead><tr><th style="font-size: 14px;font-weight: bold;color: #255e95;background:#e9faff;padding: 5px 0">时间</th><th style="font-size: 14px;font-weight: bold;color: #255e95;background:#e9faff;padding: 5px 0">结果</th></tr></thead><tbody style="background-color: #ffffff"><tr></tr></tbody></table></div></div>'
    }
}

其他参数与静态文本标签一致，只是 type 和 configs 参数不同

参数描述备注
configs接口数据标签配置项，headData 为表格表头数据，tableData 为表格数据