用vue canvas画一个能源电表和设备的监测图-CSDN博客

上一篇文章，我是用后端的数据来画出监测图。这次我觉的，用前端来控制数据，更爽。

本期实现功能：

1，得到监测设备和设备的数据，然后进行存库

2，得到监测设备和设备的关系流程图，然后可以生成图片

3，后期对设备进行监测，可以得知设备的正常状态或者是异常状态。

先上图片：

用法：

1.用户根据自己的监测设备和普通设备位置。在画布上绘出。

2.当用户绘制完后，导出数据则可获得所有的监测设备数据，设备数据，以及流程数据。

3.数据展示

{"devices": [{"id": "device-1748911468928","name": "F2层打印机","type": "normal","position": {"x": 682,"y": 492},"connections": [],"all": {"id": "device-1748911468928","type": "normal","name": "F2层打印机","position": {"x": 682,"y": 492},"size": {"width": 60,"height": 60},"connections": []}},{"id": "device-1748911470171","name": "F2层电表","type": "metering","position": {"x": 462,"y": 337},"connections": ["device-1748911476354","device-1748911468928"],"all": {"id": "device-1748911470171","type": "metering","name": "F2层电表","position": {"x": 462,"y": 337},"size": {"width": 60,"height": 60},"connections": ["device-1748911476354","device-1748911468928"]}},{"id": "device-1748911476354","name": "F2层跑步机","type": "normal","position": {"x": 685,"y": 337},"connections": [],"all": {"id": "device-1748911476354","type": "normal","name": "F2层跑步机","position": {"x": 685,"y": 337},"size": {"width": 60,"height": 60},"connections": []}},{"id": "device-1748911477587","name": "总电表","type": "metering","position": {"x": 254,"y": 214},"connections": ["device-1748911478408","device-1748911470171"],"all": {"id": "device-1748911477587","type": "metering","name": "总电表","position": {"x": 254,"y": 214},"size": {"width": 60,"height": 60},"connections": ["device-1748911478408","device-1748911470171"]}},{"id": "device-1748911478008","name": "大厅设备","type": "normal","position": {"x": 692,"y": 77},"connections": [],"all": {"id": "device-1748911478008","type": "normal","name": "大厅设备","position": {"x": 692,"y": 77},"size": {"width": 60,"height": 60},"connections": []}},{"id": "device-1748911478408","name": "大厅电表","type": "metering","position": {"x": 451,"y": 83},"connections": ["device-1748911478008"],"all": {"id": "device-1748911478408","type": "metering","name": "大厅电表","position": {"x": 451,"y": 83},"size": {"width": 60,"height": 60},"connections": ["device-1748911478008"]}}],"connections": [{"from": "device-1748911477587","to": "device-1748911478408","all": {"id": "conn-1748911650304","from": "device-1748911477587","to": "device-1748911478408","points": []}},{"from": "device-1748911477587","to": "device-1748911470171","all": {"id": "conn-1748911652725","from": "device-1748911477587","to": "device-1748911470171","points": []}},{"from": "device-1748911478408","to": "device-1748911478008","all": {"id": "conn-1748911655187","from": "device-1748911478408","to": "device-1748911478008","points": []}},{"from": "device-1748911470171","to": "device-1748911476354","all": {"id": "conn-1748911657504","from": "device-1748911470171","to": "device-1748911476354","points": []}},{"from": "device-1748911470171","to": "device-1748911468928","all": {"id": "conn-1748911660458","from": "device-1748911470171","to": "device-1748911468928","points": []}}]
}

4.根据数据，进行存库。type代表类型。connections则代表的每个设备之间的关系。

5.在来一张本地保存的图片：

6.后期根据设备的状态，来动态的修改设备的图片。来展示出设备的异常状态和正常状态。

7.这样，设备管理部分就可以轻松搞定了。

欢迎各位大佬点评。

点点关注点点赞。

有需要代码的，留言或者私信。