msb-public
/
dc3-web
mirror of https://gitee.com/pnoker/dc3-web.git
1
0
Code Issues Projects Releases Wiki Activity

main page

Browse Source
pull/1/head
pnoker 6 years ago
parent 1b0a74efd4
commit 8dbccbd34b
7 changed files with 125 additions and 36 deletions
Show Stats Download Patch File Download Diff File

6
express/app.js
Unescape View File

@ -6,11 +6,7 @@ const logger = require('morgan');
const app = express(); const app = express();
// view engine setup app.use(logger('tiny'));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(express.json()); app.use(express.json());
app.use(express.urlencoded({extended: false})); app.use(express.urlencoded({extended: false}));
app.use(cookieParser()); app.use(cookieParser());

2
public/index.html
Unescape View File

@ -7,7 +7,7 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>IOT | DC3</title> <title>IOT | DC3</title>
</head> </head>
<body> <body ondragstart="return false" onselectstart="return false">
<noscript> <noscript>
<strong>We're sorry but dc3-web doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but dc3-web doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>

123
src/App.vue
Unescape View File

@ -1,15 +1,54 @@
<template> <template>
<div class="container"> <div class="container">
<el-menu class="nav" <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" :default-active="$store.getters.getNav"
mode="horizontal" mode="horizontal"
:router=true :router=true
@select="handleSelect"> @select="handleMenu">
<el-menu-item index="/home">首页</el-menu-item> <el-menu-item index="/">首页</el-menu-item>
<el-menu-item index="/device">设备</el-menu-item> <el-menu-item index="/things">物联</el-menu-item>
<el-menu-item index="/template">模板</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-item index="/about">关于</el-menu-item>
</el-menu> </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"> <div class="body">
<el-scrollbar style="height: 100%;"> <el-scrollbar style="height: 100%;">
<router-view/> <router-view/>
@ -20,27 +59,72 @@
<style lang="scss"> <style lang="scss">
body { body {
margin: 0px; margin: 0;
min-width: 1366px;
min-height: 768px;
} }
.container { .container {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50; color: #2c3e50;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: 'Avenir', Helvetica, Arial, sans-serif;
} }
.nav { .header {
width: 100%;
position: fixed;
top: 0px; 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; 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; top: 60px;
bottom: 5px; bottom: 3px;
margin: 2px 8px;
position: absolute;
.el-scrollbar__wrap { .el-scrollbar__wrap {
overflow-x: hidden; overflow-x: hidden;
@ -56,8 +140,17 @@
created() { created() {
}, },
methods: { methods: {
handleSelect(key, keyPath) { handleMenu(key, keyPath) {
console.log(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);
} }
} }
} }

BIN
src/assets/avatar.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
src/assets/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

2
src/router/router.js
Unescape View File

@ -6,7 +6,7 @@ Vue.use(VueRouter)
const routes = [ const routes = [
{ {
path: '/home', path: '/',
name: 'home', name: 'home',
component: Home component: Home
}, },

2
src/store/store.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save