西海岸：顶部导航去掉技术文档

front/public/static/config/location.js

@@ -500,7 +500,7 @@ else if (newLocation === 'xihaian') {
     { name: '能力集市', key: 'DetailsPageconetent' },
     { name: '能力云图', key: 'capabilityCloud' },
     { name: '能力统计', key: 'abilityStatistics' },
-    { name: '技术文档', key: 'instructionManual' },
+    // { name: '技术文档', key: 'instructionManual' },
     // { name: '开发指南', key: 'developmentGuide' },
     { name: '需求中心', key: 'demandCenter' },
     // { name: '个人中心', key: 'personalCenter' },

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',
-              '0%': '#108ee9',
+            '100%': '#87d068',
-              '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,172 +32,201 @@
   </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: '视频资源数量',
+    title: '视频资源数量',
-      snum: '0',
+    snum: '0',
-      percentage: '100',
+    percentage: '100',
-      img: require('../../../assets/capabilityCloud/infrastructure_sz.png'),
+    img: require('../../../assets/capabilityCloud/infrastructure_sz.png'),
-    },
+  },
-    {
+  {
-      title: '云资源',
+    // title: '云资源',
-      snum: '0',
+    title: '单兵设备',
-      percentage: '0',
+    snum: '2',
-      img: require('../../../assets/capabilityCloud/infrastructure_yz.png'),
+    percentage: '100',
-    },
+    img: require('../../../assets/capabilityCloud/infrastructure_yz.png'),
-    {
+  },
-      title: '感知资源',
+  {
-      snum: '0',
+    // title: '感知资源',
-      percentage: '0',
+    title: '无人机',
-      img: require('../../../assets/capabilityCloud/infrastructure_gz.png'),
+    snum: '2',
-    },
+    percentage: '100',
-  ])
+    img: require('../../../assets/capabilityCloud/infrastructure_gz.png'),
-  function fontFormat(name) {
+  },
-    switch (name) {
+])
-      case '视频资源数量':
+function fontFormat(name) {
-        return 'color: #32ff91;'
+  switch (name) {
-        break
+    case '视频资源数量':
-      case '云资源':
+      return 'color: #32ff91;'
-        return 'color: #f4fd25;'
+      break
-        break
+    // case '云资源':
-      case '感知资源':
+    //   return 'color: #f4fd25;'
-        return 'color: #ff1d18;'
+    //   break
-        break
+    // case '感知资源':
-    }
+    //   return 'color: #ff1d18;'
+    //   break
+
+    case '单兵设备':
+      return 'color: #f4fd25;'
+      break
+    case '无人机':
+      return 'color: #ff1d18;'
+      break
   }
-  const params = {
+}
-    name: '',
+const params = {
-    pageNo: 1,
+  name: '',
-    pageSize: 10,
+  pageNo: 1,
-  }
+  pageSize: 10,
-  infrastructureInfo().then((res) => {
+}
-    console.log('基础设施==================>', res.data.data)
+infrastructureInfo().then((res) => {
-    myDataList.value.forEach((val) => {
+  console.log('基础设施==================>', res.data.data)
-      const obj = res.data.data.filter((item) => item.type === val.title)[0]
+  myDataList.value.forEach((val) => {
-      if (obj) {
+    const obj = res.data.data.filter((item) => item.type === val.title)[0]
-        if (obj.type == '视频资源数量') {
+    if (obj) {
-          if (uavAndIndividualSoldier.num) {
+      if (obj.type == '视频资源数量') {
-            obj.amount = obj.amount - 0 + uavAndIndividualSoldier.num
+        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;
+    height: 0.44rem;
-    position: relative;
+    position: absolute;
-    background: rgba(0, 108, 188, 0.1);
+    top: 0;
-    border: 0.01rem rgba(0, 108, 188, 0.7) solid;
+    background: url('~@/assets/capabilityCloud/infrastructure_title.png') no-repeat;
-    border-radius: 0.03rem;
+    background-size: cover;
-    padding: 0.2rem;
+    background-position: center;
-    padding-top: 0;
+    line-height: 0.44rem;
-    text-decoration: none;
+    text-align: center;
-    outline: none;
+
-    -webkit-transition: all 100ms ease-out;
+    .title {
-    -moz-transition: all 100ms ease-out;
+      font-size: 0.24rem;
-    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;
-      }
     }
-    .infrastructure-content {
+  }
+
+  .infrastructure-content {
+    width: 4rem;
+    margin-top: 0.62rem;
+
+    .infrastructure-content-son {
+      display: flex;
       width: 4rem;
-      margin-top: 0.62rem;
+      height: 1.17rem;
-      .infrastructure-content-son {
+      background: linear-gradient(to right, #214677, rgba(2, 20, 103, 0));
-        display: flex;
+      align-items: center;
-        width: 4rem;
+      margin-bottom: 0.14rem;
-        height: 1.17rem;
+      padding-left: 0.1rem;
-        background: linear-gradient(to right, #214677, rgba(2, 20, 103, 0));
+    }
-        align-items: center;
+
-        margin-bottom: 0.14rem;
+    .num-class {
-        padding-left: 0.1rem;
+      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;
+      &>div:last-child {
-        height: 1rem;
+        font-size: 0.36rem;
-        text-align: center;
+        line-height: 0.36rem;
-        margin-right: 0.2rem;
+        color: #1ce2e5;
-        & > div:first-child {
+      }
-          font-size: 0.18rem;
+    }
-          color: #ffffff;
+
-          margin-bottom: 0.1rem;
+    .health-degree {
-          line-height: 0.18rem;
+      width: 1.35rem;
-          margin-top: 0.3rem;
+
-        }
+      .health-degree-title {
-        & > div:last-child {
+        font-size: 0.14rem;
-          font-size: 0.36rem;
+        color: rgba(255, 255, 255, 0.6);
-          line-height: 0.36rem;
+        margin-bottom: 0.08rem;
-          color: #1ce2e5;
+      }
+
+      :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 {
+    // .health-degree:
-          font-size: 0.14rem;
+    .percentage {
-          color: rgba(255, 255, 255, 0.6);
+      height: 0.57rem;
-          margin-bottom: 0.08rem;
+      font-size: 0.24rem;
-        }
+      line-height: 0.24rem;
-        :deep(.ant-progress-outer) {
+      font-family: 'DIN-Bold';
-          height: 0.27rem;
+      margin-left: 0.1rem;
-        }
+      display: flex;
-        :deep(.ant-progress-inner) {
+      align-items: flex-end;
-          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;
-      }
     }
   }
-  .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% {
+  25% {
-      border-image: linear-gradient(to right, #003194, #00ffea) 1;
+    border-image: linear-gradient(to bottom, #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;
-    }
   }
+
+  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>