设备管理小样

mark

2022-10-21 1fe240406526b9b6256664559d3d2bec9250135c

设备管理小样

 src/assets/img/add.png

 src/components/IndexHeader.vue

@@ -1,19 +1,19 @@
<template>
  <div class="IndexHeader">
    <div class="header" :class="{ showBox: isShow, disOpacity: !opacity }">
      <!-- 右侧 -->
      <!-- 左侧 -->
      <div class="left">
        <router-link to="/">
          <img class="logo" src="/images/index/LOGO.png" alt="" />
        </router-link>
        <div class="title" @click="$router.push('/')">工业互联网平台</div>
        <div class="label" @click="$router.push('/')">首页</div>
        <!-- <div class="label">云服务</div> -->
        <div class="label">云服务</div>
        <div class="label" @click="$router.push('/manageCenter')">管理中心</div>
        <div class="label" @click="$router.push('/product')">应用商城</div>
      </div>

      <!-- 左侧 -->
      <!-- 右侧 -->
      <div class="right">
        <el-input
          placeholder="请输入关键词"
@@ -23,28 +23,16 @@
        >
          <div class="iconList" slot="suffix">
            <i class="search iconfont" v-if="!isShow">&#xe607;</i>
            <i class="search iconfont" @click="search" v-if="isShow"
              >&#xe607;</i
            >
            <i class="del iconfont" v-if="isShow" @click="showInputBox(false)"
              >&#xe60f;</i
            >
            <i class="search iconfont" @click="search" v-if="isShow">&#xe607;</i>
            <i class="del iconfont" v-if="isShow" @click="showInputBox(false)">&#xe60f;</i>
          </div>
        </el-input>

        <!-- 未登录情况 -->
        <div
          class="headerLogin"
          v-if="!userInfo"
          @click="$router.push('/login')"
        >
        <div class="headerLogin" v-if="!userInfo" @click="$router.push('/login')">
          登录
        </div>
        <div
          class="register"
          v-if="!userInfo"
          @click="$router.push('/register')"
        >
        <div class="register" v-if="!userInfo" @click="$router.push('/register')">
          免费注册
        </div>

@@ -62,12 +50,7 @@
    </div>

    <!-- 用户下拉框 -->
    <div
      class="userBox"
      v-if="userInfo && isShowUserBox"
      @mouseenter="showUserBox"
      @mouseleave="hiddenUserBox"
    >
    <div class="userBox" v-if="userInfo && isShowUserBox" @mouseenter="showUserBox" @mouseleave="hiddenUserBox">
      <div class="userName">{{ userInfo.username }}</div>
      <ul>
        <!--   <li class="money">
@@ -83,9 +66,7 @@
            <router-link to="/personalCenter">个人中心</router-link>
          </div>

          <div class="content">
            <span class="iconfont">&#xe605;</span> 已实名认证
          </div>
          <div class="content"><span class="iconfont">&#xe605;</span> 已实名认证</div>
        </li>

        <li>
@@ -118,12 +99,7 @@
      <div class="hotKey">
        <div class="title">热门搜索</div>
        <ul class="keyCard">
          <li
            class="keyItem"
            @click="jumpToSearch(item)"
            v-for="(item, index) in hotKeyArr"
            :key="index"
          >
          <li class="keyItem" @click="jumpToSearch(item)" v-for="(item, index) in hotKeyArr" :key="index">
            {{ item }}
          </li>
        </ul>
@@ -150,19 +126,19 @@
</template>

<script>
import { logout } from "@/api/login";
import { logout } from "@/api/login"

export default {
  props: {
    opacity: {
      type: Boolean,
      default: true,
    },
      default: true
    }
  },
  name: "Header",
  created() {
    //尝试从session中拿用户信息
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
    /*  document.addEventListener("click", () => {
      this.showUserBox = false;
    }); */
@@ -176,82 +152,82 @@
      isShowBox: false, //输入下拉框
      userInfo: null, //用户信息
      isShowUserBox: false, //用户信息弹层
      UserTimer: null, // 控制弹层的定时器
    };
      UserTimer: null // 控制弹层的定时器
    }
  },
  methods: {
    // 控制输入框box
    showInputBox(toggle) {
      this.isShow = toggle;
      this.isShowBox = toggle;
      this.keyWord = "";
      this.$emit("showInputBox", toggle);
      this.isShow = toggle
      this.isShowBox = toggle
      this.keyWord = ""
      this.$emit("showInputBox", toggle)
    },

    //控制用户信息box
    showUserBox() {
      if (this.UserTimer) {
        clearTimeout(this.UserTimer);
        this.UserTimer = null;
        clearTimeout(this.UserTimer)
        this.UserTimer = null
      }
      this.isShowUserBox = true;
      this.isShowUserBox = true
    },
    hiddenUserBox() {
      const _this = this;
      const _this = this
      this.UserTimer = setTimeout(() => {
        _this.isShowUserBox = false;
      }, 200);
        _this.isShowUserBox = false
      }, 200)
    },

    logOut() {
      logout().then(() => {
        sessionStorage.removeItem("loginedInfo");
        sessionStorage.removeItem("expires_in");
        sessionStorage.removeItem("userInfo");
        sessionStorage.removeItem("loginedInfo")
        sessionStorage.removeItem("expires_in")
        sessionStorage.removeItem("userInfo")
        this.$router.push({
          path: "/login",
        });
          path: "/login"
        })
        this.$notify({
          title: "提示",
          type: "success",
          message: "退出成功！",
          duration: 2500,
          offset: 57,
        });
      });
          offset: 57
        })
      })
    },

    jump(id, type) {
      if (type) {
        sessionStorage.setItem("type", type);
        sessionStorage.setItem("type", type)
      }
      this.$router.push({
        path: "/personalCenter",
        query: {
          id: id,
        },
      });
          id: id
        }
      })
    },

    search() {
      this.$router.push({
        path: "/product",
        query: {
          keyWord: this.keyWord,
        },
      });
          keyWord: this.keyWord
        }
      })
    },

    jumpToSearch(keyWord) {
      this.$router.push({
        path: "/product",
        query: {
          keyWord,
        },
      });
    },
  },
};
          keyWord
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@@ -259,10 +235,10 @@
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 62px;
  height: 50px;
  width: 100%;
  min-width: 1280px;
  background-color: rgba(255, 255, 255, 0.25);
  background-color: #1f2a3e;
  color: #fff;
  font-size: 14px;

