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

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 }}%
@@ -42,9 +32,9 @@
   </div>
 </template>
 <script setup>
-  import { ref } from 'vue'
+import { ref } from 'vue'
-  import { infrastructureInfo } from '@/api/capabilityCloud'
+import { infrastructureInfo } from '@/api/capabilityCloud'
-  let myDataList = ref([
+let myDataList = ref([
   {
     title: '视频资源数量',
     snum: '0',
@@ -52,37 +42,46 @@
     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'),
   },
-  ])
+])
-  function fontFormat(name) {
+function fontFormat(name) {
   switch (name) {
     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
   }
-  }
+}
-  const params = {
+const params = {
   name: '',
   pageNo: 1,
   pageSize: 10,
-  }
+}
-  infrastructureInfo().then((res) => {
+infrastructureInfo().then((res) => {
   console.log('基础设施==================>', res.data.data)
   myDataList.value.forEach((val) => {
     const obj = res.data.data.filter((item) => item.type === val.title)[0]
@@ -95,10 +94,12 @@
       val.snum = obj.amount
     }
   })
-  })
+}).catch(err => {
+  console.log('err------------>', err);
+})
 </script>
 <style lang="less" scoped>
-  .infrastructure {
+.infrastructure {
   width: 4.4rem;
   height: 4.63rem;
   position: relative;
@@ -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,44 +143,53 @@
       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 {
+
+      &>div:first-child {
         font-size: 0.18rem;
         color: #ffffff;
         margin-bottom: 0.1rem;
         line-height: 0.18rem;
         margin-top: 0.3rem;
       }
-        & > div:last-child {
+
+      &>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;
@@ -188,26 +201,32 @@
       align-items: flex-end;
     }
   }
-  }
+}
-  .infrastructure:hover {
+
+.infrastructure:hover {
   border: 2px solid;
   animation: turn 5s linear infinite;
-  }
+}
-  @keyframes turn {
+
+@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;
   }
-  }
+}
 </style>