CN114860357B - 一种基于运维审计***rdp协议h5运维全屏的方法 - Google Patents

Abstract

本发明提出了一种基于运维审计***RDP协议H5运维全屏的方法；在本方案中，RDP协议的H5运维实现方式为通过canvas实时绘制图形界面实现，在运维配置处提供配置项，让运维员选择H5图形运维是否以全屏分辨率展现；若配置了H5图形运维分辨率为全屏，则渲染H5图形界面之前通过JavaScript获取屏幕的宽高；在渲染图形运维界面时，将屏幕宽高赋予给图形运维界面；本发明通过以上设置解决了目前在运维审计***中实现的RDP协议H5运维分辨率一般是在进入运维时固定，后期无法变更的问题。

Description

一种基于运维审计***RDP协议H5运维全屏的方法

技术领域

本发明属于计算机信息技术安全的运维审计技术领域，具体地说，涉及一种基于运维审计***RDP协议H5运维全屏的方法。

背景技术

在运维审计***中，可通过H5页面渲染运维界面实现运维，而RDP也是运维中比较常见的协议，目前在运维审计***中实现的RDP协议H5运维分辨率一般是在进入运维时固定，后期无法变更，原因是因为在运维界面要实时获取鼠标位置，分辨率改变后将难以准确获取。而出于浏览器安全限制，在html5中，W3C制定了关于全屏的API只能由用户触发，某些网页无法自动全屏，因此难以在所有网页实现全屏的RDP运维。

术语解释：

H5：H5页面是采用HTML5前端技术设计的页面，目前，HTML5的标准在很多移动端的浏览器都支持，所以很多移动站点采用HTML5技术开发，H5页面是也可以理解为移动端网页。

RDP：远程桌面协议(RDP)是一个多通道(multi-channel)的协议，让使用者(所在计算机称为用户端或'本地计算机')连上提供微软终端机服务的计算机(称为服务端或'远程计算机')。

canvas：canvas是一个可以使用脚本(通常为JavaScript)来绘制图形的HTML元素。它可以用于绘制图表、制作图片构图或者制作简单的以及复杂的动画。

W3C：（英语：World Wide Web Consortium）万维网联盟，又称 W3C 理事会，是万维网的主要国际标准组织。

发明内容

本发明针对现有技术的上述缺陷和需求，提出了一种基于运维审计***RDP协议H5运维全屏的方法；在本方案中，RDP协议的H5运维实现方式为通过canvas实时绘制图形界面实现，在运维配置处提供配置项，让运维员选择H5图形运维是否以全屏分辨率展现；若配置了H5图形运维分辨率为全屏，则渲染H5图形界面之前通过JavaScript获取屏幕的宽高；在渲染图形运维界面时，将屏幕宽高赋予给图形运维界面；本发明通过以上设置解决了目前在运维审计***中实现的RDP协议H5运维分辨率一般是在进入运维时固定，后期无法变更的问题。

本发明具体实现内容如下：

本发明提出了一种基于运维审计***RDP协议H5运维全屏的方法，包括以下步骤：

步骤1：在设置运维配置时，提前对进行全屏运维和非全屏运维分别对应的H5运维分辨率进行配置；并将运维配置项存储到服务端中；

步骤2：在进行实际运维的操作时，在开始运维前，自主选择是进行全屏运维还是非全屏运维，并通过http请求从服务端获取对应的运维配置项，将运维配置项中的RDP协议H5运维分辨率发送到运维组件；

步骤3：根据接收到的H5运维分辨率选择不同的处理方式：

当接收到对应为非全屏运维的H5运维分辨率参数时，在进行H5运维时将渲染RDP运维界面的canvas画布自适应调整为网页大小，此时运维界面的分辨率为canvas容器的宽度值和高度值；

当接收到对应为全屏运维的H5运维分辨率参数时，则在进行H5运维时，在渲染RDP运维界面之前，通过JavaScript技术获取浏览器内核内关于屏幕的宽度值参数和高度值参数；将获取的宽度值参数和高度值参数给渲染RDP运维界面的canvas画布；

步骤4：在进行全屏运维时，设置辅助方式来触发运维操作事件的实现。

为了更好地实现本发明，进一步地，在所述步骤3中，在全屏运维的情况下，在渲染RDP运维界面之前，还要在界面上设置一个启动按键并在键盘上设置一个启动按键；所述启动按键用于触发进入网页全屏的API接口。

为了更好地实现本发明，进一步地，在所述步骤3中，在全屏运维的情况下，使用前端实时将鼠标的坐标发送到服务器来实现鼠标在运维画面中位置的同步；此时将鼠标的位置重新进行处理，具体处理为：

将鼠标的X坐标参数修改为：基于网页的X坐标参数+滚动X轴的滚动距离参数；

