main page

6 years ago · 8dbccbd34b
parent 1b0a74efd4
commit 8dbccbd34b
7 changed files with 125 additions and 36 deletions
--- a/express/app.js
+++ b/express/app.js
@ -6,11 +6,7 @@ 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(logger('tiny'));
 app.use(express.json());
 app.use(express.urlencoded({extended: false}));
 app.use(cookieParser());
--- a/public/index.html
+++ b/public/index.html
@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
    <meta charset="utf-8">
    <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>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>
-  </body>
+</head>
+<body ondragstart="return false" onselectstart="return false">
+<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>
+</body>
 </html>
--- a/src/App.vue
+++ b/src/App.vue
@ -1,15 +1,54 @@
 <template>
    <div class="container">
-        <el-menu class="nav"
-                 :default-active="$store.getters.getNav"
-                 mode="horizontal"
-                 :router=true
-                 @select="handleSelect">
-            <el-menu-item index="/home">首页</el-menu-item>
-            <el-menu-item index="/device">设备</el-menu-item>
-            <el-menu-item index="/template">模板</el-menu-item>
-            <el-menu-item index="/about">关于</el-menu-item>
-        </el-menu>
+        <div class="header">
+            <el-col :span="6" class="header_item">
+                <div class="logo">
+                    <el-avatar shape="square" :size="50">
+                        <img src="./assets/logo.png">
+                    </el-avatar>
+                    <span class="title">DC3 Web</span>
+                </div>
+            </el-col>
+            <el-col :span="12" class="header_item">
+                <el-menu class="menu"
+                         :default-active="$store.getters.getNav"
+                         mode="horizontal"
+                         :router=true
+                         @select="handleMenu">
+                    <el-menu-item index="/">首页</el-menu-item>
+                    <el-menu-item index="/things">物联</el-menu-item>
+                    <el-menu-item index="/template">模板</el-menu-item>
+                    <el-menu-item index="/now">实时</el-menu-item>
+                    <el-menu-item index="/history">历史</el-menu-item>
+                    <el-menu-item index="/alarm">报警</el-menu-item>
+                    <el-menu-item index="/video">视频</el-menu-item>
+                    <el-menu-item index="/about">关于</el-menu-item>
+                </el-menu>
+            </el-col>
+            <el-col :span="4" class="header_item">
+                <el-badge :value="12" :max="99" class="badge_item" type="primary">
+                    <span class="span_small" @click="handleMessage">消息</span>
+                </el-badge>
+                <el-badge :value="12" :max="99" class="badge_item">
+                    <span class="span_small" @click="handleAlarm">报警</span>
+                </el-badge>
+            </el-col>
+            <el-col :span="2" class="header_item">
+                <el-dropdown class="avatar_item" trigger="click" @command="handleCommand">
+                    <span class="el-dropdown-link">
+                        <el-avatar>
+                            <img src="./assets/avatar.png">
+                        </el-avatar>
+                    </span>
+                    <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item command="setting">设置</el-dropdown-item>
+                        <el-dropdown-item command="help">帮助</el-dropdown-item>
+                        <el-dropdown-item command="logout" divided>退出</el-dropdown-item>
+                    </el-dropdown-menu>
+                </el-dropdown>
+                <span class="span_small avatar">管理员</span>
+            </el-col>
+        </div>
        <div class="body">
            <el-scrollbar style="height: 100%;">
                <router-view/>
@ -20,27 +59,72 @@

 <style lang="scss">
    body {
-        margin: 0px;
+        margin: 0;
+        min-width: 1366px;
+        min-height: 768px;
    }

    .container {
-        font-family: 'Avenir', Helvetica, Arial, sans-serif;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        font-family: 'Avenir', Helvetica, Arial, sans-serif;
    }

-    .nav {
-        width: 100%;
-        position: fixed;
+    .header {
        top: 0px;
+        width: 100%;
+        height: 60px;
+        border-bottom: 1px solid #dcdfe6;
    }

-    .body {
+    .logo {
+        margin: 5px 10px;
+    }
+
+    .title {
+        margin: 11px;
+        color: #1296db;
+        font-size: 27px;
+        font-weight: bold;
        position: absolute;
-        width: 100%;
+    }
+
+    .menu {
+        display: flex;
+        justify-content: center;
+        border-bottom: none !important;
+    }
+
+    .header_item {
+        height: 100%;
+    }
+
+    .badge_item {
+        top: 25px;
+        cursor: pointer;
+        margin-right: 40px;
+    }
+
+    .span_small {
+        color: #909399;
+        font-size: 14px;
+    }
+
+    .span_small.avatar {
+        margin: 20px 10px;
+    }
+
+    .avatar_item {
+        top: 10px;
+        cursor: pointer;
+    }
+
+    .body {
        top: 60px;
-        bottom: 5px;
+        bottom: 3px;
+        margin: 2px 8px;
+        position: absolute;

        .el-scrollbar__wrap {
            overflow-x: hidden;
@ -56,8 +140,17 @@
        created() {
        },
        methods: {
-            handleSelect(key, keyPath) {
+            handleMenu(key, keyPath) {
                console.log(key, keyPath);
+            },
+            handleMessage() {
+                this.$message('click on message');
+            },
+            handleAlarm() {
+                this.$message('click on alarm');
+            },
+            handleCommand(command) {
+                this.$message('click on item ' + command);
            }
        }
    }
--- a/src/assets/avatar.png
+++ b/src/assets/avatar.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/router/router.js
+++ b/src/router/router.js
@ -6,7 +6,7 @@ Vue.use(VueRouter)

 const routes = [
  {
-    path: '/home',
+    path: '/',
    name: 'home',
    component: Home
  },
--- a/src/store/store.js
+++ b/src/store/store.js
@ -5,7 +5,7 @@ Vue.use(Vuex)

 export default new Vuex.Store({
  state: {
-    nav: '/home'
+    nav: '/'
  },
  mutations: {
    handleSelect(state, index) {