文档中心模型资源工具库
资产可视化系统中的资产模型和库房可视化系统中的档案盒模型，不像常规模型那样需要通过建模工具预先建模，而是通过模型资源工具手动编辑。目前DCVM中的资产模块和库房模块都集成了该工具进行模型编辑。模型资源工具也提供单独的SDK库，允许开发者使用SDK接口将该工具集成到自己的系统中。
安装工具库
模型资源工具库是个web前端库，托管在 npmjs 网站上，可以通过如下命令安装。
bash
npm i @glowjs/restool该工具库的dist目录下有如下几个文件，需要将它们拷贝到 GlowJS专属文件夹 的不同子文件内。
vue.js：vue3框架库文件，拷贝到glowjs/js文件夹内。element-plus.js：ElementPlus库文件，拷贝到glowjs/js文件夹内。element-plus.css：ElementPlus库的样式文件，拷贝到glowjs/style/css文件夹内。glow.restool.js：模型资源工具库文件，拷贝到glowjs/js文件夹内。glow.restool.css：模型资源工具库的样式文件，拷贝到glowjs/style/css文件夹内。
引入工具库
通过 <script> 标签导入工具库文件 glow.restool.js ， glow.restool.js 依赖 vue.js ，所以需要先导入 vue.js 。
html
<script src="glowjs/js/vue.js"></script>
<script src="glowjs/js/glow.restool.js"></script>注意
1.不要将工具库中的文件打包到项目代码中，否则可能出现问题。
2.如果项目本身使用了vue3框架，请不要将vue3框架库打包到项目代码中，改用 <script> 标签引入。
3.不需要手动导入其它库文件和样式文件，工具库会自动导入。
使用工具库
工具库的使用可以简单分为3个步骤。
1、创建一个 ResToolOptions 参数对象。必须包含如下属性：
container：指定工具库挂载的DOM容器元素。type：指定工具库操作的模型资源类型。data：指定模型资源数据，与type须要匹配。
创建一个资产模型的示例参数对象如下：完整示例
typescript
let options: GLOW.ResToolOptions = {
container, //DOM容器
type: GLOW.ResToolType.RackMounted, //类型
data: {
name: 'FortiGate 60D', //模型名称
uHeight: 2, //U高
width: 0.4826, //宽度，单位米
depth: 0.6, //深度，单位米
frontImg: '', //前面图片，为空表示无图片
backImg: '', //后面图片，为空表示无图片
backgroundColor: '#666666', //背景颜色
children: [] //子元素（网口），为空表示没有
}
};创建一个档案盒模型的示例参数对象如下：完整示例
typescript
let options: GLOW.ResToolOptions = {
container, //DOM容器
type: GLOW.ResToolType.ArchiveBox, //类型
data: {
name: '档案盒', //模型名称
"width": 0.22, //宽度，单位米
"height": 0.31, //高度，单位米
"depth": 0.04, //深度，单位米
frontImg: '', //前面图片，为空表示无图片
backImg: '', //后面图片，为空表示无图片
sideImg: '', //侧脊图片，为空表示无图片
backgroundColor: '#666666' //背景颜色
}
};创建一个板卡模型的示例参数对象如下：完整示例
typescript
let options: GLOW.ResToolOptions = {
container, //DOM容器
type: GLOW.ResToolType.BoardCard, //类型
data: {
name: 'HP BL465c G7', //模型名称
width: 0.04, //宽度，单位米
height: 0.15, //高度，单位米
depth: 0.2, //深度，单位米
frontImg: '', //前面图片，为空表示无图片
backgroundColor: '#666666', //背景颜色
children: [] //子元素（网口），为空表示没有
}
};2、创建一个 ResTool 对象。
typescript
let tool: GLOW.ResTool = new GLOW.ResTool(options); //创建一个模型资源工具对象3、设置保存回调函数onSave。
typescript
tool.onSave = async (data: GLOW.RackMountedData | GLOW.BoardCardData | GLOW.ArchiveBoxData) => {
//将data对象反序列化保存到文件或者数据库中
console.log(data);
};图片处理
模型数据的图片字段的属性为ResImageSource类型，该类型可以是一个字符串，也可以是一个对象。
如果是字符串，则表示图片的base64编码，为空则表示无图片。
如果是对象，则表示图片的文件信息。
保存回调函数onSave中的data对象的图片字段默认返回的是base64编码的字符串，如果需要保存到数据库中，建议将图片保存成文件，id建议通过计算图片的md5值来获取。