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 ',
          }"
          @click="() => handleTo(item)"
        >
          <div
            class="item_title"
            :style="{ color: item.color != 'red' ? '' : '#E14B33  ' }"
          >
            {{ item.name }}
          </div>
          <div style="margin-top:20px;">{{item.monitorType}}</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"
        @click="() => handleTo(item)"
        :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 {
  getServiceList,
  getMiddleList,
  getServerParamsList,
} from "@/api/opsVisualization/systemMonitoring";

export default {
  data() {
    return {
      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);
    },
    // 跳转页面
    handleTo(detail) {
      this.$router.push({
        path: `/opsVisualization/alarmProcess?serviceCode=${detail.id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 30px !important;
  width: calc(100% - 218px);
  margin-left: 218px;
}
.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: 205px;
  height: 232px;
  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_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>