将鼠标的Y坐标参数修改为：基于网页的Y坐标参数+滚动Y轴的滚动距离参数。

为了更好地实现本发明，进一步地，在步骤3中开始全屏运维前，弹出提示信息，提示运维员点击启动按键；所述步骤4中，在进行全屏运维时，设置来触发运维操作事件的辅助方式为：通过JavaScript的removeChild()方法移除步骤3中展示提示信息的html元素，以关闭提示运维员点击开启全屏的启动按键的信息。

为了更好地实现本发明，进一步地，所述步骤4中，在进行全屏运维时，设置来触发运维操作事件的辅助方式为：将渲染顶部信息栏与底部功能性操作菜单html元素css样式中的display属性设置为none值，以隐藏渲染顶部信息栏与底部功能性操作菜单。

为了更好地实现本发明，进一步地，所述步骤4中，在进行全屏运维时，设置来触发运维操作事件的辅助方式为：将网页的侧边栏宽度设置为0以收起侧边栏，在侧边栏旁侧保留透明按钮，点击时使侧边栏宽度恢复从而使其展开。

为了更好地实现本发明，进一步地，所述步骤4中，在进行全屏运维时，设置来触发运维操作事件的辅助方式为：在网页的页面增加悬浮透明按钮，通过css样式中的固定定位使悬浮透明按钮悬浮在运维界面右上角可见位置；通过鼠标移入悬浮透明按钮或点击按键来展开底部功能性操作菜单，所述底部功能性操作菜单提供显示软键盘、组合键、退出全屏操作选项；

将未展开时的渲染的底部功能性操作菜单的html元素高度设置为0；当底部功能性操作菜单要进入展开状态时，赋予底部功能性操作菜单的html元素可容纳菜单选项的高度参数；底部功能性操作菜单的html元素挨着悬浮透明按钮的底部。

为了更好地实现本发明，进一步地，所述步骤4中，在进行全屏运维时，设置来触发运维操作事件的辅助方式还包括：触发监听窗口退出全屏事件，触发后将网页布局恢复到刚进入运维时的排版，具体操作为：

首先，将渲染顶部信息栏与底部功能性菜单的html元素css样式中的display属性设置为block值以恢复渲染顶部信息栏与底部功能性菜单展示；

其次，通过JavaScript技术的removeChild()方法去除提供的悬浮透明按钮；

最后，将侧边栏宽度恢复以展开侧边栏。

本发明与现有技术相比具有以下优点及有益效果：

（1）个性化：可提供配置项，RDP协议H5运维是否全屏可让运维员选择；

（2）易用性：在运维员点运维员进入运维之时就将运维界面的分辨率调整为屏幕分辨率，击全屏按钮后可在网页端实现RDP协议H5运维的真正全屏，提高了运维员的运维体验；

（3）完整性：保留了功能性菜单，收缩为透明悬浮按钮，既不影响运维界面的同时也保留了功能的完整性。

附图说明

图1为本发明的流程示意图；

图2为本发明的实际操作举例流程示意图。

具体实施方式

为了更清楚地说明本发明实施例的技术方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，应当理解，所描述的实施例仅仅是本发明的一部分实施例，而不是全部的实施例，因此不应被看作是对保护范围的限定。基于本发明中的实施例，本领域普通技术工作人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“设置”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；也可以是直接相连，也可以是通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

实施例1：

本实施例提出了一种基于运维审计***RDP协议H5运维全屏的方法，如图1、图2所示，包括以下步骤：

步骤1：在设置运维配置时，提前对进行全屏运维和非全屏运维分别对应的H5运维分辨率进行配置；并将运维配置项存储到服务端中；

步骤2：在进行实际运维的操作时，在开始运维前，自主选择是进行全屏运维还是非全屏运维，并通过http请求从服务端获取对应的运维配置项，将运维配置项中的RDP协议H5运维分辨率发送到运维组件；

步骤3：根据接收到的H5运维分辨率选择不同的处理方式：

当接收到对应为非全屏运维的H5运维分辨率参数时，在进行H5运维时将渲染RDP运维界面的canvas画布自适应调整为网页大小，此时运维界面的分辨率为canvas容器的宽度值和高度值；

当接收到对应为全屏运维的H5运维分辨率参数时，则在进行H5运维时，在渲染RDP运维界面之前，通过JavaScript技术获取浏览器内核内关于屏幕的宽度值参数和高度值参数；将获取的宽度值参数和高度值参数给渲染RDP运维界面的canvas画布；

步骤4：在进行全屏运维时，设置辅助方式来触发运维操作事件的实现。

工作原理：在本方案中，RDP协议的H5运维实现方式为通过canvas实时绘制图形界面实现，在运维配置处提供配置项，让运维员选择H5图形运维是否以全屏分辨率展现；若配置了H5图形运维分辨率为全屏，则渲染H5图形界面之前通过JavaScript获取屏幕的宽高；在渲染图形运维界面时，将屏幕宽高赋予给图形运维界面；本发明通过以上设置解决了目前在运维审计***中实现的RDP协议H5运维分辨率一般是在进入运维时固定，后期无法变更的问题。

