1

src/layout/index/top-right.vue

@@ -15,7 +15,7 @@ import 'echarts/lib/component/toolbox';
 import 'echarts/lib/component/markPoint';
 import 'echarts/lib/component/tooltip';
 import { mapState, createNamespacedHelpers } from 'vuex';
-const { mapActions: news } = createNamespacedHelpers('news');
+const { mapActions: topmessage } = createNamespacedHelpers('topmessage');
 export default {
   name: 'top-right',
   props: {},
@@ -23,23 +23,22 @@ export default {
   data: () => {
     return {
       myChart: null,
+      // 结点
+      hyjdTotal: 0,
     };
   },
-  created() {
-    this.init();
+  async created() {
+    await this.init();
   },
   methods: {
-    ...news(['query']),
+    ...topmessage(['query']),
     async init() {
       let res = await this.query();
       if (this.$checkRes(res)) {
-        let s1 = [{ name: '1' }];
-        let s2 = [{ name: '1' }, { name: '2' }];
-        let s3 = [{ name: '1' }, { name: '2' }, { name: '3' }];
+        this.channel();
         this.myChart = echarts.init(document.getElementById('chart'));
         const option = {
           title: { text: '运行动态', left: 'center' },
-
           tooltip: { trigger: 'axis' },
           legend: {
             data: ['活跃用户', '活跃节点', '活跃应用'],
@@ -58,21 +57,29 @@ export default {
               },
               type: 'bar',
               data: [
-                { name: '活跃用户', value: s3.length, itemStyle: { color: '#7cb5ec' } },
-                { name: '活跃节点', value: s1.length, itemStyle: { color: '#ffa94b' } },
-                { name: '活跃应用', value: s2.length, itemStyle: { color: '#346da4' } },
+                { name: '活跃用户', value: res.total, itemStyle: { color: '#7cb5ec' } },
+                { name: '活跃节点', value: this.hyjdTotal, itemStyle: { color: '#ffa94b' } },
+                { name: '活跃应用', value: res.total, itemStyle: { color: '#346da4' } },
               ],
               animationType: 'scale',
             },
           ],
         };
         this.myChart.setOption(option);
-
         this.myChart.on('click', function(params) {
           self.location.href = '/service/detail?title=运行动态';
         });
       }
     },
+    channel() {
+      this.$stomp({
+        [`/exchange/service_count/nodes`]: this.onMessage,
+      });
+    },
+    onMessage(message) {
+      let data = JSON.parse(message.body).filter(i => i.node != 'gpu01');
+      this.$set(this, 'hyjdTotal', data.length);
+    },
   },
   computed: {
     ...mapState(['']),

src/store/topmessage.js

@@ -9,7 +9,7 @@ const state = () => ({});
 const mutations = {};
 
 const actions = {
-  async query({ commit }, { skip = 0, limit = 10, ...info } = {}) {
+  async query({ commit }, { skip = 0, limit = 15, ...info } = {}) {
     const res = await this.$axios.$get(api.topInfo, { skip, limit, ...info });
     return res;
   },

src/views/service/parts/sign.vue

@@ -10,22 +10,58 @@
           <el-col :span="24" class="top">
             <el-col :span="6" class="left"> 当前状态</el-col>
             <el-col :span="10" class="under">
-              <el-radio v-model="radio" label="1">活跃用户</el-radio>
-              <el-radio v-model="radio" label="2">活跃节点</el-radio>
-              <el-radio v-model="radio" label="3">活跃应用</el-radio>
+              <el-radio-group v-model="radio" @change="changeType">
+                <el-radio label="1">活跃用户</el-radio>
+                <el-radio label="2">活跃节点</el-radio>
+                <el-radio label="3">活跃应用</el-radio>
+              </el-radio-group>
             </el-col>
-            <el-col :span="8" class="right">更新时间：2020-5-19_00:00:00</el-col>
+            <el-col :span="8" class="right">更新时间：{{ toDay }}</el-col>
           </el-col>
           <el-col :span="24" class="table">
-            <el-table :data="tableData" border style="width: 100%">
-              <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
-              <el-table-column prop="name" label="用户" align="center"> </el-table-column>
-              <el-table-column prop="yingxing" label="运行作业" align="center"> </el-table-column>
-              <el-table-column prop="paidui" label="排队作业" align="center"> </el-table-column>
-              <el-table-column prop="heshu" label="运行核数" align="center"> </el-table-column>
-              <el-table-column prop="diaduiheshu" label="排队核数" align="center"> </el-table-column>
-              <el-table-column prop="huoyue" label="活跃结点" align="center"> </el-table-column>
-            </el-table>
+            <span v-if="radio == '1'">
+              <el-table :data="hyyh" border style="width: 100%">
+                <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
+                <el-table-column prop="user" label="用户" align="center" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="pr" label="进程调度" align="center" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="ni" label="进程nice值" align="center" show-overflow-tooltip> </el-table-column>
+                <!-- <el-table-column prop="virt" label="虚拟内存" align="center" show-overflow-tooltip> </el-table-column> -->
+                <el-table-column prop="res" label="驻留内存" align="center" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="shr" label="共享内存" align="center" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="s" label="进程状态" align="center" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="cpu" label="CPU时间" align="center" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="mem" label="物理内存" align="center" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="command" label="进程指令" align="center" show-overflow-tooltip> </el-table-column>
+                <!-- <el-table-column prop="time" label="全部CPU时间" align="center" show-overflow-tooltip> </el-table-column> -->
+              </el-table>
+            </span>
+            <span v-else-if="radio == '2'">
+              <el-table :data="hyjd" border style="width: 100%">
+                <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
+                <el-table-column prop="uname" label="用户" align="center" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="jobs" label="运行作业" align="center" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="physmem" label="作业占用内存" align="center" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="np" label="可用核数" align="center" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="ncpus" label="运行核数" align="center" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="node" label="活跃结点" align="center" show-overflow-tooltip> </el-table-column>
+              </el-table>
+            </span>
+            <span v-else-if="radio == '3'">
+              <el-table :data="hyyy" border style="width: 100%">
+                <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
+                <el-table-column prop="user" label="应用" align="center" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="pr" label="进程调度" align="center" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="ni" label="进程nice值" align="center" show-overflow-tooltip> </el-table-column>
+                <!-- <el-table-column prop="virt" label="虚拟内存" align="center" show-overflow-tooltip> </el-table-column> -->
+                <el-table-column prop="res" label="驻留内存" align="center" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="shr" label="共享内存" align="center" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="s" label="进程状态" align="center" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="cpu" label="CPU时间" align="center" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="mem" label="物理内存" align="center" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="command" label="进程指令" align="center" show-overflow-tooltip> </el-table-column>
+                <!-- <el-table-column prop="time" label="全部CPU时间" align="center" show-overflow-tooltip> </el-table-column> -->
+              </el-table>
+            </span>
           </el-col>
         </el-col>
       </el-col>
@@ -36,6 +72,7 @@
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: topmessage } = createNamespacedHelpers('topmessage');
+import moment from 'moment';
 export default {
   name: 'sign',
   props: {
@@ -44,14 +81,20 @@ export default {
   components: {},
   data: function() {
     return {
+      // 显示类型
       radio: '1',
-      tableData: [
-        { name: '测试', yingxing: '0', heshu: '0', paidui: '0', diaduiheshu: '230', huoyue: 'era' },
-        { name: '测试', yingxing: '0', heshu: '0', paidui: '0', diaduiheshu: '230', huoyue: 'era' },
-      ],
+      // 活跃用户
+      hyyh: [],
+      // 活跃结点
+      hyjd: [],
+      // 活跃应用
+      hyyy: [],
+      toDay: '',
     };
   },
   async created() {
+    let toDay = moment().format('YYYY-MM-DD HH:mm:ss');
+    this.$set(this, `toDay`, toDay);
     await this.search();
   },
   mounted() {
@@ -59,9 +102,12 @@ export default {
   },
   methods: {
     ...topmessage(['query', 'fetch', 'update', 'create', 'delete']),
-    async search({ skip = 0, limit = 10, ...info } = {}) {
-      let res = await this.query();
-      console.log(res);
+    async search({ skip = 0, limit = 300, ...info } = {}) {
+      let res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `hyyh`, res.data);
+        this.$set(this, `hyyy`, res.data.reverse());
+      }
     },
     channel() {
       this.$stomp({
@@ -69,7 +115,13 @@ export default {
       });
     },
     onMessage(message) {
-      console.log(message);
+      let data = JSON.parse(message.body).filter(i => i.node != 'gpu01');
+      this.$set(this, 'hyjd', data);
+    },
+    // 选择类型
+    changeType(label) {
+      this.$set(this, `radio`, label);
+      console.log(this.radio);
     },
   },
   computed: {
@@ -109,7 +161,7 @@ export default {
 .info {
   border-top: 2px solid #054982;
   background-image: linear-gradient(0deg, #c4e0ec, #f0f7fa);
-  min-height: 700px;
+  min-height: 695px;
   .top {
     height: 50px;
     line-height: 50px;
@@ -130,6 +182,10 @@ export default {
       float: right;
     }
   }
+  .table {
+    height: 641px;
+    overflow: hidden;
+  }
 }
 /deep/.el-radio {
   color: #606266;