express

.gitignore

@@ -2,6 +2,10 @@
 node_modules
 /dist
 
+*lock.json
+/express/node_modules
+/express/public
+
 # local env files
 .env.local
 .env.*.local

express/app.js

@@ -0,0 +1,35 @@
+const createError = require('http-errors');
+const express = require('express');
+const path = require('path');
+const cookieParser = require('cookie-parser');
+const logger = require('morgan');
+
+const app = express();
+
+// view engine setup
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'jade');
+
+app.use(logger('dev'));
+app.use(express.json());
+app.use(express.urlencoded({extended: false}));
+app.use(cookieParser());
+app.use(express.static(path.join(__dirname, 'public')));
+
+// catch 404 and forward to error handler
+app.use(function (req, res, next) {
+    next(createError(404));
+});
+
+// error handler
+app.use(function (err, req, res) {
+    // set locals, only providing error in development
+    res.locals.message = err.message;
+    res.locals.error = req.app.get('env') === 'development' ? err : {};
+
+    // render the error page
+    res.status(err.status || 500);
+    res.render('error');
+});
+
+module.exports = app;

express/bin/www

@@ -0,0 +1,90 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+const app = require('../app');
+const debug = require('debug')('express:server');
+const http = require('http');
+
+/**
+ * Get port from environment and store in Express.
+ */
+
+const port = normalizePort(process.env.PORT || '3000');
+app.set('port', port);
+
+/**
+ * Create HTTP server.
+ */
+
+const server = http.createServer(app);
+
+/**
+ * Listen on provided port, on all network interfaces.
+ */
+
+server.listen(port);
+server.on('error', onError);
+server.on('listening', onListening);
+
+/**
+ * Normalize a port into a number, string, or false.
+ */
+
+function normalizePort(val) {
+    const port = parseInt(val, 10);
+
+    if (isNaN(port)) {
+        // named pipe
+        return val;
+    }
+
+    if (port >= 0) {
+        // port number
+        return port;
+    }
+
+    return false;
+}
+
+/**
+ * Event listener for HTTP server "error" event.
+ */
+
+function onError(error) {
+    if (error.syscall !== 'listen') {
+        throw error;
+    }
+
+    const bind = typeof port === 'string'
+        ? 'Pipe ' + port
+        : 'Port ' + port;
+
+    // handle specific listen errors with friendly messages
+    switch (error.code) {
+        case 'EACCES':
+            console.error(bind + ' requires elevated privileges');
+            process.exit(1);
+            break;
+        case 'EADDRINUSE':
+            console.error(bind + ' is already in use');
+            process.exit(1);
+            break;
+        default:
+            throw error;
+    }
+}
+
+/**
+ * Event listener for HTTP server "listening" event.
+ */
+
+function onListening() {
+    const addr = server.address();
+    const bind = typeof addr === 'string'
+        ? 'pipe ' + addr
+        : 'port ' + addr.port;
+    debug('Listening on ' + bind);
+}

express/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "express",
+  "author": "pnoker",
+  "private": true,
+  "description": "IOT DC3 平台UI",
+  "scripts": {
+    "start": "node ./bin/www"
+  },
+  "dependencies": {
+    "cookie-parser": "~1.4.4",
+    "debug": "~2.6.9",
+    "express": "~4.16.1",
+    "http-errors": "~1.6.3",
+    "morgan": "~1.9.1"
+  }
+}

package.json

@@ -1,7 +1,8 @@
 {
   "name": "dc3-web",
-  "version": "0.1.0",
+  "author": "pnoker",
   "private": true,
+  "description": "IOT DC3 平台UI",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -12,6 +13,7 @@
     "core-js": "^3.3.2",
     "element-ui": "^2.4.5",
     "vue": "^2.6.10",
+    "vue-axios": "^2.1.5",
     "vue-router": "^3.1.3",
     "vuex": "^3.0.1"
   },
@@ -22,7 +24,7 @@
     "@vue/cli-plugin-vuex": "^4.0.5",
     "@vue/cli-service": "^4.0.0",
     "babel-eslint": "^10.0.3",
-    "eslint": "^6.5.1",
+    "eslint": "^5.5.0",
     "eslint-plugin-vue": "^5.0.0",
     "node-sass": "^4.9.2",
     "sass-loader": "^8.0.0",

public/index.html

@@ -5,13 +5,12 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>dc3-web</title>
+    <title>IOT | DC3</title>
   </head>
   <body>
     <noscript>
       <strong>We're sorry but dc3-web doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
   </body>
 </html>

src/App.vue

@@ -1,92 +1,63 @@
 <template>