实施例2：

本实施例在上述实施例1的基础上，为了更好地实现本发明，进一步地，在所述步骤3中，在全屏运维的情况下，在渲染RDP运维界面之前，还要在界面上设置一个启动按键并在键盘上设置一个启动按键；所述启动按键用于触发进入网页全屏的API接口。

工作原理：出于浏览器安全限制，在H5中，部分网页存在W3C（万维网联盟）制定了关于全屏的API只能由用户触发，网页无法自动全屏的问题。此时通过提示信息提示运维员点击全屏按钮，方可进入全屏模式，同时在底部功能区提供全屏按钮。

本实施例的其他部分与上述实施例1相同，故不再赘述。

实施例3：

本实施例在上述实施例1-2任一项的基础上，给出一个实际举例，关于本方案有以下要点：

说明：

a.运维员通过运维配置，选择RDP协议H5运维是否以全屏方式呈现，并将配置存储到服务端，如图2所示：

a)在运维审计管理***的运维入口界面顶部，提供运维配置按钮；

b)点击运维配置按钮以弹窗的方式呈现不同协议相关的运维配置，选择协议可针对不同的协议进行配置；

c)在RDP协议运维配置中增加“H5运维分辨率是否全屏”的选择框；

d)点击弹窗中的保存按钮后，通过http请求将配置发送给服务端存储到数据库；

b.在进入H5运维之前，从服务端获取运维配置，将配置中的RDP协议H5运维是否全屏作为参数传递给H5运维组件。

c.若未配置全屏，则进行H5运维时将渲染RDP运维的canvas画布自适应网页大小，此时运维界面的分辨率为canvas容器的宽高。

d.若选择了RDP协议H5运维分辨率为全屏，则在进入H5运维，渲染运维界面之前，通过JavaScript获取屏幕宽高，获取方法为：

a) 宽度：window.screen.width

b) 高度：window.screen.height

e.将获取到的屏幕宽高赋值给渲染RDP运维界面的canvas画布。

f.出于浏览器安全限制，在html5中，W3C制定了关于全屏的API只能由用户触发，网页无法自动全屏，此时通过提示信息提示运维员点击全屏按钮，方可进入全屏模式。

g.此时由于canvas画布的尺寸为屏幕大小，大于网页可见区域的尺寸，会出现滚动条。而前端需要实时将鼠标坐标发送给服务器，以同步鼠标在运维画面中的位置，因此鼠标的位置需特殊处理，处理办法为：

a)鼠标的X坐标为：基于网页的X坐标 + 滚动X轴滚动距离；

b)鼠标的Y坐标为：基于网页的Y坐标 + 滚动条Y轴滚动距离。

h.监听窗口全屏事件，绑定触发后对网页元素进行处理的方法，具体方法如下：

a)关闭提示运维员点击全屏的信息：通过JavaScript的removeChild()方法移除步骤3中展示提示信息的html元素，以关闭提示运维员点击全屏的信息；

b)去掉顶部信息栏与底部功能区；将顶部信息栏与底部功能区html元素css样式中的display属性设置为none，以隐藏顶部信息栏与底部功能区；

c)收起侧边栏，保留透明按钮，点击可展开；将侧边栏宽度设置为0以收起侧边栏，在其左侧保留透明按钮，点击时使侧边栏宽度恢复使其展开；

d)页面增加悬浮透明按钮，鼠标移入或点击可展开功能性操作菜单，可进行显示软键盘、组合键、退出全屏等操作；通过css中的固定定位使之悬浮在运维界面右上角可见位置，鼠标移入或点击可展开功能性操作菜单（未展开时渲染菜单的html元素高度为0，展开时赋予html元素可容纳菜单选项的高度，该元素紧挨着按钮底部）；

i.运维员点击全屏按钮或使用浏览器全屏快捷键后，触发监听窗口全屏事件时绑定的方法，此时基本上仅渲染运维界面的canvas画布可见，运维界面可撑满屏幕，实现全屏效果。

j.监听窗口退出全屏事件，触发后将网页布局恢复到刚进入运维时的排版，具体方法为：

a)显示顶部信息栏；将渲染顶部信息栏与底部功能性菜单的html元素css样式中的display属性设置为block以恢复其展示；

b)显示功能性菜单；通过JavaScript的removeChild()方法去除第h步中提供的悬浮按钮；

c)展开侧边栏；将侧边栏宽度恢复以展开侧边栏。

本实施例的其他部分与上述实施例1-2任一项相同，故不再赘述。

