Blame view

ant-design-vue-jeecg/src/views/modules/monitor/RedisInfo.vue 4.6 KB
肖超群 authored
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <a-skeleton active :loading="loading" :paragraph="{rows: 17}">
    <a-card>
      <!-- Redis 信息实时监控 -->
      <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>
肖超群 authored
25
26
27
import moment from 'moment'
import {getAction} from '@/api/manage'
import AreaChartTy from '@/components/chart/AreaChartTy'
肖超群 authored
28
肖超群 authored
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
export default {
  name: 'RedisInfo',
  components: {
    AreaChartTy
  },
  data() {
    return {
      loading: true,
      tableLoading: true,
      // 定时器ID
      timer: null,
      // 定时器周期
      millisec: 3000,
      // Key 实时数量
      key: {
        title: 'Redis Key 实时数量(个)',
        dataSource: [],
        y: '数量(个)',
        height: 340,
        min: 0,
        max: 100,
        color: '#FF6987',
        lineSize: 8,
        lineColor: '#DC143C'
肖超群 authored
53
      },
肖超群 authored
54
55
56
57
58
59
60
61
62
      // 内存实时占用情况
      memory: {
        title: 'Redis 内存实时占用情况(KB)',
        dataSource: [],
        y: '内存(KB)',
        min: 0,
        max: 3000,
        height: 340,
        lineSize: 8
肖超群 authored
63
      },
肖超群 authored
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
      redisInfo: [],
      columns: [{
        title: 'Key',
        align: 'center',
        dataIndex: 'key'
      }, {
        title: 'Description',
        align: 'left',
        dataIndex: 'description'
      }, {
        title: 'Value',
        align: 'center',
        dataIndex: 'value'
      }],
      url: {
        keysSize: '/sys/actuator/redis/keysSize',
        memoryInfo: '/sys/actuator/redis/memoryInfo',
        info: '/sys/actuator/redis/info'
      },
      path: '/monitor/redis/info'
    }
  },
  mounted() {
    this.openTimer()
    this.loadRedisInfo()
    setTimeout(() => {
      this.loadData()
    }, 1000)
  },
  beforeDestroy() {
    this.closeTimer()
  },
  methods: {
肖超群 authored
97
肖超群 authored
98
99
100
101
102
103
104
105
106
107
    /** 开启定时器 */
    openTimer() {
      this.loadData()
      this.closeTimer()
      this.timer = setInterval(() => {
        if (this.$route.path === this.path) {
          this.loadData()
        }
      }, this.millisec)
    },
肖超群 authored
108
肖超群 authored
109
110
111
112
    /** 关闭定时器 */
    closeTimer() {
      if (this.timer) clearInterval(this.timer)
    },
肖超群 authored
113
肖超群 authored
114
115
116
117
118
119
120
    /** 查询数据 */
    loadData() {
      Promise.all([
        getAction(this.url.keysSize),
        getAction(this.url.memoryInfo)
      ]).then((res) => {
        let time = moment().format('hh:mm:ss')
肖超群 authored
121
肖超群 authored
122
123
        let [{dbSize: currentSize}, memoryInfo] = res
        let currentMemory = memoryInfo.used_memory / 1000
肖超群 authored
124
肖超群 authored
125
126
127
128
129
130
131
132
        // 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)
        }
肖超群 authored
133
肖超群 authored
134
135
136
137
138
        // 计算 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
肖超群 authored
139
肖超群 authored
140
141
142
143
144
        // 计算 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
肖超群 authored
145
肖超群 authored
146
147
148
149
150
151
152
      }).catch((e) => {
        console.error(e)
        this.closeTimer()
        this.$message.error('获取 Redis 信息失败')
      }).finally(() => {
        this.loading = false
      })
肖超群 authored
153
肖超群 authored
154
    },
肖超群 authored
155
肖超群 authored
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
    // 获取一组数据中最大和最小的值
    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
      })
肖超群 authored
184
    }
肖超群 authored
185
肖超群 authored
186
  }
肖超群 authored
187
}
肖超群 authored
188
189
</script>
<style></style>