@@ -276,12 +252,12 @@
    }

    .title {
      margin-right: 10px;
      margin-right: 30px;
      cursor: pointer;
    }

    .label {
      margin: 0 20px;
      margin-right: 20px;
      cursor: pointer;
    }
  }
@@ -346,16 +322,22 @@
  &:hover,
  &.showBox,
  &.disOpacity {
    background-color: #fff;
    background-color: #1f2a3e;

    .left {
      font-family: PingFang SC Regular;
      font-size: 14px;
      font-weight: normal;
      line-height: 20px;
      letter-spacing: 0px;
      color: #ffffff;
      .title {
        color: #3d3d3d;
        // color: #3d3d3d;
        font-weight: 700;
      }

      .label {
        color: #3d3d3d;
        // color: #3d3d3d;
        &:hover {
          color: #0065ff;
        }
@@ -534,4 +516,4 @@
    }
  }
}
</style>
</style>

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

@@ -1,62 +1,57 @@
<template>
  <div class="whiteContent Content">
    <div class="title">设备地图</div>
    <div class="title" v-show="false">设备地图</div>

    <!-- 全屏按钮 -->
    <img
      class="zoomOut iconfont"
      src="/images/equipmentManagement/full.png"
      @click="toggleZoom('Full')"
      v-if="!isFull"
      v-show="false"
    />
    <!-- 取消全屏的按钮 -->
    <img
      class="zoomOut iconfont"
      src="/images/equipmentManagement/quit.png"
      @click="toggleZoom('')"
      v-else
    />
    <!-- 普通地图 -->
    <div id="map" v-if="!isFull"></div>
    <img class="zoomOut iconfont" src="/images/equipmentManagement/quit.png" @click="toggleZoom('')" v-show="false" />

    <!-- 普通地图  v-show="false" -->
    <div class="map-box">
      <div class="map-txt">设备地图</div>
      <div id="map"></div>
    </div>
    <!-- 全屏地图 -->
    <div id="mapFull" v-else></div>
    <InfoCard
      @close="closeCard"
      v-if="isShowCard"
      :node="activeNode"
    ></InfoCard>
    <div id="mapFull" v-show="false"></div>
    <InfoCard @close="closeCard" v-if="isShowCard" :node="activeNode"></InfoCard>
    <FormList v-if="!isFull"></FormList>
  </div>
</template>

<script>
import { findDevList } from "@/api/device";
import AMapLoader from "@amap/amap-jsapi-loader";
import InfoCard from "@/views/equipmentManagement/equipmentList/components/InfoCard";
import FormList from "@/views/equipmentManagement/equipmentList/components/FormList";
import { findDevList } from "@/api/device"
import AMapLoader from "@amap/amap-jsapi-loader"
import InfoCard from "@/views/equipmentManagement/equipmentList/components/InfoCard"
import FormList from "@/views/equipmentManagement/equipmentList/components/FormList"

import bus from "@/plugin/bus";
import bus from "@/plugin/bus"

