.

README.md

@@ -0,0 +1,24 @@
+# dc3-web
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dc3-web",
-  "version": "3.0.0",
+  "version": "0.1.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -8,7 +8,9 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.19.0",
     "core-js": "^3.3.2",
+    "element-ui": "^2.4.5",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",
     "vuex": "^3.0.1"
@@ -16,13 +18,40 @@
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.0.0",
     "@vue/cli-plugin-eslint": "^4.0.0",
-    "@vue/cli-plugin-router": "^4.0.0",
-    "@vue/cli-plugin-vuex": "^4.0.0",
+    "@vue/cli-plugin-router": "^4.0.5",
+    "@vue/cli-plugin-vuex": "^4.0.5",
     "@vue/cli-service": "^4.0.0",
-    "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "^10.0.3",
-    "eslint": "^5.16.0",
+    "eslint": "^6.5.1",
     "eslint-plugin-vue": "^5.0.0",
+    "node-sass": "^4.9.2",
+    "sass-loader": "^8.0.0",
+    "vue-cli-plugin-element": "^1.0.1",
     "vue-template-compiler": "^2.6.10"
-  }
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {
+      "no-console": "off"
+    },
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
 }

src/App.vue

@@ -1,14 +1,59 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+    <div id="app">
+        <el-container class="el-container-iot">
+            <el-aside>
+                <el-menu default-active="1-4-1" class="el-menu-vertical-iot" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
+                    <el-submenu index="1">
+                        <template slot="title">
+                            <i class="el-icon-cpu"></i>
+                            <span slot="title">设备管理</span>
+                        </template>
+                        <el-menu-item>设备接入</el-menu-item>
+                        <el-menu-item>设备解析</el-menu-item>
+                    </el-submenu>
+                    <el-submenu>
+                        <template slot="title">
+                            <i class="el-icon-odometer"></i>
+                            <span slot="title">数据管理</span>
+                        </template>
+                        <el-menu-item>测点配置</el-menu-item>
+                        <el-menu-item>数据监控</el-menu-item>
+                    </el-submenu>
+                    <el-submenu>
+                        <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-aside>
+            <el-container>
+                <el-header>
+                    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
+                        <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>
-    <router-view/>
-  </div>
 </template>
 
-<style>
+<style lang="scss">
+body {
+        margin: 0px;
+        height: 100%;
+    }
+
+    html, #app {
+        height: 100%;
+    }
+
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -19,14 +64,44 @@
 
 #nav {
   padding: 30px;
-}
 
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
+  a {
+    font-weight: bold;
+    color: #2c3e50;
 
-#nav a.router-link-exact-active {
-  color: #42b983;
+    &.router-link-exact-active {
+      color: #42b983;
+    }
+  }
 }
+
+.el-container-iot {
+        height: 100%;
+    }
+
+    .el-menu-vertical-iot {
+        height: 100%;
+    }
+
+    .el-menu-vertical-iot:not(.el-menu--collapse) {
+        width: 200px;
+    }
 </style>
+
+<script>
+    export default {
+        data() {
+            return {
+                isCollapse: false
+            };
+        },
+        methods: {
+            handleOpen(key, keyPath) {
+                console.log(key, keyPath);
+            },
+            handleClose(key, keyPath) {
+                console.log(key, keyPath);
+            }
+        }
+    }
+</script>

src/components/HelloWorld.vue

@@ -9,8 +9,6 @@
     <h3>Installed CLI Plugins</h3>
     <ul>
       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
     </ul>
     <h3>Essential Links</h3>

src/element-variables.scss

@@ -0,0 +1,11 @@
+/*
+Write your variables here. All available variables can be
+found in element-ui/packages/theme-chalk/src/common/var.scss.
+For example, to overwrite the theme color:
+*/
+$--color-primary: teal;
+
+/* icon font path, required */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";

src/main.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
+import './plugins/element.js'
 import router from './router'
 import store from './store'
 

src/plugins/element.js

@@ -0,0 +1,5 @@
+import Vue from 'vue'
+import Element from 'element-ui'
+import '../element-variables.scss'
+
+Vue.use(Element)