设备管理小样

mark

2022-10-21 1fe240406526b9b6256664559d3d2bec9250135c

 src/views/equipmentManagement/equipmentList/components/InfoCard.vue

@@ -1,8 +1,12 @@
<template>
  <div class="InfoCard">
    <span class="close iconfont" @click="close">&#xe60f;</span>
    <div class="header">
      <div class="name">{{ node.devName }}</div>
      <div class="close" @click="close">
        <span class="iconfont">&#xe60f;</span>
      </div>
    </div>

    <div class="name">{{ node.devName }}</div>
    <div class="info">
      <div class="head">
        <div class="title">设备信息</div>
@@ -10,6 +14,7 @@
          查看详情 >
        </div>
      </div>
      <div class="line"></div>
      <div class="item">
        <div class="label">设备型号:</div>
        <div class="data">{{ node.devMode }}</div>
@@ -25,7 +30,7 @@
        <div class="data">{{ node.channelCount }}</div>
      </div>

      <div class="item">
      <div class="item" style="margin-bottom: 0px;">
        <div class="label">内存:</div>
        <div class="data">{{ node.mem }}</div>
      </div>
@@ -35,12 +40,16 @@
      <div class="head">
        <div class="title">系统性能</div>
      </div>

      <div class="line"></div>

      <div class="propertyList" v-if="devicePerformance.length > 0">
        <div class="property">
          <el-progress
            type="circle"
            :percentage="devicePerformance[0].data"
            :stroke-width="25"
            :stroke-width="10"
            width="45"
            color="#0065FF"
          ></el-progress>
          <div class="num">{{ devicePerformance[0].data }}%</div>
@@ -51,7 +60,8 @@
          <el-progress
            type="circle"
            :percentage="devicePerformance[1].data"
            :stroke-width="25"
            :stroke-width="10"
            width="45"
            color="rgb(64, 182, 58)"
          ></el-progress>
          <div class="num">{{ devicePerformance[1].data }}%</div>
@@ -62,7 +72,8 @@
          <el-progress
            type="circle"
            :percentage="devicePerformance[2].data"
            :stroke-width="25"
            :stroke-width="10"
            width="45"
            color="rgb(255, 186, 74)"
          ></el-progress>
          <div class="num">{{ devicePerformance[2].data }}%</div>
@@ -73,7 +84,8 @@
          <el-progress
            type="circle"
            :percentage="devicePerformance[3].data"
            :stroke-width="25"
            :stroke-width="10"
            width="45"
            color="rgb(197, 35, 223)"
          ></el-progress>
          <div class="num">{{ devicePerformance[3].data }}%</div>
@@ -89,13 +101,13 @@
          查看详情 >
        </div>
      </div>

      <div class="line"></div>
      <div class="item">
        <div class="label">算法数量:</div>
        <div class="data">{{ algAll }}</div>
      </div>

      <div class="item">
      <div class="item" style="margin-bottom: 0px;">
        <div class="label">待升级算法数量:</div>
        <div class="data">{{ algUpgrade }}</div>
      </div>
@@ -104,202 +116,299 @@
</template>

