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

<template>
  <!-- 青岛 -->
  <div class="details-pageconetent">
    <home-header></home-header>
    <div class="content-box" v-loading="loadingPage">
      <div class="package-title">打包模式</div>
      <div class="basic-info">
        <div class="title-box">
          <div class="bar"></div>
          <span class="title-text">基本信息</span>
        </div>
        <div class="flex-row-start info-box">
          <a-image class="img" style="width:4rem;height:3rem" :preview="false" :src="imgUrl" />
          <div class="right">
            <div class="name">名称：{{ detailInfoObj.name || '--' }}</div>
            <div class="flex-row-start area">
              <div class="name">应用领域：</div>
              <div class="flex-row-start tag" v-if="detailInfoObj.applicationArea">
                {{ detailInfoObj.applicationArea }}
              </div>
            </div>
            <div class="flex-row-start desc">
              <a-tooltip placement="topLeft" :title="detailInfoObj.description || '--'">
                <div class="desc">描述：{{ detailInfoObj.description || '--' }}</div>
              </a-tooltip>
            </div>
            <div class="btn-box">
              <a-button size="big" class="btn-text" type="primary" @click="handleAKeyApplication()">
                <template #icon>
                  <form-outlined />
                </template>
                申请使用
              </a-button>
              <a-button size="big" class="btn-text" type="primary" @click="addCollect()">
                <template #icon>
                  <form-outlined />
                </template>
                {{ detailInfoObj.isCollect == 'true' ? '已收藏' : '收藏' }}
              </a-button>
            </div>
          </div>
        </div>
      </div>

      <div class="ability-list-box" style="margin-top: 30px">
        <div class="title-box">
          <div class="bar"></div>
          <span class="title-text">服务使用能力列表</span>
        </div>
        <div class="list-box">
          <packageAbilityList style="margin-bottom:20px" v-for="(item, i) in abilityList" :abilityInfo="item"
            :key="i" />
        </div>
      </div>
    </div>
    <home-footer></home-footer>
  </div>
</template>


<script setup>
import HomeFooter from '@/views/newHome/components/Footer'
import mybus from '@/myplugins/mybus'
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from 'vue'
import { getIntegrationServicesList } from '@/api/home.js'
import { useRouter } from 'vue-router'
import searchResultList from '@/views/home/components/searchResultList.vue'
import packageAbilityList from '@/views/home/components/packageAbilityList.vue'
import { message } from 'ant-design-vue'
import { getIntegrationDetail } from '@/api/home'
import HomeHeader from '@/views/home/components/header'
import { scInsert, scDel } from '@/api/personalCenter'

const router = useRouter()
const id = router.currentRoute.value.query.id
const loadingPage = ref(false)

const detailInfoObj = ref({})
const abilityList = ref([
  {
    name: '数据资源',
    bgImg: require('../../assets/home/integration/sjzyDetail.png'),
    list: []
  },
  {
    name: '组件服务',
    bgImg: require('../../assets/home/integration/zjfwDetail.png'),
    list: []
  },
  {
    name: '基础设施',
    bgImg: require('../../assets/home/integration/jcssDetail.png'),
    list: []
  },
])
const imgUrl = ref('')

// 融合服务--详情
const getIntegrationServicesDeatil = (id) => {
  loadingPage.value = true
  getIntegrationDetail(id).then(
    (res) => {
      loadingPage.value = false
      if (res.data.code !== 0) {
        return message.error(res.data.msg)
      }
      detailInfoObj.value = res.data.data || {}
      console.log('detailInfoObj------------>', detailInfoObj);

      let fuseResourceList = detailInfoObj.value.fuseResourceList || []
      abilityList.value.map(v => {
        let list = fuseResourceList.filter(x => x.type == v.name) || [];
        v.list = list.map(v => v.resource && v.resource.channelName) || []
      })
      let imgList = detailInfoObj.value.fuseAttrList.filter((val) => val.attrType == '服务图片') || []
      imgUrl.value = imgList[0] && imgList[0].attrValue || ''
    },
    (err) => {
      loadingPage.value = false
      message.error(err)
    }
  )
}

