用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.这样，设备管理部分就可以轻松搞定了。

欢迎各位大佬点评。

点点关注点点赞。

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