基础设施外部引用

front/src/views/home/DetailsPageconetent.vue

@@ -2,10 +2,13 @@
   <!-- 青岛 -->
   <div class="details-pageconetent" v-if="whoShow1 && whoShow1.itShowQingDao">
     <home-header></home-header>
-    <div class="details-pageconetent-left">
+    <div class="details-pageconetent-left" v-if="Cardsname != '基础设施'">
       <detailsPageconetentTree />
     </div>
-    <div class="top" v-if="Cardsname != '知识库'">
+    <div class="details-pageconetent-left" v-else>
+      <detailsPageInfrastructureTree />
+    </div>
+    <div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
       <div class="top-title">
         <div
           v-for="item in titleName"
@@ -143,6 +146,28 @@
         <a-empty />
       </div>
     </div>
+    <div class="top" v-else-if="Cardsname === '基础设施'">
+      <div class="top-title">
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
+            }"
+          ></span>
+          <span>{{ item.name }}</span>
+        </div>
+      </div>
+      <div class="top-content-father">
+        <infrastructurePage />
+      </div>
+    </div>
     <div class="top" v-else>
       <div class="top-title">
         <div
@@ -656,6 +681,10 @@
   // import VideoSurveillance from '@/views/home/videoSurveillance'
   // 数据资源引用
   import DetailsPageResource from '@/views/home/components/DetailsPageResource.vue'
+  // 基础设施引用
+  import infrastructurePage from '@/views/home/infrastructurePage.vue'
+  import detailsPageInfrastructureTree from '@/views/home/detailsPageInfrastructureTree.vue'
+
   export default defineComponent({
     setup() {
       // const store = useStore()
@@ -1291,6 +1320,8 @@
       // VideoCameraOutlined,
       // VideoSurveillance,
       DetailsPageResource,
+      infrastructurePage,
+      detailsPageInfrastructureTree,
     },
     beforeUnmount() {
       mybus.off('selectCardsitem')
@@ -1303,7 +1334,7 @@
   })
 </script>
 <style lang="less" scoped>
-  .resultListSearchInput-father {
+.resultListSearchInput-father {
   background: #f3f5f9;
   padding-left: 0.2rem;
   padding-top: 0.2rem;
@@ -1318,8 +1349,8 @@
       margin-top: 0.2rem;
     }
   }
-  }
-  .resultListSearchInput {
+}
+.resultListSearchInput {
   margin-left: 0.1rem;
   :deep(.ant-input) {
     width: 4rem;
@@ -1341,8 +1372,8 @@
   :deep(.ant-input-group-addon) {
     left: 0 !important;
   }
-  }
-  .button-reset {
+}
+.button-reset {
   border: 0;
   outline: none;
   width: 0.8rem;
@@ -1355,8 +1386,8 @@
   line-height: 0.34rem;
   margin-left: 2.5rem;
   cursor: pointer;
-  }
-  .details-pageconetent {
+}
+.details-pageconetent {
   height: 100%;
   width: 100%;
   display: flex;
@@ -1659,8 +1690,8 @@
       }
     }
   }
-  }
-  .shrinkTag {
+}
+.shrinkTag {
   width: 0.5rem;
   display: flex;
   justify-content: center;
@@ -1669,12 +1700,12 @@
   span {
     cursor: pointer;
   }
-  }
-  .shrink {
+}
+.shrink {
   height: unset !important;
   overflow: unset !important;
-  }
-  .talk-monitor {
+}
+.talk-monitor {
   position: fixed;
   bottom: 0.5rem;
   right: 0.1rem;
@@ -1687,8 +1718,8 @@
     background: url('~@/assets/home/icon-talk.png');
     background-size: cover;
   }
-  }
-  .top-content-father {
+}
+.top-content-father {
   width: 10.87rem;
   padding-left: 0.2rem;
   // margin-bottom: .2rem;
@@ -1766,11 +1797,11 @@
   .top-content:nth-child(1) {
     margin-top: 0.41rem !important;
   }
-  }
-  :deep(.ant-card-grid) {
+}
+:deep(.ant-card-grid) {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   -webkit-line-clamp: 1;
-  }
+}
 </style>