TSvg监控拓扑图

概要

TSvg是在svg文件基础上增加拓扑图配置后形成的文件。

该文件可以在TDS的拓扑图组件中运行得到各种拓扑监控图的效果。

编辑好的tsvg文件，放置在 "配置文件夹->topo"目录下，tds拓扑组件会自动加载该文件。

编辑工具

所有矢量图编辑工具都可以用来编辑TSvg文件。例如 Adobe Illustration等。

推荐使用开源软件inkscape工具来编辑，

下载地址：https://inkscape.org/gallery/item/29351/inkscape-1.1.1_2021-09-20_3bf5ae0d25-x64.exe

其他下载地址：http://www.liangtusoft.com/download/tools/inkscape-1.1.1_2021-09-20_3bf5ae0d25-x64.exe

任意地编辑svg文件，最后在 对象属性中编辑 描述信息，输入 topo配置信息，就得到了可以在tds拓扑组件中运行的TSvg文件。

基本语法

拓扑配置

topo配置的内容按照 配置项与配置值(键值对)的方式来组织，例如：

位号=空调主机.启动开关
动画={
     类型=旋转
     启动值=true
     转速=3
}

• 配置项和配置值中间用 = 号分隔 （也可以使用 : 号,由于 : 可以是中文也可以是英文，因此推荐使用 = 号）
• 新的配置项回车换行
• "配置项组" 使用 { } 大括号包含，组内配置该组的配置项
• 配置项支持中文和英文

拓扑配置语法遵循 HJson规范，如果想要深入了解，可以查看HJson规范

https://hjson.github.io/rfc.html

唯一的区别是，拓扑配置语法允许用 = 替换 : 号，方便在中文输入法下的应用，防止 : 号混淆

位号语法

所有配置中的位号都使用相对位号，svg的文件名称就是该拓扑图的根位号。拓扑图内的配置，都使用相对于该拓扑的根位号的相对位号即可。

例如如下系统

如果有一张硕放国际机场的拓扑图，那么拓扑中配置的位号直接写入 煤气炮1# 即可，无需使用完整位号的

江苏省.硕放国际机场.煤气炮1#。

同时，该拓扑图需要被命名为 江苏省.硕放国际机场.svg

图形动画

实时值显示

实时值显示使用svg文本标签实现，并在拓扑配置中配置关联的位号。该文本标签将显示该位号的实时值，带单位。

可见性效果

使用开关量或者值是否满足某个条件来控制元素是否可见

当为开关量时可以填入: 0/1 true/false 开/关

当为模拟量或者整形时可以填入: >10 ==20 <10 等条件表达式

位号=检测仪.激光
可见值=1

流动动画效果

1.绘制图形。 流动效果通过折线图形表现，1条实心折线作为背景，1条虚线作为水流

2.配置拓扑信息。加入流动动画效果

位号=空调主机.启动开关
动画={
     类型=流动
     方向=正
     速度=40
     启动值=1
}

旋转动画效果

选择需要添加旋转效果的元素，配置拓扑信息如下

转速的单位为: 转/秒

启动值表示该位号的值为 true时转动，false是不转动。也可以配置为1 或 0

位号=空调主机.启动开关
动画={
     类型=旋转
     启动值=true
}

液位动画效果

任意绘制一个矩形，矩形的高度代表最高液位，并配置最大值的数值

软件将根据监控点的实时值与最大值的比例关系，动态调整矩形的高度

注意：无需配置最小值，最小默认为0

位号= 储水池.水位
动画={
     类型=液位
     最大值=10
}

状态动画效果

图像元素关联一个对象

如果元素代表某个对象，左键点击需要弹出对象窗口。但是动画是该对象下的某个监控点来控制的，可以如下配置：

对象= 一层.空调1-1#
动画={ 
     位号=启停控制
     类型=状态
}

使用对象字段配置svg元素关联的对象位号

动画配置项内部指定位号

动画配置项内部的位号，使用相对于当前对象 的相对位号

此时，将使用位号一层.空调1-1#.状态的数值来驱动动画

图像元素关联一个监控点

如果元素仅代表监控点的状态，如下配置：

位号= 模式设置
动画={ 
     类型=状态
}

状态图组件

状态动画需要配合状态图组件使用

方法1：使用inkscape，绘制一张新的svg图片，里面放入各个不同状态的图片，并定义不同状态图片对应的数值。将该svg图片作为一个组件插入到当前编辑的拓扑图

方法2：直接对多个svg元素进行群组操作，然后配置组的参数即可

将值为true时需要显示的状态图的属性设置为

状态=true

