[A] 提交培训vue案例

.gitignore

+*.java.hsp
+*.sonarj
+*.sw*
+.DS_Store
+.settings
+.springBeans
+bin
+build.sh
+integration-repo
+ivy-cache
+jxl.log
+jmx.log
+derby.log
+spring-test/test-output/
+.gradle
+argfile*
+activemq-data/
+
+classes/
+/build
+buildSrc/build
+/spring-*/build
+/spring-core/kotlin-coroutines/build
+/framework-bom/build
+/integration-tests/build
+/src/asciidoc/build
+target/
+*/WebContent/WEB-INF/lib
+
+# Eclipse artifacts, including WTP generated manifests
+spring-*/src/main/java/META-INF/MANIFEST.MF
+
+# IDEA artifacts and output dirs
+*.iml
+*.ipr
+*.iws
+.idea
+out
+test-output
+atlassian-ide-plugin.xml
+.gradletasknamecache
+
+#android studio
+R.java
+build/
+*/build/
+
+

train-front-web/.babelrc

+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx", "transform-runtime"],
+  "env": {
+    "test": {
+      "presets": ["env", "stage-2"],
+      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
+    }
+  }
+}

train-front-web/.editorconfig

+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

train-front-web/.gitignore

+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+/test/unit/coverage/
+/test/e2e/reports/
+selenium-debug.log
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

train-front-web/.postcssrc.js

+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {}
+  }
+}

train-front-web/config/dev.env.js

+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})

train-front-web/config/index.js

+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

train-front-web/config/prod.env.js

+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}

train-front-web/config/test.env.js

+'use strict'
+const merge = require('webpack-merge')
+const devEnv = require('./dev.env')
+
+module.exports = merge(devEnv, {
+  NODE_ENV: '"testing"'
+})

train-front-web/index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>train-front-web</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

train-front-web/package.json

+{
+  "name": "train-front-web",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "xl <746185710@qq.com>",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "start": "npm run dev",
+    "unit": "jest --config test/unit/jest.conf.js --coverage",
+    "e2e": "node test/e2e/runner.js",
+    "test": "npm run unit && npm run e2e",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "element-ui": "^2.15.6",
+    "jquery": "^3.6.0",
+    "vue": "^2.5.2",
+    "vue-router": "^3.0.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "axios": "^0.24.0",
+    "babel-core": "^6.22.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-jest": "^21.0.2",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-dynamic-import-node": "^1.2.0",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "babel-register": "^6.22.0",
+    "chalk": "^2.0.1",
+    "chromedriver": "^2.27.2",
+    "copy-webpack-plugin": "^4.0.1",
+    "cross-spawn": "^5.0.1",
+    "css-loader": "^0.28.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^1.1.4",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "html-webpack-plugin": "^2.30.1",
+    "jest": "^22.0.4",
+    "jest-serializer-vue": "^0.3.0",
+    "nightwatch": "^0.9.12",
+    "node-notifier": "^5.1.2",
+    "node-sass": "^4.14.1",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "ora": "^1.2.0",
+    "portfinder": "^1.0.13",
+    "postcss-import": "^11.0.0",
+    "postcss-loader": "^2.0.8",
+    "postcss-url": "^7.2.1",
+    "rimraf": "^2.6.0",
+    "sass-loader": "^7.3.1",
+    "selenium-server": "^3.0.1",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "url-loader": "^0.5.8",
+    "vue-jest": "^1.0.2",
+    "vue-loader": "^13.3.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.5.2",
+    "webpack": "^3.6.0",
+    "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-dev-server": "^2.9.1",
+    "webpack-merge": "^4.1.0"
+  },
+  "engines": {
+    "node": ">= 6.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

train-front-web/src/App.vue

+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+</style>

train-front-web/src/assets/js/axios.js

+import axios from 'axios'
+import store from '../../store/store.js'
+axios.interceptors.request.use(function(config) {
+  store.state.loadding = true // 在请求发出之前进行一些操作
+  return config
+}, function(error) {
+  return Promise.reject(error)
+})
+axios.interceptors.response.use(function(response) {
+  store.state.loadding = false// 在这里对返回的数据进行处理
+  return response.data
+}, function(error) {
+  return Promise.reject(error)
+})
+export default axios

train-front-web/src/assets/js/nav.js

+export default [
+  {
+    'id': '0',
+    'name': '一级目录',
+    'createTime': null,
+    'updateTime': null,
+    'userId': null,
+    'parentId': 'root',
+    'imageUrl': null,
+    'url': null,
+    'children': [
+      {
+        'id': '2416b172-5873-4ba7-9523-deb124cac1d5',
+        'name': '海洋生态与环境监测卫星示范应用',
+        'createTime': '2020-11-26 18:01:12',
+        'updateTime': '2020-11-26 18:01:12',
+        'userId': '1',
+        'parentId': '0',
+        'imageUrl': null,
+        'url': 'undefined',
+        'children': [
+          {
+            'id': '2dd29b50-4b85-4963-9dc1-6e5b05459e0a',
+            'name': '海洋突然事件支援平台',
+            'createTime': '2020-11-26 18:02:47',
+            'updateTime': '2020-11-26 18:02:47',
+            'userId': '1',
+            'parentId': '2416b172-5873-4ba7-9523-deb124cac1d5',
+            'imageUrl': null,
+            'url': 'undefined',
+            'children': [
+              {
+                'id': '91082ab8-8aae-43c3-9b6e-842285d9c550',
+                'name': '多源卫星综合展示系统',
+                'createTime': '2020-11-26 18:04:46',
+                'updateTime': '2020-11-26 18:04:46',
+                'userId': '1',
+                'parentId': '2dd29b50-4b85-4963-9dc1-6e5b05459e0a',
+                'imageUrl': '/fileUpload/91082ab8-8aae-43c3-9b6e-842285d9c550/QQ图片20201126180431.png',
+                'url': 'http://www.baidu.com499999',
+                'children': [
+                ],
+                'label': '多源卫星综合展示系统',
+                'type': '1',
+                'parentName': null,
+              },
+            ],
+            'label': '海洋突然事件支援平台',
+            'type': '2',
+            'parentName': '',
+          },
+        ],
+        'label': '海洋生态与环境监测卫星示范应用',
+        'type': '2',
+        'parentName': null,
+      },
+      {
+        'id': '37af92e8-287f-4701-9498-159440873681',
+        'name': '防灾减灾与应急救援卫星示范应用',
+        'createTime': '2020-11-26 18:02:26',
+        'updateTime': '2020-11-26 18:02:26',
+        'userId': '1',
+        'parentId': '0',
+        'imageUrl': null,
+        'url': 'undefined',
+        'children': [
+        ],
+        'label': '防灾减灾与应急救援卫星示范应用',
+        'type': '2',
+        'parentName': null,
+      },
+      {
+        'id': 'b632ceac-da1a-496a-a8f5-e865c0c4036e',
+        'name': '清新福建卫星示范应用',
+        'createTime': '2020-11-26 18:01:33',
+        'updateTime': '2020-11-26 18:01:33',
+        'userId': '1',
+        'parentId': '0',
+        'imageUrl': null,
+        'url': 'undefined',
+        'children': [],
+        'label': '清新福建卫星示范应用',
+        'type': '2',
+        'parentName': null,
+      },
+      {
+        'id': '9487b7ea-3e68-41c5-9532-1ab2efe6169d',
+        'name': '美丽乡村卫星示范应用',
+        'createTime': '2020-11-26 18:01:49',
+        'updateTime': '2020-11-26 18:01:49',
+        'userId': '1',
+        'parentId': '0',
+        'imageUrl': null,
+        'url': 'undefined',
+        'children': [
+        ],
+        'label': '美丽乡村卫星示范应用',
+        'type': '2',
+        'parentName': null,
+      },
+    ],
+    'label': '一级目录',
+    'type': null,
+    'parentName': null,
+  },
+]

train-front-web/src/components/HelloWorld.vue

+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <h2>Essential Links</h2>
+    <ul>
+      <li>
+        <a
+          href="https://vuejs.org"
+          target="_blank"
+        >
+          Core Docs
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://forum.vuejs.org"
+          target="_blank"
+        >
+          Forum
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://chat.vuejs.org"
+          target="_blank"
+        >
+          Community Chat
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://twitter.com/vuejs"
+          target="_blank"
+        >
+          Twitter
+        </a>
+      </li>
+      <br>
+      <li>
+        <a
+          href="http://vuejs-templates.github.io/webpack/"
+          target="_blank"
+        >
+          Docs for This Template
+        </a>
+      </li>
+    </ul>
+    <h2>Ecosystem</h2>
+    <ul>
+      <li>
+        <a
+          href="http://router.vuejs.org/"
+          target="_blank"
+        >
+          vue-router
+        </a>
+      </li>
+      <li>
+        <a
+          href="http://vuex.vuejs.org/"
+          target="_blank"
+        >
+          vuex
+        </a>
+      </li>
+      <li>
+        <a
+          href="http://vue-loader.vuejs.org/"
+          target="_blank"
+        >
+          vue-loader
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/awesome-vue"
+          target="_blank"
+        >
+          awesome-vue
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

train-front-web/src/main.js

+// 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 ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import axios from 'axios'; /* 引入axios进行地址访问*/
+Vue.prototype.$http = axios;
+import 'jquery'
+Vue.use(ElementUI)
+
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+})

train-front-web/src/router/index.js

+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Login from '../views/login.vue'
+import Home from '../views/home.vue'
+import Layout from '../views/middle/layout/layout-middle.vue'
+import HomePage from '../views/middle/home-page/home-middle.vue'
+import Project from '../views/middle/project/project-middle.vue'
+import Kettle from '../views/middle/kettle/kettle-monitor.vue'
+import Depart from '../views/middle/depart/depart.vue'
+import Center from '../views/middle/personal-center/personal-center.vue'
+import Education from '../views/middle/education-train/education-train.vue'
+import Device from '../views/middle/device/device-middle.vue'
+
+Vue.use(VueRouter)
+
+const routes = [{
+  path: '/',
+  name: 'Login',
+  component: Login
+},
+{
+  path: '/home',
+  component: Home,
+  children: [
+    {
+      path: 'homepage',
+      name: '首页',
+      component: HomePage
+    },
+    {
+      path: 'layout',
+      name: '首页布局配置',
+      component: Layout
+    },
+    {
+      path: 'project',
+      name: '首页项目配置',
+      component: Project
+    },
+    {
+      path: 'education',
+      name: '教育培训管理',
+      component: Education
+    },
+    {
+      path: 'device',
+      name: '设备管理',
+      component: Device
+    },
+    {
+      path: 'kettle',
+      name: 'Kettle监控',
+      component: Kettle
+    },
+    {
+      path: 'depart',
+      name: '病区项目统计',
+      label: 'depart',
+      component: Depart
+    },
+    {
+      path: 'setting',
+      name: '系统设置'
+    },
+    {
+      path: 'center',
+      name: '个人中心',
+      component: Center,
+    }
+  ]
+
+}
+]
+
+const router = new VueRouter({
+  routes
+})
+
+const VueRouterPush = VueRouter.prototype.push
+VueRouter.prototype.push = function push(to) {
+  return VueRouterPush.call(this, to).catch(err => err)
+}
+
+export default router

train-front-web/src/views/common/axios.js

+/**
+* @description: axios封装 - 请求拦截、相应拦截、错误统一处理
+* @param {*}
+* @return {*}
+*/
+import axios from 'axios'
+import QS from 'qs'
+import { Loading, Message } from 'element-ui'
+import _ from 'lodash'
+
+// loading对象
+let loadingInstance
+
+// 请求合并只出现一次loading
+// 当前正在请求的数量
+let loadingRequestCount = 0
+
+// 请求超时时间
+axios.defaults.timeout = 10000
+
+// post请求头
+axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
+
+// 请求拦截器
+axios.interceptors.request.use(
+  config => {
+    let loadingTarget = '#app'
+    if (config.headers.loadingTarget) {
+      loadingTarget = config.headers.loadingTarget
+    }
+    const target = document.querySelector(loadingTarget)
+    if (target) {
+      // 请求拦截进来调用显示loading效果
+      showLoading(loadingTarget)
+    }
+    return config
+  },
+  error => Promise.error(error)
+)
+
+// 响应拦截器
+axios.interceptors.response.use(
+  response => {
+    setTimeout(() => {
+      hideLoading()
+    }, 200)
+    return Promise.resolve(response)
+  },
+  error => {
+    Message.error(`请求错误: ${error}`)
+    setTimeout(() => {
+      hideLoading()
+    }, 200)
+    if (error.response.status) {
+      return Promise.reject(error.response)
+    }
+  }
+)
+
+// 显示loading的函数 并且记录请求次数 ++
+const showLoading = (target) => {
+  if (loadingRequestCount === 0) {
+    loadingInstance = Loading.service({
+      lock: true,
+      text: '加载中...',
+      target: target
+    })
+  }
+  loadingRequestCount++
+}
+
+// 隐藏loading的函数，并且记录请求次数
+const hideLoading = () => {
+  if (loadingRequestCount <= 0) return
+  loadingRequestCount--
+  if (loadingRequestCount === 0) {
+    toHideLoading()
+  }
+}
+
+// 防抖：将 300ms 间隔内的关闭 loading 便合并为一次. 防止连续请求时, loading闪烁的问题。
+var toHideLoading = _.debounce(() => {
+  loadingInstance.close()
+  loadingInstance = null
+}, 300)
+
+/**
+ * post方法，对应post请求
+ * @param {String} url [请求的url地址]
+ * @param {Object} params [请求时携带的参数]
+ */
+export function post(url, params) {
+  return new Promise((resolve, reject) => {
+    axios.post(url, QS.stringify(params))
+      .then(res => {
+        resolve(res)
+      })
+      .catch(err => {
+        reject(err.data)
+      })
+  })
+}
+
+/**
+ * get方法，对应get请求
+ * @param {String} url [请求的url地址]
+ * @param {Object} params [请求时携带的参数]
+ */
+export function get(url, param) {
+  return new Promise((resolve, reject) => {
+    axios.get(url, { params: param })
+      .then(response => {
+        resolve(response)
+      }, err => {
+        reject(err)
+      })
+      .catch((error) => {
+        reject(error)
+      })
+  })
+}
+export default axios

