VUE组态图功能关键点开发

要实现可以实时监控设备状态功能的图形

需要解决问题

1.组态图如何绘制？

2.vue如何实现定时刷新请求后台？

3.该功能一定要基于配置的？

利用画图网站把改图画出来，导出SVG格式图形

数据表结构设计

前端SVG节点代码：

关键JS代码:实现了定时刷新数据事件显示

methods: {
            setTimer: function () {
                this.timer = setInterval(() => {
                    this.getCurrentData()
                }, 60 * 1000)

            },
            //点击获取当前设备信息和报警信息
            getClickData(event) {
                //获取当前点的事件,然后调用后台显示数据
                let el = event.currentTarget;
                let deviceId = el.id.substring(3);
                const params = {
                    DeviceId: deviceId
                }
                pageDeviceOne(params).then(data => {
                    let {msg, code, content} = data;
                    if (code === 200) {
                        let d = content;
                        let message = d[alarmMsg];
                        let name = d[remark];
                        this.currentMsg = 当前设备ID是: + deviceId + ",设备名称：" + name;
                        this.alarmMsg = "当前设备状态:" + message;
                    } else {
                        this.alarmMsg = 当前报警信息设备ID是: + deviceId;
                        this.currentMsg = 当前设备ID是: + deviceId;
                    }
                });
            },

            getCurrentData() {
                const params = {
                    DPStationId: 1
                }
                pageDeviceList(params).then(data => {
                    let {msg, code, content} = data;
                    if (code === 200) {
                        let dic2 = content;

                        //遍历字典
                        for (let key in dic2) {
                            try {
                                if (dic2[key] === 1) {
                                    document.getElementById(key).setAttribute("fill", "yellow");
                                }
                                else if (dic2[key] === 2) {
                                    document.getElementById(key).setAttribute("fill", "red");
                                }
                                else {
                                    document.getElementById(key).setAttribute("fill", "#B3EE3A");
                                }
                            } catch (e) {
                                continue;
                            }


                        }
                    }
                });
            }
        },
        mounted() {
            clearInterval(this.timer)
            this.getCurrentData()
            this.setTimer();
        },
        destroyed: function () {
            clearInterval(this.timer)
        }

    }

每个节点数据由后台定时任务刷新到数据库，前端在实时刷新获取，得到了相应的实时数据

总结：在开发过程中，该功能的关键点其实是在SVG的应用，如果不用SVG我还真不知道这个功能如何开发，对于一个基于

后端研发人员，前端的这些图形简直是噩梦