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轴文字的配置
@@ -134,10 +134,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],
             type: 'bar',
             barWidth: 14,
-           
+            stack: '1',
             itemStyle: {
                 barBorderRadius: [20,20,20,20],
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -286,10 +300,24 @@ 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,8 +345,8 @@ export default {
             type: 'category',
             data: ['组件名称1', '组件名称2', '组件名称3', '组件名称4', '组件名称5', '组件名称6'],
             color:['#f5f5f5'],
-            axisTick:{
+            axisTick: {    // 坐标轴 刻度
-              show:false,//不显示坐标轴刻度线
+                show: false,  // 是否显示
                 },
             splitLine: {
               show: true,
@@ -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,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>

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>