From 1d61355bc639d33ab6c52b917c1ed2e894ccf5f7 Mon Sep 17 00:00:00 2001
From: guoyue <guoyue2@hisense.com>
Date: Fri, 23 Sep 2022 10:36:52 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A5=BF=E6=B5=B7=E5=B2=B8=EF=BC=9A=E8=83=BD?=
 =?UTF-8?q?=E5=8A=9B=E4=BA=91=E5=9B=BE-=E5=9F=BA=E7=A1=80=E8=AE=BE?=
 =?UTF-8?q?=E6=96=BD-=E5=8D=95=E5=85=B5=E8=AE=BE=E5=A4=87=EF=BC=8C?=
 =?UTF-8?q?=E6=97=A0=E4=BA=BA=E6=9C=BA=E5=89=8D=E7=AB=AF=E5=86=99=E6=AD=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Infrastructure.vue             | 357 +++++++++---------
 1 file changed, 188 insertions(+), 169 deletions(-)

diff --git a/front/src/views/capabilityCloud/components/Infrastructure.vue b/front/src/views/capabilityCloud/components/Infrastructure.vue
index 9967bf58..573e1ff5 100644
--- a/front/src/views/capabilityCloud/components/Infrastructure.vue
+++ b/front/src/views/capabilityCloud/components/Infrastructure.vue
@@ -11,28 +11,18 @@
       <span class="title">基础设施</span>
     </div>
     <div class="infrastructure-content">
-      <div
-        class="infrastructure-content-son"
-        v-for="(item, index) in myDataList"
-        :key="index"
-      >
-        <div
-          class="num-class"
-          :style="`background:url(${item.img}) no-repeat;background-position:top left;background-size:40%`"
-        >
+      <div class="infrastructure-content-son" v-for="(item, index) in myDataList" :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
-            :stroke-color="{
-              '0%': '#108ee9',
-              '100%': '#87d068',
-            }"
-            :percent="item.percentage"
-            :show-info="false"
-          />
+          <a-progress :stroke-color="{
+            '0%': '#108ee9',
+            '100%': '#87d068',
+          }" :percent="item.percentage" :show-info="false" />
         </div>
         <div class="percentage" :style="fontFormat(item.title)">
           {{ item.percentage }}%
@@ -42,172 +32,201 @@
   </div>
 </template>
 <script setup>