export default {
  created() {
    window._AMapSecurityConfig = {
      securityJsCode: "768ab79bdc4075aa082bc070c53bb3c4",
    };
      securityJsCode: "768ab79bdc4075aa082bc070c53bb3c4"
    }
  },
  mounted() {
    this.initMap("");
    this.initMap("")
    bus.$on("refleshNode", (node) => {
      this.nodes = node;
      this.initNode();
    });
      this.nodes = node
      this.initNode()
    })
  },
  beforeDestroy() {
    bus.$off("refleshNode");
    bus.$off("refleshNode")
  },

  components: {
    InfoCard, //设备信息弹层
    FormList, //表格
    FormList //表格
  },
  data() {
    return {
@@ -69,8 +64,8 @@
      center: [116.06157, 39.66157], //地图中心
      activeNode: null, //选中的地图节点
      geocoder: {},
      myMaker: null,
    };
      myMaker: null
    }
  },

  methods: {
@@ -79,39 +74,39 @@
      AMapLoader.load({
        key: "69cd7e958683e8462beab5c08e6bc21b", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geocoder", "AMap.Geolocation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        plugins: ["AMap.Geocoder", "AMap.Geolocation"] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.AMap = AMap;
          this.AMap = AMap
          this.map = new AMap.Map(`map${status}`, {
            //设置地图容器id
            zoom: this.zoom, //初始化地图级别
            center: this.center, //初始化地图中心点位置
          });
            center: this.center //初始化地图中心点位置
          })

          //初始化查询地理位置插件
          AMap.plugin("AMap.Geocoder", () => {
            this.geocoder = new AMap.Geocoder();
          });
            this.geocoder = new AMap.Geocoder()
          })

          this.initNode();
          this.initNode()
        })
        .catch((e) => {
          console.log(e);
        });
          console.log(e)
        })
    },
    //初始化节点
    initNode() {
      if (this.myMaker) {
        this.myMaker.destroy();
        this.myMaker.destroy()
      }
      this.nodes.filter((item, index) => {
        //查询行政位置
        this.geocoder.getAddress([item.lon, item.lat], (status, result) => {
          // 节点坐标
          let position = new this.AMap.LngLat(item.lon, item.lat);
          let position = new this.AMap.LngLat(item.lon, item.lat)
          // 节点地理位置
          item.province = result.regeocode.addressComponent.province;
          item.province = result.regeocode.addressComponent.province

          //信息框dom
          let markerContent =
@@ -119,57 +114,57 @@
            `<div class="nodeMarker" id="node${index}}">` +
            '<img class="normal" src="/images/equipmentManagement/default.png">' +
            '<img class="selected" src="/images/equipmentManagement/select.png">' +
            `<div class="box"> <div class="name">${item.devName}</div> <div class="property">IP地址: <span class="data">${item.devIp}</span> </div> <div class="property">设备位置: <span class="data">${item.province}</span></div><div class="property">安装时间: <span class="data">${item.installTime}</span></div></div>`;
          ("</div>");
            `<div class="box"> <div class="name">${item.devName}</div> <div class="property">IP地址: <span class="data">${item.devIp}</span> </div> <div class="property">设备位置: <span class="data">${item.province}</span></div><div class="property">安装时间: <span class="data">${item.installTime}</span></div></div>`
          ;("</div>")

          let marker = new this.AMap.Marker({
            position: position,
            // 将 html 传给 content
            content: markerContent,
            // 以 icon 的 [center bottom] 为原点
            offset: new this.AMap.Pixel(-24, -24),
          });
            offset: new this.AMap.Pixel(-24, -24)
          })

          //给节点添加的监听
          marker.on("click", () => {
            this.activeNode = item;
            this.isShowCard = true;
          });
            this.activeNode = item
            this.isShowCard = true
          })

          this.map.add(marker);
          this.myMaker = marker;
        });
      });
          this.map.add(marker)
          this.myMaker = marker
        })
      })
    },
    //关闭设备详情弹层
    closeCard() {
      this.isShowCard = false;
      this.isShowCard = false
    },
    //切换全屏地图
    toggleZoom(status) {
      //获取当前地图级别
      this.zoom = this.map.getZoom();
      this.zoom = this.map.getZoom()
      //获取当前地图中心位置
      let data = this.map.getCenter();
      this.center = [data.lng, data.lat];
      let data = this.map.getCenter()
      this.center = [data.lng, data.lat]
      if (status) {
        this.isFull = true;
        this.isFull = true
      } else {
        this.isFull = false;
        this.isFull = false
      }
      this.initMap(status);
    },
  },
};
      this.initMap(status)
    }
  }
}
</script>