train-front-web/src/views/common/bus.js

+import Vue from 'vue'
+export default new Vue()

train-front-web/src/views/common/common.css

+
+ *{
+     padding:0;
+     margin:0;
+ }
+ body, html {
+    font-family: Microsoft Yahei, Arial, Helvetica, sans-serif;
+    width: 100%;
+    /* min-width: 320px; */
+    height: 100%;
+    overflow: hidden;
+}
+html {
+    font-size: 62.5%;
+}
+.el-table .el-table__body tr td, .el-table .el-table__header tr th {
+    padding: 0;
+  }
+  .home_container_content div .el-pagination .btn-prev,
+.home_container_content div .el-pagination .btn-next {
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    background-color: #ffffff;
+    border-radius: 2px;
+    border: solid 1px rgba(0, 0, 0, 0.15);
+    font-size: 1.4rem;
+    color: rgba(0, 0, 0, 0.65);
+}
+ .el-button.project_add_btn:hover, 
+ .el-button.project_add_btn:focus, 
+ .el-button.project_retrieval_btn:hover, 
+ .el-button.project_retrieval_btn:focus,
+ .dialog-footer .el-button.el-button--primary:focus, 
+ .dialog-footer .el-button.el-button--primary.hover, 
+ .el-message-box__btns .el-button.el-button--primary:focus, 
+ .el-message-box__btns .el-button.el-button--primary.hover,
+ .el-button.search_depart:hover,.el-button.search_depart:focus,
+ .el-button.export_depart:hover,.el-button.export_depart:focus,
+ .education_upload_btn:hover,.education_upload_btn:focus{
+    background-color: #1890ff !important;
+    color:#fff !important;
+}
+.modify_phone_cancel:focus,.modify_phone_cancel:hover,
+.modify_pass_cancel:focus,.modify_pass_cancel:hover,
+.cancellation_btn:focus,.cancellation_btn:hover,
+.authorized_btn_cancel:focus,.authorized_btn_cancel:hover,
+.cancellation_btn_cancel:focus,.cancellation_btn_cancel:hover,
+.modify_cancel_btn:focus,.modify_cancel_btn:hover,
+.device_log_btn:focus,.device_log_btn:hover,
+.project_add_cancel:focus,.project_add_cancel:hover{
+    background-color:#fff !important;
+    color:#606266 !important;
+}
+.device_log_btn:focus,.device_log_btn:hover{
+    border: solid 1px #1890ff !important;
+}
+.colum_log_look:focus,.colum_log_look:hover,
+.colum_btn_edit:focus,.colum_btn_edit:hover,
+.colum_btn_delete:focus,.colum_btn_delete:hover,
+.kettle_btn_modify:focus,.kettle_btn_modify:hover,
+.kettle_btn_log:focus,.kettle_btn_log:hover{
+    background-color:transparent !important;
+    border-color:transparent !important;
+    color: #409EFF !important;
+}
+.colum_btn_delete.is-disabled:focus,.colum_btn_delete.is-disabled:hover{
+    color: #C0C4CC !important;
+}
\ No newline at end of file

train-front-web/src/views/common/common.js

+
+// 内容是否为空
+export function isBlank(content) {
+  var match = content == null || content == 'null' || content == '' || content == ' ' || content == [] || content == undefined || content == 'undefined' || typeof (content) === undefined
+  return match
+}
+// 内容是否不为空
+export function isNotBlank(content) {
+  return !this.isBlank(content)
+}
+

train-front-web/src/views/common/header.vue

+<template>
+  <el-container>
+    <el-header>
+      <el-row :gutter="0">
+        <el-col :xs="16" :sm="18" :md="20" :lg="21" :xl="22">
+          <div class="grid-content bg-purple logo_icon">
+            <img :src="require('../../assets/images/haitai-logo.png')" style="width:30px;height:26px;margin:10px 12px;" alt="logo" >
+          </div>
+          <div class="logo_name">智慧护理管理端</div>
+        </el-col>
+        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2">
+          <el-dropdown trigger="hover" @command="handleCommand">
+            <span class="el-dropdown-link">
+              <div class="head_img"/>
+              <span class="grid-content bg-purple user_info">{{ userCode }}</span>
+            </span>
+            <el-dropdown-menu slot="dropdown" class="header_dropdown">
+              <el-dropdown-item command="personal_center" @click.native="goPersonCenter"><i class="dropdown_center_icon"/><span>个人中心</span></el-dropdown-item>
+              <el-dropdown-item command="exit" @click.native="goExit"><i class="dropdown_exit_icon"/><span>退出登录</span></el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+
+        </el-col>
+      </el-row>
+    </el-header>
+  </el-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      userCode: ""
+    }
+  },
+  methods: {
+    goExit() {
+      this.$router.push({ path: '/' })
+    },
+    handleCommand() {
+
+    }
+  }
+}
+</script>
+<style lang="scss">
+.el-header {
+  background-color: #ffffff;
+	box-shadow: 0PX 1PX 4PX 0PX
+		rgba(0, 21, 41, 0.12);
+  color: #333;
+  line-height: 48PX;
+  padding: 0 !important;
+  height:48PX !important;/*no*/
+  z-index:200;
+}
+.el-header .el-row{
+  margin:0 !important;
+}
+.el-header .el-col{
+  padding: 0 !important;
+}
+.logo_icon {
+  text-align: left;
+  height: 48PX;
+  width:54PX;
+  display:inline-block;
+  float:left;
+}
+.logo_icon img {
+    width:30px;
+    height:26PX;
+    margin:10PX 12px;
+  }
+.logo_name{
+  font-size: 16PX;
+	line-height: 48PX;
+	color: #262626;
+	opacity: 0.85;
+  display:inline-block;
+  float:left;
+}
+.user_info {
+  text-align: right;
+}
+.head_info {
+  text-align: right;
+}
+.head_img {
+  width: 24PX;
+  height: 48PX;
+  border-radius: 50%;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 15px;
+  background:url(../../assets/images/head-portrait.png) no-repeat center;
+  background-size: 24PX 24PX;
+}
+.dropdown_center_icon{
+  display:inline-block;
+  width:14px;
+  height:36px;
+  background:url(../../assets/images/head-personal-center.png) no-repeat center;
+  background-size:14px 14px;
+}
+.dropdown_exit_icon{
+  display:inline-block;
+  width:14px;
+  height:36px;
+  background:url(../../assets/images/exit.png) no-repeat center;
+  background-size:14px 14px;
+}
+.header_dropdown{
+  padding:0;
+  margin-top:2px !important;
+  margin-right:-36px;
+}
+.header_dropdown .el-dropdown-menu__item{
+  width:140px;
+  overflow:hidden;
+  display:block;
+  padding:0 0 0 12px;
+}
+.el-dropdown-menu__item span,.el-dropdown-menu__item i{
+  display:inline-block;
+  line-height:36px;
+  float:left;
+}
+.el-dropdown-menu__item i {
+    margin-right: 8px;
+}
+.el-dropdown-menu__item span{
+  color:#595959;
+}
+.el-popper[x-placement^=bottom] .popper__arrow {
+  display:none;
+}
+</style>
+

train-front-web/src/views/home.vue

