完善 README.md，增加项目运行说明

.travis.yml

@@ -1,5 +1,15 @@
 language: node_js
-node_js: stable
-script: npm run test
-notifications:
-  email: false
+# nodejs版本
+node_js: 
+    - 'node'
+# Travis-CI Caching
+cache:
+  directories:
+    - node_modules
+# S: Build Lifecycle
+install:
+  - npm install
+before_script:
+# 无其他依赖项所以执行npm run build 构建就行了
+script:
+  - npm run build

README.md

@@ -1,8 +1,11 @@
 # 基于 Vue.js 2.0 & Element 2.0 的集群设备管理云平台
 
 [![GitHub stars](https://img.shields.io/github/stars/bitkylin/ClusterDeviceControlPlatform-Web.svg)](https://github.com/bitkylin/ClusterDeviceControlPlatform-Web/stargazers)
+[![stable](http://badges.github.io/stability-badges/dist/stable.svg)](http://github.com/badges/stability-badges)
+[![Build Status](https://travis-ci.org/bitkylin/ClusterDeviceControlPlatform-Web.svg?branch=master)](https://travis-ci.org/bitkylin/ClusterDeviceControlPlatform-Web)
+[![Dependency Status](https://david-dm.org/bitkylin/ClusterDeviceControlPlatform-Web.svg)](https://david-dm.org/bitkylin/ClusterDeviceControlPlatform-Web)
+[![许可证](https://img.shields.io/badge/许可证-MIT-blue.svg)](https://github.com/bitkylin/ClusterDeviceControlPlatform-Web/blob/master/LICENSE)
 ![技术](https://img.shields.io/badge/%E6%8A%80%E6%9C%AF-Vue.js_2.0%7CElement_2.0%7CRESTful_API-brightgreen.svg)
-[![许可证](https://img.shields.io/badge/许可证-MIT-blue.svg)](https://github.com/bitkylin/ClusterDeviceControlPlatform/blob/master/LICENSE)
 
 ## 项目描述
 
@@ -18,6 +21,28 @@ Java & Vue.js 全栈项目，大规模集群设备管理云平台，由以下几
 
 **注意：[本项目为系统的 Web 部分，系统后端部分为单独的项目，点击此处跳转](https://github.com/bitkylin/ClusterDeviceControlPlatform)**
 
+## 运行方法
+
+进入[配套的 Java 后端项目](https://github.com/bitkylin/ClusterDeviceControlPlatform)，根据该项目的说明，即可成功执行工程「clusterdeviceplatform-demo」，而后构建本项目并运行即可，方法如下：
+
+下载并进入该仓库的根目录，在命令行下，安装依赖：
+
+```shell
+npm install
+```
+
+依赖安装完毕后，执行如下命令进行调试：
+
+```shell
+npm run start
+```
+
+或执行如下命令进行构建：
+
+```shell
+npm run build
+```
+
 ## 项目图示
 
 ### 1. 基于 Vue.js 的 Web 前端「SPA」单页应用程序
@@ -26,26 +51,36 @@ Java & Vue.js 全栈项目，大规模集群设备管理云平台，由以下几
 
 ![Web 登录页面](./mdphoto/main11.jpg)
 
-**Web 单设备组详细信息显示**
+**设备组细节概览图示**
+
+![设备组细节概览图示](./mdphoto/main14.jpg)
+
+**单设备组详细信息显示**
 
 ![单设备组详细信息显示](./mdphoto/main12.jpg)
 
-**Web 服务器压力图示**
+**服务器压力图示**
 
 ![服务器压力图示](./mdphoto/main13.jpg)
 
+
+
 ### 系统架构图示
 
 ![系统架构图示](./mdphoto/main19.png)
 
-## 基于 Vue.js 的 Web 前端「SPA」单页应用程序
+## 附录
+
+**本项目以[ vueAdmin-template ](https://github.com/PanJiaChen/vueAdmin-template)项目为基础框架开发而成，特别感谢该项目的作者！**
 
 绚丽的现代化 SPA 应用程序，可视化展现服务器内部的各项数据，包括服务器消息队列、通信压力、实时通信信息等。
 
 该应用开发时，设计经验总结可见以下文章：
 
 [基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计](https://www.jianshu.com/p/8097bb3d9d49)
 
+文章会不时进行更新。
+
 ## [License](https://github.com/bitkylin/ClusterDeviceControlPlatform-Web/blob/master/LICENSE)
 
 > MIT License

config/dev.env.js

@@ -5,6 +5,6 @@ const prodEnv = require('./prod.env')
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
   // BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
-  BASE_API: '"http://localhost:8080/server/"',
-  // BASE_API: '"http://lml-desktop:8080/server/"',
+  BASE_API: '"http://lml-desktop:8080/"'
+  // BASE_API: undefined
 })

config/prod.env.js

@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://lml-desktop:8080/server/"',
+  // BASE_API: '"http://lml-desktop:8080/server/"',
+  BASE_API: undefined
 }

src/permission.js

@@ -5,7 +5,14 @@ import 'nprogress/nprogress.css'// Progress 进度条样式
 import { Message } from 'element-ui'
 import { getToken } from '@/utils/auth' // 验权
 
-const whiteList = ['/login', '/404', '/disconnect', '/solo/msg/feedbacklist', '/solo/devicegroup/outline'] // 不重定向白名单
+const whiteList = [
+  '/login',
+  '/404',
+  '/disconnect',
+  '/solo/msg/feedbacklist',
+  '/solo/devicegroup/outline',
+  '/solo/devicegroup/single'
+] // 不重定向白名单
 router.beforeEach((to, from, next) => {
   // console.log('router.beforeEach')
   NProgress.start()

src/router/index.js

@@ -40,6 +40,10 @@ export const constantRouterMap = [
     path: '/solo/devicegroup/outline',
     component: _import('devicegroup/GroupDeviceOutline'),
     hidden: true
+  }, {
+    path: '/solo/devicegroup/single',
+    component: _import('devicegroup/SingleGroupOutline'),
+    hidden: true
   }, {
     path: '',
     component: Layout,

src/utils/request.js

@@ -6,11 +6,12 @@ import { getToken } from '@/utils/auth'
 // 创建axios实例
 const service = axios.create({
   baseURL: process.env.BASE_API, // api的base_url
-  timeout: 15000 // 请求超时时间
+  timeout: 1500 // 请求超时时间
 })
 
 // request拦截器
 service.interceptors.request.use(config => {
+  config.url = '/server' + config.url
   if (store.getters.token) {
     config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
   }

src/views/devicegroup/GroupDeviceOutline.vue

@@ -20,6 +20,7 @@
     name: 'groupDeviceOutline',
     data: function() {
       return {
+        routerSingle: '/devicegroup/single',
         // 「服务器获取」设备组数量
         deviceGroupCount: 0,
         // 「服务器获取」设置报警的限定:负载的限定
@@ -47,11 +48,14 @@
       window.onresize = () => this.myChartBar.resize()
       // 调取HTTP API获取数据
       this.getdeviceGroupCount()
+      if (this.$route.path === '/solo/devicegroup/outline') {
+        this.routerSingle = '/solo/devicegroup/single'
+      }
     },
     methods: {
       routerToSelectedSingleGroup(id) {
         saveGroupId(id)
-        this.$router.push({ path: '/devicegroup/single' })
+        this.$router.push({ path: this.routerSingle })
       },
       // 「HTTP」获取设备组数量
       getdeviceGroupCount() {

src/views/msg/FeedbackList.vue

@@ -1,42 +1,40 @@
 <template>
   <div>
-    <el-button @click="clearItems" id="clearFeedbackButton" round>处理完毕</el-button>
-    <el-table
-      :data="tableData"
-      style="width: 100%">
+    <el-button v-if="showclearbtn" @click="clearItems" id="clearFeedbackButton" round>处理完毕</el-button>
+    <el-table id="table" :data="tableData">
       <el-table-column
         prop="id"
         label="序号"
         sortable>
       </el-table-column>
+      <!--width="180"-->
       <el-table-column
         prop="currentDate"
         label="日期"
-        width="180"
         sortable>
       </el-table-column>
+      <!--width="180"-->
       <el-table-column
         prop="currentTime"
         label="时间"
-        width="180"
         sortable>
       </el-table-column>
+      <!--width="180"-->
       <el-table-column
         prop="groupId"
         label="组号"
-        width="180"
         sortable>
       </el-table-column>
+      <!--width="180"-->
       <el-table-column
         prop="deviceId"
         label="设备号"
-        width="180"
         sortable>
       </el-table-column>
+      <!--width="200"-->
       <el-table-column
         prop="type"
         label="消息类型"
-        width="200"
         :filters="[{
           text: '消息重发次数超出限制',value: '消息重发次数超出限制'}, {
           text: '通道连接已断开', value: '通道连接已断开' }, {
@@ -51,6 +49,11 @@
           </el-tag>
         </template>
       </el-table-column>
+      <el-table-column
+        prop="extra"
+        label="描述"
+        sortable>
+      </el-table-column>
     </el-table>
   </div>
 </template>
@@ -62,6 +65,7 @@
   export default {
     data: function() {
       return {
+        showclearbtn: true,
         tableData: null
       }
     },
@@ -78,17 +82,32 @@
       filterTag(value, row) {
         return row.type === value
       },
+      shouldRemove(desc) {
+        return desc === '下井超时' || desc === '充电超时'
+      },
       calculateTableData(rawItems) {
         const tableData = []
         for (let i = 0; i < rawItems.length; i++) {
           const item = rawItems[i]
+          let extra = ''
+          switch (item.type) {
+            case 'RESEND_OUT_BOUND':
+              extra = '基础消息「' + item.baseMsg.msgCodec.detail + '」'
+              break
+            case 'WORK_STATUS_EXCEPTION':
+              if (this.shouldRemove(item.baseMsg.statusDescription)) {
+                continue
+              }
+              extra = '异常类型「' + item.baseMsg.statusDescription + '」'
+          }
           tableData.push({
             id: i + 1,
             currentDate: item.currentDate,
             currentTime: item.currentTime,
             groupId: item.groupId,
             deviceId: item.deviceId,
-            type: item.description
+            type: item.description,
+            extra: extra
           })
         }
         return tableData
@@ -99,13 +118,17 @@
     },
     mounted: function() {
       setTimer(this.getData, 3000)
+      if (this.$route.query.showclearbtn === 'false') {
+        this.showclearbtn = false
+      }
     }
   }
 </script>
 
 <style scoped>
-  #main-container el-table {
-    width: 100%;
+  #table {
+    width: 90%;
+    margin: auto;
   }
 
   #clearFeedbackButton {