将值为false时需要显示的状态图的属性设置为

状态=false

然后将这两张图片居中对齐，使用inkscape的群组功能合并为一个群组。

然后对群组对象配置状态动画效果 即可

如果状态是一个枚举值，可以直接设置状态为枚举值，如下图将制冷，制热，除湿三个状态制作成一个状态图：

报警与在离线

设备状态颜色显示

设备状态	默认显示颜色
在线 && 告警	红色
在线 && 预警	橙色
在线 && 正常	绿色
离线	灰色

位号=煤气炮18#
报警=true
上下线=true

在拓扑配置中加入报警=true ，表示启用报警颜色显示；加入 上下线=true，表示启用离线在线显示。

用户输入

状态开关输入

状态开关基于状态动画与点击响应事件实现

1. 先给一个按钮配置好一个状态动画

2. 为按钮的点击事件添加响应函数

HTML交互控件

所有的控件，都通过绘制一个任意的标记图形，在图形的 拓扑配置信息中，加入：

控件 配置项，配置项的值支持，开关，输入框，下拉框，层叠选择框，实时视频窗口等。

TSvg的控件是使用element-ui 实现的，您可以在 element-ui的主页查看可以被TSvg支持的控件

https://element.eleme.cn/#/zh-CN/component

开关

输入框

位号 = 客厅.空调.设定温度
控件 = 输入框

枚举输入框

位号 = 客厅.空调.工作模式
控件 = 枚举输入框 
枚举表 = {
    制冷 = 0
    制热 = 1
}

iframe 外链控件

iframe用于直接外嵌1个网页. 基于tds的app应用统一支持通过urlParam设置选项，用于设置app的效果

如下配置调用 hist组件，显示1号水池最近24小时内的数据

控件 = iframe
iframe ={
    src="/hist/?tag=1号水池.水位&time=24h&showHeader=false"
}

图表

TDS-RPC的很多数据接口直接以表格形式返回,可以直接以表格控件显示,参数填入tdsRpc接口调用参数

监控对象状态表

控件 = 表格
数据={
    method=getMoStatus
    params={
        type=水泵
    }
}

弹窗与跳转

页面外链用于在点击某个对象时，弹出和该对象相关的整个功能页面。

左键弹窗

拓扑图弹窗

使用自定义绘制的一张拓扑图，作为弹窗的内容，拓扑图如下放置：

[运行目录]/topo/template/温控器.svg

假设点击某一个元素，需要弹出模版，拓扑配置配置如下：

例如多个风机盘管监控对象，都使用一个温控器模版来控制，则对象字段配置对应的对象位号，该位号是相对于一层 的相对位号。模版**字段配置模版拓扑图文件的名称

对象=风机盘管1-1#
模板=温控器

在模版svg中进行配置时，位号统一使用相对于风机盘管对象位号的相对位号

自定义H5弹窗

mopanel表示该设备的操控面板，用于对拓扑图中的物联网设备进行配置或者操控。一般每种设备有专门定制开发的面板页面，页面路径放在 程序目录/mopanel/XXX 中，在拓扑配置中配置需要链接的页面，例如:

假设鼓风机1#的操控面板页面是 /mopanel/gfj。则如下配置，设置点击该对象，弹出鼓风机配置面板。

位号=鼓风机18#
mopanel=/mopanel/gfj

拓扑图跳转（图层下钻）

用于在同级与上下级拓扑之间跳转

建议 把 /conf/topo中的拓扑中的文件使用位号进行命名，例如

驱鸟设备平台.svg 驱鸟设备平台.萧山国际机场.svg

软件将自动显示顶层位号的拓扑图作为首先显示的拓扑图，也就是：驱鸟设备平台.svg

按照下图配置图像中的点击跳转

应用跳转

TDS的功能模块基于app进行组织，左侧导航栏点击功能按钮，相当于进入了某个app

拓扑图上点击某些元素，可以直接跳转到某个app，并传递给该app一些参数

例如点击统计信息栏，跳转到设备监控列表界面。

配置如下，在对象属性中配置 onclick 点击事件， 调用 tsvg.gotoApp函数，第一个参数是app名称，也即

程序运行目录/app 目录下的app页面目录，第二个参数是app的url参数

tag参数为空表示传递根位号，listType表示 实时列表界面显示 监控对象列表

自定义脚本功能

可以在自定义脚本当中添加 tds RPC函数，实现更多的控制功能，支持的函数列表

函数	功能
tds.acq("房间1.灯光开关")	采集一次某个位号的实时值
tds.output("房间1.灯光开关"，true)	输出某一个位号的实时值

自定义按钮点击