EasyCVR平台管理界面如何优化小屏下的操作栏显示？

Posted 2021-11-10 TSINGSEE

为了方便不同终端设备用户的使用，我们将TSINGSEE青犀视频各平台都做了屏幕显示自适应的机制，以EasyCVR为例，管理界面在大屏下会显示所有的操作和状态列表，在小屏下则会自动省略一些状态显示，最右侧操作栏仍保持完整显示。

在我们对EasyCVR管理界面的表格进行不同大小的测试时，发现小屏状态下，界面右操作侧栏已经遮挡了表格左侧列表的大多数内容，显示如下：

操作栏在大屏下确实方便，因为固定在最右侧，不管表格内容再多，都可以一眼看见，但是在小屏下则需要我们重新进行调整。

1.添加页面监听事件实时检查页面宽度：

2.在计算属性中加入判定条件：

调整后预览界面如下：

监听代码：

  mounted() {
    const _this = this
    _this.screenWidth = window.screenWidth;
    window.onresize= () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        _this.screenWidth = window.screenWidth;
      })();
    }
  }

EasyCVR实现了Web浏览器、手机浏览器、微信、PC客户端等各终端无插件播放，此外，我们也对外提供HTTP API接口，通过接口可以获知流媒体转发服务的运行状态信息，转发会话信息，服务器配置和版本信息等。欢迎大家对EasyCVR进行实际部署测试。