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.slice(0, 5)"
            :key="item.name"
            :class="index == 4 ? 'name-last' : ''"
            @click="selectOne1(item.name)"
          >
            {{ item.name + '-' + item.num + '项' }}
          </div>
          <div class="btn" @click="jumpPage('组件服务')">查看更多</div>
        </div>
        <div class="item">
          <div class="yy">应用资源</div>
        <div
            class="name"
            v-for="(item, index) in yyList.slice(0, 5)"
            :key="item.name"
            :class="index == 4 ? 'name-last' : ''"
            @click="selectOne11(item.name)"
          >
            {{ item.name + '-' + item.num + '项' }}
          </div>
          <div class="btn" @click="jumpPage('应用资源')">查看更多</div>
        </div>
        <div class="item">
          <div class="jc">基础设施</div>
          <div
            class="name"
            v-for="(item, index) in jcList.slice(0, 5)"
            :key="item.name"
            :class="index == 2 ? 'name-last' : ''"
            @click="selectOne2(item.name)"
          >
            {{ item.name + '-' + item.num + '项' }}
          </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="selectOne3(item.name)"
          >
            {{ 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="openHref(item)"
          >
            {{ index + 1 }}-{{ item.name }}
          </div>
          <div class="btn" @click="jumpPage('知识库')">查看更多</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import {
    pageWithAttrs,
    getDataResource,
    selectInfrastructureList,
    selectCollectComponentList,
    selectCollectResourceList
  } from '@/api/home.js'
  import { ref, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import { useStore } from 'vuex'
  import { updateVisits, browsingInsert, getSoldierList } from '@/api/home'
  import { message, Upload } from 'ant-design-vue'
  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 // 发布时间
            val.description = val.xgxt // 描述
          })
          obj.value = res.data.data.data || []
          object.sjNum = res.data.data.rows
        } 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
        }
      })
    } else {
      let type = paramsGetResources.type
   
      if (type == '基础设施') {
        jcList.value = []
        selectInfrastructureList().then((res) => {
          console.log('基础设施==========>', res.data.data)
          for (const key in res.data.data) {
            if (whoShow1.value.itShowXiHaiAn) {
              if (key === '视频资源') {
                jcList.value.push({
                  name: key,
                  num: res.data.data[key],
                })
              }
            } else {
              jcList.value.push({
                name: key,
                num: res.data.data[key],
              })
            }
          }
          // 西海岸-单兵设备、无人机 获取数量
          if (whoShow1.value.itShowXiHaiAn) {
            getSoldierData('无人机')
              .then((res) => {
                let { total = 0 } = res.data.data
                jcList.value.push({
                  name: '无人机',
                  num: total,
                })
              })
              .catch((err) => {
                console.log('err--无人机---------->', err)
              })
            getSoldierData('单兵设备')
              .then((res) => {
                let { total = 0 } = res.data.data
                jcList.value.push({
                  name: '单兵设备',
                  num: total,
                })
              })
              .catch((err) => {
                console.log('err--单兵设备---------->', err)
              })
          }
        })
      }   
      else if (type == '组件服务') {
        zjList.value = []
        selectCollectComponentList().then((res) => {
          for (const key in res.data.data) {
            if (whoShow1.value.itShowXiHaiAn) {
              if (key === '视频资源') {
                zjList.value.push({
                  name: key,
                  num: res.data.data[key],
                })
              }
            } else {
              zjList.value.push({
                name: key,
                num: res.data.data[key],
              })
            }
          }
        })
      }     
      else if (type == '应用资源') {
        yyList.value = []
        selectCollectResourceList().then((res) => {
          for (const key in res.data.data) {
            if (whoShow1.value.itShowXiHaiAn) {
              if (key === '视频资源') {
                yyList.value.push({
                  name: key,
                  num: res.data.data[key],
                })
              }
            } else {
              yyList.value.push({
                name: key,
                num: res.data.data[key],
              })
            }
          }
        })
      } 
      else {
        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
          }
        })
      }
    }
  }

  // todo 获取无人机、单兵设备
  const getSoldierData = (name) => {
    let _params = {
      type: name,
      page: 1,
      limit: 10,
    }
    return new Promise((resolve, reject) => {
      getSoldierList(_params)
        .then((res) => {
          resolve(res)
          console.log('res---获取无人机、单兵设备--------->', res)
          if (res.data.code !== 0) {
            return message.error(res.data.msg)
          }
        })
        .catch((err) => {
          reject(err)
        })
    })
  }

  const openHref = (item) => {
    console.log(item.id, 'wowowo')
    console.log(item.visits, 'wowowo')
    browsingInsert({ resourceId: item.id }).then((res) => {
      // console.log(res)
    })
    const arrList = ref([])
    arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
    if (arrList.value.indexOf(item.id) === -1) {
      arrList.value.push(item.id)
      updateVisits({
        id: item.id,
        visits: item.visits || '0',
      }).then(() => {
        window.sessionStorage.setItem('visits', JSON.stringify(arrList.value))
      })
    }
    window.open(item.link)
    // window.open(
    //   window.SITE_CONFIG.previewUrl +
    //     'hisense_office/onlinePreview?url=' +
    //     btoa(encodeURI(item.fileHref))
    // )
  }
  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,
      },
    })
  }
  const selectOne1 = (name) => {
    router.push({
      path: '/DetailsPageconetent',
      query: {
        type: name,
        select: '组件服务',
      },
    })
  }
  const selectOne11 = (name) => {
    router.push({
      path: '/DetailsPageconetent',
      query: {
        type: name,
        select: '应用资源',
      },
    })
  }
  const selectOne2 = (name) => {
    console.log('点击===============》', name)
    router.push({
      path: '/DetailsPageconetent',
      query: {
        type: name,
        select: '基础设施',
      },
    })
  }
  const selectOne3 = (name) => {
    console.log('点击===============》', name)
    router.push({
      path: '/DetailsPageconetent',
      query: {
        str: name,
        select: '数据资源',
      },
    })
  }
</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;
          position: relative;

          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;
            word-break: break-all;
          }

          .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;
            position: absolute;
            bottom: 0.2rem;
          }

          .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>