欢迎使用 IMR工业物联网平台

IMR工业物联网平台 是集web组态 时序数据库 数据采集 数据可视化分析的全功能平台

开始设计

设置画布属性

画布属性

首先我们先来设置画布进行设置，我们可以对设置多种分辨率

背景色 背景图片

创建组件

提示：用户只需在左边组件库中选择自己需要的组件，用鼠标拖拽到画布中即可使用

IMR工业物联网平台 提供了丰富的组件库，方便客户自由搭建自己的应用场景

基础组件

图形组件

图表组件

3D组件

使用组件

提示：

页面搭建功能，我们为大家提供了两个例子。更多案例可参考官网案例：DEMO (opens new window)为了更方便的让大家了解 IMR工业物联网平台

控制系统页面示例

数据展示页面搭建示例

组件属性及事件

组件基础属性

提示：

组件基础属性 commProp{}

标签	属性类型	属性分组	属性名	是否显示	默认值
ID	propType.textinput.code	通用	commProp.id	false	null
控件类型	propType.textinput.code	通用	commProp.controlType	false	null
分组	propType.textinput.code	通用	commProp.group	null	null
标识名	propType.textinput.code	通用	commProp.name	null	null
上边距	propType.numberinput.code	通用	commProp.y	null	null
左边距	propType.numberinput.code	通用	commProp.x	null	null
宽度	propType.numberinput.code	通用	commProp.width	null	null
高度	propType.numberinput.code	通用	commProp.height	null	null
是否可见	propType.switch.code	通用	commProp.visible	null	ture
是否闪烁	propType.switch.code	通用	commProp.isFlash	null	false
深度	propType.numberinput.code	通用	commProp.depth	null	5
旋转角度	propType.numberinput.code	通用	commProp.angle	null	0
边框宽度	propType.numberinput.code	通用	commProp.borderwidth	null	0
边框颜色	propType.colorPicker.code	通用	commProp.bordercolor	null	red
边框样式	propType.select.code	通用	commProp.borderstyle	null	solid,dashed,dotted,double,groove,ridge
背景色	propType.colorPicker.code	通用	commProp.backgroundColor	null	"rgba(255, 255, 255, 0)"
圆角	propType.numberinput.code	通用	commProp.borderradius	null	null

组件文本属性

提示：

组件文本属性 textProp{}

标签	属性类型	属性分组	属性名	是否显示	默认值
文字	propType.textinput.code	文本编辑	textProp.text	false	null
字体	propType.select.code	文本编辑	textProp.fontfamily	false	Microsoft YaHei,SimHei,SimSun
字号	propType.numberinput.code	文本编辑	textProp.fontsize	false	null
粗体	propType.textinput.code	文本编辑	textProp.fontweight	false	null
斜体	propType.textinput.code	文本编辑	textProp.fontitalic	false	null
水平对齐	propType.textinput.code	文本编辑	textProp.horizonalign	false	left,center,right
垂直对齐	propType.textinput.code	文本编辑	textProp.verticalalign	false	top,middle,bottom
内间距	propType.numberinput.code	文本编辑	textProp.padding	false	null
字体颜色	propType.colorPicker.code	文本编辑	textProp.fontcolor	false	null

组件特殊属性

提示：

组件特殊属性 详见组件帮助

组件事件

提示：

组件事件属性

标签	属性类型	属性分组	属性名	是否显示	默认值
点击事件	codeinput	事件属性	onclick	false	null
双击事件	codeinput	事件属性	ondblclick	false	null
鼠标按下事件	codeinput	事件属性	onmousedown	false	null
鼠标抬起事件	codeinput	事件属性	onmouseup	false	null
鼠标滑过事件	codeinput	事件属性	onmouseover	false	null

3D组件属性及事件

3D组件基础属性

提示：

3D组件基础属性 commProp{}

