hnht项目技术总结

hnht项目技术总结

1、列表拖曳

• 需求：用户可通过拖曳图片排序

• 技术： 使用vuedraggable插件完成，

2、组件拖曳

• 需求：用户可以通过拖曳组件来配置大屏或模板，拖拽模板回显组件

• 描述：左侧组件使用的图片，将左侧图片拖曳到右侧地图，可以显示出对应组件(当然这里用的也是图片，哈哈哈)

• 思考：一开始考虑使用canvas实现，canvas开发了一天，发现有些地方canvas实现不了，也可能是自己技术还不到位，改为dom实现。

• 技术：使用原生dragstart()，dragover()，drop()事件完成，数据存储关联使用data-index和e.dataTransfer.setData()，e.dataTransfer.getData()

• leftCode:

• rightCode

3、截图

• 需求：大屏配置完成需要保存，截图保存配置后的大屏组件，方便用户后续大屏的预览，编辑之类的

• 技术：使用html2canvas插件

4、表格动态编辑

• 需求：用表格展示查询数据库参数，并可编辑，

• 描述：

• 技术： el-table的cellClick()事件，通过判断是否点击表格，展示不同的组件（文字或输入框）

5、富文本

• 需求：需要使用富文本展示用户的一些通知公告，安全生产等

• 描述：可能富文本没什么好记的，但这是我第一次使用富文本，所以记一下，富文本编辑后可以生成带格式的文本，和不带格式的文本，还可以自定义上传图片事件

• 技术：使用wangeditor插件

6、动态组件渲染

• 需求：由于项目的大屏是动态的，配置的，所以在可视化部分也需要动态展示

• 技术：使用component动态组件完成