+
+<template>
+  <el-container>
+    <el-header> <headerNav/> </el-header>
+    <el-container class="home_bd">
+      <el-button class="expand_retract_icon retract" type="primary" @click="expandRetractEvent($event)"/>
+      <el-aside v-if="show" class="home_left" width="15.23%">
+        <div class="left_menu" style="height: 100%">
+          <el-row class="tac" style="height: 100%">
+            <el-col style="height: 100%;text-align:left;" >
+              <el-menu
+                :default-active = "String(activeIndex)"
+                router
+                class="el-menu-vertical-demo"
+                background-color="#ffffff"
+                box-shadow="2px 0px 6px 0px	rgba(0, 21, 41, 0.12)"
+                text-color="#000000"
+                active-text-color="#1890ff"
+                style="height: 100%;"
+              >
+                <el-menu-item index="/home/homepage" class="router_link" tag="li" >
+                  <i class="el-icon summary_hospital"/>
+                  <span >首页全院汇总</span>
+                </el-menu-item>
+                <el-menu-item index="/home/depart" class="router_link" tag="li" >
+                  <i class="el-icon depart_management "/>
+                  <span >病区项目统计</span>
+                </el-menu-item>
+                <el-menu-item index="/home/layout" class="router_link" tag="li" >
+                  <i class="el-icon layout_config "/>
+                  <span >首页布局配置</span>
+                </el-menu-item>
+                <el-menu-item index="/home/project" class="router_link" tag="li" >
+                  <i class="el-icon project_config "/>
+                  <span >首页项目配置</span>
+                </el-menu-item>
+                <el-menu-item index="/home/education" class="router_link" tag="li" >
+                  <i class="el-icon education_train "/>
+                  <span >教育培训管理</span>
+                </el-menu-item>
+                <el-menu-item index="/home/device" class="router_link" tag="li" >
+                  <i class="el-icon equip_management "/>
+                  <span >设备管理</span>
+                </el-menu-item>
+                <el-menu-item index="/home/kettle" class="router_link" tag="li" >
+                  <i class="el-icon kettle_monitor "/>
+                  <span >Kettle监控</span>
+                </el-menu-item>
+                <el-menu-item index="/home/setting" class="router_link" tag="li">
+                  <i class="el-icon system_setting "/>
+                  <span >系统设置</span>
+                </el-menu-item>
+                <el-menu-item index="/home/center" class="router_link" tag="li" >
+                  <i class="el-icon personal_center "/>
+                  <span >个人中心</span>
+                </el-menu-item>
+              </el-menu>
+            </el-col>
+          </el-row>
+        </div>
+      </el-aside>
+      <el-main class="home_container">
+        <el-tabs v-model="activeTab" type="card" @tab-remove="removeTab" @tab-click="tabClickEvent">
+          <!-- <el-tab-pane><span slot="label" class="crumb_home_icon"/></el-tab-pane>-->
+          <el-tab-pane
+            v-for="item in tabsItem"
+            :key="item.name"
+            :label="item.title"
+            :name="item.name"
+            :closable="item.closable"
+            :ref="item.ref">
+            <component :is="item.content" style="width:100%;height:100%" class="home_container_content"/>
+          </el-tab-pane>
+        </el-tabs>
+        <!--<router-view/>-->
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+import './common/common.css'
+import Bus from './common/bus.js'
+import headerNav from './common/header'
+import homepage from './middle/home-page/home-middle'
+import depart from './middle/depart/depart'
+import layout from './middle/layout/layout-middle'
+import project from './middle/project/project-middle'
+import kettle from './middle/kettle/kettle-monitor'
+import education from './middle/education-train/education-train'
+import device from './middle/device/device-middle'
+import { isBlank } from './common/common'
+export default {
+  components: {
+    headerNav,
+    homepage,
+    depart,
+    layout,
+    project,
+    education,
+    device
+  },
+
+  data: function() {
+    return {
+      show: true,
+      isRouterAlive: true,
+      tabList: [],
+      activeTab: '1',
+      tabIndex: 1, // tab目前显示数
+      tabsItem: [
+        {
+          title: '首页',
+          name: '1',
+          closable: false,
+          ref: 'tabs',
+          content: 'homepage'
+        }
+      ],
+      tabsPath: [{
+        name: '1',
+        path: '/home/homepage'
+      }]
+    }
+  },
+  computed: {
+    activeIndex() { // 当前激活的导航
+      if (this.$route.path.split('/').length >= 4) {
+        console.log(this.$route.path.substring(0, this.$route.path.lastIndexOf('/')))
+        return this.$route.path.substring(0, this.$route.path.lastIndexOf('/'))
+      } else {
+        console.log(this.$route.path)
+        return this.$route.path
+      }
+    }
+  },
+  watch: {
+    '$route': function(to) { // 监听路由的变化，动态生成tabs
+      console.log(to)
+      console.log(this.tabsItem)
+      let flag = true // 判断是否需要新增页面
+      const path = to.path
+      var _this = this
+      if (Object.keys(to.matched).length != 0) {
+        console.log(this.$refs.tabs)
+        console.log(this.$refs.tabs.length)
+        for (let i = 0; i < this.$refs.tabs.length; i++) {
+          // 首页不判断 如果页面已存在，则直接定位当页面，否则新增tab页面
+          console.log(this.$refs.tabs[i].label)
+          console.log(to.name)
+          if (this.$refs.tabs[i].label == to.name) {
+            console.log(this.tabsPath)
+            this.activeTab = this.$refs.tabs[i].name // 定位到已打开页面.
+            flag = false
+            break
+          }
+        }
+        // 新增页面
+        if (flag) {
+          console.log(to)
+          // 获得路由元数据的name和组件名
+          const thisName = to.name
+          let thisComp = to.path.split('/')[2]
+          if (to.path.split('/').length >= 4) {
+            thisComp = to.path.split('/')[3]
+          }
+          // 对tabs的当前激活下标和tabs数量进行自加
+          const newActiveIndex = ++this.tabIndex + ''
+          console.log(String(newActiveIndex))
+          // 动态双向追加tabs
+          this.tabsItem.push({
+            title: thisName,
+            name: String(newActiveIndex),
+            closable: true,
+            ref: 'tabs',
+            content: thisComp
+          })
+          this.activeTab = newActiveIndex
+          /*
+            * 当添加tabs的时候，把当前tabs的name作为key，path作为value存入tabsPath数组中
+            * key:tabs的name
+            * value:tabs的path
+            * {
+            *   key: name,
+            *   value: path
+            * }
+            * ///后面需要得到当前tabs的时候可以通过当前tabs的name获得path
+            * */
+          if (this.tabsPath.indexOf(path) == -1) {
+            this.tabsPath.push({
+              name: newActiveIndex,
+              path: path
+            })
+          }
+        }
+      }
+    }
+  },
+  mounted() {
+    /*
+      * 监听页面刷新事件
+      * 页面刷新前 需要保存当前打开的tabs的位置，刷新后按刷新前的顺序展示
+      * 使用js的sessionStorage保存刷新页面前的数据
+      * */
+    window.addEventListener('beforeunload', e => {
+      sessionStorage.setItem('tabsItem', JSON.stringify({
+        currTabsItem: this.tabsItem.filter(item => item.name !== '1'),
+        currTabsPath: this.tabsPath.filter(item => item.name !== '1'),
+        currActiveTabs: this.activeTab,
+        currIndex: this.tabIndex
+      }))
+    })
+  },
+  created() {
+    /*
+      * 使用js的sessionStorage读取刷新前的数据，并按刷新前的tabs顺序重新生成tabs
+      * */
+    const sessionTabs = JSON.parse(sessionStorage.getItem('tabsItem'))
+    if (isBlank(sessionTabs)) { return }
+    if (sessionTabs.currTabsItem.length != 0 && sessionTabs.currTabsPath.length != 0) {
+      for (let i = 0; i < sessionTabs.currTabsItem.length; i++) {
+        this.tabsItem.push({
+          title: sessionTabs.currTabsItem[i].title,
+          name: sessionTabs.currTabsItem[i].name,
+          closable: true,
+          ref: sessionTabs.currTabsItem[i].ref,
+          content: sessionTabs.currTabsItem[i].content
+        })
+      }
+      for (let j = 0; j < sessionTabs.currTabsPath.length; j++) {
+        this.tabsPath.push({
+          name: sessionTabs.currTabsPath[j].name,
+          path: sessionTabs.currTabsPath[j].path
+        })
+      }
+      this.activeTab = sessionTabs.currActiveTabs
+      this.tabIndex = sessionTabs.currIndex
+      // 避免强制修改url 出现浏览器的url输入框的路径和当前tabs选中的路由路径不匹配
+      const activePath = this.tabsPath.filter(item => item.name == this.activeTab)
+      this.$router.push({
+        path: activePath[0].path
+      })
+    }
+  },
+  methods: {
+    handleSelect(name, title) {
+      Bus.$emit('tagItem', { 'name': name, 'title': title })
+      this.tabList.push({ 'name': name, 'title': title })
+      console.log(this.tabList)
+    },
+    expandRetractEvent(event) {
+      const target = event.target
+      this.show = !this.show
+      console.log(this.show)
+      if (this.show) {
+        $(target).animate({ left: '14.05%' }, 1)
+        $(target).removeClass('expand').addClass('retract')
+        $('.el-main.home_container').css({
+          'width': '84.77%'
+        })
+
+        // this.reload()
+      } else {
+        $(target).animate({ left: '0' }, 1)
+        $(target).removeClass('retract').addClass('expand')
+        $('.el-main.home_container').css({
+          'width': '100%',
+          'left': '0'
+        })
+        // this.reload()
+      }
+    },
+    reload() {
+      this.isRouterAlive = false
+      this.$nextTick(function() {
+        this.isRouterAlive = true
+      })
+    },
+    removeTab(targetName) { // 删除Tab
+      const tabs = this.tabsItem // 当前显示的tab数组
+      let activeName = this.activeTab // 点前活跃的tab
+
+      // 如果当前tab正活跃 被删除时执行
+      if (activeName === targetName) {
+        tabs.forEach((tab, index) => {
+          if (tab.name === targetName) {
+            const nextTab = tabs[index + 1] || tabs[index - 1]
+            if (nextTab) {
+              activeName = nextTab.name
+              this.tabClickEvent(nextTab)
+            }
+          }
+        })
+      }
+      this.activeTab = activeName
+      this.tabsItem = tabs.filter(tab => tab.name !== targetName)
+      // 在tabsPath中删除当前被删除tab的path
+      this.tabsPath = this.tabsPath.filter(item => item.name !== targetName)
+    },
+    tabClickEvent(thisTab) {
+      console.log(thisTab)
+      /*
+        * thisTab:当前选中的tabs的实例
+        * 通过当前选中tabs的实例获得当前实例的path 重新定位路由
+        * */
+      const val = this.tabsPath.filter(item => thisTab.name == item.name)
+      console.log(val)
+      this.$router.push({
+        path: val[0].path
+      })
+    }
+
+  }
+}
+</script>
+
+<style>
+*{
+  padding:0;
+  margin:0;
+}
+.home_bd .home_container {
+  position: relative;
+  background-color:#f0f2f5;
+  padding:0;
+  width:84.77%;
+  flex:none;
+  z-index:90;
+}
+.home_bd .home_container .el-tabs{
+  width:100%;
+  height:100%
+}
+.el-tabs__content{
+  width:100%;
+  height: calc(100% - 44px);
+}
+.home_container .el-tab-pane{
+ /**display:block !important;**/
+ width: 100%;
+height:100%
+}
+.home_container .el-tabs__header{
+  margin-bottom:0px;
+  background-color:#fff
+}
+.el-tabs--card>.el-tabs__header{
+  margin-bottom: 0px;
+}
+.home_bd{
+  width:100%;
+  position: absolute;
+  top: 48PX;
+  bottom: 0;
+}
+.home_left{
+  top:0;
+  z-index:99;
+  box-shadow: 2PX 0PX 6PX 0PX
+		rgba(0, 21, 41, 0.12);
+}
+.home_content{
+  width:100%;
+  position:absolute;
+  top:0px;
+  bottom:0;
+  overflow:auto;
+}
+.home_bd .expand_retract_icon{
+  display:inline-block;
+  width: 16px;
+	height: 42px;
+	background-color: rgba(0, 0, 0, 0.09);
+	border-radius: 4px 0px 0px 4px;
+  position:absolute;
+  left:calc(15.23% - 16px);
+  top:calc(50% - 21px);
+  padding:0;
+  border:none;
+  z-index:999;
+}
+.home_bd .expand_retract_icon.expand{
+  background:url(../assets/images/expand.png) no-repeat center center;
+  background-size:16px 42px;
+}
+.home_bd .expand_retract_icon.retract{
+  background:url(../assets/images/retract.png) no-repeat center center;
+  background-size:16px 42px;
+}
+.el-menu-vertical-demo .router_link{
+  height:40px;
+  line-height:40px;
+  margin-top:8px;
+  padding-left: 13px !important;
+}
+.el-menu-vertical-demo .router_link:first-child{
+  margin-top:20px;
+}
+.el-menu-vertical-demo .router_link .el-icon{
+  display:inline-block;
+  width:19px;
+  height:40px;
+  margin-right:10px;
+  float:left;
+}
+.el-menu-vertical-demo .router_link.is-active{
+  background-color: #e6f7ff !important;
+  border-right: 2px solid #1890ff;
+}
+.el-menu-vertical-demo .router_link>span {
+  display:inline-block;
+    font-size: 1.4rem;
+    float:left;
+    line-height:40px;
+    color:rgba(0,0,0,0.85)
+}
+.el-menu-vertical-demo .router_link.is-active>span{
+  color:#37a0ff;
+}
+.el-icon.summary_hospital{
+  background:url(../assets/images/summary-hos.png) no-repeat center center;
+  background-size:18px 18px;
+}
+.router_link.is-active .el-icon.summary_hospital{
+  background:url(../assets/images/summary-hos-selected.png) no-repeat center center;
+  background-size:18px 18px;
+}
+.el-icon.depart_management{
+  background:url(../assets/images/depart-manage.png) no-repeat center center;
+  background-size:16px 15px;
+}
+.router_link.is-active .el-icon.depart_management{
+  background:url(../assets/images/depart-manage-selected.png) no-repeat center center;
+  background-size:18px 18px;
+}
+.el-icon.layout_config{
+  background:url(../assets/images/layout-config.png) no-repeat center center;
+  background-size:18px 18px;
+}
+.router_link.is-active .el-icon.layout_config{
+  background:url(../assets/images/layout-config-selected.png) no-repeat center center;
+  background-size:18px 18px;
+}
+.el-icon.project_config{
+  background:url(../assets/images/project-config.png) no-repeat center center;
+  background-size:18px 18px;
+}
+.router_link.is-active .el-icon.project_config{
+  background:url(../assets/images/project-config-selected.png) no-repeat center center;
+  background-size:18px 18px;
+}
+.el-icon.education_train{
+  background:url(../assets/images/education-train.png) no-repeat center center;
+  background-size:18px 18px;
+}
+.router_link.is-active .el-icon.education_train{
+  background:url(../assets/images/education-train-selected.png) no-repeat center center;
+  background-size:18px 18px;
+}
+.el-icon.equip_management{
+  background:url(../assets/images/equip-manage.png) no-repeat center center;
+  background-size:18px 18px;
+}
+.router_link.is-active .el-icon.equip_management{
+  background:url(../assets/images/equip-manage-selected.png) no-repeat center center;
+  background-size:18px 18px;
+}
+.el-icon.kettle_monitor{
+  background:url(../assets/images/kettle-monitor.png) no-repeat center center;
+  background-size:14px 18px;
+}
+.router_link.is-active .el-icon.kettle_monitor{
+  background:url(../assets/images/kettle-monitor-selected.png) no-repeat center center;
+  background-size:18px 18px;
+}
+.el-icon.system_setting{
+  background:url(../assets/images/system-setting.png) no-repeat center center;
+  background-size:16px 16px;
+}
+.router_link.is-active .el-icon.system_setting{
+  background:url(../assets/images/system-setting-selected.png) no-repeat center center;
+  background-size:18px 18px;
+}
+.el-icon.personal_center{
+  background:url(../assets/images/personal-center.png) no-repeat center center;
+  background-size:18px 18px;
+}
+.router_link.is-active .el-icon.personal_center{
+  background:url(../assets/images/personal-center-selected.png) no-repeat center center;
+  background-size:18px 18px;
+}
+.home_container .el-tabs__item.is-active {
+    color: #409EFF;
+    background-color: #e6f7ff;
+    border-top: 1px solid #1890ff;
+}
+</style>

train-front-web/src/views/login.vue

