JEECG-BOOT 2.0.2版本发布

ant-design-vue-jeecg/src/views/modules/monitor/RedisInfo.vue

@@ -0,0 +1,189 @@
+<template>
+  <a-skeleton active :loading="loading" :paragraph="{rows: 17}">
+    <a-card>
+      <!-- Radis 信息实时监控 -->
+      <a-row :gutter="8">
+        <a-col :sm="24" :xl="12">
+          <area-chart-ty v-bind="memory"/>
+        </a-col>
+        <a-col :sm="24" :xl="12">
+          <area-chart-ty v-bind="key"/>
+        </a-col>
+      </a-row>
+
+      <h3>Redis 详细信息</h3>
+      <a-table
+        :loading="tableLoading"
+        :columns="columns"
+        :dataSource="redisInfo"
+        :pagination="false"/>
+
+    </a-card>
+  </a-skeleton>
+</template>
+<script>
+  import moment from 'moment'
+  import { getAction } from '@/api/manage'
+  import AreaChartTy from '@/components/chart/AreaChartTy'
+
+  export default {
+    name: 'RedisInfo',
+    components: {
+      AreaChartTy
+    },
+    data() {
+      return {
+        loading: true,
+        tableLoading: true,
+        // 定时器ID
+        timer: null,
+        // 定时器周期
+        millisec: 3000,
+        // Key 实时数量
+        key: {
+          title: 'Radis Key 实时数量（个）',
+          dataSource: [],
+          y: '数量（个）',
+          height: 340,
+          min: 0,
+          max: 100,
+          color: '#FF6987',
+          lineSize: 8,
+          lineColor: '#DC143C'
+        },
+        // 内存实时占用情况
+        memory: {
+          title: 'Radis 内存实时占用情况（KB）',
+          dataSource: [],
+          y: '内存（KB）',
+          min: 0,
+          max: 3000,
+          height: 340,
+          lineSize: 8
+        },
+        redisInfo: [],
+        columns: [{
+          title: 'Key',
+          align: 'center',
+          dataIndex: 'key'
+        }, {
+          title: 'Description',
+          align: 'left',
+          dataIndex: 'description'
+        }, {
+          title: 'Value',
+          align: 'center',
+          dataIndex: 'value'
+        }],
+        url: {
+          keysSize: '/actuator/redis/keysSize',
+          memoryInfo: '/actuator/redis/memoryInfo',
+          info: '/actuator/redis/info'
+        },
+        path: '/monitor/redis/info'
+      }
+    },
+    mounted() {
+      this.openTimer()
+      this.loadRedisInfo()
+      setTimeout(() => {
+        this.loadData()
+      }, 1000)
+    },
+    beforeDestroy() {
+      this.closeTimer()
+    },
+    methods: {
+
+      /** 开启定时器 */
+      openTimer() {
+        this.loadData()
+        this.closeTimer()
+        this.timer = setInterval(() => {
+          if (this.$route.path === this.path) {
+            this.loadData()
+          }
+        }, this.millisec)
+      },
+
+      /** 关闭定时器 */
+      closeTimer() {
+        if (this.timer) clearInterval(this.timer)
+      },
+
+      /** 查询数据 */
+      loadData() {
+        Promise.all([
+          getAction(this.url.keysSize),
+          getAction(this.url.memoryInfo)
+        ]).then((res) => {
+          let time = moment().format('hh:mm:ss')
+
+          let [{ dbSize: currentSize }, memoryInfo] = res
+          let currentMemory = memoryInfo.used_memory / 1000
+
+          // push 数据
+          this.key.dataSource.push({ x: time, y: currentSize })
+          this.memory.dataSource.push({ x: time, y: currentMemory })
+          // 最大长度为6
+          if (this.key.dataSource.length > 6) {
+            this.key.dataSource.splice(0, 1)
+            this.memory.dataSource.splice(0, 1)
+          }
+
+          // 计算 Key 最大最小值
+          let keyPole = this.getMaxAndMin(this.key.dataSource, 'y')
+          this.key.max = Math.floor(keyPole[0]) + 10
+          this.key.min = Math.floor(keyPole[1]) - 10
+          if (this.key.min < 0) this.key.min = 0
+
+          // 计算 Memory 最大最小值
+          let memoryPole = this.getMaxAndMin(this.memory.dataSource, 'y')
+          this.memory.max = Math.floor(memoryPole[0]) + 100
+          this.memory.min = Math.floor(memoryPole[1]) - 100
+          if (this.memory.min < 0) this.memory.min = 0
+
+        }).catch((e) => {
+          console.error(e)
+          this.closeTimer()
+          this.$message.error('获取 Redis 信息失败')
+        }).finally(() => {
+          this.loading = false
+        })
+
+      },
+
+      // 获取一组数据中最大和最小的值
+      getMaxAndMin(dataSource, field) {
+        let maxValue = null, minValue = null
+        dataSource.forEach(item => {
+          let value = Number.parseInt(item[field])
+          // max
+          if (maxValue == null) {
+            maxValue = value
+          } else if (value > maxValue) {
+            maxValue = value
+          }
+          // min
+          if (minValue == null) {
+            minValue = value
+          } else if (value < minValue) {
+            minValue = value
+          }
+        })
+        return [maxValue, minValue]
+      },
+
+      loadRedisInfo() {
+        this.tableLoading = true
+        getAction(this.url.info).then((res) => {
+          this.redisInfo = res.result
+        }).finally(() => {
+          this.tableLoading = false
+        })
+      }
+
+    }
+  }
+</script>
+<style></style>