<style scoped lang="scss">
.whiteContent {
  position: relative;
  box-sizing: border-box;
  padding: 20px;
  // padding: 20px;
  width: 1280px;
  background-color: #fff;
  // background-color: #34405a;
  margin: 0 auto;

  .title {
@@ -177,68 +172,83 @@
    font-weight: bold;
    font-size: 16px;
  }
  .map-box {
    background-color: #1f2a3e;
    border-radius: 18px;
    // width: 100%;
    padding: 24px;
    margin-bottom: 24px;
    .map-txt {
      font-family: PingFang SC Heavy;
      font-size: 16px;
      font-weight: normal;
      line-height: 24px;
      letter-spacing: 0px;
      color: #ffffff;
      margin-bottom: 16px;
    }
    #map,
    #mapFull {
      width: 1232px;
      height: 496px;
      border-radius: 8px;

  #map,
  #mapFull {
    width: 100%;
    height: 500px;
    border-radius: 8px;

    ::v-deep .nodeMarker {
      position: relative;
      .selected {
        display: none;
      }

      .box {
        box-sizing: border-box;
        display: none;
        position: absolute;
        padding: 20px 10px;
        top: 40px;
        left: -100px;
        width: 247px;
        height: 160px;
        background-color: rgba($color: #fff, $alpha: 0.8);
        filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));

        .name {
          margin-bottom: 14px;
          font-weight: bold;
          font-size: 16px;
        }

        .property {
          margin-bottom: 12px;
          font-size: 14px;
          color: #999;

          span {
            margin-left: 5px;
            color: #3d3d3d;
            font-weight: 700;
          }

          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      &:hover {
        .normal {
      ::v-deep .nodeMarker {
        position: relative;
        .selected {
          display: none;
        }

        .selected {
          position: relative;
          top: -16px;
          left: -16px;
          display: inline-block;
        .box {
          box-sizing: border-box;
          display: none;
          position: absolute;
          padding: 20px 10px;
          top: 40px;
          left: -100px;
          width: 247px;
          height: 160px;
          background-color: rgba($color: #fff, $alpha: 0.8);
          filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));

          .name {
            margin-bottom: 14px;
            font-weight: bold;
            font-size: 16px;
          }

          .property {
            margin-bottom: 12px;
            font-size: 14px;
            color: #999;

            span {
              margin-left: 5px;
              color: #3d3d3d;
              font-weight: 700;
            }

            &:last-child {
              margin-bottom: 0;
            }
          }
        }

        .box {
          display: inline-block;
        &:hover {
          .normal {
            display: none;
          }

          .selected {
            position: relative;
            top: -16px;
            left: -16px;
            display: inline-block;
          }

          .box {
            display: inline-block;
          }
        }
      }
    }
@@ -250,8 +260,8 @@

  .InfoCard {
    position: absolute;
    top: 58px;
    right: 26px;
    top: 68px;
    right: 28px;
    z-index: 2;
  }

@@ -264,4 +274,4 @@
    cursor: pointer;
  }
}
</style>
</style>

 src/views/equipmentManagement/equipmentList/components/FormList.scss

New file
@@ -0,0 +1,42 @@
.el-table th,
.el-table tr {
  background-color: transparent !important;
}
.el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}
.has-gutter {
  background: rgba(255, 255, 255, 0.18) !important;
}
.el-table__body-wrapper {
  background: rgba(255, 255, 255, 0.08) !important;
  font-family: PingFang SC Regular;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  letter-spacing: 0px;
  color: rgba(255, 255, 255, 0.9);
}
// class="has-gutter"
.el-table__header-wrapper {
  border-radius: 3px 3px 0 0;
}
.FormList .search .left .el-input {
  width: 150px;
}
.el-input__inner {
  background-color: transparent !important;
}
.el-range-input {
  background-color: transparent !important;
}
// .el-table__row > td {
//   // border: none !important;
// }
.el-table__cell {
  border: none !important; //表格的线
}
.el-input input {
  border-radius: 3px !important;
}

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

@@ -3,6 +3,54 @@
    <div class="search">
      <div class="left">
        <div class="id">
          <div class="left-txt">设备名称/ID</div>
          <el-input class="id-input" v-model="inputText" placeholder="请输入设备名称/ID"></el-input>
        </div>

        <div class="time">
          <div class="left-txt">设备安装时间</div>

          <el-date-picker
            style="width: 380px"
            v-model="searchTime"
            @change="searchingBtn"
            type="datetimerange"
            size="small"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>
        </div>

        <div class="cluster">
          <div class="left-txt">所属集群</div>
          <div class="cluster-select">
            <el-select style="width: 200px" v-model="cluster" placeholder="请选择所属集群">
              <el-option v-for="item in clusterArr" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="button searchBtn" @click="searchingBtn">搜索</div>
        <div class="button resetBtn" @click="clearSearch">重置</div>
      </div>
    </div>
    <div class="line"></div>
    <div class="btns">
      <div class="button add" @click="isShowAdd = true">
        <img src="@/assets/img/add.png" alt="" />
        <div class="button-txt">添加设备</div>
      </div>
      <div class="button export" @click="exportFile">
        <div class="iconfont">&#xe614;</div>
        <div class="button-txt">导出</div>
      </div>
    </div>

    <!-- <div class="left">
        <div class="id">
          设备名称/ID
          <el-input v-model="inputText" placeholder="请输入"></el-input>
        </div>
@@ -23,35 +71,28 @@
        <div class="cluster">
          所属集群
          <el-select v-model="cluster" placeholder="请选择">
            <el-option
              v-for="item in clusterArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            <el-option v-for="item in clusterArr" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      </div> -->

      <div class="right">
        <div class="button searchBtn" @click="searchingBtn">搜索</div>
        <div class="button resetBtn" @click="clearSearch">重置</div>
      </div>
    </div>
    <!-- <el-table-column label="首次使用时间" min-width="159">
          <template slot-scope="scope">
            <div v-if="scope.row.firstUseTime.length > 1">
              <div>{{ scope.row.firstUseTime[0] }}</div>
              <div>{{ scope.row.firstUseTime[1] }}</div>
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column> -->

    <div class="btns">
      <div class="button add" @click="isShowAdd = true">
        <span>+</span>添加设备
      </div>
      <div class="button export" @click="exportFile">
        <span class="iconfont">&#xe614;</span>导出
      </div>
    </div>

    <!-- height="50" 
        -->
    <div class="table-area">
      <el-table
        id="multipleTable"
        :header-cell-style="{ height: '50px' }"
        ref="multipleTable"
        tooltip-effect="dark"
        :data="dataList"
@@ -60,27 +101,11 @@
        :stripe="true"
      >
        <el-table-column label="序号" width="80" class-name="index">
          <template slot-scope="scope">{{
            scope.$index + 1 + (page - 1) * size
          }}</template>
          <template slot-scope="scope">{{ scope.$index + 1 + (page - 1) * size }}</template>
        </el-table-column>
        <el-table-column
          prop="devId"
          label="设备ID"
          min-width="140"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="devName"
          label="设备名称"
          min-width="140"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="devIp"
          label="IP地址"
          min-width="150"
        ></el-table-column>
        <el-table-column prop="devId" label="设备ID" min-width="210" show-overflow-tooltip></el-table-column>
        <el-table-column prop="devName" label="设备名称" min-width="140" show-overflow-tooltip></el-table-column>
        <el-table-column prop="devIp" label="IP地址" min-width="150"></el-table-column>
        <el-table-column label="安装时间" min-width="159">
          <template slot-scope="scope">
            <div v-if="scope.row.installTime.length > 1">
@@ -90,15 +115,6 @@
            <div v-else>--</div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="首次使用时间" min-width="159">
          <template slot-scope="scope">
            <div v-if="scope.row.firstUseTime.length > 1">
              <div>{{ scope.row.firstUseTime[0] }}</div>
              <div>{{ scope.row.firstUseTime[1] }}</div>
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column> -->

        <el-table-column label="所属集群" show-overflow-tooltip min-width="154">
          <template slot-scope="scope"> {{ scope.row.clusterName }} </template>
@@ -113,12 +129,7 @@

        <el-table-column label="操作" min-width="180">
          <template slot-scope="scope">
            <!-- 加入 -->
            <el-tooltip
              content="加入集群"
              placement="top"
              v-if="!scope.row.clusterId"
            >
            <el-tooltip content="加入集群" placement="top" v-if="!scope.row.clusterId">
              <span
                class="iconfont option"
                @click="joinCluster(scope.row)"
@@ -126,7 +137,7 @@
                >&#xe640;</span
              >
            </el-tooltip>
            <!-- 退出 -->

            <el-tooltip content="退出集群" placement="top" v-else>
              <span
                class="iconfont option"
@@ -135,7 +146,7 @@
                >&#xe63c;</span
              >
            </el-tooltip>
            <!-- 算法详情 -->

            <el-tooltip content="应用详情" placement="top">
              <span
                class="iconfont option"
@@ -144,7 +155,7 @@
                >&#xe621;</span
              >
            </el-tooltip>
            <!-- 设备详情 -->

            <el-tooltip content="设备详情" placement="top">
              <span
                class="iconfont option"
@@ -153,12 +164,9 @@
                >&#xe619;</span
              >
            </el-tooltip>
            <!-- 解绑 -->

            <el-tooltip content="解除绑定" placement="top">
              <span
                class="iconfont option"
                @click="Untying(scope.row)"
                :class="{ disable: scope.row.isOnline != 1 }"
              <span class="iconfont option" @click="Untying(scope.row)" :class="{ disable: scope.row.isOnline != 1 }"
                >&#xe617;</span
              >
            </el-tooltip>
@@ -166,7 +174,7 @@
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
        <!-- <el-pagination
          @current-change="refrash"
          @size-change="handleSizeChange"
          :current-page="page"
@@ -175,62 +183,46 @@
          :page-sizes="[5, 10, 15, 20, 25]"
          :total="total"
          background
        ></el-pagination>
        ></el-pagination> -->
      </div>
    </div>

    <!-- 解绑弹窗 -->
    <UnbindBox
      @close="closeUnbindBox"
      v-if="isShowUnbind"
      :id="unbindId"
      @reflash="reflash"
    ></UnbindBox>
    <UnbindBox @close="closeUnbindBox" v-if="isShowUnbind" :id="unbindId" @reflash="reflash"></UnbindBox>

    <!-- 添加设备弹窗 -->
    <AddBox @close="closeAddBox" v-if="isShowAdd"></AddBox>

    <!-- 退出集群弹窗 -->
    <QuitClusterBox
      :equipment="activeEquipment"
      v-if="showQuit"
      @close="showQuit = false"
    ></QuitClusterBox>
    <QuitClusterBox :equipment="activeEquipment" v-if="showQuit" @close="showQuit = false"></QuitClusterBox>

    <!-- 加入集群弹窗 -->
    <JoinClusterBox
      :equipment="activeEquipment"
      v-if="showJoin"
      @close="showJoin = false"
    ></JoinClusterBox>
    <JoinClusterBox :equipment="activeEquipment" v-if="showJoin" @close="showJoin = false"></JoinClusterBox>
  </div>
</template>

<script>
import {
  findDevList,
  findClustersBySearch,
  exportDevListExcel,
} from "@/api/device";
import AddBox from "@/views/equipmentManagement/equipmentList/components/AddBox";
import UnbindBox from "@/views/equipmentManagement/equipmentDetail/components/UnbindBox";
import QuitClusterBox from "@/views/equipmentManagement/equipmentList/components/QuitClusterBox";
import JoinClusterBox from "@/views/equipmentManagement/equipmentList/components/JoinClusterBox";

import bus from "@/plugin/bus";

import { findDevList, findClustersBySearch, exportDevListExcel } from "@/api/device"
import AddBox from "@/views/equipmentManagement/equipmentList/components/AddBox"
import UnbindBox from "@/views/equipmentManagement/equipmentDetail/components/UnbindBox"
import QuitClusterBox from "@/views/equipmentManagement/equipmentList/components/QuitClusterBox"
import JoinClusterBox from "@/views/equipmentManagement/equipmentList/components/JoinClusterBox"
import add from "@/assets/img/add.png"
import bus from "@/plugin/bus"
import "./FormList.scss"
export default {
  components: {
    AddBox,
    UnbindBox,
    QuitClusterBox,
    JoinClusterBox,
    JoinClusterBox
  },
  created() {
    this.getCluster();
    this.getCluster()
  },
  data() {
    return {
      add,
      searchTime: [], //搜索时间
      page: 1,
      size: 10, //分页相关
@@ -244,8 +236,8 @@
      cluster: null, //选中的集群类型
      showQuit: false, //展示退出集群的弹窗
      showJoin: false, //展示加入集群的弹窗
      activeEquipment: null, //处理中的设备
    };
      activeEquipment: null //处理中的设备
    }
  },
  methods: {
    async getCluster() {
@@ -253,47 +245,47 @@
        InputText: "",
        Page: 1,
        Size: 10000,
        userId: JSON.parse(sessionStorage.getItem("userInfo")).id,
      });
        userId: JSON.parse(sessionStorage.getItem("userInfo")).id
      })
      if (res && res.success) {
        res.data.list.forEach((item) => {
          this.clusterArr.push({
            label: item.clusterName,
            value: item.clusterId,
          });
        });
            value: item.clusterId
          })
        })
      }
    },

    // 跳到设备详情
    checkDetail(row) {
      if (row.isOnline != 1) {
        return;
        return
      }
      this.$router.push({
        path: "/equipmentDetail",
        query: {
          id: row.devId,
        },
      });
          id: row.devId
        }
      })
    },

    // 跳到算法详情
    algorithmDetail(row) {
      if (row.isOnline != 1) {
        return;
        return
      }
      this.$router.push({
        path: "/algorithmDetail",
        query: {
          id: row.devId,
        },
      });
          id: row.devId
        }
      })
    },

    // 查询列表
    searchingBtn() {
      let param = {};
      let param = {}

      if (!this.searchTime) {
        param = {
@@ -302,8 +294,8 @@
          startTime: "",
          endTime: "",
          clusterId: this.cluster,
          inputText: this.inputText,
        };
          inputText: this.inputText
        }
      } else {
        param = {
          page: this.page,
@@ -311,112 +303,109 @@
          startTime: this.searchTime[0],
          endTime: this.searchTime[1],
          clusterId: this.cluster,
          inputText: this.inputText,
        };
          inputText: this.inputText
        }
      }

      findDevList(param)
        .then((res) => {
          this.dataList = res.data.list;
          this.dataList = res.data.list
          //时间分行显示
          this.dataList.forEach((item) => {
            item.installTime = item.installTime.split(" ");
            item.firstUseTime = item.firstUseTime.split(" ");
          });
          this.total = res.data.total;
            item.installTime = item.installTime.split(" ")
            item.firstUseTime = item.firstUseTime.split(" ")
          })
          this.total = res.data.total
          if (res.data.total <= this.size) {
            this.page = 1;
            this.page = 1
          }

          bus.$emit("refleshNode", this.dataList);
          bus.$emit("refleshNode", this.dataList)
        })
        .catch((err) => {
          console.log(err);
        });
          console.log(err)
        })
    },

    //分页功能
    handleSizeChange(size) {
      this.size = size;
      this.searchingBtn();
      this.size = size
      this.searchingBtn()
    },
    //分页功能
    refrash(page) {
      this.page = page;
      this.searchingBtn();
      this.page = page
      this.searchingBtn()
    },

    //解绑按钮
    Untying(row) {
      if (row.isOnline != 1) {
        return;
        return
      }
      this.unbindId = row.devId;
      this.isShowUnbind = true;
      this.unbindId = row.devId
      this.isShowUnbind = true
    },

    //获得默认时间
    getDateInit() {
      // 要求 默认一个月
      const end = new Date();
      const start = new Date();
      const nowDate = new Date();
      nowDate.setHours(0);
      nowDate.setMinutes(0);
      nowDate.setSeconds(0);
      nowDate.setMilliseconds(0);
      start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30);
      end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1);
      return [
        this.$moment(start).format("YYYY-MM-DD HH:mm:ss"),
        this.$moment(end).format("YYYY-MM-DD HH:mm:ss"),
      ];
      const end = new Date()
      const start = new Date()
      const nowDate = new Date()
      nowDate.setHours(0)
      nowDate.setMinutes(0)
      nowDate.setSeconds(0)
      nowDate.setMilliseconds(0)
      start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30)
      end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1)
      return [this.$moment(start).format("YYYY-MM-DD HH:mm:ss"), this.$moment(end).format("YYYY-MM-DD HH:mm:ss")]
    },

    //关闭新增弹窗
    closeAddBox() {
      this.isShowAdd = false;
      this.searchingBtn();
      this.isShowAdd = false
      this.searchingBtn()
    },
    // 关闭解绑弹窗
    closeUnbindBox() {
      this.isShowUnbind = false;
      this.isShowUnbind = false
    },

    //解绑成功回调
    reflash() {
      this.isShowUnbind = false;
      this.searchingBtn();
      this.isShowUnbind = false
      this.searchingBtn()
    },

    clearSearch() {
      this.searchTime = this.getDateInit();
      this.inputText = "";
      this.cluster = "";
      this.searchingBtn();
      this.searchTime = this.getDateInit()
      this.inputText = ""
      this.cluster = ""
      this.searchingBtn()
    },

    //退出集群
    quitCluster(equipment) {
      if (equipment.isOnline != 1) {
        return;
        return
      }
      this.activeEquipment = equipment;
      this.showQuit = true;
      this.activeEquipment = equipment
      this.showQuit = true
    },

    //加入集群
    joinCluster(equipment) {
      if (equipment.isOnline != 1) {
        return;
        return
      }
      this.activeEquipment = equipment;
      this.showJoin = true;
      this.activeEquipment = equipment
      this.showJoin = true
    },

    //导出列表文件
    async exportFile() {
      let param = {};
      let param = {}

      if (!this.searchTime) {
        param = {
@@ -425,8 +414,8 @@
          startTime: "",
          endTime: "",
          clusterId: this.cluster,
          inputText: this.inputText,
        };
          inputText: this.inputText
        }
      } else {
        param = {
          page: this.page,
@@ -434,224 +423,246 @@
          startTime: this.searchTime[0],
          endTime: this.searchTime[1],
          clusterId: this.cluster,
          inputText: this.inputText,
        };
          inputText: this.inputText
        }
      }
      const result = await exportDevListExcel(param);
      const result = await exportDevListExcel(param)

      var blob = new Blob([result.body.data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
        }),
        Temp = document.createElement("a");
        Temp = document.createElement("a")

      Temp.href = window.URL.createObjectURL(blob);
      Temp.href = window.URL.createObjectURL(blob)
      Temp.download = window.decodeURI(result.fileName)

      console.log(result);
      console.log(result.fileName);
      Temp.setAttribute("download", result.fileName)

      Temp.download = window.decodeURI(result.fileName);
      document.body.appendChild(Temp)

      Temp.setAttribute("download", result.fileName);
      Temp.click()

      document.body.appendChild(Temp);
      document.body.removeChild(Temp)

      Temp.click();

      document.body.removeChild(Temp);

      window.URL.revokeObjectURL(Temp);
    },
      window.URL.revokeObjectURL(Temp)
    }
  },
  mounted() {
    this.searchingBtn();
  },
};
    this.searchingBtn()
  }
}
</script>