-    <div id="app">
+    <div class="container">
-        <el-container class="el-container-iot">
+        <el-menu class="nav"
-            <el-menu default-active="1-4-1" class="el-menu-vertical-iot" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
+                 :default-active="$store.getters.getNav"
-                <h1>IOT DC3</h1>
+                 mode="horizontal"
-                <el-submenu index="1">
+                 :router=true
-                    <template slot="title">
+                 @select="handleSelect">
-                        <i class="el-icon-cpu"></i>
+            <el-menu-item index="/home">首页</el-menu-item>
-                        <span slot="title">设备管理</span>
+            <el-menu-item index="/device">设备</el-menu-item>
-                    </template>
+            <el-menu-item index="/template">模板</el-menu-item>
-                    <el-menu-item>设备接入</el-menu-item>
+            <el-menu-item index="/about">关于</el-menu-item>
-                    <el-menu-item>设备解析</el-menu-item>
+        </el-menu>
-                </el-submenu>
+        <div class="body">
-                <el-submenu index="2">
+            <el-scrollbar style="height: 100%;">
-                    <template slot="title">
+                <router-view/>
-                        <i class="el-icon-odometer"></i>
+            </el-scrollbar>
-                        <span slot="title">数据管理</span>
+        </div>
-                    </template>
-                    <el-menu-item>测点配置</el-menu-item>
-                    <el-menu-item>数据监控</el-menu-item>
-                </el-submenu>
-                <el-submenu index="3">
-                    <template slot="title">
-                        <i class="el-icon-video-camera-solid"></i>
-                        <span slot="title">媒体管理</span>
-                    </template>
-                    <el-menu-item>视频管理</el-menu-item>
-                    <el-menu-item>图片管理</el-menu-item>
-                </el-submenu>
-            </el-menu>
-            <el-container>
-                <el-header>
-                    <el-radio-group v-model="isCollapse">
-                        <el-radio-button :label="false">展开</el-radio-button>
-                        <el-radio-button :label="true">收起</el-radio-button>
-                    </el-radio-group>
-                </el-header>
-                <el-main>
-                    <router-view/>
-                </el-main>
-            </el-container>
-        </el-container>
     </div>
 </template>
 
 <style lang="scss">
     body {
         margin: 0px;
-        height: 100%;
     }
 
-    html, #app {
+    .container {
-        height: 100%;
-    }
-
-    #app {
         font-family: 'Avenir', Helvetica, Arial, sans-serif;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        text-align: center;
         color: #2c3e50;
     }
 
-    .el-container-iot {
+    .nav {
-        height: 100%;
+        width: 100%;
+        position: fixed;
+        top: 0px;
     }
 
-    .el-menu-vertical-iot {
+    .body {
-        height: 100%;
+        position: absolute;
-    }
+        width: 100%;
+        top: 60px;
+        bottom: 5px;
 
-    .el-menu-vertical-iot:not(.el-menu--collapse) {
+        .el-scrollbar__wrap {
-        width: 200px;
+            overflow-x: hidden;
+        }
     }
 </style>
 
 <script>
     export default {
         data() {
-            return {
+            return {};
-                isCollapse: false
+        },
-            }
+        created() {
         },
         methods: {
-            handleOpen(key, keyPath) {
+            handleSelect(key, keyPath) {
-                console.log(key, keyPath)
+                console.log(key, keyPath);
-            },
-            handleClose(key, keyPath) {
-                console.log(key, keyPath)
             }
         }
     }

src/main.js

@@ -1,13 +1,18 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router/router'
+import store from './store/store'
+//Element UI
 import './plugins/element.js'
-import router from './router'
+//Axios
-import store from './store'
+import axios from 'axios'
+import VueAxios from 'vue-axios'
 
 Vue.config.productionTip = false
+Vue.use(VueAxios, axios);
 
 new Vue({
-  router,
+    router,
-  store,
+    store,
-  render: h => h(App)
+    render: h => h(App)
 }).$mount('#app')

src/plugins/element.js

@@ -1,5 +1,8 @@
 import Vue from 'vue'
+
 import Element from 'element-ui'
-import '../element-variables.scss'
+import locale from 'element-ui/lib/locale/lang/zh-CN'
+import 'element-ui/lib/theme-chalk/index.css';
+import './element-variables.scss'
 
-Vue.use(Element)
+Vue.use(Element, {locale})

src/router/router.js

@@ -6,16 +6,13 @@ Vue.use(VueRouter)
 
 const routes = [
   {
-    path: '/',
+    path: '/home',
     name: 'home',
     component: Home
   },
   {
     path: '/about',
     name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
   }
 ]

src/store/index.js

@@ -1,15 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-  state: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
-  modules: {
-  }
-})

src/store/store.js

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    nav: '/home'
+  },
+  mutations: {
+    handleSelect(state, index) {
+      state.nav = index;
+    }
+  },
+  getters:{
+    getNav(state){
+      return state.nav;
+    }
+  }
+})

vue.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    publicPath: './',
+    outputDir: 'express/public',
+    productionSourceMap: false
+}