Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev

back/src/views/modules/abilityStatistics/applicationResources.vue

@@ -98,7 +98,7 @@ export default {
             },
             axisLine:{
                 lineStyle:{
-                    color:"#ebebeb"
+                    color:"#f5f5f5"
                 }
             },
             axisLabel: {//y轴文字的配置
@@ -133,11 +133,25 @@ export default {
         },
         },
         series: [
+             {
+           data: [5, 5, 5, 5, 5, 5],
+            type: 'bar',
+            barWidth: 14,
+            stack: '1',
+            itemStyle: {
+                barBorderRadius: [20,20,20,20],
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(178, 189, 255,0)' },
+                // { offset: 0.5, color: '#188df0' },
+                { offset: 1, color: 'rgba(82, 106, 255,0)' }
+                ])
+            },
+            },
             {
            data: [60, 90, 50, 80],
             type: 'bar',
             barWidth: 14,
-           
+            stack: '1',
             itemStyle: {
                 barBorderRadius: [20,20,20,20],
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -285,11 +299,25 @@ export default {
         },
         },
         series: [
+             {
+           data: [5, 5, 5, 5],
+            type: 'bar',
+            barWidth: 14,
+            stack: '1',
+            itemStyle: {
+                barBorderRadius: [20,20,20,20],
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(178, 189, 255,0)' },
+                // { offset: 0.5, color: '#188df0' },
+                { offset: 1, color: 'rgba(82, 106, 255,0)' }
+                ])
+            },
+            },
             {
            data: [60, 90, 50, 80],
             type: 'bar',
             barWidth: 14,
-           
+            stack: '1',
             itemStyle: {
                 barBorderRadius: [20,20,20,20],
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -317,9 +345,9 @@ export default {
             type: 'category',
             data: ['组件名称1', '组件名称2', '组件名称3', '组件名称4', '组件名称5', '组件名称6'],
             color:['#f5f5f5'],
-            axisTick:{
+            axisTick: {    // 坐标轴 刻度
-              show:false,//不显示坐标轴刻度线
+                show: false,  // 是否显示
-            },
+                },
             splitLine: {
               show: true,
               color:['#f5f5f5']
@@ -362,10 +390,24 @@ export default {
         },
         series: [
             {
+           data: [5, 5, 5, 5, 5, 5],
+            type: 'bar',
+            barWidth: 14,
+            stack: '1',
+            itemStyle: {
+                barBorderRadius: [20,20,20,20],
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(178, 189, 255,0)' },
+                // { offset: 0.5, color: '#188df0' },
+                { offset: 1, color: 'rgba(82, 106, 255,0)' }
+                ])
+            },
+            },
+             {
            data: [60, 90, 50, 80, 50, 80],
             type: 'bar',
             barWidth: 14,
-           
+            stack: '1',
             itemStyle: {
                 barBorderRadius: [20,20,20,20],
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -374,7 +416,7 @@ export default {
                 { offset: 1, color: 'rgba(82, 106, 255,0.8)' }
                 ])
             },
-            }
+            },
         ]
         };
 

back/src/views/modules/abilityStatistics/componentServices.vue

@@ -358,6 +358,7 @@ export default {
         padding-left: 20px;
         margin-top: 20px;
         margin-right: 20px;
+        /* background-image:url("../../../assets/img/排行榜背景图.png"); */
     }
     .container-body5{
         width:640px;

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,474 +1334,474 @@
   })
 </script>
 <style lang="less" scoped>
