hi-ucs/front/src/views/newHome/components/CapabilityConvergence.vue

<template>
  <div class="capability-convergence">
    <div class="main">
      <div class="top">
        能力汇聚
        <span class="line"></span>
      </div>
      <div class="bottom">
        <div class="item">
          <div class="zj">组件服务</div>
          <div
            class="name"
            v-for="(item, index) in zjList"
            :key="item.id"
            :class="index == 4 ? 'name-last' : ''"
            @click="selectOne(item.id)"
          >
            {{ index + 1 }}-{{ item.name }}
          </div>
          <div class="btn" @click="jumpPage('组件服务')">查看更多</div>
        </div>
        <div class="item">
          <div class="yy">应用资源</div>
          <div
            class="name"
            v-for="(item, index) in yyList"
            :key="item.id"
            :class="index == 4 ? 'name-last' : ''"
            @click="selectOne(item.id)"
          >
            {{ index + 1 }}-{{ item.name }}
          </div>
          <div class="btn" @click="jumpPage('应用资源')">查看更多</div>
        </div>
        <div class="item">
          <div class="jc">基础设施</div>
          <div
            class="name"
            v-for="(item, index) in jcList"
            :key="item.id"
            :class="index == 4 ? 'name-last' : ''"
            @click="selectOne(item.id)"
          >
            {{ index + 1 }}-{{ item.name }}
          </div>
          <div class="btn" @click="jumpPage('基础设施')">查看更多</div>
        </div>
        <div class="item">
          <div class="sj">数据资源</div>
          <div
            class="name"
            v-for="(item, index) in sjList"
            :key="item.id"
            :class="index == 4 ? 'name-last' : ''"
            @click="selectOne(item.id)"
          >
            {{ index + 1 }}-{{ item.name }}
          </div>
          <div class="btn" @click="jumpPage('数据资源')">查看更多</div>
        </div>
        <div class="item">
          <div class="zs">知识库</div>
          <div
            class="name"
            v-for="(item, index) in zsList"
            :key="item.id"
            :class="index == 4 ? 'name-last' : ''"
            @click="selectOne(item.id)"
          >
            {{ index + 1 }}-{{ item.name }}
          </div>
          <div class="btn" @click="jumpPage('知识库')">查看更多</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { pageWithAttrs, getDataResource } from '@/api/home.js'
  import { ref, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import { useStore } from 'vuex'
  import mybus from '@/myplugins/mybus'
  const store = useStore()
  const router = useRouter()
  const zjList = ref([])
  const jcList = ref([])
  const sjList = ref([])
  const yyList = ref([])
  // 知识库模块数据
  const zsList = ref([])
  // const jcList = ref([])
  const paramsGetResources = {
    districtId: '',
    pageNum: 1,
    pageSize: 5,
    type: '',
    name: '',
    infoList: [],
    orderField: 'total', // total 综合 visits 访问量 applyCount 申请量 score 评分  collectCount 收藏量
    orderType: 'DESC', // ASC 升序  DESC 降序
  }
  console.log('dataShowdev==========================>', whoShow)
  // eslint-disable-next-line no-undef
  const whoShow1 = ref(whoShow)
  const interfaceSuccess = ref(0)
  const object = reactive({
    yyNum: '',
    zjNum: '',
    jcNum: '',
    sjNum: '',
    zsNum: '',
  })
  const getAppResources = (type, obj) => {
    paramsGetResources.type = type
    if (type === '数据资源' && !whoShow1.value.itShowBaoTou) {
      getDataResource({
        serviceName: paramsGetResources.name, //资源名称
        orderField: whoShow1.value.itShowQingDao ? 'fbrq' : 'createTime', //排序字段
        orderType: paramsGetResources.orderType.toLowerCase(), //排序方式：desc，asc
        pageNum: paramsGetResources.pageNum, //页码
        pageSize: paramsGetResources.pageSize, //分页大小
      }).then((res) => {
        console.log('数据资源==================>', res.data.data)
        if (whoShow1.value.itShowQingDao) {
          res.data.data.data.forEach((val) => {
            val.id = val.guid // id
            val.name = val.zyname // 名字
            val.sjlCount = val.sjcczl // 数据量
            val.applyCount = val.syqk // 申请量
            val.deptName = val.TGBM // 部门
            val.createDate = val.fbrq // 发布时间
          })
          obj.value = res.data.data.data || []
          object.sjNum = res.data.data.rows
          // interfaceSuccess.value++
          // if (interfaceSuccess.value == 5) {
          //   mybus.emit('chagneNum', object)
          // }
        } else if (whoShow1.value.itShowXiHaiAn) {
          res.data.data.list.forEach((val) => {
            val.id = val.serviceId // id
            val.name = val.serviceName // 名字
            val.sjlCount = val.requestQuantity // 数据量
            val.applyCount = val.requestCount // 申请量
            val.deptName = val.departmentName // 部门
            val.createTime = val.createTime.split('.')[0]
            val.createDate = val.createTime // 发布时间
          })
          obj.value = res.data.data.list || []
          object.sjNum = res.data.data.total
          // interfaceSuccess.value++
          // if (interfaceSuccess.value == 5) {
          //   mybus.emit('chagneNum', object)
          // }
        }
      })
    } else {
      let type = paramsGetResources.type
      pageWithAttrs(paramsGetResources).then((res) => {
        console.log('object个数======>', type)
        obj.value = res.data.data.records
        switch (type) {
          case '组件服务':
            assignmentMethod('zjNum', res)
            break
          case '应用资源':
            assignmentMethod('yyNum', res)
            break
          case '基础设施':
            assignmentMethod('jcNum', res)
            break
          case '知识库':
            assignmentMethod('zsNum', res)
            break
        }
      })
    }
  }
  const assignmentMethod = (type, res) => {
    object[type] = res.data.data.total
    // interfaceSuccess.value++
    // console.log('object个数======>', object, interfaceSuccess.value, type)
    // if (interfaceSuccess.value >= 4) {
    //   mybus.emit('chagneNum', object)
    // }
  }
  getAppResources('组件服务', zjList)
  getAppResources('应用资源', yyList)
  getAppResources('基础设施', jcList)
  getAppResources('数据资源', sjList)
  getAppResources('知识库', zsList)

  function jumpPage(type) {
    // 点击内存入store
    store.commit('home/selectCardsData', {
      selectCardsnum: type,
    })
    console.log(
      '选中===================>',
      store.getters['home/selectCardsnum']
    )
    // router.push({ path: '/DetailsPageconetent' })
    router.push({
      path: '/DetailsPageconetent',
      query: {
        select: type,
      },
    })
  }
  const selectOne = (id) => {
    console.log('点击===============》', id)
    router.push({
      path: '/details',
      query: {
        id: id,
      },
    })
  }
</script>
<style lang="less" scoped>
  .capability-convergence {
    height: 7.2rem;
    background: url('~@/assets/newHome/Convergence-bg.png') no-repeat;
    background-size: 100%;
    display: flex;
    justify-content: center;
    .main {
      width: 13rem;
      margin-top: 1.8rem;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      .top {
        font-size: 0.3rem;
        color: #212121;
        text-align: center;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        .line {
          width: 0.34rem;
          height: 0.03rem;
          background-color: #0058e1;
          margin-top: 0.08rem;
        }
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 0.4rem;
        .item {
          width: 2.44rem;
          height: 3.91rem;
          font-size: 0.16rem;
          background-color: #fff;
          border-radius: 0.02rem;
          box-shadow: 0 0.05rem 0.2rem #ccc;
          div:nth-of-type(1) {
            height: 1.02rem;
            line-height: 1.02rem;
            font-size: 0.2rem;
            color: #fff;
            padding-left: 0.15rem;
            background-size: 100%;
          }
          .jc {
            background: url('~@/assets/newHome/Convergence-jc.png') no-repeat;
          }
          .sj {
            background: url('~@/assets/newHome/Convergence-sj.png') no-repeat;
          }
          .zj {
            background: url('~@/assets/newHome/Convergence-zj.png') no-repeat;
          }
          .yy {
            background: url('~@/assets/newHome/Convergence-yy.png') no-repeat;
          }
          .zs {
            background: url('~@/assets/newHome/Convergence-zs.png') no-repeat;
          }
          .name {
            height: 0.47rem;
            line-height: 0.47rem;
            margin: 0 0.16rem;
            border-bottom: 0.01rem solid #e9e9e9;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          .name:hover {
            color: #0058e1;
            cursor: pointer;
          }
          .name-last {
            border-bottom: none;
          }
          .btn {
            cursor: pointer;
            width: 0.8rem;
            height: 0.24rem;
            border: 0.01rem solid #0058e1;
            font-size: 0.14rem;
            color: #0058e1;
            border-radius: 0.02rem;
            text-align: center;
            margin-top: 0.1rem;
            margin-left: 0.85rem;
          }
          .btn:hover {
            background: rgba(0, 88, 225, 0.3);
            color: #000;
          }
        }
        .item:hover {
          border-radius: 0.02rem;
          border: 0.01rem solid #0058e1;
          box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
        }
      }
    }
  }
</style>