feat: 功能组件添加

新增axios请求组件http.js,新增国际化组件i18n.js,新增完全分页组件pagination,样式调整

nezha-fronted/config/index.js

@@ -6,12 +6,18 @@ const path = require('path')
 
 module.exports = {
   dev: {
-
     // Paths
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    proxyTable: {},
+    proxyTable: {
-
+      '/api': {
+        target: 'http://localhost:8088/nz-admin', //设置调用接口域名和端口号别忘了加http
+        changeOrigin: true,
+        pathRewrite: {
+          '^/api': '/' //这里理解成用‘/api’代替target里面的地址，组件中我们调接口时直接用/api代替
+        },
+      }
+    },
     // 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

nezha-fronted/package-lock.json

@@ -289,6 +289,38 @@
         "postcss-value-parser": "^3.2.3"
       }
     },
+    "axios": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
+      "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
+      "requires": {
+        "follow-redirects": "1.5.10",
+        "is-buffer": "^2.0.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "is-buffer": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
+          "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
+        }
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -6108,8 +6140,7 @@
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-      "dev": true
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -11001,6 +11032,16 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-i18n": {
+      "version": "8.15.1",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.15.1.tgz",
+      "integrity": "sha512-GBbz8qYCu0U2LNu4IcuFLZiuyninG4k26knvhL7GZG5Ncp4RR2VKDEH6g8gQ6I+UUBCvH2MBQVPSdxWe4DBkPw=="
+    },
+    "vue-infinite-scroll": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/vue-infinite-scroll/-/vue-infinite-scroll-2.0.2.tgz",
+      "integrity": "sha512-n+YghR059YmciANGJh9SsNWRi1YZEBVlODtmnb/12zI+4R72QZSWd+EuZ5mW6auEo/yaJXgxzwsuhvALVnm73A=="
+    },
     "vue-loader": {
       "version": "13.7.3",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.3.tgz",

nezha-fronted/src/App.vue

@@ -11,12 +11,21 @@ export default {
 </script>
 
 <style>
-#app {
+body,html{
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    /* font-family: "AlibabaPuHuiTiR"; */
-  -webkit-font-smoothing: antialiased;
+}
-  -moz-osx-font-smoothing: grayscale;
+.ly-table1 table{
-  text-align: center;
+    /* table-layout: unset; */
-  color: #2c3e50;
+}
-  margin-top: 60px;
+::-webkit-scrollbar{
+    width: 10px;
+    height: 10px;
+}
+::-webkit-scrollbar-thumb{
+    border-radius: 1em;
+    background-color: rgba(50,50,50,.3);
+}
+::-webkit-scrollbar-track{
+    border-radius: 1em;
 }
 </style>

nezha-fronted/src/assets/css/main.css

@@ -11,7 +11,6 @@ body {
     height: 100%;
     box-sizing: border-box;
 }
-
 html {
     overflow: auto;
     overflow-y: hidden;
@@ -19,6 +18,17 @@ html {
     height: 100%;
     box-sizing: border-box;
 }
-
+/*侧滑文字*/
-
+.el-form-item .el-form-item__label{
-
+    font-size: 10px;
+    text-align : left;
+}
+/*侧滑输入框高度*/
+.el-input .el-input__inner{
+    line-height: 26px;
+    height: 26px;
+}
+/*侧滑输入框宽度*/
+.el-form-item__content .el-input{
+    width: 90%;
+}

nezha-fronted/src/components/common/Login.vue

@@ -1,26 +0,0 @@
-<template>
-    <div>
-        <div>登录</div>
-        <el-button @click="jump">默认按钮</el-button>
-    </div>
-</template>
-
-<script>
-  export default {
-    name: "login",
-    methods:{
-      jump(){
-        this.$router.push({
-          path: "/dashboard",
-          query: {
-            t: +new Date()
-          }
-        });
-      }
-    }
-  }
-</script>
-
-<style scoped>
-
-</style>

nezha-fronted/src/components/common/header.vue

@@ -21,6 +21,12 @@
                     <el-menu-item index="2-2">选项2</el-menu-item>
                     <el-menu-item index="2-3">选项3</el-menu-item>
                 </el-submenu>
+                <el-submenu index="4">
+                    <template slot="title"><div @click="jumpTo('alarm')">{{$t('overall.asset')}}</div></template>
+                    <el-menu-item index="2-1">选项1</el-menu-item>
+                    <el-menu-item index="2-2">选项2</el-menu-item>
+                    <el-menu-item index="2-3">选项3</el-menu-item>
+                </el-submenu>
             </el-menu>
         </div>
         <div class="header-right">
@@ -91,7 +97,7 @@ export default {
 <style scoped>
 .submenu{
     padding-left: 50%;
-    width: 300px;
+    width: 400px;
     float: left;
 }
 .header {
@@ -101,7 +107,7 @@ export default {
     height: 60px;
     font-size: 22px;
     background-color: #ffffff;
-    z-index: 999;
+    z-index: 500;
     box-shadow: 0px 20px 13px -19px #5E5E5E;
 }
 .header-right {

nezha-fronted/src/components/common/home.vue

@@ -10,10 +10,10 @@
 </template>
 
 <script>
-import Header from "./Header";
+import Header from "./header";
-import sideBar from "./SideBar";
+import sideBar from "./sideBar";
 export default {
-  name: "Home.vue",
+  name: "home",
   components: {Header,sideBar}
 }
 
@@ -34,6 +34,7 @@ export default {
     height: calc(100% - 50px);
     box-sizing: border-box;
     transform: translateY(0);
+    padding: 20px
 }
 @media screen and (max-width: 1600px) {
     .content-box {

nezha-fronted/src/components/common/language/cn.js

@@ -5,6 +5,86 @@ const cn = {
     project:'工程',
     asset:'资产'
   },
+  asset:{
+    tableTitle:[
+      {
+        label: 'ID',
+        prop: 'ID',
+        show: true,
+      }, {
+        label: '资产类型',
+        prop: '资产类型',
+        show: true,
+      }, {
+        label: 'Device SN',
+        prop: 'Device SN',
+        show: true,
+      }, {
+        label: 'IP',
+        prop: 'IP',
+        show: true,
+      }, {
+        label: '资产状态',
+        prop: '资产状态',
+        show: true,
+      }, {
+        label: 'Module',
+        prop: 'Module',
+        show: true,
+      }, {
+        label: 'Alarm',
+        prop: 'Alarm',
+        show: true,
+      }, {
+        label: '数据中心',
+        prop: '数据中心',
+        show: true,
+      }, {
+        label: '机柜',
+        prop: '机柜',
+        show: true,
+      }, {
+        label: '型号',
+        prop: '型号',
+        show: true,
+      }, {
+        label: '厂商',
+        prop: '厂商',
+        show: true,
+      }, {
+        label: '采购日期',
+        prop: '采购日期',
+        show: true,
+      }, {
+        label: '保修截止期',
+        prop: '保修截止期',
+        show: true,
+      }, {
+        label: '设备责任人',
+        prop: '设备责任人',
+        show: true,
+      }
+    ],
+    tagTableTitle: [
+      {
+        label: '项目名称',
+        prop: 'projectName',
+        show: true,
+      }, {
+        label: 'Module Name',
+        prop: 'moduleName',
+        show: true,
+      }, {
+        label: 'EndPoint',
+        prop: 'endPoint',
+        show: true,
+      }, {
+        label: 'Alarm',
+        prop: 'alarm',
+        show: true,
+      },
+    ]
+  },
   ...zhLocale
 }
 

nezha-fronted/src/components/common/language/en.js

@@ -5,6 +5,86 @@ const en = {
     project:'project',
     asset:'asset'
   },
+  asset:{
+    tableTitle:[
+      {
+        label: 'ID',
+        prop: 'ID',
+        show: true,
+      }, {
+        label: 'Asset Type',
+        prop: '资产类型',
+        show: true,
+      }, {
+        label: 'Device SN',
+        prop: 'Device SN',
+        show: true,
+      }, {
+        label: 'IP',
+        prop: 'IP',
+        show: true,
+      }, {
+        label: '资产状态',
+        prop: '资产状态',
+        show: true,
+      }, {
+        label: 'Module',
+        prop: 'Module',
+        show: true,
+      }, {
+        label: 'Alarm',
+        prop: 'Alarm',
+        show: true,
+      }, {
+        label: '数据中心',
+        prop: '数据中心',
+        show: true,
+      }, {
+        label: '机柜',
+        prop: '机柜',
+        show: true,
+      }, {
+        label: '型号',
+        prop: '型号',
+        show: true,
+      }, {
+        label: '厂商',
+        prop: '厂商',
+        show: true,
+      }, {
+        label: '采购日期',
+        prop: '采购日期',
+        show: true,
+      }, {
+        label: '保修截止期',
+        prop: '保修截止期',
+        show: true,
+      }, {
+        label: '设备责任人',
+        prop: '设备责任人',
+        show: true,
+      }
+    ],
+    tagTableTitle: [
+      {
+        label: 'Project Name',
+        prop: 'projectName',
+        show: true,
+      }, {
+        label: 'Module Name',
+        prop: 'moduleName',
+        show: true,
+      }, {
+        label: 'EndPoint',
+        prop: 'endPoint',
+        show: true,
+      }, {
+        label: 'Alarm',
+        prop: 'alarm',
+        show: true,
+      },
+    ]
+  },
   ...enLocale
 }
 

nezha-fronted/src/components/common/login.vue

@@ -0,0 +1,41 @@
+<template>
+    <div>
+        <div>登录</div>
+        <el-input v-model="loginData.username" placeholder="请输入内容"></el-input>
+        <el-input v-model="loginData.password" placeholder="请输入内容"></el-input>
+        <button @click="login">登录</button>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "login",
+  data() {
+    return {
+      loginData: {
+        username: '',
+        password: '',
+      },
+    }
+  },
+  methods: {
+    login() {
+      this.$post('api/sys/login', (this.loginData)).then(res => {
+        if (res.code == 200) {
+          sessionStorage.setItem("token", res.data.token);
+          this.$router.push({
+            path: "/asset",
+            query: {
+              t: +new Date()
+            }
+          });
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

nezha-fronted/src/components/common/pagination.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="pagination">
+    <el-pagination
+      ref="page"
+      background
+      @size-change="size"
+      @prev-click="prev"
+      @next-click="next"
+      @current-change="current"
+      :page-sizes="[20, 50, 100, 300]"
+      :page-size="20"
+      layout="prev, pager, next, jumper, sizes, total"
+      :total="this.pageObj.total"
+    ></el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "pagination",
+  props: ['pageObj'],
+  data() {
+    return {};
+  },
+  methods: {
+    background() {
+      this.backgroundColor();
+    },
+    //点击上一页箭头
+    prev() {
+      this.backgroundColor();
+    },
+    //点击下一页箭头
+    next(val) {
+      this.backgroundColor();
+    },
+    //currentPage 改变时会触发
+    current(val) {
+      this.$emit("pageNo", val);
+      this.backgroundColor();
+    },
+    size(val) {
+      this.$emit("pageSize", val);
+      this.backgroundColor();
+    },
+    //设置当前页的样式
+    backgroundColor() {
+      this.list = this.$refs.page.$el.children[2].children;
+      for (let i = 0; i < this.list.length; i++) {
+        const element = this.list[i];
+      }
+    },
+  }
+};
+</script>
+
+<style>
+.pagination {
+  display: inline-block;
+  margin-top: 10px;
+  margin-left: 50%;
+  transform: translate(-50%);
+}
+</style>

nezha-fronted/src/components/common/sideBar.vue

@@ -3,9 +3,9 @@
         <div class="cartTitle">
             <div>Project</div>
         </div>
-        <div v-for="{item} in arr" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="1">
+<!--        <div v-for="{item} in arr" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="1">-->
-            <div class="projectCard" :id="gett(item)"></div>
+<!--            <div class="projectCard" :id="gett(item)"></div>-->
-        </div>
+<!--        </div>-->
     </div>
 </template>
 
@@ -14,20 +14,20 @@ export default {
   name: "SiderBar",
   data(){
     return{
-      arr:[12,3,4,5,6,7,8,98,54]
+      // arr:[12,3,4,5,6,7,8,98,54]
     }
   },
   methods: {
-    gett: function (index) {
+    // gett: function (index) {
-      return "sdf" + index
+    //   return "sdf" + index
-    },
+    // },
-    loadMore() {
+    // loadMore() {
-      this.busy = true
+    //   this.busy = true
-      setTimeout(() => {
+    //   setTimeout(() => {
-        this.page++
+    //     this.page++
-      }, 1000)
+    //   }, 1000)
-      this.arr.push('1')
+    //   this.arr.push('1')
-    }
+    // }
   }
 }
 

nezha-fronted/src/components/page/asset/asset.vue

@@ -1,15 +1,388 @@
 <template>
+    <div style="height:95%;overflow-y:auto">
         <div>
-        asset
+            <el-input
+                    style="width: 90px;"
+                    placeholder="请输入内容"
+                    v-model="input"
+                    clearable>
+            </el-input>
+        </div>
+        <div>
+            <el-table
+                    :data="this.tableData"
+            >
+                <el-table-column
+                        v-for="(item, index) in tableTitle"
+                        v-if="item.show"
+                        min-width="120"
+                        :key="`col_${index}`"
+                        :label="item.label"
+                >
+                    {{item}}
+                    <template slot-scope="scope" :column="item">
+                        <div v-if="item.prop=='ID'">
+                            <p>
+                                <span>{{scope.row['id']}}</span>
+                            </p>
+                        </div>
+                        <div v-if="item.prop=='IP'">
+                            <p>
+                                <span>{{scope.row['host']}}</span>
+                            </p>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                        fixed="right"
+                        label="操作"
+                        width="100">
+                    <template slot-scope="scope">
+                        <el-button type="text" size="small" @click.stop="tagShow('showAdd')">查看</el-button>
+                        <el-button type="text" size="small" @click.stop="tagShow('showEdit')">编辑</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+        <transition name="el-zoom-in-center" @click.stop>
+            <div class="right-menu" v-if="tabShow" v-clickoutside:tagHide="tagShow">
+                <div v-if="this.tagType=='add'">
+                    <el-form ref="form" :model="form" label-width="120px">
+                        <div class="right-box__top-btns">
+                            <div class="right-box__top-btn right-box__top-btn_full">
+                                <div class="right-box__btn-icon">
+                                    <i class="el-icon-close"></i>
+                                </div>
+                                <span>Esc</span>
+                            </div>
+                            <div class="right-box__top-btn right-box__top-btn_full">
+                                <div class="right-box__btn-icon">
+                                    <i class="el-icon-edit-outline"></i>
+                                </div>
+                                <span>Save</span>
+                            </div>
+                            <div class="right-box__top-btn">
+                                <div class="right-box__btn-icon">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <span>Delete</span>
+                            </div>
+                        </div>
+                        <div class="el-form-style">
+                            <el-form-item label="IP">
+                                <el-input v-model="form.name"/>
+                            </el-form-item>
+                            <el-form-item label="SN">
+                                <el-input v-model="form.name"/>
+                            </el-form-item>
+                            <el-form-item label="Asset Type">
+                                <el-input v-model="form.name"/>
+                            </el-form-item>
+                            <el-form-item label="ModelId">
+                                <el-input v-model="form.name"/>
+                            </el-form-item>
+                            <el-form-item label="IDC">
+                                <el-input v-model="form.name"/>
+                            </el-form-item>
+                            <el-form-item label="Cabinet">
+                                <el-input v-model="form.name"/>
+                            </el-form-item>
+                            <el-form-item label="Host">
+                                <el-input v-model="form.name"/>
+                            </el-form-item>
+                            <el-form-item label="State">
+                                <el-input v-model="form.name"/>
+                            </el-form-item>
+                            <el-form-item>
+                                <el-button>取消</el-button>
+                            </el-form-item>
+                        </div>
+                    </el-form>
+                </div>
+                <div v-if="this.tagType=='edit'">
+                    <el-form ref="form" :model="form" label-width="120px" size="small">
+                        <div class="right-box__top-btns">
+                            <div class="right-box__top-btn right-box__top-btn_full">
+                                <div class="right-box__btn-icon">
+                                    <i class="el-icon-close"></i>
+                                </div>
+                                <span>Esc</span>
+                            </div>
+                            <div class="right-box__top-btn right-box__top-btn_full">
+                                <div class="right-box__btn-icon">
+                                    <i class="el-icon-edit-outline"></i>
+                                </div>
+                                <span>Save</span>
+                            </div>
+                            <div class="right-box__top-btn">
+                                <div class="right-box__btn-icon">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <span>Delete</span>
+                            </div>
+                        </div>
+                        <div class="el-form-style">
+                            <el-form-item label="IP">
+                                <span>192.168.100.255</span>
+                            </el-form-item>
+                            <el-form-item label="SN">
+                                <span>AAQWEROIUOWENKOIZLNWEROFPIAN</span>
+                            </el-form-item>
+                            <el-form-item label="Asset Type">
+                                <span>服务器</span>
+                            </el-form-item>
+                            <el-form-item label="ModelId">
+                                <span>No1</span>
+                            </el-form-item>
+                            <el-form-item label="IDC">
+                                <span>国内地区/北京市/1号</span>
+                            </el-form-item>
+                            <el-form-item label="Cabinet">
+                                <span>13排223机柜</span>
+                            </el-form-item>
+                            <el-form-item label="Host">
+                                <span>192.158.22.22</span>
+                            </el-form-item>
+                            <el-form-item label="State">
+                                <span>在库</span>
+                            </el-form-item>
+                            <el-form-item label="Alarm">
+                                <div>111</div>
+                            </el-form-item>
+                        </div>
+                        <div style="padding-top: 10px">
+                            <span>endPoint:</span>
+                        </div>
+                        <div class="tag-table">
+                            <el-table
+                                    :data="tagTableData"
+                                    :row-style="{height:'20px'}"
+                                    :cell-style="{padding:'2px'}"
+                            >
+                                <el-table-column
+                                        v-for="(item, index) in tagTableTitle"
+                                        v-if="item.show"
+                                        :key="`col_${index}`"
+                                        :label="item.label"
+
+                                >
+                                    <template slot-scope="scope" :column="item">
+                                        <div v-if="item.prop=='projectName'">
+                                            <p>
+                                                <span>{{scope.row['projectName']}}</span>
+                                            </p>
+                                        </div>
+                                        <div v-if="item.prop=='moduleName'">
+                                            <p>
+                                                <span>{{scope.row['moduleName']}}</span>
+                                            </p>
+                                        </div>
+                                        <div v-if="item.prop=='endPoint'">
+                                            <div class="tableSquare">342</div>
+                                        </div>
+                                        <div v-if="item.prop=='alarm'">
+                                            <div class="tableSquare">{{11}}/{{111}}</div>
+                                        </div>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column
+                                        fixed="right"
+                                        label=""
+                                        width="100">
+                                    <template slot-scope="scope">
+                                        <el-button type="text" size="small" @click.stop="tagShow('showAdd')">查看
+                                        </el-button>
+                                        <el-button type="text" size="small" @click.stop="tagShow('showEdit')">编辑
+                                        </el-button>
+                                    </template>
+                                </el-table-column>
+                            </el-table>
+<!--                            <Pagination :pageobj="pageObj" ref="Pagination"></Pagination>-->
+                            <el-divider></el-divider>
+                            <span>默认CLI账户</span>
+                            <div style="padding-top: 10px">
+                                <el-select v-model="form.region" placeholder="请选择活动区域" style="width: 90%">
+                                    <el-option label="区域一" value="shanghai">111111111111111111111</el-option>
+                                    <el-option label="区域二" value="beijing">111111111111111111111</el-option>
+                                    <el-option label="区域二" value="beijing">111111111111111111111</el-option>
+                                    <el-option label="区域二" value="beijing">111111111111111111111</el-option>
+                                </el-select>
+                            </div>
+                        </div>
+                        <div class="el-form-style">
+                            <el-form-item label="IP">
+                                <span>192.168.100.255</span>
+                            </el-form-item>
+                            <el-form-item label="SN">
+                                <span>AAQWEROIUOWENKOIZLNWEROFPIAN</span>
+                            </el-form-item>
+                            <el-form-item label="Asset Type">
+                                <span>服务器</span>
+                            </el-form-item>
+                            <el-form-item label="ModelId">
+                                <span>No1</span>
+                            </el-form-item>
+                            <el-form-item label="IDC">
+                                <span>国内地区/北京市/1号</span>
+                            </el-form-item>
+                        </div>
+                    </el-form>
+                </div>
+            </div>
+        </transition>
     </div>
 </template>
 
 <script>
 export default {
-  name: "asset"
+  name: "asset",
+  data() {
+    return {
+      tableTitle: this.$t('asset.tableTitle'),
+      tagTableTitle: this.$t('asset.tagTableTitle'),
+      tableData: [],
+      tagTableData: [
+        {
+          projectName: '2016-05-02',
+          moduleName: '王小虎',
+          endPoint: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          projectName: '2016-05-04',
+          moduleName: '王小虎',
+          endPoint: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          projectName: '2016-05-01',
+          moduleName: '王小虎',
+          endPoint: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          projectName: '2016-05-03',
+          moduleName: '王小虎',
+          endPoint: '上海市普陀区金沙江路 1516 弄'
+        }, {
+          projectName: '2016-05-02',
+          moduleName: '王小虎',
+          endPoint: '上海市普陀区金沙江路 1518 弄'
+        },
+      ],
+      pageObj: {
+        pageNo: 1,
+        pageSize: 20,
+        total:0
+      },
+      input: '',
+      tabShow: false,
+      tagType: 'add',
+      form: {
+        name: ''
+      },
+    }
+  },
+  methods: {
+    getListData() {
+      new Promise((resolve, reject) => {
+        this.$get('api/asset',this.pageObj).
+        then(response => {
+          if(response.code==200){
+            this.tableData = response.data.list
+            console.log(this.tableData)
+            this.pageObj.total = response.data.total
+          }
+          resolve(response.data)
+        }).catch(err => {
+          reject(err.response)
+        })
+      })
+    },
+    tagShow(t) {
+      this.tabShow = false
+      if (t === 'showAdd') {
+        this.tabShow = true
+        this.tagType = 'add'
+      }
+      if (t === 'showEdit') {
+        this.tabShow = true
+        this.tagType = 'edit'
+      }
+    },
+    pageNo(val) {
+      this.pageObj.pageNo = val;
+      this.getListData()
+    },
+    pageSize(val){
+      this.pageObj.pageSize = val;
+      this.getListData()
+    }
+  },
+  mounted() {
+    this.getListData()
+  }
 }
 </script>
+<style>
+.el-table{
+    font-size: 10px;
+}
 
-<style scoped>
+.el-form-style .el-form-item {
+    margin-bottom: 0px;
+}
 
+.el-form-style .el-form-item .el-form-item__content {
+    height: 25px;
+    font-size: 10px;
+}
+
+.el-table__body-wrapper::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+</style>
+<style scoped>
+.right-menu {
+    position: fixed;
+    top: 20px;
+    right: 0;
+    z-index: 500;
+    border-radius: 8px;
+    box-shadow: 0 0 15px #ccc;
+    background-color: white;
+    padding: 0 20px;
+    width: 580px;
+    height: calc(100% - 60px);
+    overflow-y: auto
+}
+
+
+.right-box__top-btn {
+    border-radius: 0 0 9px 9px;
+    float: right;
+    color: #656565;
+    height: 35px;
+    font-size: 12px;
+    padding: 3px 8px 1px 8px;
+    border: 1px solid #aaaaaa;
+    border-top: none;
+    cursor: pointer;
+    margin-left: 20px;
+}
+
+.right-box__top-btn_full {
+    background-color: #656565;
+    border: 1px solid #656565;
+    border-top: none;
+    color: white;
+}
+
+.el-form-style {
+    padding-top: 40px;
+}
+
+.tableSquare {
+    border: 1px solid #000;
+    height: 25px;
+    width: 90px;
+    border-radius: 8px;
+    text-align: center;
+}
 </style>

nezha-fronted/src/main.js

@@ -8,7 +8,7 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 import axios from 'axios';
-import { post, get, patch, put, del } from './components/common/js/http.js'
+import { post, get} from './http.js'
 
 import Pagination from "./components/common/pagination"; //引入全局分页组件
 Vue.component("Pagination", Pagination);
@@ -16,13 +16,45 @@ Vue.component("Pagination", Pagination);
 Vue.prototype.$axios = axios
 Vue.prototype.$post = post;
 Vue.prototype.$get = get;
-Vue.prototype.$patch = patch;
-Vue.prototype.$put = put;
-Vue.prototype.$delete = del;
 
 Vue.config.productionTip = false
 Vue.use(ElementUI)
 
+
+const clickoutside = {
+  // 初始化指令
+  bind(el, binding, vnode) {
+    function documentHandler(e) {
+      // 这里判断点击的元素是否是本身，是本身，则返回
+      if (el.contains(e.target)) {
+        return false;
+      }
+      // 判断指令中是否绑定了函数
+      if (binding.expression) {
+        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
+        if (binding.arg) {
+          binding.value(e, binding.arg);
+        } else {
+          binding.value(e);
+        }
+
+      }
+    }
+    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
+    el.__vueClickOutside__ = documentHandler;
+    document.addEventListener('click', documentHandler);
+  },
+  unbind(el, binding) {
+    // 解除事件监听
+    document.removeEventListener('click', el.__vueClickOutside__);
+    delete el.__vueClickOutside__;
+  },
+};
+
+Vue.directive('clickoutside',
+    clickoutside
+)
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

nezha-fronted/src/router/index.js

@@ -11,11 +11,11 @@ export default new Router({
     },
     {
       path: '/login',
-      component: resolve => require(['../components/common/Login.vue'], resolve),
+      component: resolve => require(['../components/common/login.vue'], resolve),
     },
     {
       path: '/',
-      component: resolve => require(['../components/common/Home.vue'], resolve),
+      component: resolve => require(['../components/common/home.vue'], resolve),
       children: [
         {
           path: '/dashboard',
@@ -27,7 +27,11 @@ export default new Router({
         },
         {
           path: '/asset',
-          component: resolve => require(['../components/page/project/project.vue'], resolve),
+          component: resolve => require(['../components/page/asset/asset.vue'], resolve),
+        },
+        {
+          path: '/alarm',
+          component: resolve => require(['../components/page/config/account.vue'], resolve),
         }
       ]
     },