项目描述： 该项目是广核用来监控光纤振动的，可以实时调用监控查看不同防区的现场运作情况。报警时，对应防区自动弹出，用户得知哪片防区出现问题，以便即使解决问题。 技术内容： 1.前端采用Vue技术，UI库使用ElementUI 2.使用vue-router路由跳转 3.使用svgIcon插件显示不同的svg. 4.使用ffmpeg对视频流进行转码，以便兼容各个浏览器。 5.使用用echart实现各个图表，使数据简洁明了 负责模块： 1.权限管理：对不同用户分配不同角色，查看不同页面，是各个部门互不干扰。 2.设备管理：对设备进行增删该查，以便对不同设备进行监控。 3.视频监控：展示出所有的监控视频，并通过双击放大实现视频的操控。 4.电子地图：划分不同的防区，对防区内地设备进行配置。 项目难点： 1.视频的显示：谷歌现在不支持Flash插件，IE不支持rtsp视频流。视频需要在页面上播放并兼容各主要浏览器，像谷歌，火狐，IE等等。 解决方法：搭建的node.js服务，通过ffmpeg把视频流rtsp转换为flv,通过flv.js进行播放。

为了公司以后的快捷开发，迭代，把许多公共的组件，数据库表，功能等等抽离出来。这样以后开发其他项目的时候就能很大的缩短开发周期。 技术内容： 1.前端构建采用 vite+ vue3 + TypeScript 2.使用echart实现各个图表，使数据简洁明了 3.页面布局采用PostCss，能自动适应各种分辨率。 4.组件库使用跟Vue3配套的Element-Plus 5.在线编辑文档使用OnlyOffice 负责模块： 1.文件管理：用树生成文件目录关系，对目录进行增删改。点击目录查询该目录下的文件，可以对文件进行预览、下载、在线编辑、移动删除等操作。页面还要支持文件和文件夹的分片上传。 2.回收站：顾名思义，可以恢复删除的文件。 3.模型管理：这是该项目的核心，项目所有数据都在这个模块操作。分为两个模块模型对象，模型实例。模型对象负责创建数据的类型，以及数据的层级关系。模型实例是根据模型对象创建具体的数据。 4.系统设置：有菜单管理，角色管理。菜单管理可以自由配置各个菜单，不用手写路由。角色管理可以设置不同角色能访问的页面，比如管理员可以访问到所有页面。而普通用户就不能访问系统设置页面。

该项目是中海油用来管理海上油田平台的，可以实时查看各个平台的能源消耗，产出，效益等等。并根据echart生成的图表来实时调整各平台的年计划，月计划。还可以实时调出各个平台的监控，查看现场工作环境，大大提高中海油对海上平台的管理能力。 技术内容 1.采用Vue框架，UI库使用ElementUI 2.采用CSS模块化和Vue组件化设计方案，提高开发效率，代码简洁、复用率高，项目可维护性高。 3.使用vue-router路由跳转 4.使用axios发送请求，调用后台数据，保证网站数据实时更新 5.使用echart实现各个图表，使数据简洁明了 6.使用mqtt实现页面数据的实时更新 负责模块 1.首页: 使用datav展示中海油渤海的所有平台，利用动画给用户更好的体验。 2.平台用电对标：使用echart柱形图展示各个平台的能源消耗情况 3.电费分析：使用表格汇总所有平台的电费使用情况，并对其中特征值标注颜色，使表格重点突出。 电器系统监测：利用其他部门提供的svg, 实现电路的实时监测，保障平台的运行 项目难点 电路图的实时更新：实时显示出电路的各设备的数据与电路的通断情况。 解决方法：选用svg显示电路图。.svg电路用不同的颜色表示电路的通断情况，根据值会自动变色。使用mqtt获取是数据，并通过数据中的唯一编码，把数据渲染到对于的地方，保障数据准确性。