基于WEB+APP的模拟工业仪器的监控预警系统

目 录
第一章 项目概述 3
1.1 项目背景 5
1.2 主要任务 5
1.3 功能描述 5
1.4 预期成果或目标 5
1.5 小组分工概况 5
第二章 设计方案 6
2.1 角色划分 6
2.2 功能详述 6
2.2.1 用户 6
2.2.2 维修人员 7
2.2.3 管理员 7
2.3 数据产生 7
第三章 小组分工 8
3.1 原型设计 9
3.2 页面设计 10
3.2.1 介绍 10
3.2.1 布局 10
3.2.2 页面可读性设计 11
3.2.3 收获 11
3.3 后台开发 12
3.3.1 介绍 12
3.3.2 难点 13
3.3.2 不足点 13
3.3.3 收获 13
3.4 前端开发 14
3.4.1 介绍 14
3.4.2 难点 14
3.4.3 不足点 15
3.4.4 收获 15
3.5 移动开发 15
3.5.1 介绍 15
3.5.2 难点 16
3.5.3 不足点 16
3.5.4 收获 16
3.6 前后端交互 17
3.6.1 假数据 17
3.6.2 API接口 18
第四章 功能实现 18
4.1 web端 18
4.2 移动端 22
第五章 实现结果 24
5.1 线上部署 24
5.2 设计及源码 24
第六章 总结 24
6.1 项目亮点 24
6.2 优化与改进 24
6.3 结论 24
第二章 设计方案
在开发项目之前，我们先对课题简要的分析与评估。首先项目是面向用户的，设计要让用户满意，就要先确认用户是谁。下面我们首先对角色进行划分，然后再根据用户角色对功能进行更加详述的划分与设计。另外由于没有真实的仪器，因此我们需要对仪器的数据进行模拟，我们将系统的业务逻辑部分和仪器数据产生部分的开发进行分离，使项目的设计更加合理与真实。
2.1 角色划分
项目的主要目的是实现一个工业仪器预警系统并对仪器进行监控，而仪器的拥有者是用户，因此需要设置用户的的角色；因为仪器有可能产生损坏告警，需要系统分配维修人员对告警仪器进行检修，因此需要设置维修人员的角色；另外，除了普通用户和维修人员，还需要系统管理员对整个系统运行进行监管，所以又添加了管理员的角色设置。综上项目的角色分为三种：用户、维修人员和管理员，下面根据角色划分进行功能划分。
2.2 功能详述
2.2.1 用户
注册登录模块，实现简单的注册登录功能。
基本信息模块，该模块可以设置用户的基本信息，包括昵称、头像、用户密码、个人简介以及最重要的邮箱设置。
仪器管理模块，实现仪器的增删改查，仪器的属性包括有仪器名称、图片、类型、型号、参数、使用年限、历史阈值以及告警阈值。
维修工单模块，每次仪器产生预警的时候，系统会自动生成一个维修工单推送给相对空闲的维修人员，维修工单一共有四个状态：等待维修人员确认、维修人员已确认、维修人员正在维修、维修完成，用户可以查看历史产生的维修工单，也可以根据工单的状态对维修工单进行查询，获取维修人员的信息。
消息通知模块，每当用户的仪器产生告警，或者维修工单的状态发生变化，系统会对用户进行主动的消息提醒，并且发送邮箱进行通知，消息的状态有未读和已读两种状态，用户可以对消息设置已读。
2.2.2 维修人员
维修人员部分的功能在用户功能的基础上进行阉割：
登录模块，实现简单的登录功能，维修人员通过管理员进行注册。
基本信息模块，该模块可以设置维修人员的基本信息，内容同上。
维修工单模块，每次仪器产生预警的时候，系统会自动生成一个维修工单推送给相对空闲的维修人员，本文转载自http://www.biyezuopin.vip/onews.asp?id=15153如果该维修人员分配到该维修工单，维修人员可以查看该仪器的信息，并根据维修进度更改的工单的状态。
消息通知模块，当维修人员得到系统分配的工单，系统会对维修人员进行主动的消息通知，并且发送邮箱进行通知。
2.2.3 管理员
登录模块，实现简单的登录功能，管理员通过修改数据库进行注册。
用户管理模块，可以查看已经注册的用户列表，可以根据用户ID查看用户创建的仪器列表，可以根据用户ID查看用户的工单列表。
维修人员管理模块，实现对维修人员的添加（注册），可以查看已经添加的维修人员列表，可以根据维修人员的ID查看维修人员参与的工单列表。
仪器管理模块，实现仪器分类的增删改查，实现仪器模板的增删改查（不同分类的仪器可以创建多种模板供用户创建时参考），根据仪器ID查看具体仪器的信息。
工单查询模块，根据工单的ID查看工单的基本信息，包括仪器信息，所有者信息，维修人员信息。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import particlesJS from 'particles.js'
import store from './store'
import infiniteScroll from 'vue-infinite-scroll'
// import {t} from './common/js/lib/sockjs.min'

// console.log(t);
// import VueSocketio from 'vue-socket.io';

// Vue.use(VueSocketio, 'http://192.168.100.152:8080/user/msg/user');

Vue.config.productionTip = false
Vue.use(particlesJS)
Vue.use(infiniteScroll)

// Vue.prototype.$axios = $axios
// $axios.defaults.baseURL = 'http://192.168.100.152:8080';

Vue.filter('timeParse', function (date) {
  let newDate = new Date(date)
  let year = newDate.getFullYear()
  let month = newDate.getMonth().toString().length === 1 ? `0${newDate.getMonth() + 1}` : newDate.getMonth() + 1
  let day = newDate.getDate().toString().length === 1 ? `0${newDate.getDate()}` : newDate.getDate()
  let hour = newDate.getHours().toString().length === 1 ? `0${newDate.getHours()}` : newDate.getHours()
  let minute = newDate.getMinutes().toString().length === 1 ? `0${newDate.getMinutes()}` : newDate.getMinutes()
  let second = newDate.getSeconds().toString().length === 1 ? `0${newDate.getSeconds()}` : newDate.getSeconds()
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`
})

Vue.filter('emailStatus', function (value) {
  let status
  value === 0 ? status = '未激活' : status = '已激活'
  return status
})

Vue.filter('userStatus', function (value) {
  let status
  value === 0 ? status = '未激活' : status = '已激活'
  return status
})

Vue.filter('maintainStatus', function (value) {
  switch (value) {
    case 0:
      return '等待确认'
    case 1:
      return '等待维修'
    case 2:
      return '正在维修'
    case 3:
      return '维修完成'
  }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  particlesJS,
  components: {App},
  template: '<App/>'
})