-  import { ref } from 'vue'
-  import { infrastructureInfo } from '@/api/capabilityCloud'
-  let myDataList = ref([
-    {
-      title: '视频资源数量',
-      snum: '0',
-      percentage: '100',
-      img: require('../../../assets/capabilityCloud/infrastructure_sz.png'),
-    },
-    {
-      title: '云资源',
-      snum: '0',
-      percentage: '0',
-      img: require('../../../assets/capabilityCloud/infrastructure_yz.png'),
-    },
-    {
-      title: '感知资源',
-      snum: '0',
-      percentage: '0',
-      img: require('../../../assets/capabilityCloud/infrastructure_gz.png'),
-    },
-  ])
-  function fontFormat(name) {
-    switch (name) {
-      case '视频资源数量':
-        return 'color: #32ff91;'
-        break
-      case '云资源':
-        return 'color: #f4fd25;'
-        break
-      case '感知资源':
-        return 'color: #ff1d18;'
-        break
-    }
+import { ref } from 'vue'
+import { infrastructureInfo } from '@/api/capabilityCloud'
+let myDataList = ref([
+  {
+    title: '视频资源数量',
+    snum: '0',
+    percentage: '100',
+    img: require('../../../assets/capabilityCloud/infrastructure_sz.png'),
+  },
+  {
+    // title: '云资源',
+    title: '单兵设备',
+    snum: '2',
+    percentage: '100',
+    img: require('../../../assets/capabilityCloud/infrastructure_yz.png'),
+  },
+  {
+    // title: '感知资源',
+    title: '无人机',
+    snum: '2',
+    percentage: '100',
+    img: require('../../../assets/capabilityCloud/infrastructure_gz.png'),
+  },
+])
+function fontFormat(name) {
+  switch (name) {
+    case '视频资源数量':
+      return 'color: #32ff91;'
+      break
+    // case '云资源':
+    //   return 'color: #f4fd25;'
+    //   break
+    // case '感知资源':
+    //   return 'color: #ff1d18;'
+    //   break
+
+    case '单兵设备':
+      return 'color: #f4fd25;'
+      break
+    case '无人机':
+      return 'color: #ff1d18;'
+      break
   }
-  const params = {
-    name: '',
-    pageNo: 1,
-    pageSize: 10,
-  }
-  infrastructureInfo().then((res) => {
-    console.log('基础设施==================>', res.data.data)
-    myDataList.value.forEach((val) => {
-      const obj = res.data.data.filter((item) => item.type === val.title)[0]
-      if (obj) {
-        if (obj.type == '视频资源数量') {
-          if (uavAndIndividualSoldier.num) {
-            obj.amount = obj.amount - 0 + uavAndIndividualSoldier.num
-          }
+}
+const params = {
+  name: '',
+  pageNo: 1,
+  pageSize: 10,
+}
+infrastructureInfo().then((res) => {
+  console.log('基础设施==================>', res.data.data)
+  myDataList.value.forEach((val) => {
+    const obj = res.data.data.filter((item) => item.type === val.title)[0]
+    if (obj) {
+      if (obj.type == '视频资源数量') {
+        if (uavAndIndividualSoldier.num) {
+          obj.amount = obj.amount - 0 + uavAndIndividualSoldier.num
         }
-        val.snum = obj.amount
       }
-    })
+      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;
+  background: rgba(0, 108, 188, 0.1);
+  border: 0.01rem rgba(0, 108, 188, 0.7) solid;
+  border-radius: 0.03rem;
+  padding: 0.2rem;
+  padding-top: 0;
+  text-decoration: none;
+  outline: none;
+  -webkit-transition: all 100ms ease-out;
+  -moz-transition: all 100ms ease-out;
+  transition: all 100ms ease-out;
+
+  .infrastructure-top {
     width: 4.4rem;
-    height: 4.63rem;
-    position: relative;
-    background: rgba(0, 108, 188, 0.1);
-    border: 0.01rem rgba(0, 108, 188, 0.7) solid;
-    border-radius: 0.03rem;
-    padding: 0.2rem;
-    padding-top: 0;
-    text-decoration: none;
-    outline: none;
-    -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')
-        no-repeat;
-      background-size: cover;
-      background-position: center;
-      line-height: 0.44rem;
-      text-align: center;
-      .title {
-        font-size: 0.24rem;
-      }
+    height: 0.44rem;
+    position: absolute;
+    top: 0;
+    background: url('~@/assets/capabilityCloud/infrastructure_title.png') no-repeat;
+    background-size: cover;
+    background-position: center;
+    line-height: 0.44rem;
+    text-align: center;
+
+    .title {
+      font-size: 0.24rem;
     }
-    .infrastructure-content {
+  }
+
+  .infrastructure-content {
+    width: 4rem;
+    margin-top: 0.62rem;
+
+    .infrastructure-content-son {
+      display: flex;
       width: 4rem;
-      margin-top: 0.62rem;
-      .infrastructure-content-son {
-        display: flex;
-        width: 4rem;
-        height: 1.17rem;
-        background: linear-gradient(to right, #214677, rgba(2, 20, 103, 0));
-        align-items: center;
-        margin-bottom: 0.14rem;
-        padding-left: 0.1rem;
+      height: 1.17rem;
+      background: linear-gradient(to right, #214677, rgba(2, 20, 103, 0));
+      align-items: center;
+      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;
+        margin-bottom: 0.1rem;
+        line-height: 0.18rem;
+        margin-top: 0.3rem;
       }
-      .num-class {
-        width: 1.5rem;
-        height: 1rem;
-        text-align: center;
-        margin-right: 0.2rem;
-        & > div:first-child {
-          font-size: 0.18rem;
-          color: #ffffff;
-          margin-bottom: 0.1rem;
-          line-height: 0.18rem;
-          margin-top: 0.3rem;
-        }
-        & > div:last-child {
-          font-size: 0.36rem;
-          line-height: 0.36rem;
-          color: #1ce2e5;
+
+      &>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 {
-        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;
-        font-size: 0.24rem;
-        line-height: 0.24rem;
-        font-family: 'DIN-Bold';
-        margin-left: 0.1rem;
-        display: flex;
-        align-items: flex-end;
-      }
+    }
+
+    // .health-degree:
+    .percentage {
+      height: 0.57rem;
+      font-size: 0.24rem;
+      line-height: 0.24rem;
+      font-family: 'DIN-Bold';
+      margin-left: 0.1rem;
+      display: flex;
+      align-items: flex-end;
     }
   }
-  .infrastructure:hover {
-    border: 2px solid;
-    animation: turn 5s linear infinite;
+}
+
+.infrastructure:hover {
+  border: 2px solid;
+  animation: turn 5s linear infinite;
+}
+
+@keyframes turn {
+  0% {
+    border-image: linear-gradient(to right, #003194, #00ffea) 1;
   }
-  @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;
-    }
+
+  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>