smartpark-front/src/page/opsVisualization/systemMonitoring/index.vue

<template>
  <div class="page">
    <!-- <div class="search_box">
      <el-select class="search_select" placeholder="按服务类别查询">
      </el-select>
      <el-input class="search_input" />
      <el-button class="search_button">
        <i class="el-icon-search"></i>
      </el-button>
    </div> -->
    <div class="content_box1">
      <div class="content_title">
        <img src="./icon/icon1.png" alt="" />
        应用服务
      </div>
      <div class="flexBox">
        <div
          v-for="(item, index) in serviceListData"
          :key="index"
          class="itemBox"
          :style="{
            borderColor: item.color != 'red' ? '#dcdcdc' : '#e14b33',
            background: item.color != 'red' ? '' : '#FFF2F2 ',
          }"
        >
          <div
            class="item_title"
            :style="{ color: item.color != 'red' ? '' : '#E14B33  ' }"
          >
            {{ item.name }}
          </div>
          <!-- <div
            class="item_EnTitle"
            :style="{ color: item.state ? '#999999' : '#E14B33 ' }"
          >
            AuthApplication
          </div> -->
          <div
            class="color_block"
            :style="{ background: item.color != 'red' ? '#4fd069' : '#e14b33' }"
          >
            <img :src="item.icon" alt="">
          </div>
          <div class="item_bottom">
            <div>状态</div>
            <div :style="{ color: item.color != 'red' ? '#26B843' : '#E14B33' }">
              {{ item.color != 'red' ? "正常" : "设备异常" }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content_box2" style="margin-top: 30px; display: flex">
      <div
        class="itemBox"
        style="width: 240px; height: 216px; position: relative"
        v-for="(item, index) in middleListData"
        :key="index"
        :style="{
          borderColor: item.result != 'result' ? '#dcdcdc' : '#e14b33',
          background: item.result != 'result' ? '' : '#FFF2F2 ',
        }"
      >
        <div
          class="item_title content_title"
        >
          <img :src="item.type == 'redis' ? require('./icon/icon2.png') : require('./icon/icon3.png')" alt="" />
          {{ item.type == 'redis' ? 'Redis服务监控' : '数据库监控' }}
        </div>
        <div
          class="color_block"
          :style="{ background: item.result != 'result' ? '#4fd069' : '#e14b33' }"
        >
          <img :src="item.icon" alt="">
        </div>
        <div class="item_bottom">
          <div>状态</div>
            <div :style="{ color: item.result != 'result' ? '#26B843' : '#E14B33' }">
              {{ item.result != 'result' ? "正常" : "服务已挂" }}
            </div>
        </div>
      </div>
      <!-- <div
        class="itemBox"
        style="width: 240px; height: 216px; position: relative"
      >
        <div
          class="item_title content_title"
          style="position: absolute; left: 20px"
        >
          <img src="./icon/icon2.png" alt="" />
          Redis服务监控
        </div>
        <div
          style="
            width: 76px;
            height: 76px;
            background: #4fd069;
            margin: 92px 0 14px 0;
          "
        ></div>
        <div class="item_bottom">
          <div>状态</div>
          <div>正常</div>
        </div>
      </div>
      <div
        class="itemBox"
        style="
          width: 240px;
          height: 216px;
          margin-left: 27px;
          position: relative;
        "
      >
        <div
          class="item_title content_title"
          style="position: absolute; left: 20px"
        >
          <img src="./icon/icon3.png" alt="" />
          数据库监控
        </div>
        <div
          style="
            width: 76px;
            height: 76px;
            background: #4fd069;
            margin: 92px 0 14px 0;
          "
        ></div>
        <div class="item_bottom">
          <div>状态</div>
          <div>正常</div>
        </div>
      </div> -->
    </div>
    <div class="content_box3">
      <div
        class="item_title content_title"
        style="margin: 0; width: 100%; margin-bottom: 20px"
      >
        <img src="./icon/icon5.png" alt="" />
        系统硬件监控
      </div>
      <div class="bottom-box">
        <div v-for="(item, index) in serverParamsListData" :key="index" class="itemBox3">
          <div class="ip-title">{{ item[0].ip }}</div>
          <div v-for="(i, n) in item" :key="n" class="itemBox3_item">
            <div class="item_title">{{ i.monitorType == 'cpu' ? 'CPU使用率': (i.monitorType == 'memory' ? '内存使用率' : '硬盘使用率') }}</div>
            <!-- <div class="item_EnTitle">AuthApplication</div> -->
            <div
              style="
                width: 57px;
                height: 76px;
                background: #e8e8e8;
                margin: 20px 0 14px 0;
                position: relative;
              "
            >
              <div
                style="
                  background: green;
                  width: 100%;
                  height: 33%;
                  position: absolute;
                  bottom: 0;
                "
                :style="i.result == 'result' ? 'height: 66%; background: #F68031' : 'height: 33%; background: green'"
              ></div>
            </div>
            <div class="item_bottom">
              <div>状态</div>
              <div :style="i.result == 'result' ? 'color: #F68031' : 'color: green'">{{ i.result == 'result' ? '硬件异常' : i.result }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { color } from "echarts";
import { getServiceList, getMiddleList, getServerParamsList } from "@/api/opsVisualization/systemMonitoring";

export default {
  data() {
    return {
      list: [
        { name: "应用服务", value: 1, state: 1 },
        { name: "应用服务", value: 2, state: 1 },
        { name: "应用服务", value: 3, state: 0 },
        { name: "应用服务", value: 4, state: 1 },
        { name: "应用服务", value: 5, state: 1 },
        { name: "应用服务", value: 6, state: 1 },
        { name: "应用服务", value: 7, state: 1 },
        { name: "应用服务", value: 8, state: 1 },
        { name: "应用服务", value: 9, state: 1 },
        { name: "应用服务", value: 10, state: 0 },
        { name: "应用服务", value: 11, state: 1 },
        { name: "应用服务", value: 12, state: 1 },
      ],
      list2: [
        { name: "应用服务", value: 1, state: 1 },
        { name: "应用服务", value: 2, state: 1 },
        { name: "应用服务", value: 3, state: 1 },
        { name: "应用服务", value: 4, state: 1 },
        { name: "应用服务", value: 5, state: 1 },
      ],
      serviceListData: [],
      middleListData: [],
      serverParamsListData: [],
    };
  },
  watch: {},
  computed: {},
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      const getServiceListData = await getServiceList()
      this.serviceListData = getServiceListData.data.data
      const getMiddleListData = await getMiddleList()
      this.middleListData = getMiddleListData.data.data
      const getServerParamsListData = await getServerParamsList()
      let data = getServerParamsListData.data.data;
      const groupedData = new Map();

      data.forEach(item => {
        // 获取当前对象的IP地址
        const ip = item.ip;
        // 如果Map中还没有这个IP的条目，则创建一个新的数组
        if (!groupedData.has(ip)) {
          groupedData.set(ip, []);
        }
        // 将当前对象添加到对应IP的数组中
        groupedData.get(ip).push(item);
        console.log(groupedData);
      });
      this.serverParamsListData = Array.from(groupedData.values());
      console.log(this.serverParamsListData)
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 30px 0 0 238px !important;
}
.search_box {
  display: flex;
  margin-bottom: 30px;
  .search_select {
    // width: 138px;
    height: 40px;
  }
  .search_input {
    width: 238px;
    height: 40px;
    margin: 0 14px;
  }
  /deep/.el-input__inner {
    border-radius: 0;
  }
  .search_button {
    width: 50px;
    height: 40px;
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-icon-search {
      font-size: 19px;
      color: #c9c9c9;
    }
  }
}
.content_box1 {
  width: 1640px;
  // height: 498px;
  border: 1px solid #dcdcdc;
  padding: 20px 0 0 20px;
}
.content_box3 {
  width: 1640px;
  // height: 498px;
  border: 1px solid #dcdcdc;
  padding: 20px;
}
.content_title {
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  > img {
    margin-right: 13px;
  }
}
.flexBox {
  display: flex;
  margin-top: 20px;
  flex-wrap: wrap;
}
.itemBox {
  width: 210px;
  height: 212px;
  border: 1px solid #dcdcdc;
  margin: 0 20px 30px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  .color_block {
    width: 76px;
    height: 76px;
    margin: 40px 0 14px 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.itemBox3 {
  width: 100%;
  height: 224px;
  // border: 1px solid #dcdcdc;
  margin: 0 20px 30px 0;
  display: flex;
  // flex-direction: column;
  align-items: center;
  position: relative;
    padding-top: 60px;
}
.item_title {
  font-weight: bold;
  margin: 20px 0 2px 0;
}
.item_EnTitle {
  font-size: 14px;
}
.item_bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  > :nth-child(1) {
    margin-left: 20px;
    font-size: 12px;
    color: #333333;
  }
  > :nth-child(2) {
    margin-right: 20px;
    font-size: 12px;
    color: #26b843;
  }
}
.itemBox3_item{
  width: 210px;
  height: 182px;
  border: 1px solid #dcdcdc;
  margin: 0 20px 30px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bottom-box{
  width: 100%;
  display: flex;
  flex-direction: column;
  // max-width: 1280px
}
.ip-title{
  position: absolute;
  top: 10px;
  left: 10px;
  font-weight: bold;
}
</style>