368 lines
11 KiB
Vue
368 lines
11 KiB
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.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="selectOne(item.id)"
|
||
>
|
||
{{ index + 1 }}-{{ item.name }}
|
||
</div>
|
||
<div class="btn" @click="jumpPage('知识库')">查看更多</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import {
|
||
pageWithAttrs,
|
||
getDataResource,
|
||
selectInfrastructureList,
|
||
} 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
|
||
if (type == '基础设施') {
|
||
selectInfrastructureList().then((res) => {
|
||
console.log('基础设施==========>', res.data.data)
|
||
for (const key in res.data.data) {
|
||
jcList.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
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
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 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>
|