298 lines
7.8 KiB
Vue
298 lines
7.8 KiB
Vue
<template>
|
|
<div class="h-full box">
|
|
<div class="header">
|
|
<span class="">智慧物业后台管理系统</span>
|
|
<navbar :Showhamburger="false" ref="navbarRef" />
|
|
</div>
|
|
<div class="containerbox">
|
|
<div class="community_nav_box">
|
|
<div class="currentbox">当前小区:{{ currentViliageInfo && currentViliageInfo.villageName }}</div>
|
|
<div class="subtitle flex align-center">
|
|
<div class="changecommunity">切换小区</div>
|
|
</div>
|
|
</div>
|
|
<div class="communityBody">
|
|
<div class="coummunity_card" v-for="(item, index) in list" :key="index">
|
|
<el-image
|
|
:zoom-rate="1.2"
|
|
:max-scale="7"
|
|
:min-scale="0.2"
|
|
:preview-src-list="item.villageImageUrl ? item.villageImageUrl.split(',') : [defaultVilageinfoImage]"
|
|
show-progress
|
|
:initial-index="4"
|
|
fit="cover"
|
|
:src="item.villageImageUrl ? item.villageImageUrl.split(',')[0] : defaultVilageinfoImage"
|
|
>
|
|
<template #error>
|
|
<div class="image-viewer-slot image-slot">
|
|
<el-icon><Picture /></el-icon>
|
|
</div>
|
|
</template>
|
|
</el-image>
|
|
<div class="coummunityaction_box">
|
|
<div class="coummunityname">{{ item.villageName }}</div>
|
|
<div class="counmmunityaddress">{{ item.address }}</div>
|
|
</div>
|
|
<div class="actions flex">
|
|
<div @click="handleclick(item)">管理</div>
|
|
<div @click="handleEdit(item)" v-hasPermi="['system:village:edit']">编辑</div>
|
|
<div @click="handleDelete(item)" v-hasPermi="['system:village:remove']">删除</div>
|
|
</div>
|
|
</div>
|
|
<div v-hasPermi="['system:village:add']" @click="handleAdd" class="coummunity_card addActions flex flex-items-center justify-center">
|
|
<div class="addCoummunity">
|
|
<el-icon>
|
|
<AddLocation></AddLocation>
|
|
</el-icon>
|
|
<div>添加小区</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<i class="bgcolor"></i>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import defaultVilageinfoImage from '@/assets/images/villageimage.png';
|
|
import Navbar from '@/layout/components/Navbar.vue';
|
|
import { deleteVillageByIdAPI, switchVillageAPI, getCommunitylistAPI } from '@/api/system/community/index';
|
|
import type { communitylist_rows_type } from '@/api/system/community/type';
|
|
import { Picture } from '@element-plus/icons-vue';
|
|
import { useHouseStore } from '@/store/modules/house';
|
|
|
|
const houseStore = useHouseStore();
|
|
const router = useRouter();
|
|
const list = ref<communitylist_rows_type[]>([]);
|
|
const currentViliageInfo = ref<communitylist_rows_type>();
|
|
/** 获取小区列表 */
|
|
function getlist() {
|
|
getCommunitylistAPI().then((res) => {
|
|
list.value = res.rows;
|
|
const villageid = localStorage.getItem('villageid');
|
|
const find = list.value.find((item) => item.villageId === villageid);
|
|
if (find) {
|
|
currentViliageInfo.value = find;
|
|
}
|
|
});
|
|
}
|
|
getlist();
|
|
/** 新增小区 */
|
|
function handleAdd() {
|
|
router.push({
|
|
path: '/community/AddCommunity'
|
|
});
|
|
}
|
|
|
|
/** 删除小区 */
|
|
function handleDelete(item: communitylist_rows_type) {
|
|
deleteVillageByIdAPI(item.villageId).then(() => {
|
|
const newlist = list.value.filter((listitem) => listitem.villageId !== item.villageId);
|
|
list.value = newlist;
|
|
});
|
|
}
|
|
|
|
/** 编辑小区 */
|
|
function handleEdit(item: communitylist_rows_type) {
|
|
router.push({
|
|
path: '/community/AddCommunity',
|
|
query: {
|
|
id: item.villageId
|
|
}
|
|
});
|
|
}
|
|
|
|
/** 管理小区 */
|
|
function handleclick(item: communitylist_rows_type) {
|
|
switchVillageAPI(item.villageId).then(() => {
|
|
localStorage.setItem('villageInfo', JSON.stringify(item));
|
|
localStorage.setItem('villageid', item.villageId);
|
|
houseStore.getviliageinfo(item.villageId);
|
|
router.push({
|
|
path: '/'
|
|
});
|
|
});
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.box {
|
|
background: linear-gradient(180deg, #deedff 0%, #f8f9fe 50%);
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
background: transparent;
|
|
& > div {
|
|
flex: 1;
|
|
}
|
|
& > span {
|
|
padding-left: 20px;
|
|
font-size: 20px;
|
|
color: white;
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
.bgcolor {
|
|
width: 1085px;
|
|
height: 571px;
|
|
background: #fdf1ee;
|
|
filter: blur(400px);
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
transform: translateY(-50%);
|
|
right: 0;
|
|
pointer-events: none; /* 🔥 让它不拦截鼠标点击，穿透到下面 */
|
|
@media (max-width: 1540px) {
|
|
width: 800px;
|
|
height: 400px;
|
|
}
|
|
@media (max-width: 1280px) {
|
|
width: 600px;
|
|
height: 300px;
|
|
}
|
|
@media (max-width: 1030px) {
|
|
width: 400px;
|
|
height: 200px;
|
|
}
|
|
}
|
|
}
|
|
.image-slot {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
font-size: 30px;
|
|
height: 200px;
|
|
background: #fff;
|
|
}
|
|
.containerbox {
|
|
width: 85%;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background: transparent;
|
|
.community_nav_box {
|
|
height: 98px;
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #ffffff 70%);
|
|
border-radius: 16px 16px 16px 16px;
|
|
padding: 20px;
|
|
.currentbox {
|
|
height: 20px;
|
|
line-height: 20px;
|
|
color: rgba(102, 102, 102, 1);
|
|
font-size: 14px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.subtitle {
|
|
.line {
|
|
margin-top: 4px;
|
|
width: 5px;
|
|
height: 19px;
|
|
border-radius: 5px;
|
|
background-color: rgba(26, 117, 255, 1);
|
|
margin-right: 5px;
|
|
}
|
|
.changecommunity {
|
|
height: 25px;
|
|
line-height: 25px;
|
|
color: rgba(51, 51, 51, 1);
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
}
|
|
.communityBody {
|
|
padding: 20px;
|
|
color: #000;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
@media (max-width: 2350px) {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
@media (max-width: 1900px) {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
@media (max-width: 1450px) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.coummunity_card {
|
|
min-width: 369px;
|
|
max-width: 369px;
|
|
min-height: 358px;
|
|
border: 2px solid #ffffff;
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #ffffff 70%);
|
|
box-shadow: 0px 4px 8px 0px rgba(0, 104, 255, 0.06);
|
|
border-radius: 16px 16px 16px 16px;
|
|
margin-right: 20px;
|
|
margin-bottom: 15px;
|
|
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
&:hover {
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.el-image {
|
|
height: 179px;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.coummunityaction_box {
|
|
flex: 1;
|
|
padding: 30px;
|
|
font-weight: 500;
|
|
font-size: 20px;
|
|
color: #303133;
|
|
line-height: 25px;
|
|
.counmmunityaddress {
|
|
margin-top: 10px;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: #666666;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
.actions {
|
|
height: 60px;
|
|
div {
|
|
border-top: 1px solid #ccc;
|
|
border-right: 1px solid #ccc;
|
|
flex: 1;
|
|
text-align: center;
|
|
color: #4791ff;
|
|
cursor: pointer;
|
|
line-height: 60px;
|
|
font-weight: 500;
|
|
font-size: 18px;
|
|
color: #036aff;
|
|
&:hover {
|
|
background-color: #f5f7fb;
|
|
}
|
|
}
|
|
& > div:last-child {
|
|
color: red;
|
|
border-right: none;
|
|
}
|
|
}
|
|
|
|
.addCoummunity {
|
|
height: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
&.addActions {
|
|
cursor: pointer;
|
|
&:hover {
|
|
background-color: #f5f7fb;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|