<script>
import { findAllSdk, showSystemStates } from "@/api/device";
import { findAllSdk, showSystemStates } from "@/api/device"
export default {
  props: {
    node: {
      type: Object,
    },
      type: Object
    }
  },
  created() {
    this.getAlg();
    this.getDevicePerformance();
    this.getAlg()
    this.getDevicePerformance()
  },
  data() {
    return {
      algAll: 0, //所有算法
      algUpgrade: 0, //待升级的算法
      devicePerformance: [], //系统性能
    };
      devicePerformance: [] //系统性能
    }
  },
  methods: {
    //获取算法信息
    async getAlg() {
      const res = await findAllSdk({ userId: "", nodeId: this.node.devId });
      const res = await findAllSdk({ userId: "", nodeId: this.node.devId })

      res.data.forEach((item) => {
        //计算算法总数
        if (item.installed) {
          this.algAll++;
          this.algAll++
        }
        //计算待升级算法
        if (item.installed && item.isUpgrade) {
          this.algUpgrade++;
          this.algUpgrade++
        }
      });
      })
    },
    //获取设备性能
    async getDevicePerformance() {
      const res = await showSystemStates({
        userId: "",
        nodeId: this.node.devId,
      });
        nodeId: this.node.devId
      })
      this.devicePerformance.push({
        data: +res.data.mem.usedPercent.toString().split(".")[0],
        name: "内存",
        type: "mem",
      });
        type: "mem"
      })
      this.devicePerformance.push({
        data: +res.data.gpu.toString().split(".")[0],
        name: "算力",
        type: "gpu",
      });
        type: "gpu"
      })
      this.devicePerformance.push({
        data: +res.data.cpu.toString().split(".")[0],
        name: "cpu",
        type: "cpu",
      });
        type: "cpu"
      })

      let distData = 0;
      let distData = 0

      res.data.disk.forEach((item) => {
        let distItem = +item.info.usedPercent.toString().split(".")[0];
        distData = distData + distItem;
      });
        let distItem = +item.info.usedPercent.toString().split(".")[0]
        distData = distData + distItem
      })

      this.devicePerformance.push({
        data: distData,
        name: `硬盘`,
        type: "dist",
      });
        type: "dist"
      })

      console.log(this.devicePerformance);
      console.log(this.devicePerformance)
    },
    //关闭
    close() {
      this.$emit("close");
      this.$emit("close")
    },
    // 跳转详情页
    checkDetail(type) {
      this.$router.push({
        path: `/${type}`,
        query: {
          id: this.node.devId,
        },
      });
    },
  },
};
          id: this.node.devId
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.InfoCard {
  border-radius: 3px;
  box-sizing: border-box;
  padding: 20px 20px 10px 20px;
  padding: 10px;
  width: 270px;
  height: 488px;
  background-color: #fff;
  filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));

  .name {
    font-weight: bold;
    font-size: 18px;
  // background-color: red;
  // filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));
  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .name {
      font-family: PingFangSC-Bold;
      font-size: 16px;
      font-weight: normal;
      line-height: 24px;
      letter-spacing: 0px;
      color: #3d3d3d;
    }
    .close {
      width: 16px;
      height: 16px;
    }
  }

  .info {
    position: relative;
    box-sizing: border-box;
    padding: 10px;
    margin-top: 10px;
    background: rgba(233, 235, 238, 0.4);
    font-size: 14px;

    border-radius: 3px;
    opacity: 0.75;
    background: #f3f3f3;
    padding: 10px 16px 8px;
    margin-bottom: 10px;
    .head {
      display: flex;
      justify-content: space-between;

      margin-bottom: 8px;
      .title {
        font-weight: bold;
        font-family: PingFangSC-Bold;
        font-size: 14px;
        font-weight: normal;
        line-height: 22px;
        display: flex;
        align-items: center;
        letter-spacing: 0px;
        color: #666666;
      }

      .link {
        font-family: PingFang SC Regular;
        font-size: 12px;
        font-weight: normal;
        line-height: 22px;
        letter-spacing: 0px;
        color: #0065ff;
        cursor: pointer;

        &:hover {
          color: #0033ff;
        }
      }
    }

    .item {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;

      margin-bottom: 8px;
      .label {
        font-family: PingFang SC Regular;
        font-size: 12px;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: 0px;
        color: #999999;
      }
      .data {
        font-family: PingFangSC-Bold;
        font-size: 12px;
        font-weight: normal;
        line-height: 20px;
        text-align: right;
        letter-spacing: 0px;
        color: #666666;
      }
    }

    .propertyList {
      display: flex;
      margin-top: 10px;
      margin-bottom: 4px;
      width: 100%;

      justify-content: space-between;
      .property {
        flex: 1;
        text-align: center;

        .el-progress ::v-deep {
          .el-progress-circle,
          svg {
            height: 45px !important;
            width: 45px !important;
          }

          .el-progress__text {
            display: none;
          }
        display: flex;
        flex-direction: column;
        align-items: center;
        .num {
          margin: 6px 0 1px;
          font-family: PingFangSC-Bold;
          font-size: 14px;
          font-weight: normal;
          line-height: 22px;
          letter-spacing: 0px;
          color: #666666;
        }

        .des {
          color: #666;
          font-family: PingFang SC Regular;
          font-size: 12px;
        }

        &:nth-child(1) ::v-deep .el-progress-circle__track {
          stroke: rgb(212, 227, 250);
        }

        &:nth-child(2) ::v-deep .el-progress-circle__track {
          stroke: rgb(196, 242, 194);
        }

        &:nth-child(3) ::v-deep .el-progress-circle__track {
          stroke: rgb(250, 231, 200);
        }

        &:nth-child(4) ::v-deep .el-progress-circle__track {
          stroke: rgb(241, 215, 245);
          font-weight: normal;
          line-height: 20px;
          letter-spacing: 0px;
          color: #666666;
        }
      }
    }

    &.propertyInfo {
      height: 137px;
    }
  }

  .close {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 12px;
    color: rgb(187, 187, 187);
    cursor: pointer;
  // .info {
  //   position: relative;
  //   box-sizing: border-box;
  //   padding: 10px;
  //   margin-top: 10px;
  //   background: rgba(233, 235, 238, 0.4);
  //   font-size: 14px;

  //   .head {
  //     display: flex;
  //     justify-content: space-between;

  //     .title {
  //       font-weight: bold;
  //       color: #666666;
  //     }

  //     .link {
  //       color: #0065ff;
  //       cursor: pointer;

  //       &:hover {
  //         color: #0033ff;
  //       }
  //     }
  //   }

  //   .item {
  //     display: flex;
  //     justify-content: space-between;
  //     margin-top: 10px;

  //     .label {
  //       color: #999999;
  //     }
  //   }

  //   .propertyList {
  //     display: flex;
  //     margin-top: 10px;
  //     margin-bottom: 4px;
  //     width: 100%;

  //     .property {
  //       flex: 1;
  //       text-align: center;

  //       .el-progress ::v-deep {
  //         .el-progress-circle,
  //         svg {
  //           height: 45px !important;
  //           width: 45px !important;
  //         }

  //         .el-progress__text {
  //           display: none;
  //         }
  //       }

  //       .des {
  //         color: #666;
  //         font-size: 12px;
  //       }

  //       &:nth-child(1) ::v-deep .el-progress-circle__track {
  //         stroke: rgb(212, 227, 250);
  //       }

  //       &:nth-child(2) ::v-deep .el-progress-circle__track {
  //         stroke: rgb(196, 242, 194);
  //       }

  //       &:nth-child(3) ::v-deep .el-progress-circle__track {
  //         stroke: rgb(250, 231, 200);
  //       }

  //       &:nth-child(4) ::v-deep .el-progress-circle__track {
  //         stroke: rgb(241, 215, 245);
  //       }
  //     }
  //   }

  //   &.propertyInfo {
  //     height: 137px;
  //   }
  // }

  // .close {
  //   position: absolute;
  //   top: 16px;
  //   right: 16px;
  //   font-size: 12px;
  //   color: rgb(187, 187, 187);
  //   cursor: pointer;
  // }
  .line {
    height: 0;
    border: 1px solid #e4e3e8;
    margin-bottom: 8px;
  }
}
</style>
</style>