Add server status monit.

src/assets/scss/_server.scss

@@ -0,0 +1,43 @@
+.server-list {
+  display: flex;
+  padding: 2rem;
+  flex-wrap: wrap;
+  flex-direction: row;
+  position: relative;
+  .container {
+    display: flex;
+    flex-direction: column;
+    margin: 10pt;
+    padding: 10pt;
+    box-shadow: 1pt 1pt 2pt rgba($black, .5);
+    border-radius: 2pt;
+    position: relative;
+    h1 {
+      font-size: 18pt;
+      margin-bottom: 5pt;
+    }
+    p {
+      color: $red;
+      font-size: 10pt;
+      &.active {
+        color: $green;
+      }
+      span {
+        margin-left: 1rem;
+      }
+    }
+    .state-container {
+      margin: 1rem 0;
+      overflow: hidden;
+      h2 {
+        font-size: 12pt;
+      }
+      .statebar {
+        width: 100%;
+        height: 10pt;
+        background-color: $tone;
+        margin: 5pt 0;
+      }
+    }
+  }
+}

src/assets/scss/main.scss

@@ -12,6 +12,7 @@
 @import 'home';
 @import 'login';
 @import 'analystic';
+@import 'server';
 
 #app {
   overflow-x: hidden;

src/main.js

@@ -45,10 +45,11 @@ import {
          faEye,
          faMinusCircle,
          faArrowUp,
-         faArrowDown
+         faArrowDown,
+         faServer
        }            from '@fortawesome/fontawesome-free-solid'
 
-FontAwesome.library.add(faAngleLeft, faAngleRight, faUser, faCircle, faCircleNotch, faArrowUp, faArrowDown, faListAlt, faMinusCircle, faEye, faHome, faCaretDown, faEdit, faHeart, faCartPlus, faPlus, faMinus, faCreditCard, faTruck, faEnvelope, faKey, faTimes, faCheckCircle, faExclamationCircle, faCheck, faGift, faShareAlt, faColumns, faFile, faNewspaper)
+FontAwesome.library.add(faAngleLeft, faAngleRight, faUser, faCircle, faServer, faCircleNotch, faArrowUp, faArrowDown, faListAlt, faMinusCircle, faEye, faHome, faCaretDown, faEdit, faHeart, faCartPlus, faPlus, faMinus, faCreditCard, faTruck, faEnvelope, faKey, faTimes, faCheckCircle, faExclamationCircle, faCheck, faGift, faShareAlt, faColumns, faFile, faNewspaper)
 Vue.component('FontAwesomeIcon', FontAwesomeIcon)
 Vue.component('VueEditor', VueEditor)
 

src/store/modules/menu/index.js

@@ -13,6 +13,16 @@ const state = {
       },
       components: lazyLoader('Home')
     },
+    {
+      name: 'Server Status',
+      path: '/status',
+      meta: {
+        label: ['伺服器'],
+        link: 'Server.vue',
+        icon: ['fas', 'server']
+      },
+      components: lazyLoader('Server')
+    },
     // {
     //   name: 'Control Panel',
     //   path: '/panel',

src/views/Server.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <div class="server-list">
+      <div class="container" v-for="(item, i) in serverState" :key="i">
+        <h1>{{ serverList[i].name }}</h1>
+        <p :class="{ 'active': item.check.ping }"><font-awesome-icon :icon="['fas', 'circle']" /><span>{{ serverList[i].ip }}</span></p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import config from '../../server/config.json'
+  export default {
+    data () {
+      return {
+        serverList: config.serverList,
+        serverState: []
+      }
+    },
+    mounted () {
+      this.serverList.forEach(async ele => {
+        let data = await this.getServerState(ele.api)
+        this.serverState.push(data)
+      })
+    },
+    methods: {
+      async getServerState (api) {
+        let res = await this.$http.get(api)
+        return res.data
+      }
+    }
+  }
+</script>