SCI论文（www.lunwensci.com）
摘 要 ：本文主要阐述建筑项目智能管理系统 Web 前端开发部分的设计与实现,系统包含 6 个页面,分别为登录页 面、主页、项目列表、告警管理、用户管理及讨论组。系统采用前后端分离的开发模式,其中前端部分使用 TypeScript 和 JavaScript 语言进行混合开发,前端框架选用 Vue.js 和 Element UI,使用 ECharts 解决传感器数据折线图的显示。
关键词：Vue.js,建筑项目智能管理系统,TypeScript
Design and Implementation of Visual System for Intelligent Management of Construction Projects Based on Vue
LI Fengpan,ZHAO Zhimin,WANG Yingying
(Global Institute of Software Technology, Suzhou Jiangsu 215163)
【Abstract】：This paper mainly describes the design and implementation of the Web front-end development part of the intelligent management system for construction projects. The system consists of six pages, including login page, home page, project list, alarm management, user management and discussion group. The system adopts the development mode of separating the front end and the back end. The front end uses TypeScript and JavaScript language for mixed development. The front end framework uses Vue.js and Element UI, and uses ECharts to solve the display of sensor data line graph.
【Key words】：Vue.js;intelligent management system of construction project;TypeScript
0 引言
本文主要阐述我院与上海欣致网络科技有限公司进 行校企合作共建的建筑项目智能管理系统 Web 前端开 发部分的实现。系统使用前后端分离的开发模式,这 样前端开发只需要注重页面的交互设计与渲染,而不需 要关心后台数据的问题;后台开发只需要处理数据的问 题,而不需要关注页面的展示,前后端职责分离、分工 明确、耦合度相对较低,避开了传统模式开发周期长, 测试困难, Bug 难寻的问题,极大地提高了开发效率, 有效降低了后期维护成本。
1 关键技术
1.1 前端框架
Vue 是一套用于构建用户界面的渐进式 JavaScript框架,区别于其他重量级框架, Vue 采用自底向上增量 开发的设计方法,非常容易与其他第三方库或已有项目 整合, 易于开发者学习。Element UI 是一套为开发者 准备的基于 Vue 2.0 的桌面端组件库,它是一个 UI 库, 但却不依赖于 Vue,是当前和 Vue 配合做项目开发的 一款比较好的 UI 框架 [1]。
1.2 TypeScript
TypeScript 是 Microsoft 开发的一种面向对象的 编程语言。TS 从核心语言方面对 JS 对象模型进行了扩 展,强调代码的模块化;JS 代码可以在无需任何修改的 情况下与 TS 一同工作,同时可以使用编译器将 TS 代 码转换为 JS。TS 使代码重构变得更加容易,并且更强 调显式类型,使开发人员能够掌握各种组件的交互方式,由于它支持编译时调试,对于处理大型复杂应用程 序的团队来说,有一定的好处 [2]。
1.3 ECharts
ECharts 是百度开发的一款可以提供直观、可个性 化定制的基于 JavaScript 的开源数据可视化库 [3] , 底层 依赖于矢量图形 ZRender。ECharts 提供了常规的折 线图、柱状图、散点图、饼图,用于统计的盒形图,用 于地理数据可视化的地图、热力图、线图,用于关系数 据可视化的关系图、TreeMap、旭日图,还有用于 BI 的漏斗图、仪表盘,并且支持图与图之间的混搭 [4]。
2 系统设计
2.1 功能设计
系统采用前后端分离的开发模式,前端框架选用 Vue.js 和 Element UI, 使 用 TypeScript 和 JavaScript 语言进行混合开发,前端借助于 ECharts 实现了针对 于不同传感器的相应折线图,可以选择实时、一天、一 周或一个月的不同时段的折线图显示, 采用的 MVC 模 式实现了数据和视图的分离。系统框架如图 1 所示。
系统主要功能模块有：
(1)登录模块： 需要显示公司名称及 Logo,能够 通过手机号和密码进行登录验证;
(2)主页模块：这一模块主要能够进行基坑项目的 选择并生成常规报表和预警报表、查看基坑告警信息 (以饼图的形式呈现)、获取当前项目所在地定位和实时 天气预报、查看基坑监测点分布图、添加和删除告警坐 标点、查看基坑相应传感器位移和累计位移 / 裂缝宽度 / 支撑内力 / 地下水位(以折线图的形式呈现) ;
(3) 项目管理：能够完成基坑的添加、删除和查询 功能,能够查看当前项目所有传感器的基本信息;
(4)告警管理：根据项目的选择对应展示告警信息 及其基本信息,告警共分为 3 类：未处理告警、已处理 告警及已忽略告警;
(5)用户管理： 能够进行用户信息的添加、删除、 修改操作。
2.2 数据库设计
系统使用 MySQL 数据库,一共包含 8 张表,具体结构如表 1 所示。
系统用户有 3 种权限设置：
(1)第一级系统管理员具有所有的权限,并可访问 及编辑所有项目,可以添加“项目管理员”;
(2)第二级项目管理员可以创建项目,并可访问及 编辑由其创建的项目,能够为其创建的项目添加“项目 访问者”, (一个项目管理员对应一个项目) ;
(3)第三级项目访问者仅可访问由“项目管理员” 指定的项目,不可进行任何编辑操作,但可参与到所访 问项目的讨论组。
3 系统功能实现
3.1 用户登录页面
本部分对应的接口是 post /users/login, 具体实现 如下：
private handleLogin() {
(this . $refs .loginForm as ElForm) .validate (async(valid: boolean) => {
if (valid) {
this.loading = true
console.log("this.loginForm --- ",this.loginForm) // await UserModule.Login(this.loginForm) console.log(" 向服务器发送请求：--",this.loginForm) console.log(" 路径：--",ApiURL.api + "users/login") this.$http.post(ApiURL.api + "users/login", this.loginForm)
.then(res =>{
if(res === undefined) {
this.$message({
message: " 密码错误,请重新输入 ",
type: "warning",
center: true,
})
return
}
console.log(" 请求成功：--",res) sessionStorage.setItem("token",res.data.token) sessionStorage.setItem("id",res.data.id) sessionStorage.setItem("name",res.data.name) sessionStorage.setItem("role",res.data.role)
sessionStorage . setItem("userData",JSON . stringify(res.data))
this.$router.push({
path: "/dashboard",
})
})
setTimeout(() => {
this.loading = false
}, 0.5 * 1000)
} else {
return false
}
})
}
3.2 项目列表页面
// 初始化页面参数
initProjectData: function() {
let role = sessionStorage.getItem("role")
// console.log("Authorization", sessionStorage. getItem("token"))
let projUrl = ""
if(role === "sysAdmin")
projUrl = ApiURL.api+"projects/all" if(role === "pjAdmin" || role === "guest") projUrl = ApiURL.api+"projects" if(role === "guest")
projUrl = ApiURL.api+"projects/readonly" // 请求项目数据
this.$http.get(projUrl,{
headers: {
"Authorization": "Bearer "+sessionStorage.getItem ("token")
}
})
.then(res => {
console.log(" 项目数据请求成功 --",res.data)
let projectDatas = res.data
let projId = res.data.map(item => {
return item.id
})
// console.log("projId -- ", projId)
this.$store .commit('setProjectHeaderDatas', projectDatas)
setTimeout(() => {
this.getList()
},100)
})
// 请求用户 将数据存储在 user index.js 中的 allUsers 里面
this.$http.get(ApiURL.api+"users")
.then(res => {
console.log(" 用户数据请求成功 --",res.data) this.$store.commit("setAllUsers",res.data) })
},
3.3 Web 前端实现难点
本项目 Web 界面虽然不多,但每个页面的功能较 多,实现起来还是比较复杂的。项目实现过程中难点有 以下几方面：
(1)第一个难点在于折线图的实现,需要针对不同 传感器数据实现相应的折线图,可以选择实时,一天, 一周,一月的不同时间段的折线图,还要能够根据时间 点查询相应的数据并生成常规报表。针对这一点,我们 使用 ECharts 解决折线图问题,通过文档的 API 我们 可以对后台返回的数据进行相应的封装,之后传递给 ECharts 进行对应数据的显示。相关页面如图 2、图 3 所示。
(2) 第二个难点就是讨论组的实现,根据系统功能 需求的梳理,这一部分需要我们能够创建讨论组,能够 进行聊天发送文字、图片和文件等信息,还要能够回看 聊天信息。在这一部分,讨论组我们使用的是 SocketIO 接口,向服务器请求连接,连接的协议为 WS,如果服 务器返回数据表示链接成果,每次切换讨论组选项需先 关闭连接,然后再开启新的请求,返回新的请求对象, 再进行聊天操作。
(3)第三个难点就是需要在前端实现数据的同步,删除数据时需要前端将相关联的数据一起删除。要想前 端实现数据同步,比较困难,对于这个问题我们在后台 创建数据库的时候,就需要进行字段的关联,删除的时 候直接将数据库关联同步删除即可。
4 结语
本文对校企合作共建的基于 Vue 的建筑项目智能 管理系统 Web 前端开发部分的实现进行了阐述。通过 项目的建设,加强了学校和企业间的深度合作,从学校 层面来看,培养了学生完成部分项目实践的能力,同时 能够与 Web 课程内容进行衔接,使学生将课堂所学运 用到项目实践, 通过一张张能够运行的 Web 页面, 让 学生体验到开发的乐趣,为我院综合实训开发平台的建 设积累了宝贵经验。从企业层面来看,前端可视化页面的呈现,使得企业用户不必重点关注系统开发的实现, 将更多的精力专注于具体业务之上,提高工作效率。
参考文献
[1] 曹书铭.基于Vue的数据可视化生成系统[J].计算机应用,2021 (10):128-130.
[2] 罗永梅.基于Vue的响应式数据可视化平台的设计与实现[J]. 计算机应用,2020(9):20-22.
[3] 方生 .基于“Vue.js”前端框架技术的研究[J]. 电脑知识与 技术,2021.17(19):59-60+64.
[4] 王兆益,周爱平 .基于ECharts的数据可视化系统设计[J].计 算机与网络,2020(19):60-62.
关注SCI论文创作发表，寻求SCI论文修改润色、SCI论文代发表等服务支撑，请锁定SCI论文网！
文章出自SCI论文网转载请注明出处：https://www.lunwensci.com/jisuanjilunwen/55904.html