以上所述，仅是本发明的较佳实施例，并非对本发明做任何形式上的限制，凡是依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化，均落入本发明的保护范围之内。

Claims (8)

1.一种基于运维审计***RDP协议H5运维全屏的方法，其特征在于，包括以下步骤：

步骤1：在设置运维配置时，提前对进行全屏运维和非全屏运维分别对应的H5运维分辨率进行配置；并将运维配置项存储到服务端中；

步骤2：在进行实际运维的操作时，在开始运维前，自主选择是进行全屏运维还是非全屏运维，并通过http请求从服务端获取对应的运维配置项，将运维配置项中的RDP协议H5运维分辨率发送到运维组件；

步骤3：根据接收到的H5运维分辨率选择不同的处理方式：

当接收到对应为非全屏运维的H5运维分辨率参数时，在进行H5运维时将渲染RDP运维界面的canvas画布自适应调整为网页大小，此时运维界面的分辨率为canvas容器的宽度值和高度值；

当接收到对应为全屏运维的H5运维分辨率参数时，则在进行H5运维时，在渲染RDP运维界面之前，通过JavaScript技术获取浏览器内核内关于屏幕的宽度值参数和高度值参数；将获取的宽度值参数和高度值参数给渲染RDP运维界面的canvas画布；

步骤4：在进行全屏运维时，设置辅助方式来触发运维操作事件的实现。

2.如权利要求1所述的一种基于运维审计***RDP协议H5运维全屏的方法，其特征在于，在所述步骤3中，在全屏运维的情况下，在渲染RDP运维界面之前，还要在界面上设置一个启动按键并在键盘上设置一个启动按键；所述启动按键用于触发进入网页全屏的API接口。

3.如权利要求1或2所述的一种基于运维审计***RDP协议H5运维全屏的方法，其特征在于，在所述步骤3中，在全屏运维的情况下，使用前端实时将鼠标的坐标发送到服务器来实现鼠标在运维画面中位置的同步；此时将鼠标的位置重新进行处理，具体处理为：

将鼠标的X坐标参数修改为：基于网页的X坐标参数+滚动X轴的滚动距离参数；

将鼠标的Y坐标参数修改为：基于网页的Y坐标参数+滚动Y轴的滚动距离参数。

4.如权利要求2所述的一种基于运维审计***RDP协议H5运维全屏的方法，其特征在于，在步骤3中开始全屏运维前，弹出提示信息，提示运维员点击启动按键；所述步骤4中，在进行全屏运维时，设置来触发运维操作事件的辅助方式为：通过JavaScript的removeChild()方法移除步骤3中展示提示信息的html元素，以关闭提示运维员点击开启全屏的启动按键的信息。

5.如权利要求1所述的一种基于运维审计***RDP协议H5运维全屏的方法，其特征在于，所述步骤4中，在进行全屏运维时，设置来触发运维操作事件的辅助方式为：将渲染顶部信息栏与底部功能性操作菜单html元素css样式中的display属性设置为none值，以隐藏渲染顶部信息栏与底部功能性操作菜单。

6.如权利要求1所述的一种基于运维审计***RDP协议H5运维全屏的方法，其特征在于，所述步骤4中，在进行全屏运维时，设置来触发运维操作事件的辅助方式为：将网页的侧边栏宽度设置为0以收起侧边栏，在侧边栏旁侧保留透明按钮，点击时使侧边栏宽度恢复从而使其展开。

7.如权利要求1所述的一种基于运维审计***RDP协议H5运维全屏的方法，其特征在于，所述步骤4中，在进行全屏运维时，设置来触发运维操作事件的辅助方式为：在网页的页面增加悬浮透明按钮，通过css样式中的固定定位使悬浮透明按钮悬浮在运维界面右上角可见位置；通过鼠标移入悬浮透明按钮或点击按键来展开底部功能性操作菜单，所述底部功能性操作菜单提供显示软键盘、组合键、退出全屏操作选项；

将未展开时的渲染的底部功能性操作菜单的html元素高度设置为0；当底部功能性操作菜单要进入展开状态时，赋予底部功能性操作菜单的html元素可容纳菜单选项的高度参数；底部功能性操作菜单的html元素挨着悬浮透明按钮的底部。

8.如权利要求7所述的一种基于运维审计***RDP协议H5运维全屏的方法，其特征在于，所述步骤4中，在进行全屏运维时，设置来触发运维操作事件的辅助方式还包括：触发监听窗口退出全屏事件，触发后将网页布局恢复到刚进入运维时的排版，具体操作为：

首先，将渲染顶部信息栏与底部功能性菜单的html元素css样式中的display属性设置为block值以恢复渲染顶部信息栏与底部功能性菜单展示；

其次，通过JavaScript技术的removeChild()方法去除提供的悬浮透明按钮；

最后，将侧边栏宽度恢复以展开侧边栏。