标签	子属性	属性类型	属性分组	属性名	是否显示	默认值
ID	-	textinput	通用	commProp.id	false	null
控件类型	-	textinput	通用	commProp.controlType	false	null
分组	-	textinput	通用	commProp.group	false	null
标识名	-	textinput	通用	commProp.name	false	null
是否可见	-	switch	通用	commProp.isVisible	true	ture
透明度	-	numberinput	通用	commProp.visibility	true	1
位置	-	-	通用	commProp.position	false	{x:0,Y:0,z:0}
-	x	numberinput	通用	commProp.position.x	true	0
-	y	numberinput	通用	commProp.position.y	true	0
-	z	numberinput	通用	commProp.position.z	true	0
缩放	-	-	通用	commProp.scaling	false	{x:0,Y:0,z:0}
-	x	numberinput	通用	commProp.position.x	true	1
-	y	numberinput	通用	commProp.position.y	true	1
-	z	numberinput	通用	commProp.position.z	true	1
旋转	-	-	通用	commProp.rotation	false	{x:0,Y:0,z:0}
-	x	numberinput	通用	commProp.position.x	true	0
-	y	numberinput	通用	commProp.position.y	true	0
-	z	numberinput	通用	commProp.position.z	true	0

3D组件材质属性

提示：

3D组件材质属性 material{}

标签	属性类型	属性分组	属性名	是否显示	默认值
颜色	colorPicker	材质	material.diffuseColor	true	#00FF00
透明度	numberinput	材质	material.alpha	true	1
纹理	imgSelect	材质	material.diffuseTexture	true	null
控件纹理	domSelect	材质	material.htmlTexture	true	null

3D组件事件属性

提示：

3D组件事件属性

标签	属性类型	属性分组	属性名	是否显示	默认值
点击事件	codeinput	事件属性	OnPickTrigger	false	null
双击事件	codeinput	事件属性	OnDoublePickTrigger	false	null
鼠标按下事件	codeinput	事件属性	OnPickDownTrigger	false	null
鼠标抬起事件	codeinput	事件属性	OnPickUpTrigger	false	null
鼠标滑过事件	codeinput	事件属性	OnPointerOverTrigger	false	null

页面脚本应用

提示：

设计器提供给用户javascript脚本函数功能，方便用户自由的控制组件及与第三方应用对接。

设计器脚本基础方法

提示：

设计器提供的基础方法全部属于imr类，用户可以直接使用该功能。

获取组件属性值

提示：

用户可通过imr.getModelByName方法获取设计中任意组件的属性参数。

//方法名：getModelByName
//参数：modelName 为 string 类型
//参数：tagName 为 string 类型 子页面标识名（父页面不填）
imr.getModelByName(modelName, tagName)
//获取组件 旋转角度
var angleValue = imr.getModelByName('需要获取组件标识名').commProp.angle
//通过设置组件数据 让其闪烁 
imr.getModelByName('需要获取组件标识名').commProp.isFlash = true
//设置组件文本
imr.getModelByName('需要获取组件标识名').textProp.text = hello！

获取3D组件属性值

提示：

用户可通过imr.get3DModelByName方法获取设计中任意组件的属性参数。

//get3DModelByName
//参数：modelName 为 string 类型
//参数：tagName 为 string 类型 子页面标识名（父页面不填）
imr.get3DModelByName(modelName, tagName)
//获取组件 旋转角度
var positionX = imr.get3DModelByName('需要获取组件标识名').commProp.position.x
//通过设置组件数据 沿X坐标移动 
imr.get3DModelByName('需要获取组件标识名').commProp.position.x = 50
//设置3D组件是否显示
imr.get3DModelByName('需要获取组件标识名').commProp.visible	 = true

获取数据库信息

提示：

用户可通过imr.SQL方法，访问预先配置好的SQL数据库，目前支持MySql MSSql oracle等。

//方法名：SQL
//参数：DbName 数据库名称  String类型
//参数：sql sql语句 String类型

//使用方法
imr.SQL(dbName,sql,(ro)=>{
        console.log('打印数据', ro.Result)
        //需要操作的任务
    }, (err)=>{
        console.log('打印数据', err)
        //错误回调
    })

