SongZhen
2 years ago
12 changed files with 520 additions and 131 deletions
|
After Width: | Height: | Size: 622 B |
|
After Width: | Height: | Size: 646 B |
|
After Width: | Height: | Size: 736 B |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 8.7 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
@ -0,0 +1,63 @@ |
|||
<template> |
|||
<div class="title" :class="noBg ? 'no-bg' : ''"> |
|||
<span class="text"> |
|||
<span class="txt">{{ text }}</span> |
|||
<span class="text-shadow">{{ text }}</span> |
|||
<slot></slot> |
|||
</span> |
|||
<!-- <slot></slot> --> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "Title", |
|||
props: { |
|||
text: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
noBg: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.title { |
|||
background: url(../../../../../assets/images/shuju/overview/title-bg.png) no-repeat 0 0 fixed; |
|||
padding: 8px 16px 8px 32px; |
|||
display: flex; |
|||
align-items: center; |
|||
// justify-content: space-between; |
|||
|
|||
.text { |
|||
position: relative; |
|||
font-size: 22px; |
|||
font-family: HYShuYuanHeiJ; |
|||
font-weight: 400; |
|||
|
|||
.txt { |
|||
color: #1f79ff; |
|||
background: linear-gradient(0deg, #2dc1ff 0%, #ffffff 58.5205078125%); |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
position: relative; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.text-shadow { |
|||
top: 4px; |
|||
left: 3px; |
|||
position: absolute; |
|||
color: #020f21; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
} |
|||
.no-bg { |
|||
background: none; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,393 @@ |
|||
<template> |
|||
<div class="homeWrap"> |
|||
<div class="bread"> |
|||
<bread-crumb :list="list" /> |
|||
</div> |
|||
<el-row :gutter="48"> |
|||
<el-col :span="8"> |
|||
<div class="bg"> |
|||
<Title :text="homeText"> |
|||
<span :class="[homeMsg.type === 'red' ? 'miniGrid_red' : homeMsg.type === 'yellow' ? 'miniGrid_yellow' : 'miniGrid_green']">红色微网格</span> |
|||
</Title> |
|||
</div> |
|||
<div class="apartment"> |
|||
<div class="apar_comtent"> |
|||
<div class="apar_top"> |
|||
<img src="@/assets/images/home/homeTop.png" alt="/" /> |
|||
</div> |
|||
<div class="apar_center"> |
|||
<div class="apar_center_flex"> |
|||
<div v-for="(item, index) in houseMountArr" :key="index" class="floor"> |
|||
<div class="households" v-for="itm in item" :key="itm.id">{{ itm.doorName }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- <div class="apar_bottom"> |
|||
<img src="@/assets/images/home/homeBottom.png" alt="/" /> |
|||
</div> --> |
|||
</div> |
|||
<div class="apar_right"> |
|||
<img src="@/assets/images/home/homeRight.png" alt="" /> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="16"> |
|||
<div class="table"> |
|||
<el-table :data="list" v-loading="loading" height="500" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 21, 64, 0.3)"> |
|||
<el-table-column label="序号" type="index" width="80" /> |
|||
<el-table-column prop="doorName" label="门牌号" /> |
|||
<el-table-column prop="fullName" label="所属小区" /> |
|||
<el-table-column prop="buildingId" label="所属楼栋" /> |
|||
<el-table-column prop="houseName" label="所属单元" /> |
|||
<el-table-column prop="houseCode" label="房屋编码" /> |
|||
<el-table-column prop="rentFlag" label="房屋状态"> |
|||
<template slot-scope="scope"> |
|||
<!-- 1：出租 0：自住 2：闲置 3：未售出 --> |
|||
<span>{{ getRentFlag(scope.row.rentFlag) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="houseType" label="房屋类型"> |
|||
<template slot-scope="scope"> |
|||
<!-- 1楼房，2平房，3别墅 --> |
|||
<span>{{ getHouseType(scope.row.houseType) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="ownerName" label="房主姓名" /> |
|||
<el-table-column prop="ownerPhone" label="房主电话" /> |
|||
<el-table-column label="操作" width="90" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<!-- <div> |
|||
<Pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList" /> |
|||
</div> --> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; |
|||
import Title from "./Title/index.vue"; |
|||
import BreadCrumb from "@/views/dataBoard/cpts/personnel/components/Breadcrumb/index.vue"; |
|||
export default { |
|||
name: "homeDetails", |
|||
components: { |
|||
Pagination, |
|||
Title, |
|||
BreadCrumb, |
|||
}, |
|||
data() { |
|||
return { |
|||
// total: 0, |
|||
// pageNum: 1, |
|||
// pageSize: 10, |
|||
loading: false, |
|||
homeMsg: {}, |
|||
list: [], |
|||
homeText: "", |
|||
houseMountArr: [ |
|||
// [ |
|||
// { doorName: "101", id: 1 }, |
|||
// { doorName: "102", id: 1 }, |
|||
// { doorName: "103", id: 1 }, |
|||
// { doorName: "104", id: 1 }, |
|||
// { doorName: "105", id: 1 }, |
|||
// ], |
|||
// [ |
|||
// { doorName: "201", id: 1 }, |
|||
// { doorName: "202", id: 1 }, |
|||
// { doorName: "203", id: 1 }, |
|||
// { doorName: "204", id: 1 }, |
|||
// { doorName: "205", id: 1 }, |
|||
// ], |
|||
// [ |
|||
// { doorName: "301", id: 1 }, |
|||
// { doorName: "302", id: 1 }, |
|||
// { doorName: "303", id: 1 }, |
|||
// { doorName: "304", id: 1 }, |
|||
// { doorName: "305", id: 1 }, |
|||
// ], |
|||
// [ |
|||
// { doorName: "401", id: 1 }, |
|||
// { doorName: "402", id: 1 }, |
|||
// { doorName: "403", id: 1 }, |
|||
// { doorName: "404", id: 1 }, |
|||
// { doorName: "405", id: 1 }, |
|||
// ], |
|||
// [ |
|||
// { doorName: "501", id: 1 }, |
|||
// { doorName: "502", id: 1 }, |
|||
// { doorName: "503", id: 1 }, |
|||
// { doorName: "504", id: 1 }, |
|||
// { doorName: "505", id: 1 }, |
|||
// ], |
|||
// [ |
|||
// { doorName: "601", id: 1 }, |
|||
// { doorName: "602", id: 1 }, |
|||
// { doorName: "603", id: 1 }, |
|||
// { doorName: "604", id: 1 }, |
|||
// { doorName: "605", id: 1 }, |
|||
// ], |
|||
// [ |
|||
// { doorName: "701", id: 1 }, |
|||
// { doorName: "702", id: 1 }, |
|||
// { doorName: "703", id: 1 }, |
|||
// { doorName: "704", id: 1 }, |
|||
// { doorName: "705", id: 1 }, |
|||
// ], |
|||
// [ |
|||
// { doorName: "801", id: 1 }, |
|||
// { doorName: "802", id: 1 }, |
|||
// { doorName: "803", id: 1 }, |
|||
// { doorName: "804", id: 1 }, |
|||
// { doorName: "805", id: 1 }, |
|||
// ], |
|||
// [ |
|||
// { doorName: "901", id: 1 }, |
|||
// { doorName: "902", id: 1 }, |
|||
// { doorName: "903", id: 1 }, |
|||
// { doorName: "904", id: 1 }, |
|||
// { doorName: "905", id: 1 }, |
|||
// ], |
|||
// [ |
|||
// { doorName: "1001", id: 1 }, |
|||
// { doorName: "1002", id: 1 }, |
|||
// { doorName: "1003", id: 1 }, |
|||
// { doorName: "1004", id: 1 }, |
|||
// { doorName: "1005", id: 1 }, |
|||
// ], |
|||
// [ |
|||
// { doorName: "1101", id: 1 }, |
|||
// { doorName: "1102", id: 1 }, |
|||
// { doorName: "1103", id: 1 }, |
|||
// { doorName: "1104", id: 1 }, |
|||
// { doorName: "1105", id: 1 }, |
|||
// ], |
|||
// [ |
|||
// { doorName: "1201", id: 1 }, |
|||
// { doorName: "1202", id: 1 }, |
|||
// { doorName: "1203", id: 1 }, |
|||
// { doorName: "1204", id: 1 }, |
|||
// { doorName: "1205", id: 1 }, |
|||
// ], |
|||
// [ |
|||
// { doorName: "1301", id: 1 }, |
|||
// { doorName: "1302", id: 1 }, |
|||
// { doorName: "1303", id: 1 }, |
|||
// { doorName: "1304", id: 1 }, |
|||
// { doorName: "1305", id: 1 }, |
|||
// ], |
|||
// [ |
|||
// { doorName: "1401", id: 1 }, |
|||
// { doorName: "1402", id: 1 }, |
|||
// { doorName: "1403", id: 1 }, |
|||
// { doorName: "1404", id: 1 }, |
|||
// { doorName: "1405", id: 1 }, |
|||
// ], |
|||
// [ |
|||
// { doorName: "1501", id: 1 }, |
|||
// { doorName: "1502", id: 1 }, |
|||
// { doorName: "1503", id: 1 }, |
|||
// { doorName: "1504", id: 1 }, |
|||
// { doorName: "1505", id: 1 }, |
|||
// ], |
|||
], |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
getDoorNameList(list) { |
|||
const doorNameList = []; |
|||
const doorNameArr = []; |
|||
list.forEach((item) => { |
|||
const doorName = item.doorName; |
|||
if (doorName.length === 4) { |
|||
doorNameArr.push(doorName.slice(0, 2)); |
|||
} else if (doorName.length === 3) { |
|||
doorNameArr.push(doorName.slice(0, 1)); |
|||
} |
|||
}); |
|||
const doorNameSet = new Set(doorNameArr); |
|||
doorNameSet.forEach((item) => { |
|||
const arr = []; |
|||
list.forEach((item2) => { |
|||
const doorName = item2.doorName; |
|||
if (doorName.length === 4) { |
|||
if (doorName.slice(0, 2) === item) { |
|||
arr.push(item2); |
|||
} |
|||
} else if (doorName.length === 3) { |
|||
if (doorName.slice(0, 1) === item) { |
|||
arr.push(item2); |
|||
} |
|||
} |
|||
}); |
|||
doorNameList.push(arr); |
|||
}); |
|||
return doorNameList; |
|||
}, |
|||
|
|||
getList() { |
|||
this.loading = true; |
|||
this.$http.get(`/actual/base/streetOverview/getUnitHouseList?unitId=1689829742860771329`).then((res) => { |
|||
const { |
|||
code, |
|||
data: { houseList, unitInfo }, |
|||
} = res.data; |
|||
if (code === 0) { |
|||
this.list = houseList; |
|||
this.homeMsg = unitInfo; |
|||
this.homeText = unitInfo.quartersName + unitInfo.buildingName + unitInfo.unitNum + "单元"; |
|||
this.houseMountArr = this.getDoorNameList(this.list); |
|||
this.loading = false; |
|||
} else { |
|||
this.loading = false; |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
getRentFlag(type) { |
|||
const rentFlag = new Map([ |
|||
["0", "出租"], |
|||
["1", "自住"], |
|||
["2", "闲置"], |
|||
["3", "未售出"], |
|||
]); |
|||
return rentFlag.get(type); |
|||
}, |
|||
|
|||
getHouseType(type) { |
|||
const houseTypeMap = new Map([ |
|||
["1", "楼房"], |
|||
["2", "平房"], |
|||
["3", "别墅"], |
|||
]); |
|||
return houseTypeMap.get(type); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "@/assets/scss/dataBoard/table.scss"; |
|||
@mixin radio { |
|||
display: inline-block; |
|||
width: 90px; |
|||
height: 24px; |
|||
opacity: 0.8; |
|||
border-radius: 11px; |
|||
text-align: center; |
|||
line-height: 22px; |
|||
margin-left: 15px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
} |
|||
.homeWrap { |
|||
.bread { |
|||
margin-bottom: 25px; |
|||
} |
|||
.apar_top { |
|||
width: 100%; |
|||
img { |
|||
width: 100%; |
|||
} |
|||
} |
|||
.apartment { |
|||
display: flex; |
|||
align-items: flex-end; |
|||
justify-content: center; |
|||
.apar_comtent { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
.apar_center { |
|||
min-width: 244px; |
|||
max-width: 488px; |
|||
height: 584px; |
|||
overflow: auto; |
|||
background: url("@/assets/images/home/homeCenter.png") no-repeat; |
|||
background-size: 100% 100%; |
|||
padding: 30px 30px 10px 30px; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
flex-direction: column-reverse; |
|||
.apar_center_flex { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-wrap: wrap-reverse; |
|||
justify-content: center; |
|||
} |
|||
.floor { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-bottom: 20px; |
|||
.households { |
|||
height: 58px; |
|||
background: url("@/assets/images/home/hasPeople.png") no-repeat; |
|||
background-size: 100% 100%; |
|||
display: flex; |
|||
flex: 0 0 48px; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #7fceff; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
} |
|||
.apar_bottom { |
|||
width: 244px; |
|||
margin-top: -1px; |
|||
img { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
.apar_right { |
|||
margin-left: -3px; |
|||
} |
|||
} |
|||
|
|||
.more { |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
color: #a0cdff; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.bg { |
|||
margin-bottom: 50px; |
|||
background: linear-gradient(144deg, rgba(46, 164, 255, 0.1) 0%, rgba(13, 143, 243, 0) 100%); |
|||
.miniGrid_red { |
|||
@include radio; |
|||
background: rgba(249, 86, 25, 0.2); |
|||
border: 1px solid #f95619; |
|||
color: #f95619; |
|||
} |
|||
.miniGrid_green { |
|||
@include radio; |
|||
background: rgba(249, 86, 25, 0.2); |
|||
border: 1px solid #f95619; |
|||
color: #f95619; |
|||
} |
|||
.miniGrid_yellow { |
|||
@include radio; |
|||
background: rgba(249, 86, 25, 0.2); |
|||
border: 1px solid #f95619; |
|||
color: #f95619; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue