347 lines
7.7 KiB
Vue
347 lines
7.7 KiB
Vue
<template>
|
||
<div class="grid" v-if="pageShow">
|
||
<div class="gird-wrapper">
|
||
<div class="gird-item">
|
||
<h2>一级网格</h2>
|
||
<div class="gird-item__wrapper level1" @click="getStatistics(topGrid.id)">
|
||
<h3>{{ topGrid.girdName }}</h3>
|
||
<image :src="$cdn + 'xincheng/w-right.png'"/>
|
||
</div>
|
||
</div>
|
||
<div class="gird-item" v-if="secondaryGrid.length">
|
||
<h2>二级网格</h2>
|
||
<div class="gird-item__wrapper level2">
|
||
<div class="grid-item__item" v-for="(item, index) in secondaryGrid" :key="index">{{ item.girdName }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="gird-item" v-if="tertiaryGrid.length">
|
||
<h2>三级网格</h2>
|
||
<div class="gird-item__wrapper level3" @click="getSubInfo">
|
||
<h3>专属网格</h3>
|
||
<p>（{{ tertiaryGrid.length }}个）</p>
|
||
<image :src="$cdn + 'xincheng/blue-right.png'"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<u-popup v-model="isShowStreet" :closeable="false" border-radius="16" height="60%" mode="bottom">
|
||
<div class="street-dialog">
|
||
<scroll-view scroll-y class="street-wrapper">
|
||
<h2 class="title">数据统计</h2>
|
||
<div class="street-item__wrapper">
|
||
<div class="street-item" v-for="(item, index) in streetInfo" :key="index">
|
||
<div class="left">
|
||
<i></i>
|
||
<h2>{{ index }}</h2>
|
||
</div>
|
||
<span>{{ item }}</span>
|
||
</div>
|
||
</div>
|
||
</scroll-view>
|
||
</div>
|
||
</u-popup>
|
||
<u-popup v-model="isShowVillage" :closeable="false" border-radius="16" height="60%" mode="bottom">
|
||
<div class="street-dialog">
|
||
<scroll-view scroll-y class="street-wrapper">
|
||
<h2 class="title">数据统计</h2>
|
||
<div class="street-item__wrapper">
|
||
<div class="street-item" v-for="(item, index) in tertiaryInfo" :key="index">
|
||
<div class="left">
|
||
<i></i>
|
||
<h2>{{ index }}</h2>
|
||
</div>
|
||
<span>{{ item }}</span>
|
||
</div>
|
||
</div>
|
||
<h2 class="title">网格列表</h2>
|
||
<div class="street-item__wrapper">
|
||
<div class="street-item" style="justify-content: center" v-for="(item, index) in tertiaryGrid" :key="index">
|
||
<span>{{ item.girdName }}</span>
|
||
</div>
|
||
</div>
|
||
</scroll-view>
|
||
</div>
|
||
</u-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'grid',
|
||
|
||
appName: '网格统计',
|
||
|
||
data() {
|
||
return {
|
||
isShowStreet: false,
|
||
streetInfo: {},
|
||
isShowVillage: false,
|
||
topGrid: [],
|
||
secondaryGrid: [],
|
||
tertiaryGrid: [],
|
||
tertiaryInfo: {},
|
||
pageShow: false
|
||
}
|
||
},
|
||
|
||
onLoad() {
|
||
this.$loading()
|
||
this.getInfo().finally(() => uni.hideLoading())
|
||
},
|
||
|
||
methods: {
|
||
getStatistics(girdId) {
|
||
this.$loading()
|
||
this.$http.post(`/api/appgirdinfo/girdInfoCountById?girdId=${girdId}`).then(res => {
|
||
if (res.code === 0) {
|
||
this.isShowStreet = true
|
||
this.streetInfo = res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
getSubInfo() {
|
||
this.$loading()
|
||
this.$http.post(`/api/appgirdinfo/girdInfoCountByThree`).then(res => {
|
||
if (res.code === 0) {
|
||
this.isShowVillage = true
|
||
this.tertiaryInfo = res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
getInfo() {
|
||
return this.$http.post(`/api/appgirdinfo/listAllByTop`).then(res => {
|
||
if (res.code === 0) {
|
||
this.topGrid = res.data
|
||
|
||
if (res.data.girdList.length) {
|
||
this.secondaryGrid = res.data.girdList
|
||
|
||
res.data.girdList.forEach(e => {
|
||
this.tertiaryGrid.push(...e.girdList)
|
||
})
|
||
}
|
||
|
||
this.$nextTick(() => {
|
||
this.pageShow = true
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.grid {
|
||
min-height: 100vh;
|
||
padding: 32px 0;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.street-dialog {
|
||
height: 100%;
|
||
padding: 0 32px 30px;
|
||
|
||
.street-wrapper {
|
||
.title {
|
||
height: 100px;
|
||
line-height: 100px;
|
||
width: 128px;
|
||
font-size: 32px;
|
||
font-weight: 600;
|
||
color: #262B36;
|
||
}
|
||
|
||
.street-item__wrapper {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
height: 100%;
|
||
}
|
||
|
||
.street-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: calc((100% - 30px) / 2);
|
||
height: 88px;
|
||
margin-bottom: 16px;
|
||
padding: 0 32px;
|
||
background: #F3F5F7;
|
||
|
||
&:nth-of-type(2n - 1) {
|
||
margin-right: 30px;
|
||
}
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
i {
|
||
width: 8px;
|
||
height: 8px;
|
||
margin-right: 16px;
|
||
border-radius: 50%;
|
||
background: #1365DD;
|
||
}
|
||
|
||
h2 {
|
||
color: #666666;
|
||
font-size: 26px;
|
||
}
|
||
}
|
||
|
||
span {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
-webkit-line-clamp: 2;
|
||
font-size: 28px;
|
||
color: #333;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.gird-item {
|
||
position: relative;
|
||
margin: 0 16px 80px;
|
||
padding: 16px;
|
||
border: 2px dashed #CCCCCC;
|
||
|
||
&::after {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
z-index: 11;
|
||
width: 2px;
|
||
height: 80px;
|
||
background: #666666;
|
||
transform: translate(-50%, 100%);
|
||
content: ' ';
|
||
}
|
||
|
||
&::before {
|
||
position: absolute;
|
||
bottom: -80px;
|
||
left: 50%;
|
||
z-index: 11;
|
||
border: 14px solid transparent;
|
||
border-top: 14px solid #666666;
|
||
transform: translate(-50%, 50%);
|
||
content: ' ';
|
||
}
|
||
|
||
&:last-child::after, &:last-child::before {
|
||
display: none;
|
||
}
|
||
|
||
.level1 {
|
||
position: relative;
|
||
text-align: center;
|
||
height: 80px;
|
||
line-height: 80px;
|
||
background: #1365DD;
|
||
color: #fff;
|
||
font-size: 32px;
|
||
|
||
&:active {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
image {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 16px;
|
||
z-index: 1;
|
||
width: 32px;
|
||
height: 32px;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
h3 {
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
|
||
.level3 {
|
||
display: flex;
|
||
position: relative;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
text-align: center;
|
||
height: 96px;
|
||
background: #E8EFFB;
|
||
color: #fff;
|
||
font-size: 28px;
|
||
|
||
&:active {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
h3 {
|
||
color: #1365DD;
|
||
}
|
||
|
||
p {
|
||
color: #CCCCCC;
|
||
font-size: 24px;
|
||
}
|
||
|
||
image {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 16px;
|
||
z-index: 1;
|
||
width: 32px;
|
||
height: 32px;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
h3 {
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
|
||
.level2 {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.grid-item__item {
|
||
width: calc((100% - 16px) / 2);
|
||
height: 80px;
|
||
line-height: 80px;
|
||
margin-bottom: 8px;
|
||
padding: 0 10px;
|
||
color: #3B3F59;
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
background: #F3F5F7;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
|
||
&:nth-of-type(2n - 1) {
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
& > h2 {
|
||
margin-bottom: 16px;
|
||
text-align: center;
|
||
color: #1365DD;
|
||
font-size: 32px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
</style>
|