-  .resultListSearchInput-father {
+.resultListSearchInput-father {
-    background: #f3f5f9;
+  background: #f3f5f9;
-    padding-left: 0.2rem;
+  padding-left: 0.2rem;
-    padding-top: 0.2rem;
+  padding-top: 0.2rem;
-    .resultListSearchInput-son {
+  .resultListSearchInput-son {
-      background: #fff;
+    background: #fff;
-      padding: 0.2rem 0.2rem 0rem 0.3rem;
+    padding: 0.2rem 0.2rem 0rem 0.3rem;
-      margin-right: 0.2rem;
+    margin-right: 0.2rem;
-      .hengxian {
+    .hengxian {
-        width: 100%;
+      width: 100%;
-        height: 0.01rem;
+      height: 0.01rem;
-        background: rgba(150, 144, 144, 0.3);
+      background: rgba(150, 144, 144, 0.3);
-        margin-top: 0.2rem;
+      margin-top: 0.2rem;
-      }
     }
   }
-  .resultListSearchInput {
+}
-    margin-left: 0.1rem;
+.resultListSearchInput {
-    :deep(.ant-input) {
+  margin-left: 0.1rem;
-      width: 4rem;
+  :deep(.ant-input) {
-      height: 0.36rem;
+    width: 4rem;
-      background: #fff;
+    height: 0.36rem;
-      border-radius: 0.04rem;
+    background: #fff;
-    }
+    border-radius: 0.04rem;
-    :deep(.ant-input-search-button) {
-      width: 0.8rem;
-      height: 0.36rem;
-      background: #0087ff;
-      border-radius: 0.04rem !important;
-      font-size: 0.14rem;
-      font-weight: 400;
-      color: #fff;
-      line-height: 0.34rem;
-      margin-left: 0.1rem;
-    }
-    :deep(.ant-input-group-addon) {
-      left: 0 !important;
-    }
   }
-  .button-reset {
+  :deep(.ant-input-search-button) {
-    border: 0;
-    outline: none;
     width: 0.8rem;
     height: 0.36rem;
-    background: #e1edfa;
+    background: #0087ff;
-    border-radius: 0.04rem;
+    border-radius: 0.04rem !important;
     font-size: 0.14rem;
     font-weight: 400;
-    color: #0087ff;
+    color: #fff;
     line-height: 0.34rem;
-    margin-left: 2.5rem;
+    margin-left: 0.1rem;
-    cursor: pointer;
   }
-  .details-pageconetent {
+  :deep(.ant-input-group-addon) {
-    height: 100%;
+    left: 0 !important;
-    width: 100%;
+  }
-    display: flex;
+}
-    // flex-direction: column;
+.button-reset {
-    justify-content: center;
+  border: 0;
-    align-items: center;
+  outline: none;
-    margin-top: 0.67rem;
+  width: 0.8rem;
+  height: 0.36rem;
+  background: #e1edfa;
+  border-radius: 0.04rem;
+  font-size: 0.14rem;
+  font-weight: 400;
+  color: #0087ff;
+  line-height: 0.34rem;
+  margin-left: 2.5rem;
+  cursor: pointer;
+}
+.details-pageconetent {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  // flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 0.67rem;
+  position: relative;
+  background: rgba(245, 243, 243, 0.3);
+  .details-pageconetent-left {
+    max-height: 6.9rem;
+    position: absolute;
+    width: 2.5rem;
+    top: 0.17rem;
+    left: 2.5rem;
+    margin-right: 0.17rem;
+    overflow: auto;
+  }
+  .top {
+    min-height: 7.2rem;
     position: relative;
-    background: rgba(245, 243, 243, 0.3);
+    width: 10.87rem;
-    .details-pageconetent-left {
+    display: flex;
-      max-height: 6.9rem;
+    padding-top: 0.2rem;
-      position: absolute;
+    flex-direction: column;
-      width: 2.5rem;
+    // align-items: center;
-      top: 0.17rem;
+    font-size: 0.16rem;
-      left: 2.5rem;
+    justify-content: left;
-      margin-right: 0.17rem;
+    margin-left: 2.5rem;
-      overflow: auto;
+    .pagination {
+      background: #f3f5f9;
+      padding-bottom: 0.6rem;
     }
-    .top {
+    .jichusheshi {
-      min-height: 7.2rem;
+      // display: flex;
-      position: relative;
+      // flex-direction: column;
-      width: 10.87rem;
+      // justify-content: center;
-      display: flex;
+      // padding-top: .4rem;
-      padding-top: 0.2rem;
+      height: 4.45rem;
-      flex-direction: column;
+      // overflow: hidden;
-      // align-items: center;
+      .yunziyuan {
-      font-size: 0.16rem;
+        width: 100%;
-      justify-content: left;
+        position: relative;
-      margin-left: 2.5rem;
+        .shuoming {
-      .pagination {
+          position: absolute;
-        background: #f3f5f9;
+          right: 0.2rem;
-        padding-bottom: 0.6rem;
+          top: 0.15rem;
-      }
+          font-size: 0.12rem;
-      .jichusheshi {
-        // display: flex;
-        // flex-direction: column;
-        // justify-content: center;
-        // padding-top: .4rem;
-        height: 4.45rem;
-        // overflow: hidden;
-        .yunziyuan {
-          width: 100%;
-          position: relative;
-          .shuoming {
-            position: absolute;
-            right: 0.2rem;
-            top: 0.15rem;
-            font-size: 0.12rem;
-          }
-          .yunziyuan-title {
-            display: flex;
-            align-items: center;
-            .tupian {
-              // width: .89rem;
-              // height: .74rem;
-              // background: url('~@/assets/home/yunziyuan.png');
-            }
-            .title {
-              margin-left: 0.1rem;
-              font-weight: 600;
-              text-decoration: underline;
-              cursor: pointer;
-            }
-          }
-          .fenlei {
-            display: flex;
-            margin-left: 0.2rem;
-            margin-right: 0.3rem;
-            justify-content: space-between;
-          }
-          .keyongziyuan {
-            display: flex;
-            justify-content: space-between;
-            margin-left: 0.3rem;
-            margin-right: 0.3rem;
-            div {
-              display: flex;
-              div:last-child {
-                font-weight: 600;
-              }
-            }
-          }
         }
-        .yunziyuan > div {
+        .yunziyuan-title {
-          margin-bottom: 0.1rem;
-        }
-        .shipin {
-          width: 100%;
-          .shipin-title {
-            display: flex;
-            align-items: center;
-            .tupian {
-              // width: .56rem;
-              // height: .5rem;
-              // background: url('~@/assets/home/shipin.png');
-            }
-            .title {
-              margin-left: 0.1rem;
-              font-weight: 600;
-              text-decoration: underline;
-              cursor: pointer;
-            }
-          }
-          .fenlei {
-            display: flex;
-            margin-left: 0.2rem;
-            div {
-              margin-right: 0.6rem;
-            }
-            .shuzi {
-              font-weight: 600;
-            }
-          }
-        }
-        .shipin > div {
-          margin-bottom: 0.1rem;
-        }
-      }
-      .jichusheshi > div {
-        // background: #eaf4ff;
-        padding-top: 0.1rem;
-        border-radius: 0.04rem;
-        margin-bottom: 0.2rem;
-        padding-bottom: 0.4rem;
-      }
-      .shujuziyuan {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        padding-top: 0.4rem;
-        .yunziyuan {
-          width: 100%;
-          position: relative;
-          .shuoming {
-            position: absolute;
-            right: 0.2rem;
-            top: 0.15rem;
-            font-size: 0.12rem;
-          }
-          .yunziyuan-title {
-            display: flex;
-            align-items: center;
-            margin-left: 0.2rem;
-            .tupian {
-              // width: .51rem;
-              // height: .5rem;
-              // background: url('~@/assets/home/shujuziyuan.png');
-            }
-            .title {
-              margin-left: 0.1rem;
-              font-weight: 600;
-              text-decoration: underline;
-              cursor: pointer;
-            }
-          }
-          .fenlei {
-            display: flex;
-            margin-left: 0.2rem;
-            margin-right: 0.3rem;
-            justify-content: space-between;
-          }
-          .keyongziyuan {
-            display: flex;
-            justify-content: space-between;
-            margin-left: 0.3rem;
-            margin-right: 0.3rem;
-            div {
-              display: flex;
-              div:last-child {
-                font-weight: 600;
-              }
-            }
-          }
-        }
-        .yunziyuan > div {
-          margin-bottom: 0.1rem;
-        }
-      }
-      .shujuziyuan > div {
-        background: #eaf4ff;
-        padding-top: 0.1rem;
-        border-radius: 0.04rem;
-        margin-bottom: 0.2rem;
-        padding-bottom: 0.4rem;
-      }
-      .top-title {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        font-size: 0.2rem;
-        font-family: 'Alibaba PuHuiTi';
-        color: #000000;
-        line-height: 0.34rem;
-        .photo {
-          display: inline-block;
-          height: 0.44rem;
-          width: 0.44rem;
-          margin-right: 0.1rem;
-        }
-        div {
-          margin: 0 0.2rem;
-          padding: 0 0.1rem;
-          cursor: pointer;
           display: flex;
           align-items: center;
+          .tupian {
+            // width: .89rem;
+            // height: .74rem;
+            // background: url('~@/assets/home/yunziyuan.png');
+          }
+          .title {
+            margin-left: 0.1rem;
+            font-weight: 600;
+            text-decoration: underline;
+            cursor: pointer;
+          }
         }
-        div:hover {
+        .fenlei {
-          color: #0087ff;
+          display: flex;
+          margin-left: 0.2rem;
+          margin-right: 0.3rem;
+          justify-content: space-between;
         }
-        .sel {
+        .keyongziyuan {
-          font-weight: 600;
+          display: flex;
-          color: #0087ff;
+          justify-content: space-between;
-          border-bottom: 0.02rem solid #0087ff;
+          margin-left: 0.3rem;
+          margin-right: 0.3rem;
+          div {
+            display: flex;
+            div:last-child {
+              font-weight: 600;
+            }
+          }
         }
       }
-      .top-content-father {
+      .yunziyuan > div {
-        width: 10.87rem;
+        margin-bottom: 0.1rem;
-        padding-left: 0.2rem;
+      }
-        // margin-bottom: .2rem;
+      .shipin {
-        background: #f3f5f9;
+        width: 100%;
-        .top-content-son {
+        .shipin-title {
-          background: #fff;
-          margin: 0rem 0.2rem 0.2rem 0rem;
-          padding-top: 0.2rem;
-          padding-bottom: 0.2rem;
-        }
-        .top-content {
           display: flex;
-          margin-top: 0rem;
+          align-items: center;
-          span:nth-child(1) {
+          .tupian {
-            display: inline-block;
+            // width: .56rem;
-            position: relative;
+            // height: .5rem;
-            // width: .7rem;
+            // background: url('~@/assets/home/shipin.png');
-            line-height: 0.3614rem;
-            white-space: normal;
-            text-align: center;
-            vertical-align: middle;
           }
-          // .top-content-title {
+          .title {
-          //   top: -0.2rem;
+            margin-left: 0.1rem;
-          // }
+            font-weight: 600;
-          .leixingsumfather {
+            text-decoration: underline;
-            width: 8.1rem;
-            display: inline-block;
-            height: 0.3014rem;
-            overflow: hidden;
-            // width: 7.18rem;
-          }
-          .leixingsumfather2 {
-            width: 9.2rem;
-          }
-          .leixingsum {
-            display: inline-block;
             cursor: pointer;
-            text-align: center;
+          }
-            margin-top: 0.05rem;
+        }
-            // margin-bottom: .1rem;
+        .fenlei {
-            .ant-tag-checkable {
+          display: flex;
-              width: 0.83rem;
+          margin-left: 0.2rem;
-              height: 0.25rem;
+          div {
-              display: flex;
+            margin-right: 0.6rem;
-              justify-content: center;
+          }
-              align-items: center;
+          .shuzi {
-              padding-left: 0.05rem;
+            font-weight: 600;
-              padding-right: 0.05rem;
+          }
-              float: left;
+        }
-              margin: 0 0.15rem;
+      }
-              font-family: 'AlibabaPuHuiTiR';
+      .shipin > div {
-              font-size: 0.14rem;
+        margin-bottom: 0.1rem;
-              color: #333333;
+      }
-              font-weight: 500;
+    }
-              text-align: center;
+    .jichusheshi > div {
-              line-height: 0.14rem;
+      // background: #eaf4ff;
-            }
+      padding-top: 0.1rem;
-            :deep(.ant-tag-checkable-checked) {
+      border-radius: 0.04rem;
-              // width: .67rem;
+      margin-bottom: 0.2rem;
-              margin-left: 0.15rem;
+      padding-bottom: 0.4rem;
-              margin-right: 0.15rem;
+    }
-              text-align: center;
+    .shujuziyuan {
-            }
+      display: flex;
-            .ant-tag-checkable:active,
+      flex-direction: column;
-            .ant-tag-checkable-checked {
+      justify-content: center;
-              width: 0.85rem;
+      padding-top: 0.4rem;
-              font-family: 'Alibaba PuHuiTi';
+      .yunziyuan {
-              font-weight: 500;
+        width: 100%;
-              background-color: #0087ff;
+        position: relative;
-              color: #ffffff;
+        .shuoming {
-              border-radius: 0.16rem;
+          position: absolute;
+          right: 0.2rem;
+          top: 0.15rem;
+          font-size: 0.12rem;
+        }
+        .yunziyuan-title {
+          display: flex;
+          align-items: center;
+          margin-left: 0.2rem;
+          .tupian {
+            // width: .51rem;
+            // height: .5rem;
+            // background: url('~@/assets/home/shujuziyuan.png');
+          }
+          .title {
+            margin-left: 0.1rem;
+            font-weight: 600;
+            text-decoration: underline;
+            cursor: pointer;
+          }
+        }
+        .fenlei {
+          display: flex;
+          margin-left: 0.2rem;
+          margin-right: 0.3rem;
+          justify-content: space-between;
+        }
+        .keyongziyuan {
+          display: flex;
+          justify-content: space-between;
+          margin-left: 0.3rem;
+          margin-right: 0.3rem;
+          div {
+            display: flex;
+            div:last-child {
+              font-weight: 600;
             }
           }
-          .active {
+        }
-            font-family: Alibaba PuHuiTi;
+      }
+      .yunziyuan > div {
+        margin-bottom: 0.1rem;
+      }
+    }
+    .shujuziyuan > div {
+      background: #eaf4ff;
+      padding-top: 0.1rem;
+      border-radius: 0.04rem;
+      margin-bottom: 0.2rem;
+      padding-bottom: 0.4rem;
+    }
+    .top-title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 0.2rem;
+      font-family: 'Alibaba PuHuiTi';
+      color: #000000;
+      line-height: 0.34rem;
+      .photo {
+        display: inline-block;
+        height: 0.44rem;
+        width: 0.44rem;
+        margin-right: 0.1rem;
+      }
+      div {
+        margin: 0 0.2rem;
+        padding: 0 0.1rem;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+      }
+      div:hover {
+        color: #0087ff;
+      }
+      .sel {
+        font-weight: 600;
+        color: #0087ff;
+        border-bottom: 0.02rem solid #0087ff;
+      }
+    }
+    .top-content-father {
+      width: 10.87rem;
+      padding-left: 0.2rem;
+      // margin-bottom: .2rem;
+      background: #f3f5f9;
+      .top-content-son {
+        background: #fff;
+        margin: 0rem 0.2rem 0.2rem 0rem;
+        padding-top: 0.2rem;
+        padding-bottom: 0.2rem;
+      }
+      .top-content {
+        display: flex;
+        margin-top: 0rem;
+        span:nth-child(1) {
+          display: inline-block;
+          position: relative;
+          // width: .7rem;
+          line-height: 0.3614rem;
+          white-space: normal;
+          text-align: center;
+          vertical-align: middle;
+        }
+        // .top-content-title {
+        //   top: -0.2rem;
+        // }
+        .leixingsumfather {
+          width: 8.1rem;
+          display: inline-block;
+          height: 0.3014rem;
+          overflow: hidden;
+          // width: 7.18rem;
+        }
+        .leixingsumfather2 {
+          width: 9.2rem;
+        }
+        .leixingsum {
+          display: inline-block;
+          cursor: pointer;
+          text-align: center;
+          margin-top: 0.05rem;
+          // margin-bottom: .1rem;
+          .ant-tag-checkable {
+            width: 0.83rem;
+            height: 0.25rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding-left: 0.05rem;
+            padding-right: 0.05rem;
+            float: left;
+            margin: 0 0.15rem;
+            font-family: 'AlibabaPuHuiTiR';
+            font-size: 0.14rem;
+            color: #333333;
+            font-weight: 500;
+            text-align: center;
+            line-height: 0.14rem;
+          }
+          :deep(.ant-tag-checkable-checked) {
+            // width: .67rem;
+            margin-left: 0.15rem;
+            margin-right: 0.15rem;
+            text-align: center;
+          }
+          .ant-tag-checkable:active,
+          .ant-tag-checkable-checked {
+            width: 0.85rem;
+            font-family: 'Alibaba PuHuiTi';
             font-weight: 500;
             background-color: #0087ff;
             color: #ffffff;
+            border-radius: 0.16rem;
           }
         }
-        .top-content:nth-child(1) {
+        .active {
-          margin-top: 0rem !important;
+          font-family: Alibaba PuHuiTi;
-        }
-      }
-    }
-  }
-  .shrinkTag {
-    width: 0.5rem;
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
-    margin-bottom: 0.05rem;
-    span {
-      cursor: pointer;
-    }
-  }
-  .shrink {
-    height: unset !important;
-    overflow: unset !important;
-  }
-  .talk-monitor {
-    position: fixed;
-    bottom: 0.5rem;
-    right: 0.1rem;
-    z-index: 9999;
-    cursor: pointer;
-    i {
-      width: 0.64rem;
-      height: 0.64rem;
-      display: inline-block;
-      background: url('~@/assets/home/icon-talk.png');
-      background-size: cover;
-    }
-  }
-  .top-content-father {
-    width: 10.87rem;
-    padding-left: 0.2rem;
-    // margin-bottom: .2rem;
-    .top-content {
-      display: flex;
-      margin-top: 0.23rem;
-      span:nth-child(1) {
-        display: inline-block;
-        position: relative;
-        width: 0.68rem;
-        font-weight: 600;
-        white-space: normal;
-        text-align: center;
-        vertical-align: middle;
-        font-size: 0.16rem;
-        margin-left: 0.3rem;
-      }
-      // .top-content-title {
-      //   top: -0.2rem;
-      // }
-      .leixingsumfather {
-        width: 7.7rem;
-        display: inline-block;
-        height: 0.3014rem;
-        overflow: hidden;
-        // width: 7.18rem;
-      }
-      .leixingsum {
-        width: 0.93rem;
-        display: inline-block;
-        cursor: pointer;
-        text-align: center;
-        margin-top: 0.05rem;
-        // margin-bottom: .1rem;
-        .ant-tag-checkable {
-          width: 0.85rem;
-          height: 0.25rem;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          padding-left: 0.05rem;
-          padding-right: 0.05rem;
-          float: left;
-          margin: 0 0.15rem;
-          font-family: 'AlibabaPuHuiTiR';
-          font-size: 0.14rem;
-          color: #333333;
-          font-weight: 500;
-          text-align: center;
-          line-height: 0.14rem;
-        }
-        :deep(.ant-tag-checkable-checked) {
-          // width: .67rem;
-          margin-left: 0.15rem;
-          margin-right: 0.15rem;
-          text-align: center;
-        }
-        .ant-tag-checkable:active,
-        .ant-tag-checkable-checked {
-          width: 0.85rem;
-          font-family: 'Alibaba PuHuiTi';
           font-weight: 500;
           background-color: #0087ff;
           color: #ffffff;
-          border-radius: 0.16rem;
         }
       }
-      .active {
+      .top-content:nth-child(1) {
-        font-family: Alibaba PuHuiTi;
+        margin-top: 0rem !important;
+      }
+    }
+  }
+}
+.shrinkTag {
+  width: 0.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  margin-bottom: 0.05rem;
+  span {
+    cursor: pointer;
+  }
+}
+.shrink {
+  height: unset !important;
+  overflow: unset !important;
+}
+.talk-monitor {
+  position: fixed;
+  bottom: 0.5rem;
+  right: 0.1rem;
+  z-index: 9999;
+  cursor: pointer;
+  i {
+    width: 0.64rem;
+    height: 0.64rem;
+    display: inline-block;
+    background: url('~@/assets/home/icon-talk.png');
+    background-size: cover;
+  }
+}
+.top-content-father {
+  width: 10.87rem;
+  padding-left: 0.2rem;
+  // margin-bottom: .2rem;
+  .top-content {
+    display: flex;
+    margin-top: 0.23rem;
+    span:nth-child(1) {
+      display: inline-block;
+      position: relative;
+      width: 0.68rem;
+      font-weight: 600;
+      white-space: normal;
+      text-align: center;
+      vertical-align: middle;
+      font-size: 0.16rem;
+      margin-left: 0.3rem;
+    }
+    // .top-content-title {
+    //   top: -0.2rem;
+    // }
+    .leixingsumfather {
+      width: 7.7rem;
+      display: inline-block;
+      height: 0.3014rem;
+      overflow: hidden;
+      // width: 7.18rem;
+    }
+    .leixingsum {
+      width: 0.93rem;
+      display: inline-block;
+      cursor: pointer;
+      text-align: center;
+      margin-top: 0.05rem;
+      // margin-bottom: .1rem;
+      .ant-tag-checkable {
+        width: 0.85rem;
+        height: 0.25rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-left: 0.05rem;
+        padding-right: 0.05rem;
+        float: left;
+        margin: 0 0.15rem;
+        font-family: 'AlibabaPuHuiTiR';
+        font-size: 0.14rem;
+        color: #333333;
+        font-weight: 500;
+        text-align: center;
+        line-height: 0.14rem;
+      }
+      :deep(.ant-tag-checkable-checked) {
+        // width: .67rem;
+        margin-left: 0.15rem;
+        margin-right: 0.15rem;
+        text-align: center;
+      }
+      .ant-tag-checkable:active,
+      .ant-tag-checkable-checked {
+        width: 0.85rem;
+        font-family: 'Alibaba PuHuiTi';
         font-weight: 500;
         background-color: #0087ff;
         color: #ffffff;
+        border-radius: 0.16rem;
       }
     }
-    .top-content:nth-child(1) {
+    .active {
-      margin-top: 0.41rem !important;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 500;
+      background-color: #0087ff;
+      color: #ffffff;
     }
   }
-  :deep(.ant-card-grid) {
+  .top-content:nth-child(1) {
-    overflow: hidden;
+    margin-top: 0.41rem !important;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    -webkit-line-clamp: 1;
   }
+}
+:deep(.ant-card-grid) {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 1;
+}
 </style>

front/src/views/home/infrastructurePage.vue

@@ -1,5 +1,422 @@
+<!-- 基础设施 -->
 <template>
-  <div>1234567890</div>
+  <div class="infrastructrueBox">
+    <!-- 选项卡 -->
+    <div class="infrastructrue-tab">
+      <div v-for="(item, index) in tabList" :key="index" class="tabBox">
+        <b class="leftType">{{ item.title }}</b>
+        <span
+          v-for="itemContent in item.content"
+          :key="itemContent"
+          @click="tabClick(index, itemContent)"
+          :class="
+            clickList[index].content.indexOf(itemContent) != -1 ? 'down' : ''
+          "
+        >
+          {{ itemContent }}
+        </span>
+      </div>
+    </div>
+    <!-- 功能行 -->
+    <div class="infrastructrue-content">
+      <!-- 表格数据统计 -->
+      <div class="contentNum">
+        <p>
+          备选
+          <span>{{ dataSource.length }}</span>
+          个
+        </p>
+        <i class="boundary"></i>
+        <p>
+          已选
+          <span>22</span>
+          个
+        </p>
+      </div>
+      <!-- 右侧 -->
+      <div class="contentRight">
+        <!-- 搜索@search="onSearch" -->
+        <div class="searchInput">
+          <a-input-search
+            v-model:value="name"
+            placeholder="请输入关键词"
+            enter-button="搜索"
+            size="large"
+            @change="onSearch"
+          />
+          <a-button
+            type="primary"
+            style="width: 0.8rem; height: 0.36rem; margin-left: 0.7rem"
+            @click="clean"
+          >
+            重置
+          </a-button>
+        </div>
+        <i class="boundary"></i>
+        <!-- 添加至购物车 -->
+        <a-button type="primary" @click="addShopCar" class="buttonAdd">
+          添加至购物车
+        </a-button>
+        <!-- 一键申请 -->
+        <a-button type="primary" @click="apply" class="buttonAdd">
+          一键申请
+        </a-button>
+      </div>
+    </div>
+    <!-- 表格 -->
+    <div class="infrastructrue-table">
+      <a-table
+        class="ant-table-striped"
+        :dataSource="dataSource"
+        :columns="columns"
+        :scroll="{ y: 600 }"
+        :rowClassName="
+          (record, index) => (index % 2 === 1 ? 'table-striped' : null)
+        "
+        :pagination="pagination"
+        @change="handleTableChange"
+        :row-selection="{
+          selectedRowKeys: selectedRowKeys,
+          onChange: onSelectChange,
+        }"
+      />
+    </div>
+  </div>
 </template>
-<script></script>
+<script setup>
-<style lang="less" scoped></style>
+  import { ref, onCreated } from 'vue'
+  const tabList = ref([
+    {
+      title: '设施类型',
+      content: ['视频资源', '云资源', '感知资源'],
+    },
+    {
+      title: '视频细分',
+      content: [
+        '云主机',
+        '算力主机',
+        '对象存储',
+        '堡垒机',
+        '防火墙',
+        '网闸',
+        '负载均衡',
+        '公网IP',
+      ],
+    },
+  ]) //初始化数据
+  const init = () => {
+    tabList.value.map((item) => {
+      let params = {
+        title: item.title,
+        content: [],
+      }
+      clickList.value.push(params)
+    })
+  }
+  let clickList = ref([]) //存储点击的tab
+  init()
+  //tab切换点击事件
+  const tabClick = (indexFather, name) => {
+    if (clickList.value[indexFather].content.indexOf(name) != -1) {
+      // debugger
+      clickList.value[indexFather].content.splice(
+        clickList.value[indexFather].content.indexOf(name),
+        1
+      )
+    } else {
+      // debugger
+      clickList.value[indexFather].content[0] = name
+    }
+    console.log('clickList.value', clickList.value)
+    // debugger
+  }
+  const name = ref('')
+  // 搜索框
+  const onSearch = (name) => {
+    name.value = name
+    console.log(name.value)
+  }
+  // 重置
+  const clean = () => {
+    name.value = ''
+  }
+  // onCreated(() => {
+
+  // })
+  // onMounted(() => {
+
+  // })
+  // 一键申请
+  const apply = () => {
+    console.log('一键申请')
+  }
+  // 添加至购物车
+  const addShopCar = () => {
+    console.log('添加至购物车')
+  }
+  // 表格
+  const dataSource = ref([
+    {
+      key: '1',
+      name: '沈腾',
+      age: 32,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '沈腾',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '3',
+      name: '沈腾',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '4',
+      name: '沈腾',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '5',
+      name: '沈腾',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '6',
+      name: '沈腾',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '7',
+      name: '沈腾',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '8',
+      name: '沈腾',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '9',
+      name: '沈腾',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '10',
+      name: '沈腾',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '11',
+      name: '沈腾',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '12',
+      name: '沈腾',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '13',
+      name: '沈腾',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '14',
+      name: '沈腾',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '15',
+      name: '沈腾',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '16',
+      name: '沈腾',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+  ])
+  const columns = ref([
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '年龄',
+      dataIndex: 'age',
+      key: 'age',
+    },
+    {
+      title: '住址',
+      dataIndex: 'address',
+      key: 'address',
+    },
+  ])
+  // const selectedRowKeys =
+  const pagination = ref({
+    total: 0,
+    pageSize: 10, //每页中显示10条数据
+    showSizeChanger: true,
+    pageSizeOptions: ['5', '15', '30', '45'], //每页中显示的数据
+  })
+  const queryParam = ref({
+    page: 1, //第几页
+    size: 10, //每页中显示数据的条数
+    hosName: '',
+    hosCode: '',
+    province: '',
+    city: '',
+  })
+  const handleTableChange = (val) => {
+    pagination.value.current = val.current
+    pagination.value.pageSize = val.pageSize
+    this.queryParam.page = val.current
+    this.queryParam.size = val.pageSize
+    // this.getTableList()
+  }
+</script>
+<style lang="less" scoped>
+.infrastructrueBox {
+  width: 10.87rem;
+  padding: 0.2rem;
+  background: #f3f5f9;
+  .infrastructrue-tab {
+    background: #ffffff;
+    padding: 0.2rem;
+    border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
+    span {
+      display: inline-block;
+      height: 0.24rem;
+      line-height: 0.24rem;
+      border: 0.01rem solid #cccccc;
+      border-radius: 0.12rem;
+      margin-left: 0.1rem;
+      text-align: center;
+      color: #666666;
+      cursor: pointer;
+      padding: 0 0.08rem;
+    }
+    .leftType {
+      margin: 0.1rem 0;
+    }
+    .down {
+      border: 0.01rem solid #0087ff;
+      color: #0087ff;
+    }
+    .tabBox {
+      margin-bottom: 0.16rem;
+    }
+    .tabBox:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+  .infrastructrue-content {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.14rem 0.2rem 0.1rem;
+    background: #ffffff;
+    .contentNum {
+      position: relative;
+      display: flex;
+      p {
+        color: #666666;
+        padding: 0;
+        margin: 0;
+        span {
+          color: #0087ff;
+          font-size: 0.2rem;
+          font-weight: 500;
+        }
+      }
+      p:first-of-type {
+        padding-right: 0.16rem;
+        margin-right: 0.16rem;
+      }
+      .boundary {
+        position: absolute;
+        left: 0.9rem;
+        top: 0.07rem;
+        display: block;
+        width: 0.02rem;
+        border-radius: 0.01rem;
+        height: 0.2rem;
+        background: rgba(150, 144, 144, 0.3);
+      }
+    }
+    .contentRight {
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      .boundary {
+        position: absolute;
+        left: 3.74rem;
+        top: 0.07rem;
+        display: block;
+        width: 0.02rem;
+        border-radius: 0.01rem;
+        height: 0.2rem;
+        background: rgba(150, 144, 144, 0.3);
+      }
+      .searchInput {
+        display: flex;
+        margin-right: 0.2rem;
+        .ant-input-search {
+          max-width: 4rem;
+        }
+        :deep(.ant-input) {
+          width: 2rem;
+          height: 0.36rem;
+          font-size: 0.14rem;
+          color: #b2b2b2;
+          background: #f5f5f5;
+        }
+        :deep(.ant-input-group-addon) {
+          display: inline-block;
+          margin-left: 0.1rem;
+          .ant-input-search-button {
+            width: 0.8rem;
+            height: 0.36rem;
+            background: #0558e1;
+            border-radius: 0.04rem;
+            font-size: 0.14rem;
+          }
+        }
+        :deep(.ant-btn) {
+          background: #0558e1;
+          border-radius: 0.04rem;
+        }
+      }
+      .buttonAdd {
+        background: #0558e1;
+        border-radius: 0.04rem;
+        height: 0.36rem;
+        border-color: #0558e1;
+        margin-left: 0.1rem;
+      }
+    }
+  }
+  .infrastructrue-table {
+    .ant-table-striped :deep(.table-striped) td {
+      background-color: #fafafa;
+    }
+  }
+}
+</style>