+<template>
+  <div
+    class="login_contain">
+    <div class="login_back">
+      <div class="left_top"/>
+      <div class="left_bottom"/>
+      <div class="right_top"/>
+      <div class="right_center_lef"/>
+      <div class="right_center_rig"/>
+      <div class="right_center"/>
+      <div class="right_hospital"/>
+      <div class="right_bottom"/>
+      <div class="right_nurse"/>
+    </div>
+    <div class="form_box">
+      <div class="login_span">智慧护理信息平台-管理端</div>
+      <div class="login_box">
+        <el-form
+          :model="loginForm"
+          class="login-form"
+          label-position="left">
+          <div class="login_user">
+            <div class="login_info">用户名</div>
+            <div>
+              <input
+                v-model="loginForm.userCode"
+                type="text"
+                class="login_inp"
+              >
+            </div>
+          </div>
+          <div class="login_pwd">
+            <div class="login_info">密码</div>
+            <div>
+              <input
+                v-model="loginForm.pwd"
+                type="password"
+                class="login_inp"
+              >
+            </div>
+          </div>
+          <el-button
+            type="primary"
+            class="login_btn"
+            @click="getLogin"
+          >登录</el-button
+          >
+        </el-form>
+      </div>
+      <div class="version_info">
+        <span>V1.18.10.0</span><br >
+        <span>版权所有©南京海泰医疗信息系统有限公司</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import './common/common.css'
+export default {
+  name: 'Login',
+  data() {
+    return {
+      loginForm: {
+        userCode: '',
+        pwd: ''
+      }
+    }
+  },
+  methods: {
+    getLogin() {
+      this.$router.push({ path: '/home/homepage' })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .load_spin .ant-spin{
+    max-height:100%
+  }
+  .el-loading-spinner .circular {
+    height: 62px;
+    width: 62px;
+  }
+  .el-loading-spinner {
+    top: 50%;
+    margin-top: -21px;
+    width: 10%;
+    border: 1px solid #fff;
+    margin-left: 45%;
+    text-align: center;
+    position: absolute;
+}
+.login_back {
+  background-color: #f4f8ff;
+  width: 100%;
+  min-height: calc(100vh);
+  min-height: -moz-calc(100vh);
+  min-height: -webkit-calc(100vh);
+  position: relative;
+}
+.login_back div{
+  position: absolute;
+}
+.left_top {
+  left: 0;
+  top: 0;
+  width: 9.11%;
+  height: 41.94%;
+  background: url(../assets/images/login-left-top.png) no-repeat;
+  background-size: 100% 100%;
+}
+.left_center_top {
+  top: 50PX;
+  left: 14.6%;
+  width: 31.25%;
+  height: 13.05%;
+  text-align: center;
+  background: url(../assets/images/login-htsns.png) no-repeat;
+  background-size: 100% 100%;
+}
+.left_bottom {
+  left: 4.8%;
+  bottom: 77px;
+  width: 8.125%;
+  height: 14.44%;
+  background: url(../assets/images/login-needle.png) no-repeat;
+  background-size: 100% 100%;
+}
+.right_center_lef {
+  left: calc(11.7% + 38.7% + 20px);
+  top: 170px;
+  width: 6.125%;
+  height: 11%;
+  background: url(../assets/images/login-stethoscope.png) no-repeat;
+  background-size: 100% 100%;
+}
+.right_center_rig {
+  left: calc(11.7% + 38.7% + 36.7% - 9%);
+  top: 170px;
+  width: 6.37%;
+  height: 11%;
+  background: url(../assets/images/login-appoint.png) no-repeat;
+  background-size: 100% 100%;
+}
+.right_center {
+  left: calc(11.7% + 38.7% + 10px);
+  top: 210px;
+  width: 36.7%;
+  height: 41.9%;
+  background: url(../assets/images/login-right-center.png) no-repeat;
+  background-size: 100% 100%;
+}
+.right_top {
+  top: 0;
+  right: 0;
+  width: 10%;
+  height: 21.67%;
+  background: url(../assets/images/login-right-top.png) no-repeat;
+  background-size: 100% 100%;
+}
+.right_bottom {
+  right: 0;
+  bottom: 0;
+  width: 10.78%;
+  height: 23.33%;
+  background: url(../assets/images/login-right-bottom.png) no-repeat bottom;
+  background-size: 100% 100%;
+}
+.right_hospital {
+  left: calc(11.7% + 38.7% + 20px);
+  bottom: 0;
+  width: 10.8%;
+  height: 19.27%;
+  background: url(../assets/images/login-hospital.png) no-repeat bottom;
+  background-size: 100% 100%;
+}
+.right_nurse {
+  right: 4%;
+  bottom: 100px;
+  width: 12.656%;
+  height: 51.11%;
+  background: url(../assets/images/login-nurse.png) no-repeat;
+  background-size: 100% 100%;
+}
+.login_span {
+  position: absolute;
+  left: 11.7%;
+  width: 38.7%;
+  top: 120px;
+  text-align: center;
+  font-size: 3rem;
+  color:#333333;
+}
+.login_box {
+  width: 38.7%;
+  height: 58.5%;
+  position: absolute;
+  left: 11.7%;
+  top: 200px;
+  border-radius: 20px;
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.16);
+  padding: 5.12% 0;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+.login_pwd {
+  margin-top: 6.67%;
+}
+.login_info {
+  width: 60%;
+  text-align: left;
+  font-size:1.6rem;
+  color: #808080;
+  margin: 0 auto;
+}
+.login_inp {
+  border: none;
+  outline: none;
+  caret-color: #147bfa;
+  border-bottom: 1px solid #ccc;
+  height: 40px;
+  width: 60%;
+  font-size: 1.6rem;
+  color: #333;
+}
+.login_inp:focus {
+  border-bottom: 1px solid #147bfa;
+}
+.login_btn {
+  width: 60%;
+  margin-top: 11%;
+  height: 50px;
+  font-size: 1.8rem;
+}
+.version_info {
+  position: absolute;
+  left: 11.7%;
+  width: 38.7%;
+  bottom: 44px;
+  color: #ccc;
+  line-height: 28px;
+  font-size: 1.3rem;
+}
+@media screen and (max-width: 1024px) {
+  .login_box {
+    height: 43.8%;
+  }
+  .login_btn {
+    height: 40px;
+    font-size: 1.6rem;
+  }
+}
+</style>

train-front-web/src/views/middle/depart/depart.css

+.depart_region{
+    width:100%;
+    height:100%;
+}
\ No newline at end of file

train-front-web/src/views/middle/depart/depart.js

+
+export default {
+  name: 'project',
+  data() {
+    return {
+    }
+  }
+}

train-front-web/src/views/middle/depart/depart.vue

+<template>
+  <div class="depart_region">
+  
+  </div>
+</template>
+
+<script>
+import depart from './depart.js'
+import './../../common/common.css'
+export default depart
+</script>
+
+<style>
+@import "./depart.css"
+</style>
+

train-front-web/src/views/middle/device/device-middle.vue

+<template>
+  <div>
+    <div class="device_content">
+      设备
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+  },
+  data() {
+    return {
+    }
+  },
+  mounted: function() {
+    
+  }
+}
+</script>
+
+    <style>
+      .device_content{
+        width: 100%;
+        position: absolute;
+        top: 40px;
+        bottom: 0;
+        overflow: auto;
+      }
+    </style>
+

train-front-web/src/views/middle/education-train/education-train.css

+.education_content{
+    width:100%;
+    height:auto;
+    padding-top:20px;
+    border-radius:2px;
+    height: calc(100%);
+    overflow:auto;
+}

train-front-web/src/views/middle/education-train/education-train.js

+
+export default {
+  name: 'education',
+  data() {
+    return {
+     
+    }
+
+  }
+}

train-front-web/src/views/middle/education-train/education-train.vue

+<template>
+  <div>
+    <div class="education_content">
+      教育培训
+    </div>
+  </div>
+</template>
+
+<script>
+import education from './education-train.js'
+import './../../common/common.css'
+export default education
+</script>
+
+  <style>
+    @import './education-train.css'
+  </style>
+

train-front-web/src/views/middle/home-page/home-middle.css

+.home_content{
+    width:100%;
+    margin-top:1PX;
+    overflow:auto;
+    position:absolute;
+    bottom:0;
+    top:0px;
+  }
+  
\ No newline at end of file

train-front-web/src/views/middle/home-page/home-middle.js

+export default {
+  name: 'homeMiddle',
+  data() {
+    return {
+
+    }
+  }
+}
\ No newline at end of file

train-front-web/src/views/middle/home-page/home-middle.vue

+<template>
+  <div class="home_content">
+    首页
+    </div>
+  </div>
+
+</template>
+
+<script>
+import './../../common/common.css'
+import homeMiddle from './home-middle.js'
+export default homeMiddle
+</script>
+
+<style lang="scss" scoped>
+  @import "./home-middle.css"
+</style>

train-front-web/src/views/middle/kettle/kettle-monitor.css

+.kettle_content{
+    width: 100%;
+    position: absolute;
+    top: 0px;
+    bottom: 0;
+    overflow: auto;
+  }
+  .kettle_monitor_content{
+      width:96.54%;
+      min-height:calc(100% - 20px);
+      margin:20px 1.73% 0px 1.73%;
+      background-color:#fff;
+      padding:25px 2.76% 0 2.76%;
+      overflow: auto;
+      margin-bottom: 20px;
+  }
+  .kettle_retrieval{
+      display:inline-block;
+      float:left;
+      width: 280px;
+      height: 32px;
+      background-color: #ffffff;
+      border-radius: 2px;
+      border: solid 1px #d9d9d9;
+  }
+  .kettle_retrieval .kettle_retrieval_input{
+      display:inline-block;
+      float:left;
+      width:200px;
+      height:30px;
+      line-height:30px;
+      border:none;
+  }
+  .kettle_retrieval .kettle_retrieval_input input{
+      width:100%;
+      border:none;
+      height:100%;
+  }
+  .kettle_retrieval .kettle_retrieval_btn{
+      display:inline-block;
+      float:right;
+      width: 60px;
+      height: 30px;
+      background-color: #1890ff;
+      border-radius: 0px 2px 2px 0px;
+      text-align:center;
+      padding:0;
+  }
+  .kettle_retrieval .kettle_retrieval_btn>span{
+      display:inline-block;
+      font-size: 1.4rem;
+      line-height: 30px;
+      color: #ffffff;
+  }
+  .kettle_monitor_content  .el-table th>.cell {
+      height: 45px;
+      line-height: 45px;
+  }
+  .kettle_monitor_content  .el-table th>.cell {
+      font-size: 1.4rem;
+      color: #262626;
+  }
+  .kettle_monitor_content .el-table td, .el-table th {
+    padding:  0;
+  }
+  .kettle_monitor_content  .el-table .cell {
+      padding-left: 16px;
+      font-size: 1.4rem;
+      color: #595959;
+      height: 45px;
+      line-height: 45px;
+  }
+  .kettle_monitor_content  .el-table  .file_name .cell
+  {
+    line-height: 20px;
+    padding-top:2px;
+  }
+  .kettle_monitor_content  .el-table {
+    top: 24px;
+}
+.colum_btn_look, .colum_btn_log{
+  font-size: 1.4rem;
+  display:inline-block;
+  float:left;
+}
+.colum_btn_log,.colum_btn_look{
+  width: 46px;
+  color: #1890ff;
+}
+.kettle_monitor_content .device_pagination {
+  margin: 46px 0 26px 0;
+}
+.kettle_monitor_content .device_pagination .el-pager li,
+  .kettle_monitor_content .device_pagination .btn-prev,.kettle_monitor_content .device_pagination .btn-next{
+      width: 32px;
+      height: 32px;
+      background-color: #ffffff;
+      border-radius: 2px;
+      border: solid 1px rgba(0, 0, 0, 0.15);
+      font-size: 1.4rem;
+      color: rgba(0, 0, 0, 0.65);
+  }
+  .kettle_monitor_content .device_pagination .el-pager .el-icon.el-icon-more{
+      border:none;
+      margin:0;
+  }
+  .kettle_monitor_content .el-pagination slot span,.device_config_content .el-pagination .el-pagination__total{
+      display:inline-block;
+      font-size: 1.4rem;
+      line-height: 32px;
+      color: rgba(0, 0, 0, 0.65);
+      font-weight: normal;
+  }
+  .kettle_monitor_content .el-pagination{
+    text-align:right;
+  }
+  .kettle_monitor_content .el-pagination .el-pagination__jump{
+      display:inline-block;
+      font-size: 1.4rem;
+      line-height: 32px;
+      color: rgba(0, 0, 0, 0.65);
+      font-weight: normal;
+      margin-left: 0;
+  }
+  .kettle_monitor_content .el-pagination .el-input__inner{
+      width: 48px;
+      height: 32px;
+      background-color: #ffffff;
+      border-radius: 2px;
+      border: solid 1px #d9d9d9;
+  }
+  .kettle_monitor_content .el-pagination .el-input.el-pagination__editor{
+      margin: 0 8px;
+  }
+  .kettle_monitor_content .el-pagination .el-select .el-input {
+      width: 82px;
+      margin: 0;
+  }
+  .kettle_monitor_content .el-pagination .el-select .el-input .el-input__inner {
+      width: 82px;
+  }
+  .columNormal i{
+      display:inline-block;
+      width: 6px;
+      height: 6px;
+      background-color: #1890ff;
+      border-radius:50%;
+      margin-right:8px;
+      vertical-align: middle;
+  }
+  .columCancelled i{
+      display:inline-block;
+      width: 6px;
+      height: 6px;
+      background-color: #faad14;
+      border-radius:50%;
+      margin-right:8px;
+      vertical-align: middle;
+  }
+  .columCancelled span{
+    color:#faad14;
+  }
+  .el-table .el-table__header tr th {
+      background: #FAFAFA;
+  }
+  .el-table--enable-row-hover .el-table__body tr:hover>td {
+    background-color: #e6f7ff;
+}
+
+.kettle_form_dialog .el-dialog{
+    width:35.14%;
+    height:auto;
+    margin-top: 30vh !important;
+    -webkit-box-shadow: none;
+    box-shadow:none;
+}
+.kettle_form_dialog .el-dialog__body{
+    height:auto;
+    padding: 12px 66px 0px 20px;
+}
+.kettle_form_dialog .el-dialog .el-dialog__header {
+    padding: 14px 20px 0 20px;
+    line-height:24px;
+}
+.kettle_form_dialog .el-dialog .el-dialog__header .el-dialog__title{
+    font-size: 1.6rem;
+    display: inline-block;
+    font-weight: bold;
+    line-height: 22px;
+    letter-spacing: 1px;
+    color: rgba(0, 0, 0, 0.85);
+}
+.kettle_form_dialog .el-dialog__headerbtn{
+    top: 14px;
+    display: inline-block;
+}
+.el-table__body .operation .kettle_btn_modify,.el-table__body .operation .kettle_btn_log{
+    display:inline-block;
+    float:left;
+    font-size: 1.4rem;
+	line-height: 45px;
+	letter-spacing: 1px;
+	color: #1890ff;
+    padding:0;
+    border-color: transparent;
+    background-color:transparent;
+}
+.kettle_btn_modify span,.kettle_btn_log span{
+    display:inline-block;
+    width:44px;
+    height:14px;
+    line-height: 14px;
+    margin:15px 0;
+}
+.kettle_btn_log span{
+    border-left:1px solid #e9e9e9;
+}
\ No newline at end of file

train-front-web/src/views/middle/kettle/kettle-monitor.js

+export default {
+  name: 'kettleMon',
+  data() {
+    return {
+      currentPage: 1,
+      pageSize: 15,
+      search: '',
+      tableDataLen: '',
+      dialogKettleFormVisible: false,
+      tableData: [{
+        minitorName: '皮试医嘱监控',
+        minitorGroup: 'kettlejobgroup5',
+        executTime: '0 * * * * ?',
+        database: 'EMR,HIS',
+        executStatus: '正常',
+        fileName: 'kettle/HTSNS.DAILY_PROJECT/HTSNS.DAILY_PROJECT.kjb'
+      }, {
+        minitorName: '皮试医嘱监控',
+        minitorGroup: 'kettlejobgroup5',
+        executTime: '0 * * * * ?',
+        database: 'EMR,HIS',
+        executStatus: '正常',
+        fileName: 'kettle/HTSNS.DAILY_PROJECT/HTSNS.DAILY_PROJECT.kjb'
+      }, {
+        minitorName: '皮试医嘱监控',
+        minitorGroup: 'kettlejobgroup5',
+        executTime: '0 * * * * ?',
+        database: 'EMR,HIS',
+        executStatus: '正常',
+        fileName: 'kettle/HTSNS.DAILY_PROJECT/HTSNS.DAILY_PROJECT.kjb'
+      }, {
+        minitorName: '皮试医嘱监控',
+        minitorGroup: 'kettlejobgroup5',
+        executTime: '0 * * * * ?',
+        database: 'EMR,HIS',
+        executStatus: '异常',
+        fileName: 'kettle/HTSNS.DAILY_PROJECT/HTSNS.DAILY_PROJECT.kjb'
+      }, {
+        minitorName: '皮试医嘱监控',
+        minitorGroup: 'kettlejobgroup5',
+        executTime: '0 * * * * ?',
+        database: 'EMR,HIS',
+        executStatus: '正常',
+        fileName: 'kettle/HTSNS.DAILY_PROJECT/HTSNS.DAILY_PROJECT.kjb'
+      }, {
+        minitorName: '皮试医嘱监控',
+        minitorGroup: 'kettlejobgroup5',
+        executTime: '0 * * * * ?',
+        database: 'EMR,HIS',
+        executStatus: '正常',
+        fileName: 'kettle/HTSNS.DAILY_PROJECT/HTSNS.DAILY_PROJECT.kjb'
+      }, {
+        minitorName: '皮试医嘱监控',
+        minitorGroup: 'kettlejobgroup5',
+        executTime: '0 * * * * ?',
+        database: 'EMR',
+        executStatus: '正常',
+        fileName: 'kettle/HTSNS.DAILY_PROJECT/HTSNS.DAILY_PROJECT.kjb'
+      }, {
+        minitorName: '皮试医嘱监控',
+        minitorGroup: 'kettlejobgroup5',
+        executTime: '0 * * * * ?',
+        database: 'EMR,HIS',
+        executStatus: '异常',
+        fileName: 'kettle/HTSNS.DAILY_PROJECT/HTSNS.DAILY_PROJECT.kjb'
+      }, {
+        minitorName: '皮试医嘱监控',
+        minitorGroup: 'kettlejobgroup5',
+        executTime: '0 * * * * ?',
+        database: 'EMR,HIS',
+        executStatus: '正常',
+        fileName: 'kettle/HTSNS.DAILY_PROJECT/HTSNS.DAILY_PROJECT.kjb'
+      }, {
+        minitorName: '皮试医嘱监控',
+        minitorGroup: 'kettlejobgroup5',
+        executTime: '0 * * * * ?',
+        database: 'EMR,HIS',
+        executStatus: '正常',
+        fileName: 'kettle/HTSNS.DAILY_PROJECT/HTSNS.DAILY_PROJECT.kjb'
+      }, {
+        minitorName: '皮试医嘱监控',
+        minitorGroup: 'kettlejobgroup5',
+        executTime: '0 * * * * ?',
+        database: 'EMR,HIS',
+        executStatus: '正常',
+        fileName: 'kettle/HTSNS.DAILY_PROJECT/HTSNS.DAILY_PROJECT.kjb'
+      }, {
+        minitorName: '皮试医嘱监控',
+        minitorGroup: 'kettlejobgroup5',
+        executTime: '0 * * * * ?',
+        database: 'EMR,HIS',
+        executStatus: '正常',
+        fileName: 'kettle/HTSNS.DAILY_PROJECT/HTSNS.DAILY_PROJECT.kjb'
+      }, {
+        minitorName: '皮试医嘱监控',
+        minitorGroup: 'kettlejobgroup5',
+        executTime: '0 * * * * ?',
+        database: 'EMR,HIS',
+        executStatus: '正常',
+        fileName: 'kettle/HTSNS.DAILY_PROJECT/HTSNS.DAILY_PROJECT.kjb'
+      }, {
+        minitorName: '皮试医嘱监控',
+        minitorGroup: 'kettlejobgroup5',
+        executTime: '0 * * * * ?',
+        database: 'EMR,HIS',
+        executStatus: '正常',
+        fileName: 'kettle/HTSNS.DAILY_PROJECT/HTSNS.DAILY_PROJECT.kjb'
+      }, {
+        minitorName: '皮试医嘱监控',
+        minitorGroup: 'kettlejobgroup5',
+        executTime: '0 * * * * ?',
+        database: 'EMR,HIS',
+        executStatus: '正常',
+        fileName: 'kettle/HTSNS.DAILY_PROJECT/HTSNS.DAILY_PROJECT.kjb'
+      },
+      {
+        minitorName: '皮试医嘱监控',
+        minitorGroup: 'kettlejobgroup5',
+        executTime: '0 * * * * ?',
+        database: 'EMR,HIS',
+        executStatus: '正常',
+        fileName: 'kettle/HTSNS.DAILY_PROJECT/HTSNS.DAILY_PROJECT.kjb'
+      }
+      ],
+      kettleForm: {
+        minitorName: '',
+        minitorGroup: '',
+        executTime: '',
+        database: '',
+        executStatus: '',
+        fileName: ''
+      },
+      formLabelWidth: '114px',
+      minitorGroupList: [],
+      databaseList: [],
+      executTimeList: []
+    }
+  },
+  computed: {
+    table_data() {
+      const search = this.search
+      // 搜索功能
+      if (search) {
+        const list = this.tableData.filter(data => !search || data.minitorName.toLowerCase().includes(search.toLowerCase()))
+        const fenye = list.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
+        this.tableDataLen = fenye.length
+        // 获取查询的结果，把数组长度赋值给 分页组件中的total
+        // this.tableData_length = fenye.length
+        return fenye
+      } else {
+        // 分页功能
+        // 所有数据的长度  赋值给分页组件中的total
+        // this.tableData_length = this.tableData.length
+        const fenye = this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
+        this.tableDataLen = this.tableData.length
+        if (fenye.length < this.pageSize) {
+          for (var i = fenye.length; i < this.pageSize; i++) {
+            fenye.push({ minitorName: '', minitorGroup: '', executTime: '', database: '', executStatus: '', fileName: '' })
+          }
+        }
+        return fenye
+      }
+    }
+  },
+  watch: {
+    colorPicker: function() {
+      console.log(122222)
+      console.log(this.colorPicker)
+    }
+  },
+  methods: {
+    kettleRetrievalChange(e) {
+      this.$forceUpdate()
+    },
+    formatter(row, column) {
+      return row.address
+    },
+    filterTag(value, row) {
+      return row.tag === value
+    },
+    filterHandler(value, row, column) {
+      const property = column['property']
+      return row[property] === value
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      console.log(`当前页: ${val}`)
+    },
+    handleSizeChange(val) {
+      this.pageSize = val
+      console.log(`每页 ${val} 条`)
+    },
+    kettleModifyItemEvent(row) {
+      this.dialogKettleFormVisible = true
+      this.kettleForm.minitorName = row.minitorName
+      this.kettleForm.minitorGroup = row.minitorGroup
+      this.kettleForm.executTime = row.executTime
+      this.kettleForm.database = row.database
+      this.kettleForm.executStatus = row.executStatus
+      this.kettleForm.fileName = row.fileName
+    },
+    modifyKettleFromSureBtn() {
+
+    },
+    retrievalBtnEvent() {
+
+    }
+  }
+}

train-front-web/src/views/middle/kettle/kettle-monitor.vue

+<template>
+  <div>
+    <div class="kettle_content">
+      <div class="kettle_monitor_content">
+        <div class="kettle_retrieval">
+          <el-input
+            v-model="search"
+            class="kettle_retrieval_input"
+            size="mini"
+            placeholder="搜索名称"
+            @input="kettleRetrievalChange($event)"/>
+          <el-button class="kettle_retrieval_btn" @click="retrievalBtnEvent">检索</el-button>
+        </div>
+
+        <el-table ref="filterTable" :data="table_data" stripe style="width: calc(100%);">
+          <el-table-column class-name="minitor_name" prop="minitorName" label="名称" min-width="10%" />
+          <el-table-column class-name="minitor_group" prop="minitorGroup" label="分组" min-width="12%"/>
+          <el-table-column class-name="execut_time" prop="executTime" label="执行时间" min-width="11%" />
+          <el-table-column class-name="database" prop="database" label="数据库" min-width="7%" />
+          <el-table-column class-name="execut_status" prop="executStatus" label="执行状态" min-width="6%" >
+            <template slot-scope="scope">
+              <div v-if="scope.row.executStatus == '' || scope.row.executStatus == ' ' || scope.row.executStatus == null"/>
+              <div v-else>
+                <div :class="scope.row.executStatus === '正常' ? 'columNormal' : 'columCancelled'">
+                  <i/>
+                  <span>{{ scope.row.executStatus }}</span>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column class-name="file_name" prop="fileName" label="文件名" min-width="15%"/>
+          <el-table-column class-name="operation" prop="operation" label="操作" min-width="9%" >
+            <template slot-scope="scope">
+              <el-button class="kettle_btn_modify" @click="kettleModifyItemEvent(scope.row)">修改</el-button>
+              <el-dialog :modal-append-to-body="false" :visible.sync="dialogKettleFormVisible" title="修改" class="kettle_form_dialog">
+                <el-form :model="kettleForm">
+                  <el-form-item :label-width="formLabelWidth" label="名称：" required>
+                    <el-input v-model="kettleForm.minitorName" autocomplete="off"/>
+                  </el-form-item>
+                  <el-form-item :label-width="formLabelWidth" label="分组：" required>
+                    <el-select v-model="kettleForm.minitorGroup" >
+                      <el-option v-for="item in minitorGroupList" :key="item" :value="setProjectValueClass(item)" :class="setProjectTypeClass(item)">
+                        <span>{{ item.typeDesc }}</span>
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item :label-width="formLabelWidth" label="执行时间：" required>
+                    <el-select v-model="kettleForm.executTime" >
+                      <el-option v-for="item in executTimeList" :key="item" :value="setProjectValueClass(item)" :class="setProjectTypeClass(item)">
+                        <span>{{ item.typeDesc }}</span>
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item :label-width="formLabelWidth" label="数据库：" required>
+                    <el-select v-model="kettleForm.database" >
+                      <el-option v-for="item in databaseList" :key="item" :value="setProjectValueClass(item)" :class="setProjectTypeClass(item)">
+                        <span>{{ item.typeDesc }}</span>
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item :label-width="formLabelWidth" label="运行状态：" required>
+                    <el-input :disabled="true" v-model="kettleForm.executStatus" autocomplete="off"/>
+                  </el-form-item>
+                  <el-form-item :label-width="formLabelWidth" label="文件名：" required>
+                    <el-input v-model="kettleForm.fileName" autocomplete="off" placeholder="请输入项目名称"/>
+                  </el-form-item>
+
+                </el-form>
+                <div slot="footer" class="dialog-footer">
+                  <el-button class="kettle_modify_cancel" @click="dialogKettleFormVisible = false">取 消</el-button>
+                  <el-button type="primary" @click="modifyKettleFromSureBtn">确 定</el-button>
+                </div>
+              </el-dialog>
+              <el-button class="kettle_btn_log">日志</el-button>
+            </template>
+            <!--<router-link class="colum_btn_log" tag="li">日志</router-link>-->
+          </el-table-column>
+        </el-table>
+        <div class="device_pagination">
+          <el-pagination
+            :current-page="currentPage"
+            :page-size="pageSize"
+            :total="tableDataLen"
+            :page-sizes="[10, 15, 20]"
+            background
+            layout="slot,total, prev, pager, next,sizes, jumper"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange">
+            <span>第{{ (currentPage-1)*pageSize+1 }}-{{ currentPage*pageSize>tableDataLen? tableDataLen:currentPage*pageSize }}项，</span>
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import kettleMon from './kettle-monitor.js'
+import './../../common/common.css'
+export default kettleMon
+</script>
+ <style>
+   @import "./kettle-monitor.css"
+ </style>
+

train-front-web/src/views/middle/layout/layout-middle.css

+.layout_content{
+    width: 100%;
+    position: absolute;
+    top: 0px;
+    bottom: 0;
+    overflow: auto;
+  }

train-front-web/src/views/middle/layout/layout-middle.js

+
+export default {
+  name: 'layoutmiddle',
+  
+  data: function() {
+    return {
+    }
+  }
+}
\ No newline at end of file

train-front-web/src/views/middle/layout/layout-middle.vue

+<template>
+  <div>
+   布局管理
+  </div>
+</template>
+
+<script>
+import './../../common/common.css'
+import layoutmiddle from './layout-middle.js'
+export default layoutmiddle
+</script>
+
+<style>
+  @import './layout-middle.css'
+</style>

train-front-web/src/views/middle/personal-center/personal-center.css

+.personal_region{
+    width:100%;
+    height:100%;
+}

train-front-web/src/views/middle/personal-center/personal-center.js

+
+export default {
+  name: 'personal',
+  components: {
+
+  },
+  data() {
+    return {
+
+    }
+  },
+  mounted: function() {
+  
+  },
+  methods: {
+
+  }
+}

train-front-web/src/views/middle/personal-center/personal-center.vue

+<template>
+  <div class="personal_region">
+    个人中心
+  </div>
+</template>
+
+<script>
+import './../../common/common.css'
+import personal from './personal-center.js'
+export default personal
+</script>
+
+  <style>
+  @import "./personal-center.css"
+  </style>
+

train-front-web/src/views/middle/project/project-middle.css

+.project_content{
+    width:100%;
+    position:absolute;
+    top:0px;
+    bottom:0;
+    overflow:auto;
+  }
+  .project_config_content{
+      width:96.54%;
+      min-height:calc(100% - 40px);
+      margin:20px 1.73% 20px 1.73%;
+      background-color:#fff;
+      padding:25px 2.76% 0 2.76%;
+      overflow: auto;
+      box-sizing: border-box;
+  }
+  .project_type,.fixed_project{
+      display:inline-block;
+      float:left;
+  }
+  .fixed_project{
+      margin-left:4.55%;
+  }
+  .project_type>span,.fixed_project>span{
+      font-size: 1.4rem;
+      line-height: 32px;
+      color: #262626;
+      display:inline-block;
+      float:left;
+  }
+  .project_type .el-select,.fixed_project .el-select{
+      display:inline-block;
+      float:left;
+      width: 200px;
+      height: 32px;
+      background-color: #ffffff;
+      border-radius: 2px;
+      margin-left:10px;
+  }
+  .project_type .el-input__inner,.fixed_project .el-input__inner{
+    height:32px;
+    line-height:34px;
+    border-radius:2px;
+  }
+  .project_type .el-input__icon,.fixed_project .el-input__icon,.el-input__icon {
+    line-height: 32px;
+  }
+  .project_retrieval{
+      display:inline-block;
+      float:left;
+      width: 280px;
+      height: 32px;
+      background-color: #ffffff;
+      border-radius: 2px;
+      border: solid 1px #d9d9d9;
+      margin-left:4.55%;
+  }
+  .project_retrieval .project_retrieval_input{
+      display:inline-block;
+      float:left;
+      width:200px;
+      height:30px;
+      line-height:30px;
+      border:none;
+  }
+  .project_retrieval .project_retrieval_input input{
+      width:100%;
+      border:none;
+      height:100%;
+  }
+  .project_retrieval .project_retrieval_btn{
+      display:inline-block;
+      float:right;
+      width: 60px;
+      height: 32px;
+      background-color: #1890ff;
+      border-radius: 0px 2px 2px 0px;
+      text-align: center;
+      padding: 0;
+      margin-top: -1px;
+      margin-right: -1px;
+  }
+  .project_concrete_content .project_retrieval .project_retrieval_btn>span{
+      display:inline-block;
+      font-size: 1.4rem;
+      line-height: 30px;
+      color: #ffffff;
+  }
+  .project_concrete_content .project_add_btn{
+      display:inline-block;
+      float:right;
+      width: 82px;
+      height: 32px;
+      background-color: #1890ff;
+      border-radius: 2px;
+      padding:0;
+  }
+  .project_add_btn>span>i{
+      display:inline-block;
+      float:left;
+      width:16px;
+      height:32px;
+      background:url(../../../assets/images/icon-add.png) no-repeat center;
+      background-size:16px 16px;
+      margin-left:18.29%;
+  }
+  .project_add_btn>span>span{
+      display:inline-block;
+      font-size: 1.4rem;
+      line-height: 30px;
+      color: #ffffff;
+  }
+  .project_config_content .el-table .cell {
+      padding-left:16px;
+      font-size: 1.4rem;
+    color: #595959;
+    height:45px;
+    line-height:45px;
+  }
+  .project_config_content .el-table th>.cell{
+      font-size: 1.4rem;
+    color: #262626;
+  }
+  .project_config_content .el-table{
+      top:24px;
+  }
+  .colum_color{
+      display:inline-block;
+      width: 40px;
+      height: 20px;
+      border-radius: 2px;
+  }
+  .columEffective i{
+      display:inline-block;
+      width: 6px;
+      height: 6px;
+      background-color: #1890ff;
+      border-radius:50%;
+      margin-right:8px;
+      vertical-align: middle;
+  }
+  .columInvalid i{
+      display:inline-block;
+      width: 6px;
+      height: 6px;
+      background-color: #bfbfbf;
+      border-radius:50%;
+      margin-right:8px;
+      vertical-align: middle;
+  }
+  .colum_btn_edit span,.colum_btn_delete span{
+      font-size: 1.4rem;
+  }
+  .colum_btn_delete{
+      margin-left:17px;
+  }
+  .edit_delete_line{
+      float: left;
+      margin-top: -25%;
+      width: 1px;
+      height: 14px;
+      margin-left: 40px;
+      position: absolute;
+      background: #e9e9e9;
+  }
+  .project_content .project_config_content .project_pagination{
+      margin: 46px 0 26px 0;
+  }
+  .project_content .project_config_content .project_pagination .el-pager li,
+  .project_content .project_config_content .project_pagination .btn-prev,.project_config_content .project_pagination .btn-next{
+      width: 32px;
+      height: 32px;
+      background-color: #ffffff;
+      border-radius: 2px;
+      border: solid 1px rgba(0, 0, 0, 0.15);
+      font-size: 1.4rem;
+    color: rgba(0, 0, 0, 0.65);
+  }
+  .project_content .project_config_content .project_pagination .el-pager .el-icon.el-icon-more{
+      border:none;
+      margin:0;
+  }
+  .project_content .project_config_content .el-pagination slot span,.project_config_content .el-pagination .el-pagination__total{
+      display:inline-block;
+      font-size: 1.4rem;
+      line-height: 32px;
+      color: rgba(0, 0, 0, 0.65);
+      font-weight: normal;
+  }
+  .project_content .project_config_content .el-pagination .el-pagination__jump{
+      display:inline-block;
+      font-size: 1.4rem;
+      line-height: 32px;
+      color: rgba(0, 0, 0, 0.65);
+      font-weight: normal;
+  }
+  .project_content .project_config_content .el-pagination .el-input__inner{
+      width: 48px;
+      height: 32px;
+      background-color: #ffffff;
+      border-radius: 2px;
+      border: solid 1px #d9d9d9;
+  }
+  .project_content .project_config_content .el-pagination .el-input.el-pagination__editor{
+      margin: 0 8px;
+  }
+  .el-dropdown-menu.el-popper{
+    width: 200px;
+    height:auto;
+    max-height: 300px;
+    background-color: #ffffff;
+    box-shadow: 0px 2px 8px 0px
+      rgba(0, 0, 0, 0.15);
+    border-radius:2px;
+    overflow: auto;
+    padding:0;
+  }
+  .el-dropdown-menu__item[selected]{
+    background-color: #f5f5f5 !important;
+  }
+  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+    background-color: #e6f7ff;
+    color:#1890ff;
+  }
+  .el-select-dropdown__item.selected{
+    background-color: #e6f7ff;
+    color:#1890ff;
+  }
+  .select_color .el-input__inner{
+    background:url(../../../assets/images/icon-color-selected.png) no-repeat  center;
+    background-size: 16px 16px;
+    background-position: calc(100% - 8px) 12px;
+  }
+  .el-switch__core{
+    width: 44px;
+    height: 22px;
+    background-color: #1890ff;
+    border-radius: 2px;
+  }
+  .el-color-picker{
+    width:100%;
+    height: 32px;
+    background-color: #f5f5f5;
+    border-radius: 2px;
+    border: solid 1px #d9d9d9;
+  }
+  .el-switch__core:after {
+    width: 18px;
+    height: 18px;
+    border-radius: 2px;
+  }
+  .el-color-picker__trigger{
+    width:100%;
+    border: none;
+    height:32px;
+  }
+  .el-color-picker__color {
+    border:none;
+    width: 40px;
+    height: 20px;
+  }
+  .el-color-picker__empty{
+    display:none;
+  }
+  .project_form_dialog .el-dialog{
+    width:35.14%;
+    max-width:480px;
+    height:auto;
+    margin-top:15vh !important
+  }
+  .project_form_dialog .el-dialog .el-dialog__body{
+    height:auto;
+  }
+  .project_form_dialog .el-form-item__label{
+    padding:0;
+  }
+  .project_form_dialog .el-form-item__content{
+    margin-right:46px;
+  }
+  .project_form_dialog .el-select {
+    width: 280px;
+}
+.project_form_dialog .el-switch{
+  float:right;
+  line-height: 32px;
+  height: 32px;
+}
+.el-form-item{
+  margin-bottom:20px;
+}
+.el-tooltip.item{
+  width:30px;
+  display:inline-block;
+}
+.el-tooltip__popper{
+  width:140px;
+
+}
+.el-dialog__headerbtn{
+  display:none;
+}
+.el-icon-warning{
+  font-size:2.1rem;
+  display:inline-block;
+  float:left;
+}
+.title-age{
+  font-size: 1.6rem;
+  line-height: 21px;
+  color: rgba(0, 0, 0, 0.85);
+  display:inline-block;
+  float:left;
+}
+.el-dialog__body span{
+  font-size: 1.4rem;
+  line-height: 32px;
+  color: rgba(0, 0, 0, 0.65);
+}
+.el-dialog__body .el-color-picker__trigger>span:first-child{
+  margin-top:1px;
+  margin-left:11px;
+}
+.el-color-picker__icon.el-icon-arrow-down{
+  display:inline-block !important;
+  width:16px;
+  height:32px;
+  background:url(../../../assets/images/icon-color-selected.png) no-repeat  center;
+  background-size: 16px 16px;
+  right: 0;
+  left: inherit;
+  float: right;
+}
+.el-color-picker__empty.el-icon-close,.el-message-box__close.el-icon-close{
+  display:none;
+}
+.el-color-picker__trigger span{
+  display:inline-block;
+  float:left;
+}
+.el-icon-arrow-down:before {
+  content: "";
+}
+.project_config_content .el-table th>.cell {
+  height: 45px;
+  line-height: 45px;
+}
+.el-table .el-table__body tr td, .el-table .el-table__header tr th {
+  padding: 0;
+}
+.el-pagination{
+  text-align:right;
+}
+.el-pagination .el-select .el-input .el-input__inner{
+  width: 82px;
+}
+.el-pagination .el-select .el-input {
+  width: 82px;
+  margin: 0;
+}
+.el-select{
+  width: 82px;
+  margin: 0 8px 0 16px;
+}
+.el-pagination__jump {
+  margin-left: 0;
+}
+
+.el-dialog__body .el-select .el-input .el-input__inner{
+  height:32px;
+  line-height:32px;
+}
+.el-dialog__body .el-select,.el-dialog__body .el-select .el-input,.el-dialog__body .el-select .el-input .el-input__inner{
+  width:100%;
+}
+.el-dialog__body .el-select{
+  margin:0
+}
+.el-dialog__body .el-form-item__content .el-input,.el-form-item__label,.el-dialog__body .el-form-item__content{
+  height:32px;
+  line-height:32px;
+}
+.el-dialog__body .el-form-item__content .el-input .el-input__inner{
+  height:32px;
+  line-height:32px;
+  border-radius:2px;
+}
+.el-dialog__body  .el-switch__label--right {
+  margin-left: 0;
+}
+.el-switch.is-checked .el-switch__core::after {
+  left: 100%;
+  margin-left: -19px;
+}
+.project_form_dialog .el-dialog__header{
+  text-align:left;
+  padding:0;
+}
+.project_form_dialog .el-dialog__title{
+  font-size: 1.6rem;
+  line-height: 50px;
+  letter-spacing: 1px;
+  color: rgba(0, 0, 0, 0.85);
+  margin-left:20px;
+}
+.project_form_dialog .el-dialog__body{
+  padding-top:10px;
+}
+/**.el-button:focus, .el-button:hover {
+  background-color: transparent;
+}**/
+.el-table .el-table__header tr th {
+  background: #FAFAFA;
+}
+.el-table--enable-row-hover .el-table__body tr:hover>td {
+    background-color: #e6f7ff;
+}
+.project_delete_dialog .el-dialog{
+  max-width: 424px;
+  width:31.04%;
+  height: 192px;
+  background-color: #ffffff;
+  box-shadow: 0px 12px 48px 0px
+    rgba(0, 0, 0, 0.03);
+  border-radius: 4px;
+  margin-top: 36vh !important;
+}
+.project_delete_dialog .el-dialog .el-dialog__body {
+    padding: 12px 0  35px 72px;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 1.4rem;
+    word-break: break-all;
+    line-height: 24px;
+}
+.project_delete_dialog .el-dialog .el-dialog__header {
+    padding: 20px 20px 0px 33px;
+    overflow: hidden;
+}
+.project_delete_dialog .header-title{
+  margin-top:10px;
+}
\ No newline at end of file

