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 in list"
          :key="item.value"
          class="itemBox"
          :style="{
            borderColor: item.state ? '#dcdcdc' : '#e14b33',
            background: item.state ? '' : '#FFF2F2 ',
          }"
        >
          <div
            class="item_title"
            :style="{ color: item.state ? '' : '#E14B33  ' }"
          >
            权限服务
          </div>
          <div
            class="item_EnTitle"
            :style="{ color: item.state ? '#999999' : '#E14B33 ' }"
          >
            AuthApplication
          </div>
          <div
            class="color_block"
            :style="{ background: item.state ? '#4fd069' : '#e14b33' }"
          ></div>
          <div class="item_bottom">
            <div>状态</div>
            <div :style="{ color: item.state ? '#26B843' : '#E14B33' }">
              {{ item.state ? "正常" : "服务已挂" }}
            </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"
      >
        <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 class="content_box3">
        <div
          class="item_title content_title"
          style="height: 0; width: 100%; margin-bottom: 20px"
        >
          <img src="./icon/icon4.png" alt="" />
          系统硬件监控
        </div>
        <div style="display: flex; max-width: 1280px">
          <div v-for="item in list2" :key="item.value" class="itemBox3">
            <div class="item_title">权限服务</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;
                "
              ></div>
            </div>
            <div class="item_bottom">
              <div>状态</div>
              <div>正常</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { color } from "echarts";

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 },
      ],
    };
  },
  watch: {},
  computed: {},
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.page {
  padding: 30px 20px;
}
.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 {
  border: 1px solid #dcdcdc;
  height: 520px;
  padding: 20px 0 0 20px;
}
.content_box3 {
  padding: 20px;
  flex: 1;
  height: 178px;
  border: 1px solid #dcdcdc;
}
.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: 200px;
  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: 20px 0 14px 0;
  }
}
.itemBox3 {
  width: 210px;
  height: 154px;
  border: 1px solid #dcdcdc;
  margin: 0 20px 30px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.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;
  }
}
</style>