纪一次独立开发工作总结

代码写了很多进步不多，反思来说还是没做好总结以至于很多问题再次遇到会有很熟悉但陌生的感觉。这应该是自己实现独立开发的第一个组件了，以前都是在已有组件的基础上按需新增功能而已，所以这也是值得纪念了。

更好的学习是在工作中，更快的进步是在项目中。每个公司部门的项目架构不一样，按理说这样是很难有什么参考价值，但其中封装了很多函数方法，涉及的开发思想，也是对我帮助很大，希望也能对你有所帮助。

需求

可视化场景AR场景中，每个监控设备点位的抓拍到的报警信息，要根据告警数据的推送相应的显示报警样式的设备点位，并在每个点位附近显示展示报警信息的卡牌，卡牌要随数据推送进行转动。

难点

1. 原本场景中的AR是其他部门开发的产品，那时候使用的是1.0版本，现在是2.0是重构后的版本，改动特别大。
2. 显示告警设备点位样式需要采用自定义点位样式，这涉及到SVG相关的知识。
3. 最后就是数据传递，告警数据传到前端需要更改样式和数据展示。

Key point

1、AR的使用需要有两个文件的引用，在组件开发中将文件打包上传到组件服务是预览不生效的，需要将文件拷到v-components中的release文件下

代码中使用需要在v-scene-designer中src文件里通过script标签引用

2、AR创建实例之前需要自动创建class为container的dom节点，之后才是AR实例的创建，且考虑到之后数据的问题，这两步都需要进行监听。设置一个标志arReady来控制只有在实例创建之后才进行数据的操作。

3、创建container的dom节点时候，必须确定其宽高为固定值，否则会导致AR初始化时候获取不到宽高，不能显示设备点位样式。将this.width和this.height的值赋给container，但需要注意的由于createContainer函数是放在被监听的updateAR中，updateAR会被一直执行，甚至在ready之前，所以需要确定this.width和this.height何时有值才能调用createContainer。

4、创建AR时候，最关键的是自定义点位模板的创建以及自动触发点位点击事件的创建。

在beforeload周期函数中this.kar.difineArObjContent("warning", this.arTemplate)，这里的arTemplate就是外部svg文件，即自定义的告警点位样式文件。

Onload周期函数里，this.kar.event.once(KAR.EVENT.AROBJ_CLICK, function(){})用来取消兴趣点的默认点击事件。先通过getDevArObjs接口获取到场景中所有设备点位信息，自定义一个数组来匹配设备点位的唯一ID和告警数据，这里是在创建设备点位时候新增一个设备编号字段，用这个字段来匹配哪一个点位对于哪一条数据。拿到设备点位的唯一ID是为了进行最终的点击触发兴趣点告警模板。this.kar.event.on(KAR.EVENT.AROBJ_TRIGGER_CLICK, res => {})先事件注册，然后在数据推送时候触发事件，这就是triggerAlarm函数中需要做的事情

5、svg文件的自动格式化。我是先去拿到人家默认的点位样式，把复制到的svg代码进行样式上的修修改改。

但是复制过来的svg是一大段压缩代码，查看。这里有一个小技巧，很简单用vscode就能实现。如上图先点击右下角的xml即切换语言模式，选择html。然后文档中右击选择“格式化文档”，这时候右下角会有弹窗提是配置，点击之后选择Prettier就可以了，前提是需要你安装过Prettier这个插件。

这时候再文档随意处右击格式化文档，就可以看到一段整齐的svg代码了。

就这些吧，很久不做总结，不论是写文档的能力还是回忆的能力都有所下降，明明写代码时候在意的点很多的呀。最后祝大家生活愉快。