Merge branch 'master' of http://git.cc-lotus.info/article-system/article-mobile

src/store/index.js

@@ -11,6 +11,8 @@ import thumbs from './thumbs';
 import reply from './reply';
 import weixin from './weixin';
 import count from './count';
+// 监测
+import topmessage from './topmessage';
 
 Vue.use(Vuex);
 
@@ -39,5 +41,6 @@ export default new Vuex.Store({
     reply,
     weixin,
     count,
+    topmessage,
   },
 });

src/store/topmessage.js

@@ -0,0 +1,46 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  topInfo: `/api/count/top`,
+  servenodeInfo: `/api/count/servenode`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit = 15, ...info } = {}) {
+    const res = await this.$axios.$get(api.topInfo, { skip, limit, ...info });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.topInfo}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.topInfo}/${payload}`);
+    return res;
+  },
+  async update({ commit }, { id, ...info } = {}) {
+    const res = await this.$axios.$post(`${api.topInfo}/update/${id}`, {
+      ...info,
+    });
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.newsInfo}/${payload}`);
+    return res;
+  },
+  async querytwo({ commit }, { skip = 0, limit = 15, ...info } = {}) {
+    const res = await this.$axios.$get(api.servenodeInfo, { skip, limit, ...info });
+    return res;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/views/monitor/index.vue

@@ -0,0 +1,218 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <top topType="2" :leftArrow="false"></top>
+        </el-col>
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
+          <van-tabs v-model="active" class="tab" @change="toChange">
+            <van-tab title="活跃用户">
+              <list :type="active" :monitorList="monitorList" @detailBtn="detailBtn"></list>
+            </van-tab>
+            <van-tab title="活跃节点">
+              <list :type="active" :monitorList="monitorList" @detailBtn="detailBtn"></list>
+            </van-tab>
+            <van-tab title="活跃应用">
+              <list :type="active" :monitorList="monitorList" @detailBtn="detailBtn"></list>
+            </van-tab>
+          </van-tabs>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <page :total="total" :limit="limit" @search="search"></page>
+        </el-col>
+      </el-col>
+    </el-row>
+    <van-dialog v-model="dialog" class="dialog" title="监测信息详情" show-cancel-button :showConfirmButton="false">
+      <div v-if="type == '0'">
+        <p>
+          用户:<span>{{ info.user || '暂无' }}</span>
+        </p>
+        <p>
+          进程调度:<span>{{ info.pr || '暂无' }}</span>
+        </p>
+        <p>
+          进程nice值:<span>{{ info.ni || '暂无' }}</span>
+        </p>
+        <p>
+          驻留内存:<span>{{ info.res || '暂无' }}</span>
+        </p>
+        <p>
+          共享内存:<span>{{ info.shr || '暂无' }}</span>
+        </p>
+        <p>
+          进程状态:<span>{{ info.s || '暂无' }}</span>
+        </p>
+        <p>
+          CPU时间:<span>{{ info.cpu || '暂无' }}</span>
+        </p>
+        <p>
+          物理内存:<span>{{ info.mem || '暂无' }}</span>
+        </p>
+        <p>
+          进程指令:<span>{{ info.command || '暂无' }}</span>
+        </p>
+      </div>
+      <div v-else-if="type == '1'">
+        <p>
+          用户:<span>{{ info.uname || '暂无' }}</span>
+        </p>
+        <p>
+          运行作业:<span>{{ info.jobs || '暂无' }}</span>
+        </p>
+        <p>
+          作业占用内存:<span>{{ info.physmem || '暂无' }}</span>
+        </p>
+        <p>
+          可用核数:<span>{{ info.np || '暂无' }}</span>
+        </p>
+        <p>
+          运行核数:<span>{{ info.ncpus || '暂无' }}</span>
+        </p>
+        <p>
+          活跃结点:<span>{{ info.node || '暂无' }}</span>
+        </p>
+      </div>
+      <div v-else-if="type == '2'">
+        <p>
+          用户:<span>{{ info.user || '暂无' }}</span>
+        </p>
+        <p>
+          进程调度:<span>{{ info.pr || '暂无' }}</span>
+        </p>
+        <p>
+          进程nice值:<span>{{ info.ni || '暂无' }}</span>
+        </p>
+        <p>
+          驻留内存:<span>{{ info.res || '暂无' }}</span>
+        </p>
+        <p>
+          共享内存:<span>{{ info.shr || '暂无' }}</span>
+        </p>
+        <p>
+          进程状态:<span>{{ info.s || '暂无' }}</span>
+        </p>
+        <p>
+          CPU时间:<span>{{ info.cpu || '暂无' }}</span>
+        </p>
+        <p>
+          物理内存:<span>{{ info.mem || '暂无' }}</span>
+        </p>
+        <p>
+          进程指令:<span>{{ info.command || '暂无' }}</span>
+        </p>
+      </div>
+    </van-dialog>
+  </div>
+</template>
+
+<script>
+import page from '@/layout/common/page.vue';
+import list from './parts/list.vue';
+import top from '@/layout/common/top.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: topmessage } = createNamespacedHelpers('topmessage');
+import moment from 'moment';
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    page,
+    top,
+    list,
+  },
+  data: function() {
+    return {
+      clientHeight: '',
+      active: 0,
+      monitorList: [],
+      total: 0,
+      limit: '4',
+      toDay: '',
+      type: 0,
+      // 监测详细信息
+      dialog: false,
+      info: {},
+    };
+  },
+  async created() {
+    let toDay = moment().format('YYYY-MM-DD');
+    this.$set(this, `toDay`, toDay);
+    this.toChange(0);
+  },
+  mounted() {
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 80;
+    this.$set(this, `clientHeight`, clientHeight);
+  },
+  methods: {
+    ...topmessage(['query', 'querytwo']),
+    async search({ skip = 0, limit = 4, ...info } = {}) {
+      if (this.type == '0') {
+        let res = await this.query({ skip, limit: this.limit, ...info });
+        if (this.$checkRes(res)) {
+          this.$set(this, 'monitorList', res.data);
+          this.$set(this, 'total', res.total);
+        }
+      } else if (this.type == '1') {
+        let res = await this.querytwo({ skip, limit: this.limit, time: this.toDay });
+        if (this.$checkRes(res)) {
+          this.$set(this, 'monitorList', res.data);
+          this.$set(this, 'total', res.total);
+        }
+      } else if (this.type == '2') {
+        let res = await this.query({ skip, limit: this.limit, ...info });
+        if (this.$checkRes(res)) {
+          this.$set(this, 'monitorList', res.data.reverse());
+          this.$set(this, 'total', res.total);
+        }
+      }
+    },
+    toChange(type) {
+      this.$set(this, `type`, type);
+      this.search();
+    },
+    // 详细信息
+    detailBtn(data) {
+      this.$set(this, 'info', data);
+      this.dialog = true;
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .top {
+    height: 40px;
+    overflow: hidden;
+    border-bottom: 1px solid #f1f1f1;
+  }
+  .info {
+    overflow-x: hidden;
+    overflow-y: auto;
+    .tab {
+      padding: 0 10px;
+    }
+  }
+  .foot {
+    height: 40px;
+    overflow: hidden;
+    border-top: 1px solid #f1f1f1;
+  }
+}
+.dialog {
+  div {
+    padding: 0 10px;
+    p {
+      padding: 5px 0;
+    }
+  }
+}
+</style>

src/views/monitor/parts/list.vue

@@ -0,0 +1,127 @@
+<template>
+  <div id="list">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" v-if="type == '0'">
+          <el-col :span="24" class="one" v-for="(item, index) in monitorList" :key="index">
+            <el-col :span="24" class="name">
+              {{ item.user }}
+            </el-col>
+            <el-col :span="24" class="other">
+              <p>
+                进度调度:<span>{{ item.pr }}</span>
+              </p>
+              <p>
+                进程指令:<span>{{ item.command }}</span>
+              </p>
+            </el-col>
+            <el-col :span="24" class="btn">
+              <el-button type="primary" size="mini" @click="detailBtn(item)">详细信息</el-button>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" v-else-if="type == '1'">
+          <el-col :span="24" class="one" v-for="(item, index) in monitorList" :key="index">
+            <el-col :span="24" class="name">
+              {{ item.uname }}
+            </el-col>
+            <el-col :span="24" class="other">
+              <p>
+                运行作业:<span>{{ item.jobs }}</span>
+              </p>
+              <p>
+                作用占用内存:<span>{{ item.physmem }}</span>
+              </p>
+            </el-col>
+            <el-col :span="24" class="btn">
+              <el-button type="primary" size="mini" @click="detailBtn(item)">详细信息</el-button>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" v-else-if="type == '2'">
+          <el-col :span="24" class="one" v-for="(item, index) in monitorList" :key="index">
+            <el-col :span="24" class="name">
+              {{ item.user }}
+            </el-col>
+            <el-col :span="24" class="other">
+              <p>
+                进度调度:<span>{{ item.pr }}</span>
+              </p>
+              <p>
+                进程指令:<span>{{ item.command }}</span>
+              </p>
+            </el-col>
+            <el-col :span="24" class="btn">
+              <el-button type="primary" size="mini" @click="detailBtn(item)">详细信息</el-button>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'list',
+  props: {
+    type: { type: Number },
+    monitorList: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {
+    // 详细信息
+    detailBtn(data) {
+      this.$emit('detailBtn', data);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    type: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    margin: 0 0 10px 0;
+    box-shadow: 0 0 5px #ccc;
+    border-radius: 5px;
+    padding: 5px 10px;
+    .name {
+      font-size: 16px;
+      font-weight: bold;
+      margin: 0 0 5px 0;
+    }
+    .other {
+      margin: 0 0 5px 0;
+      p {
+        font-size: 14px;
+        color: #666;
+        padding: 5px 0;
+        span {
+          color: #000;
+        }
+      }
+    }
+    .btn {
+      text-align: center;
+    }
+  }
+}
+</style>