wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

前两个

This commit is contained in:
gaoyuanwei 2022-08-19 14:24:34 +08:00
parent a4b7510e1a
commit b2effa3c14
3 changed files with 225 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
front/src/api/cimSpecialArea.js
View File

@ -2,14 +2,14 @@ import request from '@/utils/request'
// 各个cim总数
export function countByType() {
return request({
url: '/renren-admin/resource/countByType',
url: '/resource/countByType',
method: 'get',
})
}
// cim+平台
export function getCIMApplyApplicationList() {
return request({
url: '/renren-admin/resource/getCIMApplyApplicationList',
url: '/resource/getCIMApplyApplicationList',
method: 'get',
})
}

104
front/src/views/cimSpecialArea/components/cimHead.vue
View File

@ -0,0 +1,104 @@
<template>
<div class="box">
<div class="header">
<div class="headerbox" v-for="(item, index) in headerList" :key="index">
<div>
<img :src="item.img" />
<h3>{{ item.name }}</h3>
</div>
<i></i>
<h2>{{ item.num }}个</h2>
</div>
</div>
</div>
</template>
<script setup>
import { countByType } from '@/api/cimSpecialArea'
import { ref } from 'vue'
const headerList = ref([
{
name: 'CIM+平台',
img: require('@/assets/cimSpecialArea/platform.png'),
num: 0,
},
{
name: 'CIM+图层',
img: require('@/assets/cimSpecialArea/coverage.png'),
num: 0,
},
{
name: 'CIM+算法',
img: require('@/assets/cimSpecialArea/algorithm.png'),
num: 0,
},
])
countByType().then((res) => {
if (res.status === 200) {
console.log(res.data.data, '====>各个cim总数')
res.data.data.map((item) => {
if (item.type === '平台') {
headerList.value[0].num = item.count
} else if (item.type === '图层') {
headerList.value[1].num = item.count
} else if (item.type === '组件') {
headerList.value[2].num = item.count
}
})
}
})
</script>
<style lang="less" scoped>
.box {
width: 100%;
height: 3.02rem;
background: url('~@/assets/cimSpecialArea/cimBG.png') no-repeat;
display: flex;
.header {
width: 100%;
display: flex;
justify-content: center;
.headerbox {
width: 5.34rem;
height: 2rem;
border-radius: 00.08rem;
margin-top: 0.5rem;
margin-right: 0.6rem;
background: #ffffff;
display: flex;
align-items: center;
img {
width: 1.04rem;
height: 1.06rem;
}
h3 {
font-size: 20px;
color: #000000;
margin-bottom: 0;
}
h2 {
font-size: 34px;
color: #000000;
font-weight: bold;
margin-left: 1rem;
margin-bottom: 0;
}
i {
width: 0.01rem;
height: 1.15rem;
background: #cccccc;
}
}
.headerbox:last-child {
margin-right: 0;
}
.headerbox > div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-left: 0.6rem;
margin-right: 0.85rem;
}
}
}
</style>

119
front/src/views/cimSpecialArea/components/platform.vue
View File

@ -0,0 +1,119 @@
<template>
<div class="box">
<div>
<h1>CIM+平台</h1>
<div>
<swiper
:slidesPerView="3"
:spaceBetween="30"
:pagination="{ clickable: true }"
:modules="modules"
class="mySwiper"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide v-for="item in platformList" :key="item.id">
<div class="platformBox">
<h2>{{ item.name }}</h2>
<a-image :preview="false" :src="item.pic" :fallback="item.pic2" />
<p>{{ item.description }}</p>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { Pagination } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
import 'swiper/swiper-bundle.min.css'
import { getCIMApplyApplicationList } from '@/api/cimSpecialArea'
const modules = ref([Pagination])
const platformList = ref([
// {
// name: 'CIM+青岛市更新项目申报系统',
// img: require('@/assets/capacitySquare/yyzy.jpg'),
// content:
// 'CIM+城市更新应用从八个纬度开展青岛城市“体检”活动，融合城市体检数据、优化城市规划方案',
// },
// {
// name: 'CIM+青岛市更新项目申报系统',
// img: require('@/assets/capacitySquare/yyzy.jpg'),
// content:
// 'CIM+城市更新应用从八个纬度开展青岛城市“体检”活动，融合城市体检数据、优化城市规划方案',
// },
// {
// name: 'CIM+青岛市更新项目申报系统',
// img: require('@/assets/capacitySquare/yyzy.jpg'),
// content:
// 'CIM+城市更新应用从八个纬度开展青岛城市“体检”活动，融合城市体检数据、优化城市规划方案',
// },
// {
// name: 'CIM+青岛市更新项目申报系统',
// img: require('@/assets/capacitySquare/yyzy.jpg'),
// content:
// 'CIM+城市更新应用从八个纬度开展青岛城市“体检”活动，融合城市体检数据、优化城市规划方案',
// },
])
getCIMApplyApplicationList().then((res) => {
if (res.status === 200) {
res.data.data.map((val) => {
if (!val.pic) {
val.pic = require('@/assets/capacitySquare/yyzy.jpg')
}
val.pic2 = require('@/assets/capacitySquare/yyzy.jpg')
})
console.log(res.data.data, '====>平台')
platformList.value.push(...res.data.data)
}
})
</script>
<style lang="less" scoped>
.box {
width: 100%;
background: #f1f4fb;
padding: 0 1.05rem 0.2rem;
h1 {
font-size: 0.3rem;
color: #000000;
font-weight: bold;
padding: 0.35rem 0 0.15rem;
margin-bottom: 0.2rem;
border-bottom: 0.01rem solid #bcbdbd;
}
.platformBox {
width: 5.34rem;
height: 5.65rem;
padding: 0.28rem 0.35rem;
border: 0.03rem solid #0077ff;
margin-right: 0.56rem;
background: #ffffff;
h2 {
font-size: 0.2rem;
color: #000000;
margin-bottom: 0.28rem;
}
:deep(.ant-image) {
width: 4.5rem;
height: 3.4rem;
}
:deep(.ant-image-img) {
width: 100%;
height: 100%;
}
p {
font-size: 0.18rem;
margin: 0.2rem 0 0;
}
}
:deep(.swiper) {
height: 5.9rem;
}
:deep(.swiper-horizontal
> .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction) {
bottom: -0.05rem;
}
}
</style>