ThingOrigin.js

2D标签参数 ​

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

静态文本标签 ​

javascript
let markerInfo = {
    name: "标签1",
    modelName: "ABB机器人-1",
    id: "1751263270247OhW46mIqyfEtBzs5Kjg4bWuQJSL4VBLw",
    type: "text",
    bg: "bg1",
    configs: {
        title: "ABB机械臂",
        content: "ABB机械臂内容",
        show: true,
        html: "<div data-v-5ded49b6=\"\" style=\"width: 460px; height: 180px; position: relative;\"><img data-v-5ded49b6=\"\" src=\"http://localhost:8084/image/load/10\" alt=\"\" style=\"width: 100%;\"><div data-v-5ded49b6=\"\" class=\"marker-innerDiv\" id=\"marker-text\"><div data-v-5ded49b6=\"\" class=\"marker-text-title\">ABB机械臂</div><div data-v-5ded49b6=\"\" class=\"marker-text-content\">ABB机械臂内容</div></div><!--v-if--><!--v-if--><!--v-if--></div>"
    },
    markerName: "ABB机器人-1/marker-1751263315018",
    position: {
        x: 5,
        y: 39,
        z: 0
    },
    base: {
        offset: {
            x: 0,
            y: 0,
            z: 0
        },
        ratio: 1.1,
        intervalY: 40
    },
    width: 460,
    height: 180,
    code: ""
}
  • name : 标签列表的标签名称，可选。
  • modelName : 标签绑定的模型名称。
  • id : 标签id，唯一。
  • type : 标签类型（text：静态文本；interface：接口数据；video：视频；iframe：内嵌网页；custom：自定义）。
  • bg : 标签背景图片。
  • configs : 标签配置项，包括标签题目，内容，是否显示和html元素。
  • markerName : 标签名称。
  • position : 标签位置。
  • base : 标签基础信息，包括offset：偏移量；ratio：缩放比例；intervalY：多个标签之间的y轴的间隔距离。
  • width : 标签元素宽度（px）。
  • height : 标签元素高度（px）。

视频标签 ​

javascript
let markerInfo = {
    //...
    type: "video",
    configs: {
        name: "Video_2025-05-06_151206.wmv"// 视频名称
        show: true,// 是否显示
        type: "1",// 视频类型 1:上传 2:自定义
        videoUrl: "http://localhost:8084/file-info/videos/87"// 视频地址
        html: '<div id="markerDiv" style="width:460px;height:180px;position:relative"><img src="http://localhost:8084/image/load/10" alt="" style="width: 100%"><div class="marker-innerDiv"><video src="http://localhost:8084/file-info/videos/87" controls preload="auto" class="marker-video"></video></div></div>'
    },
}

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

  • configs : 视频标签配置项，视频标签包括视频名称，视频地址。

iframe标签 ​

javascript
let markerInfo = {
    //...
    type: "iframe",
    configs: {
        show: 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=\"http://124.70.30.193:8084/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参数不同

  • configs : iframe标签配置项，url为iframe标签地址。

接口数据标签 ​

javascript
let markerInfo = {
    //...
    type: "interface",
    configs: {
        show: true,// 是否显示
        headData:[],// 表格表头数据
        tableData:[],// 表格数据
        html: "<div id=\"markerDiv\" style=\"width:460px;height:180px;position:relative\"><img src=\"http://124.70.30.193:8084/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为表格数据。