使用ThingJS开发项目时，经常会遇到一个设备会有多种状态，比如：设备在线\离线、告警、鼠标移入移出状态、设备选中的状态等。那么想要更好的管理这些状态，我们就需要一个设备状态管理。而且设备不止这一种，我们的设备有摄像头、门禁、灯杆、消防栓、机柜、烟感等等，都想要使用这一套状态怎么办？
别急，下面我们就来教你怎么解决这个问题
在ThingJS的开发平台上，给我们开放了自定义类的方法，供我们定义自己的类
注意：想要使用自定义类，我们得需要先定义再注册
第一步：定义类
使用ES6的语法定义一个类，我们起个名字，叫Deploy(注意：名字可以自己随便起)
继承 ThingJS 内部类（比如：Thing 类），对 ThingJS 进行扩展和封装
// 继承 Thing 类
class Deploy extends THING.Thing {
constructor(app) {
super(app);
}
// 添加一个 run 方法
run() {
// TODO: 做我们想做的事情
}
}
第二步：注册类
通过 THING.factory.registerClass 方法，将继承于 ThingJS 内部类的自定义类，注册到系统中
// 注册自定义类
THING.factory.registerClass('Deploy ', Deploy );
大家可能会疑惑，里面传进去的两个参数是啥呢？
别急，上图
image.png
第三步：使用自定义类
type的值，为我们自定义类的名称
app.create({
type: 'Deploy',
id: 'deploy01',
position: [0, 5, 0],
url: '/static/Thing/video/gltf',
});
OK，上面我们讲了半天如何自定义类，继承Thing类，接下来，我们将回到第一步，在自定义类时，我们可以自己添加方法，就是我们要做设备状态管理的方法
上图，我们先看一下，添加的方法会绑定在哪里呢
image.png
image.png
image.png
设备状态管理
鼠标划入滑出状态
hover状态.gif
实现代码
设备状态管理器内的方法
// 设备hover状态
hoverState() {
// this——当前被查询到的Thing对象
this.style.color = '#0DA2F7';
this.style.glow = true;
}
外部使用方法
/**
* 鼠标操作事件
*/
mouseEvent() {
// 鼠标移入
app.on(THING.EventType.MouseEnter, '.Deploy', (ev) => {
ev.object.hoverState();
}, 'mouseEnterDeploy');
// 鼠标移出
app.on(THING.EventType.MouseLeave, '.Deploy', (ev) => {
ev.object.normalState();
}, 'mouseLeaveDeploy');
},
设备选中状态
active状态.gif
实现代码
// 设备选中状态
activeState() {
const pos = this.position;
// 创建选中状态的模型
const marker = this.app.create({
type: 'Thing',
name: 'activeMarker',
url: '/static/Thing/selected',
parent: this,
position: [pos[0], pos[1] + 0.2, pos[2]],
scale: [0.03, 0.03, 0.03],
inheritStyle: false,
inheritScale: false,
ignoreParentScale: false,
});
this.activeMarker = marker;
// 使用hover状态效果
this.hoverState();
// 顶牌跳动效果
this.animateTo(marker);
}
大家可能会疑惑，上面的模型顶牌是怎么上下跳动的呢
// 气泡跳动效果
animateTo(marker) {
function getMovePath(mark) {
if (mark) {
const pos = mark.position;
const topPos = [pos[0], pos[1] + 0.1, pos[2]];
return [pos, topPos, pos];
}
return [];
}
marker.movePath({
path: getMovePath(marker),
time: 1000,
loopType: THING.LoopType.Repeat,
local: false,
});
}
设备告警状态
alarm状态.gif
// 设备告警状态
alarmState() {
this.style.color = '#ff0000';
this.style.glow = true;
const pos = this.position;
// 创建告警顶牌
const marker = this.app.create({
type: 'Marker',
name: 'alarmMarker',
url: '/static/images/alarm_marker.png',
parent: this,
position: [pos[0], pos[1] + 0.3, pos[2]],
size: 0.2,
keepSize: false,
inheritScale: false,
});
this.alarmMarker = marker;
this.animateTo(marker);
}
// 效果应用代码
app.query('.Deploy')[0].alarmState();
设备离线状态
设备离线状态.png
// 设备离线状态
offLineState() {
this.style.color = '#4B4B4B';
}
// 效果应用代码
app.query('.Deploy')[0].offLineState();
设备正常状态（在线状态）
image.png
// 设备正常状态
normalState() {
this.style.color = '';
this.style.glow = false;
if (this.activeMarker) this.activeMarker.destroy();
if (this.alarmMarker) this.alarmMarker.destroy();
}
// 效果应用代码
app.query('.Deploy')[0].normalState();
如果是摄像头类设备，打开视椎效果（摄像头拍摄范围）
我们可以通过改变fov, far, scale等值，调整视椎效果
image.png
// 打开摄像头视椎
videoConus() {
this.app.create({
type: 'Frustum',
aspect: 2,
fov: 20,
far: 0.05,
parent: this,
scale: [0.2, 0.2, 0.2],
inheritStyle: false,
});
}
// 效果应用代码
app.query('.Deploy')[0].videoConus();
想要探讨问题或者Demo示例代码，请戳邮箱：[email protected]