合并装备代码

spring

2025-03-24 de319760a2124d3043491d40f9c2ebf3d27be78f

 src/views/CNAS/resourceDemand/device/component/deviceOverview.vue

@@ -1,158 +1,8 @@
<!-- 设备总览 -->
<style scoped>
.title {
  height: 60px;
  line-height: 60px;
}

.search {
  background-color: #fff;
  height: 50px;
  display: flex;
  align-items: center;
}

.search_thing {
  width: 350px;
  display: flex;
  align-items: center;
}

.search_label {
  width: 110px;
  font-size: 14px;
  text-align: left;
}

.search_input {
  width: calc(100% - 110px);
}

.table {
  background-color: #fff;
  height: calc(100vh - 17em);
  /* padding: 10px; */
  overflow-y: auto;
}

.card {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, 330px);
  justify-content: start;
  grid-gap: 16px;
  min-height: 300px;
  padding-left: 0;
}

.card li {
  width: 330px;
  height: 165px;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #EEEEEE;
  margin: 0 !important;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 16px;
  font-size: 14px;
  color: #666666;
  position: relative;
  overflow: hidden;
}

.card li .img {
  width: 90px;
  height: 90px;
  border-radius: 16px;
  margin-right: 10px;
}

.list-left .list-left-info {
  line-height: 36px;
  display: flex;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.circles {
  position: absolute;
  width: 70px;
  height: 70px;
  right: 0;
  top: 0;
  z-index: 0;
}

.circles .circle {
  border-radius: 50%;
  opacity: 0.2;
}

.circle0,
.circle1,
.circle2 {
  width: 60px;
  height: 60px;
  position: absolute;
}

.circle3 {
  width: 16px;
  height: 16px;
  position: absolute;
}

.circle0 {
  bottom: 6px;
  left: 0;
}

.circle1 {
  bottom: 0;
  right: -30px;
}

.circle2 {
  left: 0;
  top: -30px;
}

.circle3 {
  top: 0;
  right: 0;
}

.success .circle {
  background: #34BD66;
}

.danger .circle {
  background: #FF3838;
}

.warning .circle {
  background: #FBB247;
}

.info .circle {
  background: #909399;
}

.el-form-item {
  margin-top: 11px;
  margin-bottom: 11px;
}
</style>

<template>
  <div class="role_manage">
    <div>
      <el-form :model="entity" inline label-position="right" label-width="80px">
      <el-form :model="entity" inline label-position="right">
        <el-form-item label="状态:">
          <el-select v-model="entity.deviceStatus" placeholder="全部" size="small" clearable>
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
@@ -387,3 +237,124 @@
  }
}
</script>
<style scoped>
.table {
  background-color: #fff;
  height: calc(100vh - 17em);
  /* padding: 10px; */
  overflow-y: auto;
}

.card {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, 330px);
  justify-content: start;
  grid-gap: 16px;
  min-height: 300px;
  padding-left: 0;
}

.card li {
  width: 330px;
  height: 165px;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #EEEEEE;
  margin: 0 !important;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 16px;
  font-size: 14px;
  color: #666666;
  position: relative;
  overflow: hidden;
}

.card li .img {
  width: 90px;
  height: 90px;
  border-radius: 16px;
  margin-right: 10px;
}

.list-left .list-left-info {
  line-height: 36px;
  display: flex;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.circles {
  position: absolute;
  width: 70px;
  height: 70px;
  right: 0;
  top: 0;
  z-index: 0;
}

.circles .circle {
  border-radius: 50%;
  opacity: 0.2;
}

.circle0,
.circle1,
.circle2 {
  width: 60px;
  height: 60px;
  position: absolute;
}

.circle3 {
  width: 16px;
  height: 16px;
  position: absolute;
}

.circle0 {
  bottom: 6px;
  left: 0;
}

.circle1 {
  bottom: 0;
  right: -30px;
}

.circle2 {
  left: 0;
  top: -30px;
}

.circle3 {
  top: 0;
  right: 0;
}

.success .circle {
  background: #34BD66;
}

.danger .circle {
  background: #FF3838;
}

.warning .circle {
  background: #FBB247;
}

.info .circle {
  background: #909399;
}

.el-form-item {
  margin-top: 11px;
  margin-bottom: 11px;
}
</style>