train-front-web/src/views/middle/project/project-middle.js

+
+import { isBlank } from '../../common/common.js'
+import axios from 'axios'
+export default {
+  name: 'project',
+  components: {
+
+  },
+  data() {
+    return {
+      titleMap: {
+        addEquipment: '新增項目配置', // 根据自己内容定义名字
+        editEquipment: '编辑項目配置' // 根据自己内容定义名字
+      },
+      // 新增和编辑弹框标题
+      dialogStatus: '',
+      dialogVisible: false,
+      holder: '请选择颜色',
+      deleteRowSn: '',
+      projectType: '',
+      fixedProject: '全部',
+      currentPage: 1,
+      pageSize: 15,
+      search: '',
+      tableDataLen: 0,
+      tableData: [],
+      projectTypeList: '',
+      dialogFormVisible: false,
+      form: {
+        projectType: '',
+        projectName: '',
+        projectCode: '',
+        projectSN: '',
+        projectDisplay: '',
+        ordinal: '',
+        enabled: false,
+        projectFixed: '',
+        colorHex: ''
+      },
+      formLabelWidth: '114px'
+    }
+  },
+  /** computed: {
+     
+    },**/
+  watch: {
+    colorPicker: function() {
+      console.log(122222)
+      console.log(this.colorPicker)
+    }
+  },
+  mounted() {
+    let _this = this 
+    axios.get('/api/projectTypeList').then(function(res){
+      console.log(res)
+      _this.projectTypeList = res.data.data
+      console.log(_this.projectTypeList)
+      _this.projectType = _this.projectTypeList[0].typeDesc
+      _this.requestProjectConData(_this)
+    })
+  },
+  methods: {
+    requestProjectConData(_this) {
+      axios.get('/api/projectTableList').then(function(res){
+        _this.tableData = res.data.data.plProjectList
+          _this.tableDataLen = res.data.data.totalCount
+          _this.table_data()
+          console.log(_this.tableData)
+          console.log(res)
+      })
+    },
+    table_data() {
+      const search = this.search
+      console.log(search)
+      const type = this.projectType
+      const fixed = this.fixedProject
+      console.log(type)
+      console.log(this.tableData)
+      const typeDatas = this.tableData.filter(data => !type || data.projectType.includes(type))
+      let datas
+      if (fixed === '全部') {
+        datas = typeDatas.filter(data => !fixed || data.projectFixed.includes('Y') || data.projectFixed.includes('N'))
+      } else {
+        let fixedType
+        if(fixed === "是"){
+          fixedType = "Y" 
+        }else if(fixed === "否"){ 
+          fixedType = "N" 
+        }
+        datas = typeDatas.filter(data => !fixed || data.projectFixed.includes(fixedType))
+      }
+      console.log(datas)
+      // 搜索功能
+      if (search) {
+        const list = datas.filter(data => !search || data.projectName.toLowerCase().includes(search.toLowerCase()) || data.projectDisplay.toLowerCase().includes(search.toLowerCase()))
+        const fenye = list.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
+        this.tableDataLen = fenye.length
+        // 获取查询的结果，把数组长度赋值给 分页组件中的total
+        // this.tableData_length = fenye.length
+        return fenye
+      } else {
+      // 分页功能
+      // 所有数据的长度  赋值给分页组件中的total
+        // this.tableData_length = this.tableData.length
+        const fenye = datas.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
+        this.tableDataLen = datas.length
+        return fenye
+      }
+    },
+    setProjectTypeClass(key) {
+      return key.typeCode
+    },
+    setProjectValueClass(key) {
+      return key.typeDesc
+    },
+    changeColor() {
+      console.log('9898989752345678')
+      $('.select_color').attr('placeholder', '')
+    },
+    formatter(row, column) {
+      return row.address
+    },
+    filterTag(value, row) {
+      return row.tag === value
+    },
+    filterHandler(value, row, column) {
+      const property = column['property']
+      return row[property] === value
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.table_data()
+    },
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.table_data()
+      console.log(`每页 ${val} 条`)
+    },
+    handleClick(row) {
+      this.dialogFormVisible = true // 开启弹出层
+      // 对弹出层中的表单赋值
+      console.log(row)
+      this.dialogStatus = 'editEquipment'
+      this.form.projectSN = row.projectSN
+      this.form.projectType = row.projectType
+      this.form.projectName = row.projectName
+      this.form.projectCode = row.projectCode
+      this.form.projectDisplay = row.projectDisplay
+      this.form.ordinal = row.ordinal
+      this.form.projectFixed = row.projectFixed === 'Y' ? '是' : '否'
+      this.form.colorHex = row.colorHex
+      this.form.enabled = row.enabled === 'Y'
+    },
+    addHandleClick() {
+      this.dialogFormVisible = true // 开启弹出层
+      this.dialogStatus = 'addEquipment'
+      this.form.projectSN = ''
+      this.form.projectType = ''
+      this.form.projectName = ''
+      this.form.projectCode = ''
+      this.form.projectDisplay = ''
+      this.form.ordinal = ''
+      this.form.projectFixed = '否'
+      this.form.colorHex = ''
+      this.form.enabled = false
+    },
+    selectProjectType(data) {
+      console.log(data)
+      if (typeof data === 'object') {
+        return
+      }
+      this.projectType = data
+      let selectTypeClass
+      $.each(this.projectTypeList, function(i, item) {
+        if (item.typeDesc === this.projectType) {
+          selectTypeClass = item.typeCode
+        }
+      })
+      $('.el-dropdown-menu__item.' + selectTypeClass).attr('selected', '')
+      $('.el-dropdown-menu__item.' + selectTypeClass).siblings().removeAttr('selected')
+      this.table_data()
+    },
+    selectFixedProject(data) {
+      if (typeof data === 'object') {
+        return
+      }
+      this.fixedProject = data
+      console.log(data)
+      let fixedClass
+      switch (data) {
+        case '全部':
+          fixedClass = 'all'
+          break
+        case '是':
+          fixedClass = 'is_fixed'
+          break
+        case '否':
+          fixedClass = 'no_fixed'
+          break
+      }
+      $('.el-dropdown-menu__item.' + fixedClass).attr('selected', '')
+      $('.el-dropdown-menu__item.' + fixedClass).siblings().removeAttr('selected')
+      this.table_data()
+    },
+    retrievalBtnEvent() {
+      this.table_data()
+    },
+    addFromSureBtn(row) {
+      const _this = this
+      if (isBlank(this.form.projectType) || isBlank(this.form.projectSN) || isBlank(this.form.projectName) || isBlank(this.form.projectCode) || isBlank(this.form.projectDisplay) || isBlank(this.form.ordinal) || isBlank(this.form.projectFixed)) {
+        _this.$alert('请填写完必填项', {
+          confirmButtonText: '确定',
+          callback: action => {
+            $('.el-message-box__wrapper').remove()
+          }
+        })
+      } else {
+        console.log(this.form)
+        this.form.enabled = this.form.enabled === true ? 'Y' : 'N'
+        this.form.projectFixed = this.form.projectFixed === '是' ? 'Y' : 'N'
+        console.log(this.form)
+        if (this.dialogStatus === 'addEquipment') {
+          this.tableData.splice(0,0,this.form)
+        }else{
+          console.log(row)
+          $.each(this.tableData,function(i,item){
+            if(item.projectSN == _this.form.projectSN){
+              console.log("11111111")
+              _this.tableData[i] = _this.form
+            }
+          })
+          console.log(this.tableData)
+        }   
+        this.table_data()  
+        this.dialogFormVisible = false
+       /** this.form.enabled = this.form.enabled === true ? 'Y' : 'N'
+        let projectTypeNam
+        $.each(this.projectTypeList, function(i, item) {
+          if (item.typeDesc === _this.form.projectType) {
+            projectTypeNam = item.typeCode
+          }
+        })
+        this.form.projectType = projectTypeNam
+        this.form.projectFixed = this.form.projectFixed === '是' ? 'Y' : 'N'
+        this.dialogFormVisible = false
+        const result = JSON.stringify(this.form)
+        console.log(this.dialogStatus === 'addEquipment')
+        console.log(this.dialogStatus)
+        if (this.dialogStatus === 'addEquipment') {
+          _this.$axios.post('/ws/pc/mgr/action/addProject', result, { headers: { 'Content-Type': 'application/json;charset=utf-8' }}).then(response => {
+            if (response.data) {
+              if (response.data.statusCode == 1) {
+                _this.$alert('新增成功', {
+                  confirmButtonText: '确定',
+                  callback: action => {
+                  }
+                })
+                this.requestProjectConData(this)
+              } else {
+                console.log(response.data.message)
+                _this.$alert(response.data.message, {
+                  confirmButtonText: '确定',
+                  callback: action => {
+                  }
+                })
+              }
+            }
+          }).catch(err => {
+            console.log(err)
+            alert('请求失败')
+          })
+        } else {
+          _this.$axios.post('/ws/pc/mgr/action/updatePlProject', result, { headers: { 'Content-Type': 'application/json;charset=utf-8' }}).then(response => {
+            if (response.data) {
+              if (response.data.statusCode == 1) {
+                _this.$alert('修改成功', {
+                  confirmButtonText: '确定',
+                  callback: action => {
+                  }
+                })
+                this.requestProjectConData(this)
+              } else {
+                console.log(response.data.message)
+                _this.$alert(response.data.message, {
+                  confirmButtonText: '确定',
+                  callback: action => {
+                  }
+                })
+              }
+            }
+          }).catch(err => {
+            console.log(err)
+            alert('请求失败')
+          })
+        }**/
+      }
+    },
+    projectTableDelete(row) {
+      this.dialogVisible = true
+      this.deleteRowSn = row.projectSN
+    },
+    projectDeleteSureBtn() {
+      this.dialogVisible = false
+      const _this = this
+      console.log(this.deleteRowSn)
+      $.each(this.tableData,function(i,item){
+        console.log(item.projectSN)
+        if(item.projectSN == _this.deleteRowSn){
+          _this.tableData.splice(i,1)
+          return false
+        }
+      })
+      this.table_data()
+    }
+  }
+}

