基于SVG与echarts实时显示车间设备状态的方法及系统技术方案

本发明专利技术公开了一种基于SVG与echarts实时显示车间设备状态的方法及系统，所述方法包括以下步骤：S110，准备车间设备平面图的SVG文件；S120，处理SVG平面图，绑定设备唯一编号到SVG图层元素的name属性；S130，将处理后的车间设备的SVG平面图注册为echarts地图，设置echarts地图系列进行可视化渲染；S140，将车间设备的实时状态数据接入到echarts系列；S150，设置echarts的视觉映射通道，将设备状态值数据映射到视觉元素，展现车间设备的实时状态。本发明专利技术能够显著简化制图工序，可以实时可视化的展示设备状态的变化，同时兼具平移缩放设备图不失真的特点，基于echarts成熟开源的技术，无需商用渲染引擎，节省实现成本。节省实现成本。节省实现成本。

【技术实现步骤摘要】
基于SVG与echarts实时显示车间设备状态的方法及系统


[0001]本专利技术涉及互联网计算机及大数据处理
，特别涉及一种基于SVG与echarts实时显示车间设备状态的方法及系统。

技术介绍

[0002]在工厂运维监控可视化大屏上，需要展示车间的生产设备平面图，并实时展示生产设备的运行状态。现有方案一般是先通过CAD制图软件将车间设备制作成DWG图纸，在制作图纸时通过不同的颜色区分设备的不同状态，再通过DWG渲染引擎将制作好的图纸进行可视化渲染，由此实现车间生产设备平面图和设备状态的展示。
[0003]但这类方式仍有不足：第一方面，由于DWG图纸只能静态展示，无法二次更改样式，所以无法实时可视化的展示设备的状态变化。第二方面，目前市面上用于渲染DWG图纸的渲染引擎都是商用的且价格高昂，导致该方案实现起来成本巨大。第三方面，通常由CAD软件制作图纸工序复杂，且图纸占用存储空间巨大，渲染图纸的机器需要极高的硬件配置，进一步提高了该方案的实现成本。

技术实现思路

[0004]针对现有技术存在的问题，本专利技术的目的本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于SVG与echarts实时显示车间设备状态的方法，其特征在于，所述方法包括以下步骤：步骤S110，准备车间设备平面图的SVG文件；步骤S120，处理SVG平面图，绑定设备唯一编号到SVG图层元素的name属性；步骤S130，将处理后的车间设备的SVG平面图注册为echarts地图，设置echarts地图系列进行可视化渲染；步骤S140，将车间设备的实时状态数据接入到echarts系列；步骤S150，设置echarts的视觉映射通道，将设备状态值数据映射到视觉元素，展现车间设备的实时状态。2.根据权利要求1所述的基于SVG与echarts实时显示车间设备状态的方法，其特征在于，步骤S110中，根据车间设备的总平面图，通过制图软件制作成图纸，将图纸导出为SVG格式的平面图文件；其中SVG内容中的g元素代表每个设备对应的图层元素，和车间设备一一对应，fill
‑
opacity和stroke属性分别代表图形元素的填充透明度和填充色，通过颜色来渲染svg图形的视觉样式，g元素内部的rect等元素描述设备的形状，rect元素中x，y分别代表该图形元素在平面图中的位置，width和height属性代表该图形元素在平面图中的宽高尺寸。3.根据权利要求2所述的基于SVG与echarts实时显示车间设备状态的方法，其特征在于，步骤S120中，处理SVG设备平面图，将车间设备的唯一编号绑定到SVG图层元素的name属性上，得到处理后的SVG设备平面图。4.根据权利要求3所述的基于SVG与echarts实时显示车间设备状态的方法，其特征在于，步骤S130中，通过echarts渲染设备SVG平面图，具体流程为：步骤S1301，注册echarts地图；步骤S1302，加载注册好的SVG地图；步骤S1303，读取图形元素坐标尺寸和样式信息；将SVG地图加载之后，echarts解析SVG文件内容，读取所有图形元素中携带的坐标尺寸信息以及颜色信息进行缓存；步骤S1304，渲染SVG地图，将步骤S1303中读取到的图形元素坐标尺寸信息和颜色转化为SVG图形元素的位置尺寸和视觉样式信息，将根据此对SVG进行渲染。5.根据权利要求4所述的基于SVG与echarts实时显示车间设备状态的方法，其特征在于，步骤S1304中，当出现设备故障停机时，实现设备故障的量化分级和可视化告警效...

【专利技术属性】
技术研发人员：陈鹏，叶玎玎，张金银，张溪梦，骆晓广，
申请(专利权)人：杭州比智科技有限公司，
类型：发明
国别省市：