获取协议及内部变量

提示：

用户可通过imr.SIMDATA方法，获取系统配置好的协议及内部变量。

//方法名：SIMDATA
//参数：variables 变量code数据 String[]类型
//参数：isCalvValue 获取变量原始值或计算值  bool类型

//使用方法
imr.SIMDATA(variables,isCalvValue=true,(ro)=>{
        console.log('打印数据', ro)
        //需要操作的任务
    }, (err)=>{
        console.log('打印数据', err)
        //错误回调
    })

赋值协议及内部变量

提示：

用户可通过imr.BATCHWRITE方法，赋值系统配置好的协议及内部变量。

//方法名：BATCHWRITE
//参数：variables 变量code数据 String[]类型
//参数：values 获取变量原始值或计算值  String[]类型

//使用方法
imr.BATCHWRITE(variables,values,(ro)=>{
        console.log('打印数据', ro.Result)
        //需要操作的任务
    }, (err)=>{
        console.log('打印数据', err)
        //错误回调
    })

获取协议及内部变量归档数据

提示：

用户可通过imr.ARCHIVEDATA方法，获取系统配置好的协议及内部变量归档数据。

//方法名：ARCHIVEDATA
//参数：variables 变量code数据 String[]类型
//参数：startTime 归档数据起始时间  String类型
//参数：endTime 归档数据结束时间  String类型

//使用方法
imr.ARCHIVEDATA(variables,startTime,endTime,(ro)=>{
        console.log('打印数据', ro.Result)
        //需要操作的任务
    }, (err)=>{
        console.log('打印数据', err)
        //错误回调
    })

获取报警变量归档数据

提示：

用户可通过imr.ALARMDATA方法，获取系统配置好的报警变量归档数据。

//方法名：ALARMDATA
//参数：variables 变量code数据 String[]类型
//参数：startTime 归档数据起始时间  String类型
//参数：endTime 归档数据结束时间  String类型

//使用方法
imr.ALARMDATA(variables,startTime,endTime,(ro)=>{
        console.log('打印数据', ro.Result)
        //需要操作的任务
    }, (err)=>{
        console.log('打印数据', err)
        //错误回调
    })

弹出页面

提示：

用户可通过imr.creatForm方法，弹出页面。

//方法名：creatForm
//参数：code 页面code String类型
//参数：title 标题（可无）  String类型
//参数：callback 回调（可无）  function
//参数：sizeOption css样式（可无） object  {width：0，height：0, headCss:{(写css)}}

//使用方法
imr.creatForm(code, title, ()=>{

    }, sizeOption, name)
例： imr.creatForm('dataAnalysis', '弹出页面', null, {width:1200,height:1200})

关闭弹出页面

提示：

用户可通过imr.deleteForm方法，关闭弹出页面。

//方法名：deleteForm
//参数：code 页面code String类型

//使用方法
imr.deleteForm(code)

导出excel

提示：

用户可通过imr.exportExcel方法，导出excel。

//方法名：exportExcel
//参数：data 数据 数组（如 [{a:1,b:1},{a:2,b:2}]
//参数：fileName 名称 String

//使用方法
imr.exportExcel(data,fileName)

引入excel

提示：

用户可通过imr.importExcel方法，引入excel。

//方法名：importExcel
//参数：callback(ro) function

//使用方法
imr.importExcel((ro)=>{
    console.log(ro)
})

浏览器窗口改变触发方法

提示：

用户可通过imr.pageResize方法，响应浏览器窗口。

//方法名：pageResize
//参数：callback(ro) 回调 function

//使用方法
imr.pageResize((ro)=>{
    console.log(ro)
})

计时器

提示：

用户可通过imr.setTimeout方法，用于计时器方法。

//方法名：setTimeout

//使用方法
imr.setTimeout(()=>{
    console.log()
}, ms)

时间

提示：

用户可通过imr.getDate方法，获取时间。

//方法名：getDate
//参数：fmtStr 格式（可无） String类型
//参数：date 时间对象（可无） object