// 一键申请
const handleAKeyApplication = () => {
  let _applyList = [];
  let fuseResourceList = detailInfoObj.value.fuseResourceList || []
  let jcssArray = fuseResourceList.filter(v => v.type === '基础设施')
  let otherArray = fuseResourceList.filter(v => v.type !== '基础设施')
  jcssArray = jcssArray.map(v => {
    v = Object.assign(v, v.resource)
    return v
  })
  let jcss = [
    {
      arr: [
        {
          description: '',
          note1: JSON.stringify(jcssArray),
          resourceId: '1522550195055828996',
          resourceName: '摄像头列表',
          type: '基础设施',
        },
      ],
      deptId: '',
      deptName: '',
    },
  ]
  if (infrastructure) {
    jcss[0].deptId = infrastructure.deptId
    jcss[0].deptName = infrastructure.deptName
  }
  otherArray.map((v) => {
    let resource = v.resource || {}
    console.log('resource------------>', resource);
    let obj = {
      arr: [
        {
          delFlag: resource.delFlag,
          description: resource.description,
          resourceId: resource.id,
          resourceName: resource.name,
          time: resource.createDate,
          type: resource.type,
        },
      ],
      deptId: resource.deptId,
      deptName: resource.deptName,
    }
    _applyList.push(obj)
  })
  _applyList = jcss.concat(_applyList)
  localStorage.setItem('applyList', JSON.stringify(_applyList))
  router.push({
    path: '/apply',
  })
}

const dataPosting = ref(true)
const addCollect = () => {
  if (dataPosting.value && detailInfoObj.value.id) {
    dataPosting.value = false
    if (detailInfoObj.value.isCollect == 'true') {
      scDel([detailInfoObj.value.id]).then((res) => {
        if (res.data.msg === 'success') {
          message.success('取消成功')
          detailInfoObj.value.isCollect = 'false'
          detailInfoObj.value.collectCount--
          dataPosting.value = true
          console.log('收藏2===============>', res.data, dataPosting.value)
          getIntegrationServicesDeatil(id)
        }
      })
        .catch(err => {
          console.log('err------------>', err);
          message.success(err)
        })
    } else {
      scInsert([
        {
          resourceId: detailInfoObj.value.id,
        },
      ]).then((res) => {
        if (res.data.msg === 'success') {
          message.success('添加收藏成功！')
          detailInfoObj.value.isCollect = 'true'
          detailInfoObj.value.collectCount++
          dataPosting.value = true
          console.log('收藏2===============>', res.data, dataPosting.value)
          getIntegrationServicesDeatil(id)
        }
      })
        .catch(err => {
          console.log('err------------>', err);
          message.success(err)
        })
    }
  }
}

getIntegrationServicesDeatil(id)


</script>
<style lang="less" scoped>
.flex-row-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-row-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.details-pageconetent {
  width: 100%;
  background: rgb(247, 247, 250);
}

.content-box {
  width: 14rem;
  background: #fff;
  margin: 0 auto;
  padding: 0.84rem 0.4rem 0.4rem 0.4rem;
}

.package-title {
  padding: 10px 0;
  color: #000;
  font-size: 0.18rem;
}

.title-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 10px 0;
  border-bottom: 2px solid #f0f0f0;
}

.bar {
  height: 26px;
  width: 6px;
  background: #0058e1;
  margin-right: 6px;
}

.title-text {
  font-size: 0.16rem;
}

.info-box {
  padding: 0.2rem;
  align-items: flex-start;
}

.img {
  height: 3rem;
  width: 4rem;
  // background-image: url('../../assets/home/integration/jcssDetail.png');
  // background-size: 100%;
}

.ant-image-img {
  height: 3rem;
  width: 4rem;
}

.right {
  padding: 0 0.2rem;
  flex: 1;
  position: relative;
  height: 3rem;
  box-sizing: border-box;

  .name {
    font-size: 0.16rem;
  }

  .area {
    margin: 0.1rem 0;
  }

  .desc {
    font-size: 0.16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
  }
}

.btn-box {
  position: absolute;
  bottom: -15px;
  left: 0.2rem;

  .btn-text {
    bottom: 0.2rem;
    height: 0.4rem;
    width: 1.2rem;
    margin-right: 0.2rem;
  }
}

.tag {
  padding: 4px 10px;
  background: #40a9ff;
  color: #fff;
  font-size: 0.12rem;
  border-radius: 20px;
}

.list-box {
  padding: 0.4rem;
}
</style>