完成全部功能

src/api/common.js

@@ -39,3 +39,19 @@ export function queryEmergencyResource(params) {
     data: params
   })
 }
+
+export function getServerInfo(params) {
+  return request({
+    url: '/api/team/base/getServerInfo',
+    method: 'POST',
+    data: params
+  })
+}
+
+export function queryResourceList(params) {
+  return request({
+    url: '/api/team/resource/queryResourceList',
+    method: 'POST',
+    data: params
+  })
+}

src/page/monitor/components/echartsGauge.vue

+<template>
+  <div class="main">
+    <div
+      class="chart"
+      ref="chart"
+    >
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    pie: {
+      type: Number,
+      default: ''
+    },
+    startColor: {
+      type: String,
+      default: '#0269D8'
+    },
+    endColor: {
+      type: String,
+      default: '#7CC6F5'
+    }
+  },
+  watch: {
+    pie: function(val) {
+      if (val) {
+        this.init()
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      const myChart = this.chart || echarts.init(this.$refs.chart);
+      let option = {
+        tooltip: {
+          formatter: '{a} <br/>{b} : {c}%'
+        },
+        series: [{
+          name: this.title,
+          type: 'gauge',
+          radius: '100%',
+          progress: {
+            show: true,
+            width: 20,
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0, color: this.startColor
+                }, {
+                  offset: 1, color: this.endColor
+                }],
+                global: false
+              }
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              width: 18
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            length: 5,
+            distance: 10,
+            lineStyle: {
+              width: 1,
+              color: '#979797'
+            }
+          },
+          axisLabel: {
+            color: '#888888',
+            fontSize: 12,
+            distance: 23,
+            lineStyle: {
+              width: 1,
+              color: '#979797'
+            }
+          },
+          pointer: {
+            width: 4,
+            itemStyle: {
+              color: '#4694E8'
+            }
+          },
+          anchor: {
+            show: true,
+            showAbove: true,
+            size: 12,
+            itemStyle: {
+              borderWidth: 4,
+              borderColor: '#4694E8'
+            }
+          },
+          title: {
+            show: false
+          },
+          detail: {
+            fontSize: 24,
+            fontWeight: 500,
+            color: '#000000',
+            offsetCenter: [0, '70%'],
+            valueAnimation: true,
+            formatter: '{value}%'
+          },
+          data: [{
+            value: this.pie
+          }]
+        }]
+      };
+      myChart.setOption(option);
+      this.chart = myChart
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.main {
+  height: 300px;
+  width: 100%;
+  .chart {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
\ No newline at end of file

src/page/monitor/components/echartsLine.vue

+<template>
+  <div class="main">
+    <div
+      class="chart"
+      ref="chart"
+    >
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  props: {
+    dataList: {
+      type: Array,
+      default: []
+    },
+    bColor: {
+      type: String,
+      default: ''
+    },
+    lineColor: {
+      type: String,
+      default: ''
+    }
+  },
+  watch: {
+    dataList: function(val) {
+      if (val.length > 0) {
+        this.init()
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      const myChart = this.chart || echarts.init(this.$refs.chart);
+      let option = {
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+        },
+        yAxis: {
+          type: 'value',
+          min: 0,
+          max: 100
+        },
+        grid: {
+          left: 28,
+          right: 28,
+          top: 33,
+          bottom: 46
+        },
+        series: [{
+          data: this.dataList,
+          type: 'line',
+          areaStyle: {
+            color: this.bColor
+          },
+          symbol: 'none',
+          lineStyle: {
+            color: this.lineColor
+          }
+        }]
+      };
+
+      myChart.setOption(option);
+      this.chart = myChart
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.main {
+  height: 280px;
+  width: 100%;
+  .chart {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
\ No newline at end of file

src/page/monitor/components/progress.vue

+<template>
+  <div class="pro">
+    <div
+      class="pro-bar"
+      :style="'width:' + (100 -  pie) + '%'"
+    >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    pie: {
+      type: Number,
+      default: 0
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+$bg: #e6ebf8;
+
+.pro {
+  position: relative;
+  height: 14px;
+  background: linear-gradient(
+    90deg,
+    #11e9ff 0%,
+    #ffdf89 52%,
+    #ff9989 85%,
+    #ff3434 100%
+  );
+  &::after {
+    width: 100%;
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 14px;
+    background-image: linear-gradient(
+      90deg,
+      transparent 0,
+      transparent 25%,
+      $bg 25%,
+      $bg 50%,
+      transparent 50%,
+      transparent 75%,
+      $bg 75%,
+      $bg
+    );
+    background-size: 12px 12px;
+  }
+  .pro-bar {
+    width: 100%;
+    height: 14px;
+    background: $bg;
+    float: right;
+    animation: animate-positive 0.3s;
+  }
+}
+@keyframes animate-positive {
+  0% {
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file

src/page/monitor/index.vue

+<template>
+  <div class="main-page monitor">
+    <div class="page-box">
+      <div class="title">服务器监控</div>
+      <el-row class="top">
+        <el-col
+          class="bl"
+          :span="8"
+        >
+          <p class="title_p">CPU使用率</p>
+          <EchartsGauge
+            title="CPU使用率"
+            :pie="toNum(cpu)"
+          />
+        </el-col>
+        <el-col
+          class="bl"
+          :span="8"
+        >
+          <p class="title_p">内存使用率</p>
+          <EchartsGauge
+            title="磁盘使用率"
+            :pie="toNum(neicun)"
+            endColor="#90E5E5"
+            startColor="#23C7C7"
+          />
+        </el-col>
+        <el-col :span="8">
+          <p class="title_p">磁盘使用率</p>
+          <ul class="porList">
+            <li
+              v-for="(item, index) in ciPanlist"
+              :key="index"
+            >
+              <p class="p1">{{item['dir.name']}}：{{toNum(item['usage.use.percent'])}}%</p>
+              <Progress :pie="toNum(item['usage.use.percent'])" />
+              <p class="p2">0 <span>100</span></p>
+            </li>
+          </ul>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="page-box">
+      <div class="title">资源明细</div>
+      <el-row class="bottom">
+        <el-col
+          :span="12"
+          class="bl bd"
+        >
+          <div class="head clear">
+            <span class="t">CPU使用率(单位:%)</span>
+            <el-radio-group
+              v-model="selectTime1"
+              size="small"
+              style="float: right"
+              @change="changeHandle1"
+            >
+              <el-radio-button :label="1">1小时</el-radio-button>
+              <el-radio-button :label="6">6小时</el-radio-button>
+              <el-radio-button :label="12">12小时</el-radio-button>
+              <el-radio-button :label="24">24小时</el-radio-button>
+            </el-radio-group>
+          </div>
+          <EchartsLine
+            :dataList="cpuList"
+            bColor="#DAEAFA"
+            lineColor="#0873E7"
+          />
+        </el-col>
+        <el-col
+          :span="12"
+          class="bd"
+        >
+          <div class="head clear">
+            <span class="t">内存使用率(单位:%)</span>
+            <el-radio-group
+              v-model="selectTime2"
+              size="small"
+              style="float: right"
+              @change="changeHandle2"
+            >
+              <el-radio-button :label="1">1小时</el-radio-button>
+              <el-radio-button :label="6">6小时</el-radio-button>
+              <el-radio-button :label="12">12小时</el-radio-button>
+              <el-radio-button :label="24">24小时</el-radio-button>
+            </el-radio-group>
+          </div>
+          <EchartsLine
+            :dataList="ncList"
+            bColor="#D8EFEF"
+            lineColor="#15D8D8"
+          />
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script>
+import EchartsGauge from './components/echartsGauge.vue'
+import Progress from './components/progress.vue'
+import EchartsLine from './components/echartsLine.vue'
+import { getServerInfo, queryResourceList } from '@/api/common'
+export default {
+  name: 'monitor',
+  components: {
+    EchartsGauge,
+    Progress,
+    EchartsLine
+  },
+  data() {
+    return {
+      cpu: 0,
+      neicun: 0,
+      ciPanlist: [],
+      selectTime1: 1,
+      selectTime2: 1,
+      cpuList: [],
+      ncList: []
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      getServerInfo().then(res => {
+        const { cpu, ciPanlist, neicun } = res.respData
+        this.cpu = cpu
+        this.neicun = neicun
+        this.ciPanlist = ciPanlist
+      })
+      this.getBarData('cpu')
+      this.getBarData('内存')
+    },
+    getBarData(type) {
+      const params = {}
+      if (type === 'cpu') {
+        params.resourceType = 1
+        params.hour = this.selectTime1
+      } else if (type === '内存') {
+        params.resourceType = 2
+        params.hour = this.selectTime2
+      }
+      queryResourceList(params).then(res => {
+        const list = res.respData.map(item => [item.timeStr, this.toNum(item.utilizationRate)])
+        if (type === 'cpu') {
+          this.cpuList = list
+        } else if (type === '内存') {
+          this.ncList = list
+        }
+      })
+    },
+    changeHandle1() {
+      this.getBarData('cpu')
+    },
+    changeHandle2() {
+      this.getBarData('内存')
+    },
+    toNum(val) {
+      return parseInt(val) || 0
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.monitor {
+  .page-box {
+    background: #ffffff;
+    &:first-child {
+      margin-bottom: 24px;
+    }
+    .title {
+      font-weight: 500;
+      color: rgba(0, 0, 0, 0.87);
+      font-size: 20px;
+      line-height: 50px;
+      padding: 0 24px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    }
+    .bl {
+      border-right: 1px solid rgba(0, 0, 0, 0.1);
+    }
+    .top {
+      .title_p {
+        text-align: center;
+        padding: 30px 0 20px;
+        font-weight: 500;
+        color: rgba(0, 0, 0, 0.87);
+        font-size: 16px;
+      }
+      .porList {
+        margin: 10px 20px 0 40px;
+        padding-right: 20px;
+        max-height: 250px;
+        overflow-y: auto;
+        li {
+          margin-bottom: 24px;
+          .p1 {
+            font-size: 14px;
+            color: rgba(0, 0, 0, 0.87);
+            margin-bottom: 12px;
+          }
+          .p2 {
+            color: #888888;
+            line-height: 12px;
+            margin-top: 4px;
+            span {
+              float: right;
+            }
+          }
+        }
+      }
+    }
+    .bottom {
+      .bd {
+        padding: 24px 32px;
+      }
+      .head {
+        .t {
+          font-size: 14px;
+          color: #444444;
+          line-height: 32px;
+        }
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+.monitor {
+  .el-radio-button:first-child .el-radio-button__inner,
+  .el-radio-button:last-child .el-radio-button__inner {
+    border-radius: 0;
+  }
+  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+    color: #4495e6;
+    background: rgba(68, 149, 230, 0.1);
+    border-color: #4495e6;
+  }
+}
+</style>
\ No newline at end of file