//使用方法
imr.getDate(fmtStr, date)

MyTask（线程）

提示：

用户可通过imr.MyTask方法，创建新线程。

//方法名：MyTask
//参数：fmtStr 格式（可无） String类型
//参数：date 时间对象（可无） object

//使用方法
function demo() {
    function f() {
        var time = new Date()
        // 发送数据
        postMessage(time.getTime());

        setTimeout(f, 50);
    }
    f();
}
var task = new imr.MyTask(demo, (ro)=>{
    // 接收数据
})
task.start() // 开始
task.end() // 结束

光晕（3D）

提示：

用户可通过imr.highlightLayer方法，让模型显示光晕。

//方法名：imr.highlightLayer 光晕
//参数1：meshName 模型名称[string]
//参数2：color 光晕颜色[string]('#00FF00')
//参数3：scene 场景[object](_scene)

//使用方法
imr.highlightLayer(meshName,color,size,scene)

边框高亮（3D）

提示：

用户可通过imr.edgesWidth方法，让模型边框高亮。

//方法名：imr.edgesWidth 边框高亮
//参数1：meshName 模型名称[string]
//参数2：color 边框颜色[string]('#00FF00')
//参数3：size 边框宽度[number](3)
//参数4：scene 场景[object](_scene)

//使用方法
imr.edgesWidth(meshName,color,size,scene)

警告（3D）

提示：

用户可通过imr.mappingTexture方法，让模型显示警告图案。

//方法名：imr.mappingTexture 警告
//参数1：meshName 模型名称[string]
//参数2：type 1矩形 2圆形[number](1)
//参数3：scene 场景[object](_scene)

//使用方法
imr.mappingTexture('',2, _scene)

划线流动（3D）

提示：

用户可通过imr.creatline方法，创建流动线条。

//方法名：imr.creatline 划线流动
//参数1：path 路径[array]]
//参数2：radius 线半径[number](0.05)
//参数3：scene 场景[object](_scene)

//使用方法
var path = [ 	
        imr.Vector3(5, 0, 5),
        imr.Vector3(-5, 0, 5),
        imr.Vector3(-5, 0, -5),
        imr.Vector3(5, 0, -5),
        imr.Vector3(5, 0, 5)
];
imr.creatline(path,0.1,_scene) 

轨迹流动（3D）

提示：

用户可通过imr.particleSystem方法，创建轨迹流动。

//方法名：imr.particleSystem 轨迹流动
//参数1：path 路径[array]]
//参数2：radius 大小[number](0.15)
//参数3：color 颜色[string]('#FFFFFF')
//参数4：scene 场景[object](_scene)

//使用方法
var path = [ 	
        imr.Vector3(5, 0, 5),
        imr.Vector3(-5, 0, 5),
        imr.Vector3(-5, 0, -5),
        imr.Vector3(5, 0, -5),
        imr.Vector3(5, 0, 5)
];
imr.particleSystem(path,0.1,'#66FFFF')

光影扩散（3D）

提示：

用户可通过imr.rippleShadow方法，让模型显示光影扩散效果。

//方法名：imr.rippleShadow 光影扩散
//参数1：meshName 模型名称[string]
//参数2：size 大小[number](3)
//参数3：scene 场景[object](_scene)

//使用方法
imr.rippleShadow('',8,_scene) 

圆柱光影扩散（3D）

提示：

用户可通过imr.rippleCylindr方法，让模型显示圆柱光影扩散效果。

//方法名：imr.rippleCylindr 圆柱光影扩散
//参数1：meshName 模型名称[string]
//参数2：size 大小[number](3)
//参数3：speed 速度[number](10),设置0时不动画
//参数4：color 颜色[color]('#00ff00')
//参数5：scene 场景[object](_scene)

//使用方法
imr.rippleCylindr('',1.5,0,'#0DF0FF', _scene)  

半球光影扩散（3D）

提示：

用户可通过imr.rippleHemisphere方法，让模型显示半球光影扩散效果。

