hi-ucs/front/src/views/home/infrastructurePage.vue

<!-- 基础设施 -->
<template>
  <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, 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: tableHeight }"
        :rowClassName="
          (record, index) => (index % 2 === 1 ? 'table-striped' : null)
        "
        :pagination="pagination"
        @change="handleTableChange"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
      >
        <template slot="status" slot-scope="text, record, index">
          <span>正常</span>
          <span>失效</span>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script setup>
  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()
  //表格的高度
  let tableHeight = ref('600')
  //tab切换点击事件
  const tabClick = (indexFather, name, fatherName) => {
    if (clickList.value[indexFather].content.indexOf(name) != -1) {
      debugger
      if (fatherName == '视频资源') {
        debugger
        tableHeight.value = 330
      } else if (fatherName == '云资源') {
        debugger
        tableHeight.value = 600
      } else if (fatherName == '感知资源') {
        debugger
        tableHeight.value = 330
      }
      clickList.value[indexFather].content.splice(
        clickList.value[indexFather].content.indexOf(name),
        1
      )
    } else {
      debugger
      if (fatherName == '视频资源') {
        debugger
        tableHeight.value = 330
      } else if (fatherName == '云资源') {
        debugger
        tableHeight.value = 600
      } else if (fatherName == '感知资源') {
        debugger
        tableHeight.value = 330
      }
      clickList.value[indexFather].content[0] = name
    }
    console.log('clickList.value', clickList.value)
  }
  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;
        font-size: 0.14rem;
        line-height: 0.24rem;
        border: 0;
        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 {
        background: #0087ff;
        color: #ffffff;
      }
      .tabBox {
        height: 0.3rem;
        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>