<style scoped lang="scss">
.FormList {
  width: 1280px;
  // padding: 0 24px;
  // background: #36b24a;
  background-color: #1f2a3e;
  border-radius: 18px;
  // background: #34405a;
  .search {
    // margin-bottom: ;
    display: flex;
    justify-content: space-between;
    padding: 60px 0 30px 0;
    font-size: 14px;
    border-bottom: 1px solid #e9ebee;
    background-color: #fff;

    .left,
    .right,
    .id,
    .time,
    .cluster {
    padding: 24px;
    .left {
      display: flex;
      align-items: center;
    }
      .left-txt {
        // height: 20px;
        white-space: nowrap;
        font-family: PingFang SC Regular;
        font-size: 14px;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: 0px;
        color: #ffffff;
        margin-right: 16px;
      }
      .id,
      .time,
      .cluster {
        display: flex;
        align-items: center;
        padding-right: 24px;
      }
      .id ::v-deep .el-input .el-input__inner {
        width: 150px;
        height: 32px;
        border-radius: 3px;
        background: rgb(0, 0, 0, 0.2) !important;
      }
      .cluster::v-deep .el-input {
        width: 250px;
        height: 32px;
        // margin-left: 10px;
        // margin-right: 20px;

    .cluster {
      .el-select {
        width: 190px;
        height: 40px;
        line-height: 40px;
        input {
          border-radius: 1px;
          &::-webkit-input-placeholder {
            color: #999;
          }

        ::v-deep input {
          height: 40px;
          // &:focus {
          //   border-color: #0065ff;
          // }
        }
      }
      .cluster {
        // .cluster-select {
        //   width: 150px;
        // }
        .el-select {
          width: 150px;
          .el-input .el-input--suffix {
            width: 150px !important;
            // border-radius: 3px;
          }
          // height: 32px;
          // line-height: 32px;

        .el-icon-arrow-up {
          line-height: 40px;
        }

        ::v-deep .el-icon-arrow-up {
          height: 40px;
          // ::v-deep input {
          //   height: 32px;
          // }
          // el-select__caret el-input__icon el-icon-arrow-up
          ::v-deep .el-input__icon {
            line-height: 28px !important;
          }
        }
      }
    }

    .id .el-input ::v-deep {
      width: 180px;
    }

    .cluster::v-deep .el-input {
      width: 156px;
      height: 40px;
      margin-left: 10px;
      margin-right: 20px;

      input {
        border-radius: 0;
        &::-webkit-input-placeholder {
          color: #999;
        }

        &:focus {
          border-color: #0065ff;
        }
    .right {
      display: flex;
      align-items: center;
      .button {
        font-family: PingFang SC Regular;
        font-size: 14px;
        font-weight: normal;
        line-height: 32px;
        letter-spacing: 0px;
        padding: 0 16px;
        border-radius: 3px;
        margin: 0 4px;
      }
    }

    .el-input ::v-deep {
      width: 270px;
      height: 40px;
      margin-left: 10px;
      margin-right: 20px;

      input {
        border-radius: 0;
        &::-webkit-input-placeholder {
          color: #999;
        }

        &:focus {
          border-color: #0065ff;
        }
      .searchBtn {
        background: #0082bc;
        color: #ffffff;
      }
    }

    .el-date-editor {
      width: 340px;
      height: 40px;
      margin-left: 10px;
      margin-right: 20px;
      border-radius: 0;

      &::-webkit-input-placeholder {
        color: #999;
      .resetBtn {
        border: 1px solid #0082bc;
        color: #0082bc;
      }

      &.is-active {
        border-color: #0065ff;
      }
    }

    .searchBtn {
      width: 110px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      background: #0065ff;
      margin-right: 20px;
    }

    .resetBtn {
      width: 110px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #0065ff;
      border: 1px solid #0065ff;
    }
  }

  .line {
    border: 1px solid #ffffff;
    opacity: 0.2;
    margin: 0 24px;
  }
  .btns {
    padding: 24px 24px;
    display: flex;
    margin: 30px 0;
    text-align: center;
    line-height: 40px;
    justify-content: flex-start;
    .button {
      padding: 0 16px;
      margin: 0 4px;

    .add {
      margin-right: 20px;
      width: 140px;
      height: 40px;
      background: #0065ff;
      color: #fff;
      span {
        margin-right: 10px;
        font-weight: 700;
        font-size: 18px;
      border-radius: 3px;
      font-family: PingFang SC Regular;
      font-size: 14px;
      font-weight: normal;
      line-height: 32px;
      letter-spacing: 0px;
      display: flex;
      align-items: center;
      .button-txt {
        margin-left: 10px;
      }
      .iconfont {
        // width: 12px;
        // height: 12px;
        // line-height: 12px;
        font-size: 16px;
      }
    }

    .add {
      background: #0082bc;
      color: #ffffff;
    }
    .export {
      width: 140px;
      height: 40px;
      border: 1px solid #0065ff;
      color: #0065ff;

      span {
        margin-right: 10px;
        font-size: 18px;
      }
      border: 1px solid #0082bc;
      color: #0082bc;
    }
  }

  .table-area {
    // min-height: 600px;
    padding: 0 24px 24px;
  }
  .table-area >>> .el-table__row > td {
    border: none !important;
  }
  .el-table::before {
    height: 0; //表格的线
  }
  // .el-table,
  .el-table ::v-deep {
    background-color: rgb(233, 235, 238);
    // background-color: rgb(233, 235, 238);
    padding: 1px;
    // .el-table__expanded-cell {
    //   background-color: transparent !important;
    // }
    // .el-table__header {
    //   background: rgba(255, 255, 255, 0.18) !important;
    // }

    &::after {
      display: none;
    }
    // .el-table th,
    // .el-table tr {
    //   background-color: transparent !important;
    // }

    td.index .cell {
      padding-left: 16px;
      padding-right: 4px;
    }
    // .el-table tr
    // &::after {
    //   display: none;
    // }

    // td.index .cell {
    //   padding-left: 16px;
    //   padding-right: 4px;
    // }

    .has-gutter tr th {
      background: #f0f3f5;
      // background: #f0f3f5;
      font-size: 16px;
      color: #3d3d3d;
      color: #ffffff;
      font-weight: 700;

      font-family: PingFangSC-Bold;
      font-size: 12px;
      font-weight: normal;
      line-height: 20px;
      letter-spacing: 0px;
    }

    td .cell {
      color: #3d3d3d;
    }
    // td .cell {
    //   color: #3d3d3d;
    // }

    tr:hover > td.el-table__cell {
      background-color: #fff;
      background: rgba(255, 255, 255, 0.08) !important;
    }

    .el-table__row--striped .el-table__cell {
      background-color: #f0f5fa !important;
    .el-table__row .el-table__cell {
      background-color: transparent !important;
    }
    tr:hover > td.el-table__cell {
      background-color: #fff;
    }
    // tr:hover > td.el-table__cell {
    //   // background-color: #fff;
    // }

    .el-table__row--striped .el-table__cell {
      background-color: #f0f5fa !important;
      background-color: transparent !important;
    }

    .status {
@@ -665,7 +676,7 @@
    .option {
      margin-right: 10px;
      font-size: 24px;
      color: rgb(0, 101, 255);
      color: #0082bc;
      cursor: pointer;

      &.disable {
@@ -675,60 +686,60 @@
    }
  }

  .el-pagination ::v-deep {
    margin-top: 30px;
    text-align: right;
    height: 24px;
    .el-pagination__sizes {
      margin-right: 0;
    }
  // .el-pagination ::v-deep {
  //   margin-top: 30px;
  //   text-align: right;
  //   height: 24px;
  //   .el-pagination__sizes {
  //     margin-right: 0;
  //   }

    button {
      margin: 0;
      background-color: #fff;
      border: 1px solid #c0c5cc;
      border-radius: 2px;
    }
  //   button {
  //     margin: 0;
  //     // background-color: #fff;
  //     border: 1px solid #c0c5cc;
  //     border-radius: 2px;
  //   }

    .number {
      background-color: #fff;
  //   .number {
  //     // background-color: #fff;

      &:not(.disabled):hover {
        color: #0065ff;
      }
  //     &:not(.disabled):hover {
  //       color: #0065ff;
  //     }

      &:not(.disabled).active {
        background-color: #0065ff;
        color: #fff;
      }
    }
  //     &:not(.disabled).active {
  //       // background-color: #0065ff;
  //       color: #fff;
  //     }
  //   }

    .el-input .el-input__inner {
      padding-left: 0;
  //   .el-input .el-input__inner {
  //     padding-left: 0;

      &:hover,
      &:focus {
        border-color: #0065ff;
      }
    }
  //     &:hover,
  //     &:focus {
  //       border-color: #0065ff;
  //     }
  //   }

    .el-pagination__jump {
      margin-left: 12px;
      .el-pagination__editor {
        width: 37px;
        input {
          width: 32px;
        }
      }
    }
  }
  //   .el-pagination__jump {
  //     margin-left: 12px;
  //     .el-pagination__editor {
  //       width: 37px;
  //       input {
  //         width: 32px;
  //       }
  //     }
  //   }
  // }
}
</style>

<style >
<style>
.el-date-table td.start-date span,
.el-date-table td.end-date span {
  background-color: #0065ff;
  /* background-color: #0065ff; */
}

.el-button--text span {
@@ -740,4 +751,4 @@
  color: #0065ff;
  border-color: #0065ff;
}
</style>
</style>

 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>

 src/views/equipmentManagement/equipmentList/index.vue

@@ -3,48 +3,71 @@
    <!-- 页头 -->
    <IndexHeader :opacity="false"></IndexHeader>
    <!-- 面包屑 -->
    <div class="heart">
    <!-- <div class="breadcrumb">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/manageCenter' }"
          >管理中心</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/manageCenter' }">管理中心</el-breadcrumb-item>
        <el-breadcrumb-item>设备管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div> -->
    <div class="breadcrumb">
      <div style="font-family: PingFang SC Regular;" @click="$router.push('/manageCenter')">管理中心 ></div>
      <div style="font-family: PingFang SC Bold;">设备管理</div>
    </div>

    <!-- 主要内容 -->
    <Content></Content>

    <!-- 页尾 -->
    <Footer :isBlack="true"></Footer>
    <!-- <Footer :isBlack="true"></Footer> -->
  </div>
</template>

<script>
import IndexHeader from "@/components/IndexHeader";
import Content from "@/views/equipmentManagement/equipmentList/components/Content";
import Footer from "@/components/Footer";
import IndexHeader from "@/components/IndexHeader"
import Content from "@/views/equipmentManagement/equipmentList/components/Content"
import Footer from "@/components/Footer"

export default {
  components: {
    IndexHeader,
    Content,
    Footer,
  },
};
    Content
    // Footer
  }
}
</script>

<style lang="scss" scoped>
.equipmentList {
  background-color: rgb(243, 245, 248);
  background-color: #34405a;
  padding-bottom: 24px;
  .breadcrumb {
    padding: 24px 0;
    width: 1280px;
    // background-color: #34405a;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;

  .el-breadcrumb {
    margin-top: 48px;
    margin-bottom: 24px;

    ::v-deep span {
      color: #666;
    font-size: 14px;
    font-weight: normal;
    line-height: 22px;
    letter-spacing: 0px;
    color: #ffffff;
    div {
      margin-right: 8px;
    }
  }
  // background-color: #34405a;
  // .breadcrumb {
  //   height: 10px;
  // }
  // .el-breadcrumb {
  //   margin-top: 48px;
  //   margin-bottom: 24px;

  //   ::v-deep span {
  //     color: #666;
  //   }
  // }
}
</style>
</style>