//方法名：imr.rippleHemisphere 半球光影扩散
//参数1：meshName 模型名称[string]
//参数2：size 大小[number](3)
//参数3：speed 速度[number](10),设置0时不动画
//参数4：color 颜色[color]('#00ff00')
//参数5：scene 场景[object](_scene)

//使用方法
imr.rippleHemisphere('',2,5,'#ffffff',_scene)  

立方体光影扩散（3D）

提示：

用户可通过imr.rippleBox方法，让模型显示立方体光影扩散效果。

//方法名：imr.rippleBox 立方体光影扩散
//参数1：meshName 模型名称[string]
//参数2：size 大小[number](3)
//参数3：speed 速度[number](10),设置0时不动画
//参数4：color 颜色[color]('#00ff00')
//参数5：scene 场景[object](_scene)

//使用方法
imr.rippleBox('',1.5,0,'#0DF0FF', _scene)   

网状（3D）

提示：

用户可通过imr.wireframe方法，让模型显示网状效果。

//方法名：imr.wireframe 网状
//参数1：meshName 模型名称[string]
//参数2：color 颜色[string]('#FFFFFF')
//参数3：scene 场景[object](_scene)

//使用方法
imr.wireframe('','#FFFFFF',_scene) 

提示框（3D）

提示：

用户可通过imr.ethPanel方法，让模型显示提示框。

//方法名：imr.ethPanel 提示框
//参数1：meshName 模型名称[string]
//参数2：option 内容配置[object]
// {
//     title:{
//         text: '', //标题
//         color: '' //标题颜色
//     }, 
//     content: [], //内容， 每个元素占据一行
//     fontSize: 14, // 字体大小
//     color: '#000', //字体颜色
//     lineColor: 'rgba(0, 0, 0, 1)', // 提示框和模型连接线的颜色
//     themeStyle: 1 //背景图片 1,2,3
// }
//参数3：imageOption 图片配置[object]
// {
//     image: 'https://cloud.krmes.com/img/DataV/panel/panel4.svg',// 图片地址
//     width: 208, 
//     height: 92, 
//     linkOffsetX: 200, // 偏移度x
//     linkOffsetY: -200 // 偏移度y
// }
//参数4：scene 场景[object](_scene)
//返回 textFunReturn函数 

//使用方法
var textFunReturn1 = imr.ethPanel('', {title:{text: '1号设备', color: 'Orange'}, content: ['当前功率：0KW', '当前功率：0KW'], fontSize: 14, color: '#000', lineColor: 'Orange', themeStyle: 1},{image: 'https://cloud.krmes.com/img/DataV/panel/panel4.svg',width: 200, height: 92, linkOffsetX: 200, linkOffsetY: -200}, ()=>{console.log('click')})
//关闭方法
textFunReturn1({ dispose: true })

模型旋转（3D）

提示：

用户可通过imr.rotateAnimation方法，让模型旋转。

//方法名：imr.rotateAnimation 模型旋转
//参数1：meshName 模型名称[string]
//参数2：axis 轴线[string]('x')
//参数3：rotationValue 数值[float](Math.PI*0.5)
//参数4：speed 速度[number](10)
//参数5：loop 是否循环[boolean](true)
//参数6：scene 场景[object](_scene)

//使用方法
var option = {
    alpha: 0.5,
    beta: 1.27,
    radius: 11,
    target: {
        x: 0,
        y: 0,
        z: 0
    }
}
imr.rotateAnimation('CNC11', 'y', Math.PI, 10, true)

移动摄像机（3D）

提示：

用户可通过imr.moveCamera方法，让摄像机移动。

//方法名：imr.moveCamera 移动摄像机
//参数1：option 目标坐标[object]
//参数2：callback 执行完回调[function]
//参数6：scene 场景[object](_scene)

//使用方法
var option = {
    alpha: 0.5,
    beta: 1.27,
    radius: 11,
    target: {
        x: 0,
        y: 0,
        z: 0
    }
}
imr.moveCamera(optionMenu, ()=>{}, _scene_contain2)