state.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. <template>
  2. <div>
  3. <el-row :gutter="15" class="system_state">
  4. <el-col :span="12">
  5. <el-card v-if="state.os" class="card_item">
  6. <template #header>
  7. <div>Runtime</div>
  8. </template>
  9. <div>
  10. <el-row :gutter="10">
  11. <el-col :span="12">os:</el-col>
  12. <el-col :span="12" v-text="state.os.goos" />
  13. </el-row>
  14. <el-row :gutter="10">
  15. <el-col :span="12">cpu nums:</el-col>
  16. <el-col :span="12" v-text="state.os.numCpu" />
  17. </el-row>
  18. <el-row :gutter="10">
  19. <el-col :span="12">compiler:</el-col>
  20. <el-col :span="12" v-text="state.os.compiler" />
  21. </el-row>
  22. <el-row :gutter="10">
  23. <el-col :span="12">go version:</el-col>
  24. <el-col :span="12" v-text="state.os.goVersion" />
  25. </el-row>
  26. <el-row :gutter="10">
  27. <el-col :span="12">goroutine nums:</el-col>
  28. <el-col :span="12" v-text="state.os.numGoroutine" />
  29. </el-row>
  30. </div>
  31. </el-card>
  32. </el-col>
  33. <el-col :span="12">
  34. <el-card v-if="state.disk" class="card_item">
  35. <template #header>
  36. <div>Disk</div>
  37. </template>
  38. <div>
  39. <el-row :gutter="10">
  40. <el-col :span="12">
  41. <el-row :gutter="10">
  42. <el-col :span="12">total (MB)</el-col>
  43. <el-col :span="12" v-text="state.disk.totalMb" />
  44. </el-row>
  45. <el-row :gutter="10">
  46. <el-col :span="12">used (MB)</el-col>
  47. <el-col :span="12" v-text="state.disk.usedMb" />
  48. </el-row>
  49. <el-row :gutter="10">
  50. <el-col :span="12">total (GB)</el-col>
  51. <el-col :span="12" v-text="state.disk.totalGb" />
  52. </el-row>
  53. <el-row :gutter="10">
  54. <el-col :span="12">used (GB)</el-col>
  55. <el-col :span="12" v-text="state.disk.usedGb" />
  56. </el-row>
  57. </el-col>
  58. <el-col :span="12">
  59. <el-progress
  60. type="dashboard"
  61. :percentage="state.disk.usedPercent"
  62. :color="colors"
  63. />
  64. </el-col>
  65. </el-row>
  66. </div>
  67. </el-card>
  68. </el-col>
  69. </el-row>
  70. <el-row :gutter="15" class="system_state">
  71. <el-col :span="12">
  72. <el-card
  73. v-if="state.cpu"
  74. class="card_item"
  75. :body-style="{ height: '180px', 'overflow-y': 'scroll' }"
  76. >
  77. <template #header>
  78. <div>CPU</div>
  79. </template>
  80. <div>
  81. <el-row :gutter="10">
  82. <el-col :span="12">physical number of cores:</el-col>
  83. <el-col :span="12" v-text="state.cpu.cores" />
  84. </el-row>
  85. <el-row v-for="(item, index) in state.cpu.cpus" :key="index" :gutter="10">
  86. <el-col :span="12">core {{ index }}:</el-col>
  87. <el-col
  88. :span="12"
  89. ><el-progress
  90. type="line"
  91. :percentage="+item.toFixed(0)"
  92. :color="colors"
  93. /></el-col>
  94. </el-row>
  95. </div>
  96. </el-card>
  97. </el-col>
  98. <el-col :span="12">
  99. <el-card v-if="state.ram" class="card_item">
  100. <template #header>
  101. <div>Ram</div>
  102. </template>
  103. <div>
  104. <el-row :gutter="10">
  105. <el-col :span="12">
  106. <el-row :gutter="10">
  107. <el-col :span="12">total (MB)</el-col>
  108. <el-col :span="12" v-text="state.ram.totalMb" />
  109. </el-row>
  110. <el-row :gutter="10">
  111. <el-col :span="12">used (MB)</el-col>
  112. <el-col :span="12" v-text="state.ram.usedMb" />
  113. </el-row>
  114. <el-row :gutter="10">
  115. <el-col :span="12">total (GB)</el-col>
  116. <el-col :span="12" v-text="state.ram.totalMb / 1024" />
  117. </el-row>
  118. <el-row :gutter="10">
  119. <el-col :span="12">used (GB)</el-col>
  120. <el-col
  121. :span="12"
  122. v-text="(state.ram.usedMb / 1024).toFixed(2)"
  123. />
  124. </el-row>
  125. </el-col>
  126. <el-col :span="12">
  127. <el-progress
  128. type="dashboard"
  129. :percentage="state.ram.usedPercent"
  130. :color="colors"
  131. />
  132. </el-col>
  133. </el-row>
  134. </div>
  135. </el-card>
  136. </el-col>
  137. </el-row>
  138. </div>
  139. </template>
  140. <script>
  141. import { getSystemState } from '@/api/system'
  142. export default {
  143. name: 'State',
  144. data() {
  145. return {
  146. timer: null,
  147. state: {},
  148. colors: [
  149. { color: '#5cb87a', percentage: 20 },
  150. { color: '#e6a23c', percentage: 40 },
  151. { color: '#f56c6c', percentage: 80 }
  152. ]
  153. }
  154. },
  155. created() {
  156. this.reload()
  157. this.timer = setInterval(() => {
  158. this.reload()
  159. }, 1000 * 10)
  160. },
  161. beforeDestroy() {
  162. clearInterval(this.timer)
  163. this.timer = null
  164. },
  165. methods: {
  166. async reload() {
  167. const { data } = await getSystemState()
  168. this.state = data.server
  169. }
  170. }
  171. }
  172. </script>
  173. <style>
  174. .system_state {
  175. padding: 10px;
  176. }
  177. .card_item {
  178. height: 280px;
  179. }
  180. </style>