西海岸：能力云图-基础设施-单兵设备，无人机前端写死

front/src/views/capabilityCloud/components/Infrastructure.vue

@@ -11,28 +11,18 @@
       <span class="title">基础设施</span>
     </div>
     <div class="infrastructure-content">
-      <div
+      <div class="infrastructure-content-son" v-for="(item, index) in myDataList" :key="index">
-        class="infrastructure-content-son"
+        <div class="num-class"
-        v-for="(item, index) in myDataList"
+          :style="`background:url(${item.img}) no-repeat;background-position:top left;background-size:40%`">
-        :key="index"
-      >
-        <div
-          class="num-class"
-          :style="`background:url(${item.img}) no-repeat;background-position:top left;background-size:40%`"
-        >
           <div>{{ item.title }}</div>
           <div>{{ item.snum }}</div>
         </div>
         <div class="health-degree">
           <div class="health-degree-title">健康度</div>
-          <a-progress
+          <a-progress :stroke-color="{
-            :stroke-color="{
             '0%': '#108ee9',
             '100%': '#87d068',
-            }"
+          }" :percent="item.percentage" :show-info="false" />
-            :percent="item.percentage"
-            :show-info="false"
-          />
         </div>
         <div class="percentage" :style="fontFormat(item.title)">
           {{ item.percentage }}%
@@ -52,15 +42,17 @@
     img: require('../../../assets/capabilityCloud/infrastructure_sz.png'),
   },
   {
-      title: '云资源',
+    // title: '云资源',
-      snum: '0',
+    title: '单兵设备',
-      percentage: '0',
+    snum: '2',
+    percentage: '100',
     img: require('../../../assets/capabilityCloud/infrastructure_yz.png'),
   },
   {
-      title: '感知资源',
+    // title: '感知资源',
-      snum: '0',
+    title: '无人机',
-      percentage: '0',
+    snum: '2',
+    percentage: '100',
     img: require('../../../assets/capabilityCloud/infrastructure_gz.png'),
   },
 ])
@@ -69,10 +61,17 @@
     case '视频资源数量':
       return 'color: #32ff91;'
       break
-      case '云资源':
+    // case '云资源':
+    //   return 'color: #f4fd25;'
+    //   break
+    // case '感知资源':
+    //   return 'color: #ff1d18;'
+    //   break
+
+    case '单兵设备':
       return 'color: #f4fd25;'
       break
-      case '感知资源':
+    case '无人机':
       return 'color: #ff1d18;'
       break
   }
@@ -95,6 +94,8 @@
       val.snum = obj.amount
     }
   })
+}).catch(err => {
+  console.log('err------------>', err);
 })
 </script>
 <style lang="less" scoped>
@@ -112,24 +113,27 @@
   -webkit-transition: all 100ms ease-out;
   -moz-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
+
   .infrastructure-top {
     width: 4.4rem;
     height: 0.44rem;
     position: absolute;
     top: 0;
-      background: url('~@/assets/capabilityCloud/infrastructure_title.png')
+    background: url('~@/assets/capabilityCloud/infrastructure_title.png') no-repeat;
-        no-repeat;
     background-size: cover;
     background-position: center;
     line-height: 0.44rem;
     text-align: center;
+
     .title {
       font-size: 0.24rem;
     }
   }
+
   .infrastructure-content {
     width: 4rem;
     margin-top: 0.62rem;
+
     .infrastructure-content-son {
       display: flex;
       width: 4rem;
@@ -139,11 +143,13 @@
       margin-bottom: 0.14rem;
       padding-left: 0.1rem;
     }
+
     .num-class {
       width: 1.5rem;
       height: 1rem;
       text-align: center;
       margin-right: 0.2rem;
+
       &>div:first-child {
         font-size: 0.18rem;
         color: #ffffff;
@@ -151,32 +157,39 @@
         line-height: 0.18rem;
         margin-top: 0.3rem;
       }
+
       &>div:last-child {
         font-size: 0.36rem;
         line-height: 0.36rem;
         color: #1ce2e5;
       }
     }
+
     .health-degree {
       width: 1.35rem;
+
       .health-degree-title {
         font-size: 0.14rem;
         color: rgba(255, 255, 255, 0.6);
         margin-bottom: 0.08rem;
       }
+
       :deep(.ant-progress-outer) {
         height: 0.27rem;
       }
+
       :deep(.ant-progress-inner) {
         height: 0.27rem;
         border-radius: 0.14rem;
         border: 0.01rem solid rgba(8, 153, 231, 0.6);
         background: rgba(21, 65, 123, 0.6);
+
         div {
           height: 0.27rem !important;
         }
       }
     }
+
     // .health-degree:
     .percentage {
       height: 0.57rem;
@@ -189,23 +202,29 @@
     }
   }
 }
+
 .infrastructure:hover {
   border: 2px solid;
   animation: turn 5s linear infinite;
 }
+
 @keyframes turn {
   0% {
     border-image: linear-gradient(to right, #003194, #00ffea) 1;
   }
+
   25% {
     border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
   }
+
   50% {
     border-image: linear-gradient(to left, #003194, #00ffea) 1;
   }
+
   75% {
     border-image: linear-gradient(to top, #003194, #00ffea) 1;
   }
+
   100% {
     border-image: linear-gradient(to right, #003194, #00ffea) 1;
   }