train-front-web/src/views/middle/project/project-middle.vue

+<template>
+  <div>
+    <div class="project_content">
+      <div class="project_concrete_content project_config_content">
+        <div class="project_type">
+          <span>项目类型:</span>
+          <el-select v-model="projectType" @change="selectProjectType">
+            <el-option v-for="(item,index) in projectTypeList" :key="index" :value="setProjectValueClass(item)" :class="setProjectTypeClass(item)">
+              <span>{{ item.typeDesc }}</span>
+            </el-option>
+            <!--<el-option label="基础" value="基础" class="basic"/>
+            <el-option label="医嘱" value="医嘱" class="medical_order" />
+            <el-option label="手术" value="手术" class="operation"/>
+            <el-option label="护理文书风险" value="护理文书风险" class="nurse_risk" />
+            <el-option label="护理文书任务" value="护理文书任务" class="nurse_task"/>
+            <el-option label="出入院" value="出入院" class="inout_hospital" />
+            <el-option label="出入转" value="出入转" class="inout"/>
+            <el-option label="关键任务" value="关键任务" class="key_task" />
+            <el-option label="体征任务" value="体征任务" class="sign_task"/>
+            <el-option label="换床" value="体征任务" class="change_bed"/>
+            <el-option label="风险管理" value="风险管理" class="risk_manage"/>
+            <el-option label="护理工作" value="护理工作" class="nurse_work" />-->
+          </el-select>
+        </div>
+        <div class="fixed_project">
+          <span>固定项目:</span>
+          <el-select v-model="fixedProject" @change="selectFixedProject">
+            <el-option class="all" label="全部" value="全部" />
+            <el-option class="is_fixed" label="是" value="是" />
+            <el-option class="no_fixed" label="否" value="否" />
+          </el-select>
+        </div>
+        <div class="project_retrieval">
+          <el-input
+            v-model="search"
+            class="project_retrieval_input"
+            size="mini"
+            placeholder="检索项目名称或显示名称"/>
+          <el-button class="project_retrieval_btn" @click="retrievalBtnEvent">检索</el-button>
+        </div>
+        <el-button class="project_add_btn" @click="addHandleClick"><i/><span>新增</span></el-button>
+        <el-dialog :modal-append-to-body="false" :visible.sync="dialogFormVisible" :title="titleMap[dialogStatus]" class="project_form_dialog">
+          <el-form :model="form">
+            <el-form-item :label-width="formLabelWidth" label="项目类型：" required>
+              <el-select v-model="form.projectType" placeholder="请选择项目类型">
+                <el-option v-for="(item,index) in projectTypeList" :key="index" :value="setProjectValueClass(item)" :class="setProjectTypeClass(item)">
+                  <span>{{ item.typeDesc }}</span>
+                </el-option>
+                <!--<el-option label="基础" value="basic"/>
+                <el-option label="医嘱" value="medical_order" />
+                <el-option label="手术" value="operation"/>
+                <el-option label="护理文书风险" value="nurse_risk" />
+                <el-option label="护理文书任务" value="nurse_task"/>
+                <el-option label="出入院" value="inout_hospital" />
+                <el-option label="出入转" value="inout"/>
+                <el-option label="关键任务" value="key_task" />
+                <el-option label="体征任务" value="sign_task"/>
+                <el-option label="换床" value="change_bed"/>
+                <el-option label="风险管理" value="risk_manage"/>
+                <el-option label="护理工作" value="nurse_work" />-->
+              </el-select>
+            </el-form-item>
+            <el-form-item :label-width="formLabelWidth" label="项目编码：" required>
+              <el-input v-model="form.projectCode" autocomplete="off" placeholder="请输入项目编码"/>
+            </el-form-item>
+            <el-form-item :label-width="formLabelWidth" label="项目名称：" required>
+              <el-input v-model="form.projectName" autocomplete="off" placeholder="请输入项目名称"/>
+            </el-form-item>
+            <el-form-item :label-width="formLabelWidth" label="项目编号：" required>
+              <el-input v-model="form.projectSN" autocomplete="off" placeholder="请输入项目编号"/>
+            </el-form-item>
+            <el-form-item :label-width="formLabelWidth" label="显示名称：" required>
+              <el-input v-model="form.projectDisplay" autocomplete="off" placeholder="请输入显示名称"/>
+            </el-form-item>
+            <el-form-item :label-width="formLabelWidth" label="排序：" required>
+              <el-input v-model="form.ordinal" autocomplete="off" placeholder="请输入排序号"/>
+            </el-form-item>
+            <el-form-item :label-width="formLabelWidth" label="固定项目：" required>
+              <el-select v-model="form.projectFixed" placeholder="请选择固定项目">
+                <el-option label="是" value="Y"/>
+                <el-option label="否" value="N"/>
+              </el-select>
+            </el-form-item>
+            <el-form-item :label-width="formLabelWidth" label="颜色：">
+              <el-color-picker v-model="form.colorHex" placeholder="holder" value="nnnnnnn" @click="changeColor"/>
+            </el-form-item>
+            <el-form-item :label-width="formLabelWidth" label="是否有效：">
+              <el-switch
+                v-model="form.enabled"
+                active-color="#1890ff"
+                active-icon-class="switch_active"
+                inactive-color="#bfbfbf"/>
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button class="project_add_cancel" @click="dialogFormVisible = false">取 消</el-button>
+            <el-button type="primary" @click="addFromSureBtn(titleMap[dialogStatus])">确 定</el-button>
+          </div>
+        </el-dialog>
+
+        <el-table ref="filterTable" :data="tableData" stripe style="width: calc(100%);">
+          <el-table-column class-name="project_sn" prop="projectSN" label="项目编号" min-width="9%" />
+          <el-table-column class-name="project_mold" prop="projectType" label="项目类型" min-width="9%"/>
+          <el-table-column class-name="project_cold" prop="projectCode" label="项目编码" min-width="10%"/>
+          <el-table-column class-name="project_name" prop="projectName" label="项目名称" min-width="13.42%" />
+          <el-table-column class-name="project_display" prop="projectDisplay" label="显示名称" min-width="13.42%" />
+          <el-table-column class-name="colorHex" prop="colorHex" label="颜色" min-width="10.2%">
+            <template slot-scope="scope">
+              <div v-if="scope.row.colorHex == '' || scope.row.colorHex == ' ' || scope.row.colorHex == null"/>
+              <div v-else>
+                <span :style="{'background-color':`${scope.row.colorHex}`}" class="colum_color"/>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column class-name="project_fixed" prop="projectFixed" label="固定" min-width="7%">
+            <template slot-scope="scope">
+              <span>{{ scope.row.projectFixed === 'Y' ? "是" : "否" }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column class-name="ordinal" prop="ordinal" label="排序" min-width="7%"/>
+          <el-table-column class-name="enabled" prop="enabled" label="有效" min-width="10%">
+            <template slot-scope="scope">
+              <div v-if="scope.row.enabled == '' || scope.row.enabled == ' ' || scope.row.enabled == null"/>
+              <div v-else>
+                <div :class="scope.row.enabled == 'Y' ? 'columEffective' : 'columInvalid'">
+                  <i/>
+                  <span>{{ scope.row.enabled === 'Y' ? "有效" : "无效" }}</span>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column class-name="operation" prop="operation" label="操作" min-width="10%" >
+            <template slot-scope="scope">
+              <div v-if="scope.row.enabled == '' || scope.row.enabled == ' ' || scope.row.enabled == null"/>
+              <div v-else>
+                <el-button type="text" class="colum_btn_edit" size="small" @click="handleClick(scope.row)">编辑</el-button>
+                <div class="edit_delete_line"/>
+                <span v-if="scope.row.projectFixed == 'N' ">
+                  <el-button :disabled="false" type="text" class="colum_btn_delete" size="small" @click="projectTableDelete(scope.row)">删除</el-button>
+                  <el-dialog
+                    :visible.sync="dialogVisible"
+                    :modal-append-to-body="false"
+                    :show-close="false"
+                    icon="el-icon-info"
+                    title="确认要删除此项目吗？"
+                    class="project_delete_dialog"
+                    width="30%">
+                    <div slot="title" class="header-title">
+                      <span class="title-name"><i class="el-icon-warning" style="color:#faad14;margin-right:18px"/></span>
+                      <span class="title-age">确认要删除此项目吗？</span>
+                    </div>
+                    <span>删除不可恢复</span>
+                    <span slot="footer" class="dialog-footer">
+                      <el-button @click="dialogVisible = false">取 消</el-button>
+                      <el-button type="primary" @click="projectDeleteSureBtn()">确 定</el-button>
+                    </span>
+                  </el-dialog>
+                </span>
+                <span v-else>
+                  <el-tooltip class="item" effect="dark" content="固定项目不允许删除，可将项目设置为失效！" placement="top">
+                    <div>
+                      <el-button :disabled="true" type="text" class="colum_btn_delete" size="small">删除</el-button>
+                    </div>
+                  </el-tooltip>
+                </span>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="project_pagination">
+          <el-pagination
+            :current-page="currentPage"
+            :page-size="pageSize"
+            :total="tableDataLen"
+            :page-sizes="[10, 15, 20]"
+            background
+            layout="slot,total, prev, pager, next,sizes, jumper"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange">
+            <span>第{{ (currentPage-1)*pageSize+1 }}-{{ currentPage*pageSize>tableDataLen? tableDataLen:currentPage*pageSize }}项，</span>
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import project from './project-middle.js'
+import './../../common/common.css'
+export default project
+</script>
+
+<style>
+  @import './project-middle.css'
+</style>

train-front-web/static/project-table-list.json

+{"plProjectList":
+    [{"colorHex":"#B43A3A","enabled":"Y","ordinal":"0","projectCode":"1122","projectDisplay":"心脏麻痹","projectFixed":"N","projectName":"心脏痛","projectSN":"0909","projectType":"基础"},{"colorHex":"#cc3366","enabled":"Y","ordinal":"10","projectCode":"nursingLevelSuper","projectDisplay":"特级护理","projectFixed":"Y","projectName":"特级护理","projectSN":"1010","projectType":"基础"},{"colorHex":"#3399cc","enabled":"Y","ordinal":"11","projectCode":"nursingLevelOne","projectDisplay":"I级别护理","projectFixed":"Y","projectName":"I级别护理","projectSN":"1011","projectType":"基础"},{"colorHex":"#ff0000","enabled":"Y","ordinal":"12","projectCode":"criticallyIll","projectDisplay":"病危","projectFixed":"Y","projectName":"病危","projectSN":"1012","projectType":"基础"},{"colorHex":"#ff8040","enabled":"Y","ordinal":"13","projectCode":"seriouslyIll","projectDisplay":"病重","projectFixed":"Y","projectName":"病重","projectSN":"1013","projectType":"基础"},{"colorHex":"#cc565c","enabled":"Y","ordinal":"14","projectCode":"allergic","projectDisplay":"敏","projectFixed":"Y","projectName":"过敏标识","projectSN":"1014","projectType":"基础"},{"colorHex":"#f29d48","enabled":"Y","ordinal":"15","projectCode":"isolation","projectDisplay":"隔","projectFixed":"Y","projectName":"隔离标识","projectSN":"1015","projectType":"基础"},{"colorHex":"#00DDFF","enabled":"N","ordinal":"2","projectCode":"2222","projectDisplay":"2","projectFixed":"Y","projectName":"2","projectSN":"2","projectType":"基础"},{"colorHex":"#271D4C","enabled":"Y","ordinal":"990","projectCode":"mm","projectDisplay":"男","projectFixed":"N","projectName":"医药","projectSN":"3333","projectType":"基础"},{"colorHex":"#771125","enabled":"N","ordinal":"44","projectCode":"4","projectDisplay":"4","projectFixed":"N","projectName":"66","projectSN":"44","projectType":"基础"},{"colorHex":null,"enabled":"Y","ordinal":"809","projectCode":"acheLevel","projectDisplay":"疼痛","projectFixed":"N","projectName":"疼痛等级","projectSN":"879","projectType":"基础"}],
+"totalCount":11}
\ No newline at end of file

train-front-web/static/project-type.json

+[  
+     {"typeCode":"base","typeDesc":"基础"},
+    {"typeCode":"call","typeDesc":"呼叫"},
+    {"typeCode":"hospitalInout","typeDesc":"出入院"},
+    {"typeCode":"medicalOrder","typeDesc":"医嘱 "},
+    {"typeCode":"nurseDoc","typeDesc":"护理文书风险"},
+    {"typeCode":"nurseDocTask","typeDesc":"护理文书任务"},
+    {"typeCode":"operation","typeDesc":"手术"},
+    {"typeCode":"rollInout","typeDesc":"出入转"},
+    {"typeCode":"signTask","typeDesc":"体征任务"},
+    {"typeCode":"statistics","typeDesc":"统计"},
+    {"typeCode":"statisticsOrder","typeDesc":"统计医嘱"}]
\ No newline at end of file

train-front-web/test/e2e/custom-assertions/elementCount.js

+// A custom Nightwatch assertion.
+// The assertion name is the filename.
+// Example usage:
+//
+//   browser.assert.elementCount(selector, count)
+//
+// For more information on custom assertions see:
+// http://nightwatchjs.org/guide#writing-custom-assertions
+
+exports.assertion = function (selector, count) {
+  this.message = 'Testing if element <' + selector + '> has count: ' + count
+  this.expected = count
+  this.pass = function (val) {
+    return val === this.expected
+  }
+  this.value = function (res) {
+    return res.value
+  }
+  this.command = function (cb) {
+    var self = this
+    return this.api.execute(function (selector) {
+      return document.querySelectorAll(selector).length
+    }, [selector], function (res) {
+      cb.call(self, res)
+    })
+  }
+}

train-front-web/test/e2e/nightwatch.conf.js

+require('babel-register')
+var config = require('../../config')
+
+// http://nightwatchjs.org/gettingstarted#settings-file
+module.exports = {
+  src_folders: ['test/e2e/specs'],
+  output_folder: 'test/e2e/reports',
+  custom_assertions_path: ['test/e2e/custom-assertions'],
+
+  selenium: {
+    start_process: true,
+    server_path: require('selenium-server').path,
+    host: '127.0.0.1',
+    port: 4444,
+    cli_args: {
+      'webdriver.chrome.driver': require('chromedriver').path
+    }
+  },
+
+  test_settings: {
+    default: {
+      selenium_port: 4444,
+      selenium_host: 'localhost',
+      silent: true,
+      globals: {
+        devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
+      }
+    },
+
+    chrome: {
+      desiredCapabilities: {
+        browserName: 'chrome',
+        javascriptEnabled: true,
+        acceptSslCerts: true
+      }
+    },
+
+    firefox: {
+      desiredCapabilities: {
+        browserName: 'firefox',
+        javascriptEnabled: true,
+        acceptSslCerts: true
+      }
+    }
+  }
+}

train-front-web/test/e2e/runner.js

+// 1. start the dev server using production config
+process.env.NODE_ENV = 'testing'
+
+const webpack = require('webpack')
+const DevServer = require('webpack-dev-server')
+
+const webpackConfig = require('../../build/webpack.prod.conf')
+const devConfigPromise = require('../../build/webpack.dev.conf')
+
+let server
+
+devConfigPromise.then(devConfig => {
+  const devServerOptions = devConfig.devServer
+  const compiler = webpack(webpackConfig)
+  server = new DevServer(compiler, devServerOptions)
+  const port = devServerOptions.port
+  const host = devServerOptions.host
+  return server.listen(port, host)
+})
+.then(() => {
+  // 2. run the nightwatch test suite against it
+  // to run in additional browsers:
+  //    1. add an entry in test/e2e/nightwatch.conf.js under "test_settings"
+  //    2. add it to the --env flag below
+  // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
+  // For more information on Nightwatch's config file, see
+  // http://nightwatchjs.org/guide#settings-file
+  let opts = process.argv.slice(2)
+  if (opts.indexOf('--config') === -1) {
+    opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
+  }
+  if (opts.indexOf('--env') === -1) {
+    opts = opts.concat(['--env', 'chrome'])
+  }
+
+  const spawn = require('cross-spawn')
+  const runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
+
+  runner.on('exit', function (code) {
+    server.close()
+    process.exit(code)
+  })
+
+  runner.on('error', function (err) {
+    server.close()
+    throw err
+  })
+})

train-front-web/test/e2e/specs/test.js

+// For authoring Nightwatch tests, see
+// http://nightwatchjs.org/guide#usage
+
+module.exports = {
+  'default e2e tests': function (browser) {
+    // automatically uses dev Server port from /config.index.js
+    // default: http://localhost:8080
+    // see nightwatch.conf.js
+    const devServer = browser.globals.devServerURL
+
+    browser
+      .url(devServer)
+      .waitForElementVisible('#app', 5000)
+      .assert.elementPresent('.hello')
+      .assert.containsText('h1', 'Welcome to Your Vue.js App')
+      .assert.elementCount('img', 1)
+      .end()
+  }
+}

train-front-web/test/unit/.eslintrc

+{
+  "env": { 
+    "jest": true,
+    "jquery": true
+  },
+  "globals": { 
+  }
+}

train-front-web/test/unit/jest.conf.js

+const path = require('path')
+
+module.exports = {
+  rootDir: path.resolve(__dirname, '../../'),
+  moduleFileExtensions: [
+    'js',
+    'json',
+    'vue'
+  ],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  transform: {
+    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
+    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
+  },
+  testPathIgnorePatterns: [
+    '<rootDir>/test/e2e'
+  ],
+  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
+  setupFiles: ['<rootDir>/test/unit/setup'],
+  mapCoverage: true,
+  coverageDirectory: '<rootDir>/test/unit/coverage',
+  collectCoverageFrom: [
+    'src/**/*.{js,vue}',
+    '!src/main.js',
+    '!src/router/index.js',
+    '!**/node_modules/**'
+  ]
+}

train-front-web/test/unit/setup.js

+import Vue from 'vue'
+
+Vue.config.productionTip = false

train-front-web/test/unit/specs/HelloWorld.spec.js

+import Vue from 'vue'
+import HelloWorld from '@/components/HelloWorld'
+
+describe('HelloWorld.vue', () => {
+  it('should render correct contents', () => {
+    const Constructor = Vue.extend(HelloWorld)
+    const vm = new Constructor().$mount()
+    expect(vm.$el.querySelector('.hello h1').textContent)
+      .toEqual('Welcome to Your Vue.js App')
+  })
+})