427 lines
12 KiB
Vue
427 lines
12 KiB
Vue
<template>
|
|
<div class="navigation">
|
|
<bg-vue></bg-vue>
|
|
<div class="box">
|
|
<div class="top" :key="num">
|
|
<a-card-grid
|
|
v-for="item in topList"
|
|
:class="item == select ? 'select' : ''"
|
|
:key="item"
|
|
@click="selectCard(item)"
|
|
>
|
|
{{ item }}
|
|
</a-card-grid>
|
|
</div>
|
|
<div class="search">
|
|
<a-input-search
|
|
placeholder="请输入您想搜索的内容"
|
|
enter-button="搜索"
|
|
size="large"
|
|
@search="onSearch"
|
|
/>
|
|
<i class="img"></i>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="left" :key="showKey">
|
|
<template v-for="(item, index) in leftList" :key="item[0]">
|
|
<div class="title" :class="'title' + (index + 1)">
|
|
{{ item[0] }}
|
|
</div>
|
|
<div class="item-box">
|
|
<div class="item" v-for="(value, key) in item[1]" :key="key">
|
|
<i class="img" :class="key"></i>
|
|
<div>
|
|
<span>{{ value + '个' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<!-- <div class="right">
|
|
<div class="item-box" v-for="item in rightList" :key="item.type">
|
|
<div class="top">{{ item.type }}</div>
|
|
<div class="item" v-for="val in item.list" :key="val[0]">
|
|
<i class="img" :class="val[0]"></i>
|
|
<div>{{ val[1] }}</div>
|
|
</div>
|
|
<div class="bt">查看更多</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { useRouter } from 'vue-router'
|
|
import { ref } from 'vue'
|
|
import { useStore } from 'vuex'
|
|
import { selectTotal } from '@/api/home'
|
|
import bgVue from './background/bg.vue'
|
|
export default {
|
|
setup() {
|
|
const store = useStore()
|
|
const router = useRouter()
|
|
const topList = ['组件服务', '应用资源', '', '数据资源', '知识库']
|
|
let select = ref('组件服务')
|
|
const leftList = [
|
|
[
|
|
'系统已汇聚',
|
|
{
|
|
componentCapability: '组件服务0',
|
|
applicationResources: '应用资源0',
|
|
infrastructure: '基础设施23万',
|
|
dataResources: '数据资源10387',
|
|
knowledgeBase: '知识库12',
|
|
},
|
|
],
|
|
// [
|
|
// '本部门汇聚',
|
|
// {
|
|
// componentCapability: '组件服务0',
|
|
// applicationResources: '应用资源0',
|
|
// infrastructure: '基础设施0',
|
|
// dataResources: '数据资源0',
|
|
// knowledgeBase: '知识库0',
|
|
// },
|
|
// ],
|
|
]
|
|
const rightList = [
|
|
{
|
|
type: '基础设施',
|
|
list: [
|
|
['yfw', '云服务'],
|
|
['sp', '视频'],
|
|
['mr', '某标题'],
|
|
],
|
|
},
|
|
{
|
|
type: '数据资源',
|
|
list: [
|
|
['sdsjj', '市大数据局'],
|
|
['sqxj', '市气象局'],
|
|
['mr', '某某局'],
|
|
],
|
|
},
|
|
{
|
|
type: '组件服务',
|
|
list: [
|
|
['aisf', 'AI算法'],
|
|
['tyzj', '通用组件'],
|
|
['tcfw', '图层服务'],
|
|
],
|
|
},
|
|
{
|
|
type: '基础设施',
|
|
list: [
|
|
['ztcglxt', '渣土车管理系统'],
|
|
['zhzfzt', '综合执法专题'],
|
|
['mr', '某某子平台'],
|
|
],
|
|
},
|
|
]
|
|
// 查询系统汇聚个数
|
|
let showKey = ref(0)
|
|
selectTotal().then((res) => {
|
|
console.log('已汇聚个数==============>', res.data.data)
|
|
// eslint-disable-next-line no-unused-vars
|
|
res.data.data.total.forEach((val) => {
|
|
console.log(val)
|
|
if (val.type === '应用资源') {
|
|
leftList[0][1]['applicationResources'] = val.type + (val.count || 0)
|
|
} else if (val.type === '组件服务') {
|
|
leftList[0][1]['componentCapability'] = val.type + (val.count || 0)
|
|
}
|
|
})
|
|
showKey.value++
|
|
})
|
|
function onSearch() {
|
|
// 点击内存入store
|
|
store.commit('home/selectCardsData', {
|
|
selectCardsnum: select.value,
|
|
})
|
|
console.log(
|
|
'选中===================>',
|
|
store.getters['home/selectCardsnum']
|
|
)
|
|
// router.push({ path: '/DetailsPageconetent' })
|
|
router.push({
|
|
path: '/DetailsPageconetent',
|
|
query: {
|
|
select: select.value,
|
|
},
|
|
})
|
|
}
|
|
function selectCard(item) {
|
|
select.value = item
|
|
}
|
|
return {
|
|
topList,
|
|
leftList,
|
|
rightList,
|
|
select,
|
|
onSearch,
|
|
selectCard,
|
|
showKey,
|
|
}
|
|
},
|
|
components: {
|
|
bgVue,
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.navigation {
|
|
width: 100%;
|
|
// background: url('~@/assets/home/bg.png') no-repeat;
|
|
// background-size: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
.box {
|
|
margin: 1.3rem 0 1.2rem 0;
|
|
height: 6.12rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.top {
|
|
width: 8.5rem;
|
|
height: 0.62rem;
|
|
.ant-card-grid {
|
|
width: 20%;
|
|
text-align: center;
|
|
box-shadow: none;
|
|
cursor: pointer;
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(68, 107, 164, 0.4) 0%,
|
|
rgba(68, 107, 164, 0) 100%
|
|
);
|
|
font-size: 0.24rem;
|
|
color: #fff;
|
|
height: 0.62rem;
|
|
line-height: 0.62rem;
|
|
padding: 0;
|
|
}
|
|
.select {
|
|
box-shadow: 0 0.01rem 0.02rem -0.02rem rgb(255 255 255 / 26%),
|
|
0 0.03rem 0.06rem 0 rgb(255 255 255 / 22%),
|
|
0 0.05rem 0.12rem 0.04rem rgb(255 255 255 / 19%);
|
|
}
|
|
.ant-card-grid-hoverable:hover {
|
|
box-shadow: 0 0.01rem 0.02rem -0.02rem rgb(255 255 255 / 26%),
|
|
0 0.03rem 0.06rem 0 rgb(255 255 255 / 22%),
|
|
0 0.05rem 0.12rem 0.04rem rgb(255 255 255 / 19%);
|
|
}
|
|
}
|
|
.search {
|
|
width: 8.4rem;
|
|
height: 0.7rem;
|
|
margin-top: 0.7rem;
|
|
.ant-input-search {
|
|
height: 0.7rem;
|
|
max-width: none;
|
|
:deep(.ant-input-wrapper) {
|
|
height: 0.7rem;
|
|
.ant-input {
|
|
height: 0.7rem;
|
|
background: rgba(255, 255, 255, 0.4);
|
|
border: none;
|
|
color: #fff;
|
|
font-size: 0.2rem;
|
|
border-top-left-radius: 0.14rem;
|
|
border-bottom-left-radius: 0.14rem;
|
|
padding-left: 0.6rem;
|
|
}
|
|
.ant-input::-webkit-input-placeholder {
|
|
color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
.ant-input-group-addon,
|
|
.ant-btn {
|
|
width: 1.4rem;
|
|
height: 0.7rem;
|
|
font-size: 0.21rem;
|
|
border-top-right-radius: 0.14rem;
|
|
border-bottom-right-radius: 0.14rem;
|
|
}
|
|
}
|
|
}
|
|
.img {
|
|
display: inline-block;
|
|
width: 0.23rem;
|
|
height: 0.23rem;
|
|
background: url('~@/assets/home/search.png') no-repeat;
|
|
position: relative;
|
|
top: -0.45rem;
|
|
left: 0.2rem;
|
|
}
|
|
}
|
|
.bottom {
|
|
width: 13.2rem;
|
|
height: 3rem;
|
|
margin-top: 1.1rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
& > div {
|
|
height: 3rem;
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(28, 54, 111, 0.8) 0%,
|
|
rgba(28, 54, 111, 0) 100%
|
|
);
|
|
}
|
|
.left {
|
|
width: 6.9rem;
|
|
.title {
|
|
font-size: 0.18rem;
|
|
text-align: center;
|
|
color: #fff;
|
|
margin: 0.25rem 0 0.1rem;
|
|
}
|
|
.title2 {
|
|
margin: 0.35rem 0 0.1rem;
|
|
}
|
|
.item-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.item {
|
|
cursor: pointer;
|
|
width: 30%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-size: 0.16rem;
|
|
padding-top: 0.1rem;
|
|
border-radius: 0.1rem;
|
|
span {
|
|
color: #fff;
|
|
font-size: 0.18rem;
|
|
}
|
|
.img {
|
|
width: 0.36rem;
|
|
height: 0.36rem;
|
|
margin-bottom: 0.03rem;
|
|
}
|
|
.infrastructure {
|
|
background: url('~@/assets/home/jcss.png') no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
.dataResources {
|
|
background: url('~@/assets/home/sjzy.png') no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
.componentCapability {
|
|
background: url('~@/assets/home/zjfw.png') no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
.applicationResources {
|
|
background: url('~@/assets/home/yyzy.png') no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
.knowledgeBase {
|
|
background: url('~@/assets/home/zsk.png') no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
.item:hover {
|
|
box-shadow: 0 0.01rem 0.02rem -0.02rem rgb(255 255 255 / 26%),
|
|
0 0.03rem 0.06rem 0 rgb(255 255 255 / 22%),
|
|
0 0.05rem 0.12rem 0.04rem rgb(255 255 255 / 19%);
|
|
}
|
|
}
|
|
}
|
|
.right {
|
|
width: 6.3rem;
|
|
display: flex;
|
|
.item-box {
|
|
width: 25%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.top {
|
|
width: 100%;
|
|
height: 0.18rem;
|
|
line-height: 0.18rem;
|
|
font-size: 0.18rem;
|
|
color: #fff;
|
|
text-align: center;
|
|
margin: 0.3rem 0 0.2rem;
|
|
}
|
|
.item {
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.08rem 0 0.08rem 0.2rem;
|
|
border-radius: 0.1rem;
|
|
.img {
|
|
width: 0.34rem;
|
|
height: 0.34rem;
|
|
}
|
|
div {
|
|
font-size: 0.14rem;
|
|
margin-left: 0.05rem;
|
|
color: #fff;
|
|
}
|
|
.yfw {
|
|
background: url('~@/assets/home/yfw.png');
|
|
}
|
|
.sp {
|
|
background: url('~@/assets/home/sp.png');
|
|
}
|
|
.sdsjj {
|
|
background: url('~@/assets/home/sdsjj.png');
|
|
}
|
|
.sqxj {
|
|
background: url('~@/assets/home/sqxj.png');
|
|
}
|
|
.aisf {
|
|
background: url('~@/assets/home/aisf.png');
|
|
}
|
|
.tyzj {
|
|
background: url('~@/assets/home/tyzj.png');
|
|
}
|
|
.tcfw {
|
|
background: url('~@/assets/home/tcfw.png');
|
|
}
|
|
.ztcglxt {
|
|
background: url('~@/assets/home/ztcglxt.png');
|
|
}
|
|
.zhzfzt {
|
|
background: url('~@/assets/home/zhzfzt.png');
|
|
}
|
|
.mr {
|
|
background: url('~@/assets/home/mr.png');
|
|
}
|
|
}
|
|
.item:nth-of-type(1) {
|
|
margin-top: 0;
|
|
}
|
|
.item:hover {
|
|
box-shadow: 0 0.01rem 0.02rem -0.02rem rgb(255 255 255 / 26%),
|
|
0 0.03rem 0.06rem 0 rgb(255 255 255 / 22%),
|
|
0 0.05rem 0.12rem 0.04rem rgb(255 255 255 / 19%);
|
|
}
|
|
.bt {
|
|
cursor: pointer;
|
|
width: 1.2rem;
|
|
height: 0.38rem;
|
|
line-height: 0.38rem;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 0.14rem;
|
|
background: rgba(255, 255, 255, 0.4);
|
|
border-radius: 0.04rem;
|
|
align-self: center;
|
|
margin-top: 0.1rem;
|
|
}
|
|
.bt:hover {
|
|
box-shadow: 0 0.01rem 0.02rem -0.02rem rgb(255 255 255 / 26%),
|
|
0 0.03rem 0.06rem 0 rgb(255 255 255 / 22%),
|
|
0 0.05rem 0.12rem 0.04rem rgb(255 255 255 / 19%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|