Skip to content

H
house-type
Commit 52325ffe authored by wangjiankun's avatar wangjiankun
Browse files
Options

feat: 楼盘详情除土拍信息和房屋信息的两个图表其他已变为动态 

fix: 地图覆盖物鼠标移入移出的样式 多级表头数据不存在时显示---
parent e906af89
Hide whitespace changes
Inline Side-by-side
Showing with 434 additions and 348 deletions
.env
View file @ 52325ffe
......@@ -2,5 +2,5 @@ NODE_ENV = "development"
BASE_URL = "./"
VUE_APP_PUBLIC_PATH = "./"
VUE_APP_API = "http://10.96.7.150:8080/api/v1/"
VUE_APP_API = "http://10.96.4.28:9393/api/v1/"
VUE_APP_OSS_SRC = "https://ss1.bdstatic.com"
.env.production
View file @ 52325ffe
......@@ -2,7 +2,7 @@ NODE_ENV = 'production'
BASE_URL = 'https://prod.breaker93.com/'
VUE_APP_PUBLIC_PATH = './'
VUE_APP_API = 'https://prod.breaker93.com/api'
VUE_APP_API = 'http://106.2.11.235:38091/api/v1/'
VUE_APP_OSS_SRC = ''
ACCESS_KEY_ID = 'xxxxxxxxxxxxx'
......@@ -11,4 +11,4 @@ REGION = 'oss-cn-hangzhou'
BUCKET = 'staven-prod'
PREFIX = 'staven-blog'
outputDir = 'prod'
\ No newline at end of file
outputDir = 'prod'
src/assets/js/api/unitManage.js
View file @ 52325ffe
......@@ -18,3 +18,14 @@ export function queryAllRegions() {
export function queryPlateByRegion(param) {
return xhr.get('/bnsregion/bns-region/RegionAndProjectSize', param)
}
// 楼盘详情查询
export function queryPropertyDetail(id) {
console.log(id)
return xhr.get('/bnsproject/bns-project/withProjectAndProduct/selectDetils/'+ id)
}
// 根据楼盘Id查询楼盘销售信息---供求数据
export function queryPropertySupplyData(projectId) {
return xhr.get('/bnssale/bns-sale/selectProject', {
projectId
})
}
src/assets/js/public/index.js 0 → 100644
View file @ 52325ffe
const map = {
'nxmk': '南向面宽',
'qjsmk': '起居室面宽',
'zwmk': '主卧面宽',
'kwmk': '客卧面宽'
}
// 处理板块数据分析中的 房屋面宽数据 使之对应图表数据结构
export function dealHouseData(data) {
let Arr = []
let columArr = ['roomInfo']
Object.keys(map).forEach(key => {
let save = {}
data.forEach(item => {
if(columArr.length - 1 !== data.length) {
columArr.push(item.production)
}
if(!save.roomInfo) {
save.roomInfo = map[key]
}
save[item.production] = item[key]
})
Arr.push(save)
return {
cloum: columArr,
rows: Arr
}
})
}
// 平均化经纬度坐标并返回
export function averagePosition(array) {
let lng = 0
let lat = 0
array.forEach(item => {
lng += item.longitude
lat += item.latitude
})
return {
longitude: (lng/array.length).toFixed(6),
latitude: (lat/array.length).toFixed(6)
}
}
src/components/Layout/index.vue
View file @ 52325ffe
......@@ -96,7 +96,6 @@ export default {
},
computed: {
routes() {
console.log(this.$router.options.routes)
return this.$router.options.routes;
},
},
......
src/components/asyncSearch/index.vue
View file @ 52325ffe
......@@ -75,14 +75,8 @@
let result
if(res.data.flag === 'plateRegion') {
result = res.data.regionByNames[0]
result.lng = result.longitude
result.lat = result.latitude
} else {
result = res.data.projectByName
result.forEach(item => {
item.lng = item.longitude
item.lat = item.latitude
})
}
window.eventBus.$emit('searchParamChange', {
type: res.data.flag,
......
src/components/bannerDetail/index.vue
View file @ 52325ffe
......@@ -3,7 +3,7 @@
<el-carousel :interval="5000" arrow="always" indicator-position="outside" @change="bannerChange">
<el-carousel-item class="carouselCenter" v-for="(item, index) in bannerData" :key="index">
<viewer :images="[]" :style="{ width: imgWidth + '%', height: '100%', margin: '0 auto' }">
<img :src="item.bannerSrc" :style="{ width: '100%', height: '100%' }">
<img :src="item.filePath" :style="{ width: '100%', height: '100%' }">
</viewer>
</el-carousel-item>
</el-carousel>
......
src/components/mapOverlay/index.vue
View file @ 52325ffe
......@@ -2,8 +2,10 @@
<bm-overlay
ref="customOverlay"
pane="labelPane"
@mouseenter.native="active = true"
@mouseleave.native="active = false"
:class="{'flex': true}"
:style="backGroundType === 'image' ? {} : { width: width + 'px', height: height + 'px', color: textColor, backgroundColor: bgColor, borderRadius: circle }"
:style="backGroundType === 'waterDrop' ? {} : { width: width + 'px', height: height + 'px', color: textColor, backgroundColor: active ? activeColor : bgColor , borderRadius: circle }"
@draw="draw">
<div
:style="{fontSize: fontSize, fontFamily: 'Arial', textAlign: 'center', fontWeight: 'normal'}"
......@@ -19,7 +21,12 @@
<script>
export default {
name: 'overlay',
props: ['text', 'position', 'backGroundType', 'textColor', 'bgColor', 'circle', 'width', 'height', 'num', 'fontSize'],
props: ['text', 'position', 'backGroundType', 'textColor', 'bgColor', 'circle', 'width', 'height', 'num', 'fontSize', 'activeColor'],
data () {
return {
active: false
}
},
watch: {
position: {
handler () {
......@@ -50,10 +57,8 @@
justify-content: center;
align-items: center;
cursor: pointer;
filter: grayscale(0%)
}
.flex:hover{
filter: grayscale(50%)
z-index: 9999;
}
.centerImage{
......
src/components/multilHeaderTable/index.vue
View file @ 52325ffe
......@@ -28,12 +28,13 @@
<el-row :class="{'dataCell':true, 'prodName': index < 2}">{{item.productionName}}</el-row>
<el-col class="productionDetail" :span="12" v-for="(item2,index) in item.productionProperties" :key="index">
<el-row v-for="(value, key) in dataMap" :key="key" :class="{ 'dataCell': true, 'imgHeigth': value === 'img'}">
<div v-if="value === 'string'">{{item2[key] || '无'}} <span v-if="key === 'area'">m<sup>2</sup></span> </div>
<div v-if="value === 'string'">{{item2[key] || '--'}} <span v-if="key === 'area'">m<sup>2</sup></span> </div>
<viewer :images="[]" v-else-if="value === 'img'">
<img :src="item2[key]" alt="" width="50%" height="80" style="cursor:pointer;">
</viewer>
<div v-else-if="value === 'boolean' && item2[key] == 1" class="circle block"></div>
<div v-else-if="value === 'boolean' && item2[key] == 0" class="circle hollow"></div>
<div v-else-if="value === 'boolean' && item2[key] == undefined" class="circle hollow"></div>
</el-row>
</el-col>
</el-col>
......@@ -42,12 +43,13 @@
<div class="table_body" v-else :style="{ width: bodyWidth + '%'}">
<el-col :span="24" style="min-width: 120px">
<el-row v-for="(value, key) in dataMap" :key="key" :class="{ 'dataCell': true, 'imgHeigth': value === 'img' }">
<div v-if="value === 'string'">{{tableData[key] || '无'}}</div>
<div v-if="value === 'string'">{{tableData[key] || '--'}}</div>
<viewer :images="[]" v-else-if="value === 'img'">
<img :src="tableData[key] ? tableData[key] : tableData['bannerSrc']" alt="" width="30%" height="80" style="cursor:pointer;">
</viewer>
<div v-else-if="value === 'boolean' && tableData[key] == 1" class="circle block"></div>
<div v-else-if="value === 'boolean' && tableData[key] == 0" class="circle hollow"></div>
<div v-else-if="value === 'boolean' && tableData[key] == undefined" >--</div>
</el-row>
</el-col>
</div>
......@@ -78,38 +80,41 @@
data () {
return {
dataMap :{
area: 'string',
hxImg: 'img',
kj: 'string',
js: 'string',
ting: 'string',
wsj: 'string',
nxmk: 'string',
qjsmk: 'string',
zwmk: 'string',
kwmk: 'string',
QJSDGHT: 'boolean',
QJSWSYT: 'boolean',
QJSLDK: 'boolean',
ZWZW: 'boolean',
ZWYMJ: 'boolean',
KWKW: 'boolean',
CFLDK: 'boolean',
CFZXCFL: 'boolean',
CFDLDX: 'boolean',
CFXS: 'string',
CTLDK: 'boolean',
CTDLKC: 'boolean',
SF: 'string',
WSJMW: 'boolean',
WSJGSFL: 'boolean',
WSJGN: 'string',
YT: 'boolean',
YTWZ: 'string',
CCJ: 'boolean',
JZJ: 'boolean',
XG: 'boolean',
XGCFDX: 'boolean'
'unitArea': 'string',
'filePath': 'img',
'bayNumber': 'string',
'roomNumber': 'string',
'hallNumber': 'string',
'toiletNumber': 'string',
'southWidth': 'string',
'liveRoomWidth': 'string',
'masterRoomWidth': 'string',
'guestRoomWidth': 'string',
'liveRoom-largeHorizontalHall': 'boolean', // 起居室
'liveRoom-balcony': 'boolean',
'liveRoom-LDK': 'boolean',
'masterRoom-masterBathRoom': 'boolean', // 主卧
'masterRoom-cloakRoom': 'boolean',
'masterRoom-brightBathRoom': 'boolean',
'masterRoom-dryWetDepart': 'boolean',
'masterRoom-function': 'string',
'guestRoom-guestBathRoom': 'boolean', // 客卧
'kitchen-LDK': 'boolean', // 厨房
'kitchen-SCWesternCook': 'boolean',
'kitchen-hallwayCFDX': 'boolean',
'kitchen-kitchenStyle': 'string',
'restaurant-LDK': 'boolean', // 餐厅
'restaurant-independentWindow': 'boolean',
'bookRoom-wideHallSingleGuard': 'string', // 书房
'restRoom-masterBathRoom': 'boolean', // 卫生间
'restRoom-dryWetDepart': 'boolean',
'restRoom-function': 'string',
'balcony-designHalcony': 'boolean', // 阳台
'balcony-location': 'string',
'storeRoom-designStoreRoom': 'boolean', //储藏间
'houseSpace-designHouseSpace': 'boolean', // 家政间
'hallway-designHallway': 'boolean', // 玄关
'hallway-designHallwayCFDX': 'boolean'
}
}
}
......@@ -160,7 +165,7 @@
line-height 85px
}
.dealHeigth{
line-height 34px
line-height 32px
}
}
.table_body {
......
src/views/ProductAnalysis/index.vue
View file @ 52325ffe
......@@ -3,12 +3,12 @@
<section class="ProductAnalysis">
<div class="header">
<el-col :span="4">
<el-select v-model="regionVal" placeholder="行政区">
<el-select v-model="regionVal" @change="changePlateForRegion" placeholder="行政区">
<el-option
v-for="item in regionOptions"
:key="item.value"
:label="item.label"
:value="item.value">
:key="item.adminRegionId"
:label="item.adminRegionName"
:value="item.adminRegionName">
</el-option>
</el-select>
</el-col>
......@@ -16,9 +16,9 @@
<el-select v-model="plateVal" placeholder="板块名">
<el-option
v-for="item in plateOptions"
:key="item.value"
:label="item.label"
:value="item.value">
:key="item.regionId"
:label="item.regionName"
:value="item.regionName">
</el-option>
</el-select>
</el-col>
......@@ -143,6 +143,7 @@
import tableHeader from "./tableHeader";
import multiHeaderTable from '@comp/multilHeaderTable'
import { demoData } from "./tableHeader";
import { getRegionPlate } from "../../assets/js/api/plateSupplyManage";
export default {
name: "ProductAnalysis",
components:{
......@@ -218,21 +219,34 @@
plateOptions: [],
plateVal: '',
timeOptions: [],
timeVal: '',
timeVal: 2020,
houseTypeOptions: [],
houseTypeVal: '',
areaInterval: '',
areaIntervalData: [],
showMode: 0,
colorsArr: colors,
headerTable: tableHeader
headerTable: tableHeader,
plateMap: {
}
}
},
methods: {
changePlateForRegion (region) {
this.plateVal = ''
if(this.plateMap[region] && this.plateMap[region].length > 0) {
this.plateOptions = this.plateMap[region]
} else {
this.plateOptions = []
}
}
},
created() {
window.eventBus.$on('searchParamChange', (houseData) => {
window.eventBus.$on('searchParamChange', (searchResult) => {
this.$router.push({
path: '/regionalPlate',
query: houseData
query: searchResult
})
})
},
......@@ -240,7 +254,29 @@
demo () {
return demoData
}
},
beforeMount() {
for(let i = 2000; i<= 2020; i++) {
this.timeOptions.push({
value: i,
label: i + '年'
})
}
getRegionPlate().then(res => {
this.regionOptions = res.data
res.data.forEach(item => {
if(!this.plateMap[item.adminRegionName]) {
this.plateMap[item.adminRegionName] = item.resultRegionDTOS
}
if(item.resultRegionDTOS && item.resultRegionDTOS.length > 0 && !this.regionVal && !this.plateVal) {
this.plateOptions = item.resultRegionDTOS
this.regionVal = item.adminRegionName
this.plateVal = item.resultRegionDTOS[0].regionName
}
})
})
}
}
</script>
......
src/views/ProductAnalysis/tableHeader.js
View file @ 52325ffe
......@@ -50,7 +50,10 @@ export default [
trName: '主卧',
children: [
{ trName: '主卫' },
{ trName: '衣帽间' }
{ trName: '衣帽间' },
{ trName: '明卫' },
{ trName: '是否干湿分离' },
{ trName: '功能' },
]
},
{
......@@ -340,37 +343,3 @@ export const demoData = [
]
},
]
export const demoDataObject = {
area: '100',
hxImg: require('@assets/img/zlhx.png'),
kj: '3',
js: '3',
ting: '3',
wsj: '3',
nxmk: '3',
qjsmk: '3',
zwmk: '3',
kwmk: '3',
QJSDGHT: 1,
QJSWSYT: 1,
QJSLDK: 0,
ZWZW: 0,
ZWYMJ: 0,
KWKW: 1,
CFLDK: 0,
CFZXCFL: 1,
CFDLDX: 1,
CFXS: 'L型',
CTLDK: 1,
CTDLKC: 1,
SF: '大宽厅',
WSJMW: 1,
WSJGSFL: 1,
WSJGN: '三件套',
YT: 1,
YTWZ: '起居室',
CCJ: 1,
JZJ: 1,
XG: 1,
XGCFDX: 1
}
src/views/RegionalPlate/demoData.js
View file @ 52325ffe
export const regionData = [
{
lng: 117.200,
lat: 39.133,
longitude: 117.200,
latitude: 39.133,
text: '西青区',
number: 0
},
{
lng: 117.100,
lat: 39.233,
longitude: 117.100,
latitude: 39.233,
text: '行政区2',
number: 5,
children: [
{
lng: 117.107,
lat: 39.228,
longitude: 117.107,
latitude: 39.228,
text: '第一板块',
number: 2,
radius: 1500,
children: [
resultBnsProjectDTOS: [
{
lng: 117.106,
lat: 39.2281,
longitude: 117.106,
latitude: 39.2281,
text: '楼盘1',
state: 0
},
{
lng: 117.1074,
lat: 39.2286,
longitude: 117.1074,
latitude: 39.2286,
text: '楼盘2',
state: 1
}
]
},
{
lng: 117.104,
lat: 39.217,
longitude: 117.104,
latitude: 39.217,
text: '第二板块',
number: 2,
radius: 1500,
children: [
resultBnsProjectDTOS: [
{
lng: 117.1048,
lat: 39.2168,
longitude: 117.1048,
latitude: 39.2168,
text: '楼盘1',
state: 1
},
{
lng: 117.105,
lat: 39.2167,
longitude: 117.105,
latitude: 39.2167,
text: '楼盘2',
state: 1
}
......@@ -56,8 +56,8 @@ export const regionData = [
]
},
{
lng: 117.300,
lat: 39.333,
longitude: 117.300,
latitude: 39.333,
text: '行政区3',
number: 0
}
......
src/views/RegionalPlate/index.vue
View file @ 52325ffe
......@@ -15,13 +15,14 @@
@click.native.stop="setShowToPlate(item)"
:key="index + 'region'"
v-for="(item,index) in dataType.region"
:position="{lng: item.lng, lat: item.lat}"
:position="{lng: item.longitude, lat: item.latitude}"
:back-ground-type="'color'"
:text="item.text"
:num="item.number"
:text-color="'#ffffff'"
:fontSize="16"
:bg-color="'rgb(25,124,230)'"
:bg-color="'rgba(25,124,230, 0.6)'"
:active-color="'rgba(25,124,230,1)'"
:bg-img-url="null"
:circle="'50%'"
:width="90"
......@@ -33,40 +34,31 @@
@click.native.stop="setShowToPlateRegion(item, 'plateRegion')"
:key="index + 'plate'"
v-for="(item,index) in dataType.plate"
:position="{lng: item.lng, lat: item.lat}"
:position="{lng: item.longitude, lat: item.latitude}"
:back-ground-type="'color'"
:text="item.text"
:num="item.number"
:fontSize="14"
:text-color="'#ffffff'"
:bg-color="'rgb(25,124,230)'"
:bg-color="'rgba(25,124,230,0.6)'"
:active-color="'rgba(25,124,230,1)'"
:bg-img-url="null"
:circle="'50%'"
:width="70"
:height="70"
></my-overlay>
<!-- 蓝色圆形组件=======楼盘-->
<bm-circle
:fill-color="'rgb(224,234,244)'"
:stroke-color="'rgb(43,115,175)'"
v-show="showType === 'plateRegion'"
:center="circleCenter"
:radius="radius"
stroke-color="blue"
:stroke-opacity="1"
:fill-opacity="0"
:stroke-weight="1"></bm-circle>
<my-overlay
v-show="showType === 'plateRegion' && state !== '' ? ( state === 'all' ? true : ( state == item.state ? true : false ) ) : false"
@click.native="ShowInfo(item)"
:key="index + 'plateRegion'"
v-for="(item,index) in dataType.plateRegion.resultBnsProjectDTOS"
:position="{lng: item.lng, lat: item.lat}"
:position="{lng: item.longitude, lat: item.latitude}"
:back-ground-type="'color'"
:text="item.text"
:fontSize="12"
:text-color="'#ffffff'"
:bg-color="item.state === 0 ? 'rgb(25,124,230)' : 'rgb(169,209,142)'"
:bg-color="item.state === 0 ? 'rgb(25,124,230,0.6)' : 'rgb(169,209,142,0.6)'"
:active-color="item.state === 0 ? 'rgb(25,124,230,1)' : 'rgb(169,209,142,1)'"
:bg-img-url="null"
:circle="'10px'"
:width="80"
......@@ -82,7 +74,7 @@
@click.native="showTowerInfo(item)"
:key="index + 'property'"
v-for="(item,index) in dataType.property"
:position="{lng: item.lng, lat: item.lat}"
:position="{lng: item.longitude, lat: item.latitude}"
:back-ground-type="'waterDrop'"
:text="item.name"
:text-color="'#ffffff'"
......@@ -110,7 +102,7 @@
{{item.title}}
</div>
<div :class="{'plateRegionDetailShowContainer': true }">
{{dataType.plateRegion[item.prop] || '无'}}
{{dataType.plateRegion[item.prop] || '---'}}
</div>
</el-col>
</div>
......@@ -153,13 +145,13 @@
<div v-else-if="showType === 'property'" class="dealWidth">
<div class="searchDetailFlex">
<img style="cursor: pointer" @click="toPropertyDetail" height="200" :src="require('@assets/img/loupan.png')" alt="">
<p @click="toPropertyDetail" class="propertyName">{{propertyDetailData.name || '楼房名称'}}</p>
<p @click="toPropertyDetail" class="propertyName">{{propertyDetailData.name || '---'}}</p>
<p class="propertyDetail" v-html="'价格'+'：' + propertyDetailData.price + '/m<sup>2</sup>'"></p>
<p class="propertyDetail">{{'产品类型'+ '：' + propertyDetailData.productType}}</p>
<p class="propertyDetail"
v-for="(val, key, index) in propertyDetailDataMap"
:key="index"
v-html="val + '：' +propertyDetailData[key]">
v-html="val.name + '：' + (propertyDetailData[key] || '---') + val.defaultSetting">
</p>
</div>
</div>
......@@ -178,6 +170,7 @@
import MyOverlay from '@comp/mapOverlay'
import propertyControll from '@comp/propertyControll'
import { queryAllRegions } from "../../assets/js/api/unitManage";
import { averagePosition} from "../../assets/js/public";
export default {
name: 'RegionalPlate',
components: {
......@@ -203,11 +196,6 @@
}, // 四种的楼房显示类型 数据预览
allData: [],
showType: 'region', // 控制楼房显示的变量
circleCenter: {
lng: 0,
lat: 0
}, // 若为板块区域详情，圆环的坐标点中心
radius: 1000, // 若为板块区域详情、圆环的半径
zoomType: {
region: 11,
plate: 12,
......@@ -225,10 +213,22 @@
propertyDetailData: {
}, // 搜索后点击楼盘 展示详情数据
propertyDetailDataMap: {
landArea: '占地面积',
totalArea: '建筑面积',
plotRatio: '容积率',
openTime: '开盘时间'
landArea: {
name: '占地面积',
defaultSetting: 'm<sup>2</sup>'
},
totalArea: {
name: '建筑面积',
defaultSetting: 'm<sup>2</sup>'
},
plotRatio: {
name: '容积率',
defaultSetting: ''
},
openTime: {
name: '开盘时间',
defaultSetting: ''
}
} // key/value 对应
}
},
......@@ -242,13 +242,13 @@
ShowInfo (item) {
this.$router.push({
path: '/propertiesDetail',
query: item
query: { propertyId: item.businessId }
})
},
toPropertyDetail() {
this.$router.push({
path: '/propertiesDetail',
query: this.propertyDetailData
query: { propertyId: this.propertyDetailData.businessId }
})
},
showTowerInfo(item) {
......@@ -265,19 +265,18 @@
return
}
this.showType = 'plate'
this.map.center.lng = item.lng
this.map.center.lat = item.lat
this.map.center.lng = item.longitude
this.map.center.lat = item.latitude
this.map.setZoom = this.zoomType['plate']
this.dataType['plate'] = item.children ? item.children : []
},
setShowToPlateRegion (item) {
console.log(item)
this.showType = 'plateRegion'
this.map.center.lng = item.lng
this.map.center.lat = item.lat
this.map.center.lng = item.longitude
this.map.center.lat = item.latitude
this.map.setZoom = this.zoomType['plateRegion']
this.dataType['plateRegion'] = item.children ? item.children : []
this.circleCenter = { lng: item.lng, lat: item.lat }
this.radius = item.radius ? item.radius : 1000
this.dataType['plateRegion'].resultBnsProjectDTOS = item.resultBnsProjectDTOS ? item.resultBnsProjectDTOS : []
this.detailShow = true
},
zoomChanged ({type, target}) {
......@@ -294,26 +293,30 @@
return type
},
mapLoaded () {
if(this.$router.query) {
console.log(this.$router.query)
if(this.$route.query) {
const searchResult = this.$route.query
if(searchResult.type === 'plateRegion') {
this.showType = 'plateRegion'
this.map.center.lng = searchResult.data.longitude
this.map.center.lat = searchResult.data.latitude
this.map.setZoom = this.zoomType.plateRegion
this.dataType.plateRegion = searchResult.data
console.log(this.dataType.plateRegion)
} else {
this.showType = 'property'
this.map.center.lng = averagePosition(searchResult.data).longitude
this.map.center.lat = averagePosition(searchResult.data).latitude
this.map.setZoom = this.zoomType.property
this.dataType.property = searchResult.data
this.propertyDetailData = this.dataType.property[0]
console.log(this.propertyDetailData)
}
} else {
// 若无传递值 则查询全部行政区及其下属数目信息
queryAllRegions().then(res => {
console.log(res)
})
}
},
average (array) {
let lng = 0
let lat = 0
array.forEach(item => {
lng += item.lng
lat += item.lat
})
return {
lng: (lng/array.length).toFixed(6),
lat: (lat/array.length).toFixed(6)
}
}
},
mounted() {
......@@ -326,17 +329,15 @@
window.eventBus.$on('searchParamChange', (searchResult) => {
if(searchResult.type === 'plateRegion') {
this.showType = 'plateRegion'
this.map.center.lng = searchResult.data.lng
this.map.center.lat = searchResult.data.lat
this.circleCenter = { lng: searchResult.data.lng, lat: searchResult.data.lat }
this.circle = 1000
this.map.center.lng = searchResult.data.longitude
this.map.center.lat = searchResult.data.latitude
this.map.setZoom = this.zoomType.plateRegion
this.dataType.plateRegion = searchResult.data
console.log(this.dataType.plateRegion)
} else {
this.showType = 'property'
this.map.center.lng = this.average(searchResult.data).lng
this.map.center.lat = this.average(searchResult.data).lat
this.map.center.lng = averagePosition(searchResult.data).longitude
this.map.center.lat = averagePosition(searchResult.data).latitude
this.map.setZoom = this.zoomType.property
this.dataType.property = searchResult.data
this.propertyDetailData = this.dataType.property[0]
......
src/views/plateSupplyData/index.vue
View file @ 52325ffe
......@@ -124,7 +124,7 @@
colorArr: colors,
plateMap: {
}
} // 行政区名称对应
}
},
methods: {
......@@ -153,8 +153,7 @@
this.plateVal = ''
if(this.plateMap[region] && this.plateMap[region].length > 0) {
this.plateOptions = this.plateMap[region]
}
else {
} else {
this.plateOptions = []
}
}
......@@ -180,7 +179,15 @@
})
this.getSupplyData()
})
}
},
created() {
window.eventBus.$on('searchParamChange', (searchResult) => {
this.$router.push({
path: '/regionalPlate',
query: searchResult
})
})
},
}
</script>
......
src/views/propertiesDetail/index.vue
View file @ 52325ffe
<template>
<section class="propertiesMain">
<section class="propertiesMain" v-loading="propertyLoading">
<header class="header">
<div class="back">
<el-link type="primary" @click="$router.go(-1)">返回</el-link>
</div>
<div class="name">
{{propertyData.propertyName}}
{{propertyData.projectInformation.name}}
</div>
<div class="bannerOptions">
<el-radio-group v-model="bannerType">
......@@ -25,7 +25,7 @@
<banner :banner-data="propertyData.propertyBanner.lmBanner"/>
</div>
<div v-if="bannerType === 2">
<banner :img-width="20" @bannerChange="saleingChange" :banner-data="propertyData.propertyBanner.hxBanner" />
<banner :img-width="100" @bannerChange="saleingChange" :banner-data="propertyData.propertyBanner.hxBanner" />
</div>
</div>
<!-- 户型信息 只在banner类型为户型时才显示-->
......@@ -39,7 +39,15 @@
<div class="planningInformation">
<div class="title">规划信息</div>
<div class="container">
<el-tag :key="index" effect="dark" v-for="(item,index) in propertyData.propertyPlaningInfo" type="info" v-html="item.title" class="tagsInfo"></el-tag>
<el-tag :key="key"
effect="dark"
v-for="(val,key) in planingInfoMap"
type="primary" class="tagsInfo"
v-html="val.name + '：' +
(typeof val.defaultSetting === 'function' ?
val.defaultSetting(propertyData.projectInformation[key]) :
(propertyData.projectInformation[key] || '---') + val.defaultSetting )">
</el-tag>
</div>
</div>
<!-- 土拍信息-->
......@@ -156,22 +164,17 @@
import html2canvas from "html2canvas"
import multiHeaderTable from '@comp/multilHeaderTable'
import tableHeader from "../ProductAnalysis/tableHeader"
import { queryPropertyDetail, queryPropertySupplyData } from "../../assets/js/api/unitManage";
export default {
name: "propertiesDetail",
components: {banner, multiHeaderTable},
data () {
return {
bannerType: 0,
propertyId: '',
supplySaleData: {
columns: ['areaRange', 'supplyProportion', 'dealProportion'],
rows: [
{ 'areaRange': '80-90', 'supplyProportion': 0.08, 'dealProportion': 0.9, },
{ 'areaRange': '90-100', 'supplyProportion': 0.04, 'dealProportion': 0.05 },
{ 'areaRange': '100-110', 'supplyProportion': 0.04, 'dealProportion': 0.05 },
{ 'areaRange': '110-120', 'supplyProportion': 0.07, 'dealProportion': 0.05 },
{ 'areaRange': '120-130', 'supplyProportion': 0.09, 'dealProportion': 0.05 },
{ 'areaRange': '130-140', 'supplyProportion': 0.03, 'dealProportion': 0.05 }
]
rows: []
}, // 供应比例、套数 图表数据
supplySaleSettings: {
yAxisType: ['percent'],
......@@ -185,44 +188,40 @@
supplySaleDataDetail: {
areaRange: {
name: '面积区间',
data: ['80-90', '90-100', '100-110', '110-120', '120-130', '130-140']
data: []
},
supplyNum: {
name: '供应数量',
data: [10000, 20000, 30000, 40000, 50000, 60000]
data: []
},
dealNum: {
name: '成交数量',
data: [8000, 16000, 24000, 32000, 40000, 48000]
data: []
}
}, // 供应比例、套数 表格数据
// 供求比 图表设置
supplyDemandRatioSettings: {
labelMap: {
areaRange: '面积区间',
Rate: '供求比'
rate: '供求比'
}
}, // 供求比 图表设置
},
// 供求比 图表数据
supplyDemandRatioData: {
columns: ['areaRange', 'Rate'],
rows: [
{ 'areaRange': '80-90', 'Rate': 1 },
{ 'areaRange': '90-100', 'Rate': 2 },
{ 'areaRange': '100-110', 'Rate': 0.1 },
{ 'areaRange': '110-120', 'Rate': 0.5 },
{ 'areaRange': '120-130', 'Rate': 0.7 },
{ 'areaRange': '130-140', 'Rate': 1.5 }
]
}, // 供求比 图表数据
columns: ['areaRange', 'rate'],
rows: []
},
// 供求比 表格数据
supplyDemandRatioDataDetail:{
areaRange: {
name: '面积区间',
data: ['80-90', '90-100', '100-110', '110-120', '120-130', '130-140']
data: []
},
Rate: {
rate: {
name: '供求比',
data: [0.8, 0.8 ,0.8, 0.8, 0.8, 0.8]
data: []
},
}, // 供求比 表格数据
},
supplySettings: {
labelMap: {
production: '产品类型',
......@@ -248,6 +247,7 @@
'squareMetersFor140': '143平'
}
},
// 房屋面宽信息图表
supplyDataDetail: {
columns: ['roomInfo', 'squareMetersFor85', 'squareMetersFor95', 'squareMetersFor97', 'squareMetersFor103', 'squareMetersFor123', 'squareMetersFor140'],
rows: [
......@@ -257,6 +257,7 @@
{ 'roomInfo': '客卧面宽', 'squareMetersFor85': 0, 'squareMetersFor97': 0, 'squareMetersFor95': 0, 'squareMetersFor103': 3, 'squareMetersFor123': 3, 'squareMetersFor140': 3 }
]
},
// 房屋面宽表格信息
supplyTableData: [
{ production: '85平', nxmk: 10.1, qjsmk: 10.5, zwmk: 15, kwmk: 13 },
{ production: '97平', nxmk: 10.1, qjsmk: 10.5, zwmk: 15, kwmk: 13 },
......@@ -268,145 +269,68 @@
colorArr: colors,
hxObjectData: [],
propertyData: {
propertyName: '这里为楼盘名字',
projectInformation: {
name: ''
},
propertyBanner: {
ztBanner: [
{
name: '123',
bannerSrc: require('@assets/img/zt.png')
},
{
name: '233',
bannerSrc: require('@assets/img/zt.png')
}
],
lmBanner: [
{
name: '122',
bannerSrc: require('@assets/img/lm.png')
},
{
name: '122',
bannerSrc: require('@assets/img/lm.png')
},
{
name: '122',
bannerSrc: require('@assets/img/lm.png')
}
],
hxBanner: [
{
area: '100',
bannerSrc: require('@assets/img/zlhx.png'),
kj: '3',
js: '3',
ting: '3',
wsj: '3',
nxmk: '3',
qjsmk: '3',
zwmk: '3',
kwmk: '3',
QJSDGHT: 1,
QJSWSYT: 1,
QJSLDK: 0,
ZWZW: 0,
ZWYMJ: 0,
KWKW: 1,
CFLDK: 0,
CFZXCFL: 1,
CFDLDX: 1,
CFXS: 'L型',
CTLDK: 1,
CTDLKC: 1,
SF: '大宽厅',
WSJMW: 1,
WSJGSFL: 1,
WSJGN: '三件套',
YT: 1,
YTWZ: '起居室',
CCJ: 1,
JZJ: 1,
XG: 1,
XGCFDX: 1
},
{
area: '123',
bannerSrc: require('@assets/img/zlhx.png'),
kj: '3',
js: '2',
ting: '2',
wsj: '2',
nxmk: '2',
qjsmk: '2',
zwmk: '3',
kwmk: '1',
QJSDGHT: 0,
QJSWSYT: 1,
QJSLDK: 1,
ZWZW: 1,
ZWYMJ: 1,
KWKW: 1,
CFLDK: 0,
CFZXCFL: 0,
CFDLDX: 0,
CFXS: 'S型',
CTLDK: 1,
CTDLKC: 1,
SF: '客卫',
WSJMW: 1,
WSJGSFL: 1,
WSJGN: '两件套',
YT: 1,
YTWZ: '主卧',
CCJ: 0,
JZJ: 1,
XG: 0,
XGCFDX: 1
}
]
ztBanner: [],
lmBanner: [],
hxBanner: []
},
propertyPlaningInfo: [
{
title: '总面积100000m<sup>2</sup>'
},
{
title: '地铁站附近'
}
],
propertySoildInfo: [
{
soildName: '永红桥附近',
soildTableData: [{
region: '西青区',
area: '所属区域',
landArea: '土地面积',
lotRatio: '容积率',
builtArea: '建筑面积',
floorPrice: '楼面价元',
buildingDensity: '建筑密度',
closingDate: '成交日期',
totalPrice: '成交价',
premium: '溢价',
transferee: '受让方',
}]
},
{
soildName: '南站附近',
soildTableData: [{
region: '西青区',
area: '所属区域',
landArea: '土地面积',
lotRatio: '容积率',
builtArea: '建筑面积',
floorPrice: '楼面价元',
buildingDensity: '建筑密度',
closingDate: '成交日期',
totalPrice: '成交价',
premium: '溢价',
transferee: '受让方',
}]
propertyPlaningInfo: [],
propertySoildInfo: []
},
propertyFunctionMap: {
y: 1,
n: 0,
lRoom: '起居室',
wRoom: '卧室',
singleGuard: '独卫',
wideHall: '大宽厅',
L: 'L型',
U: 'U型',
misLand: '中岛',
suit3: '三件套',
suit4: '四件套',
other: '其他',
null: undefined
},
propertyLoading: false,
planingInfoMap: {
landArea: {
name: '占地面积',
defaultSetting: 'm<sup>2</sup>'
},
totalArea: {
name: '建筑面积',
defaultSetting: 'm<sup>2</sup>'
},
plotRatio: {
name: '容积率',
defaultSetting: '%'
},
producType: {
name: '产品类型',
defaultSetting (val) {
if(val) {
return val.replace(/,/g, '+')
} else {
return '---'
}
}
]
},
totalHousehold: {
name: '总户数',
defaultSetting: '户'
},
developer: {
name: '开发商',
defaultSetting: ''
},
estateManage: {
name: '物业管理',
defaultSetting: ''
},
}
}
},
......@@ -438,6 +362,89 @@
},
saleingChange (item) {
this.hxObjectData = item
},
getPropertyDetail() {
queryPropertyDetail(this.propertyId).then(res => {
this.propertyLoading = true
if(res.data) {
this.propertyData.projectInformation = res.data.bnsProject
try {
this.propertyData.propertyBanner.ztBanner = res.data.projectTotalImgList.map(item => {
return {
filePath: 'data:image/png;base64,'+ item.filePath
}
})
this.propertyData.propertyBanner.lmBanner = res.data.projectFacadeImgLis.map(item => {
return {
filePath: 'data:image/png;base64,'+ item.filePath
}
})
} catch (e) {
this.propertyData.propertyBanner.ztBanner = []
this.propertyData.propertyBanner.lmBanner = []
}
// 遍历户型信息 利用map弄出符合前台的数据结构
let propertyProjectInfoArr = []
res.data.bnsProductList.forEach(propertySinle => {
const singleData = {}
singleData.unitArea = propertySinle.bnsProduct.unitArea
singleData.bayNumber = propertySinle.bnsProduct.bayNumber
singleData.roomNumber = propertySinle.bnsProduct.roomNumber
singleData.hallNumber = propertySinle.bnsProduct.hallNumber
singleData.toiletNumber = propertySinle.bnsProduct.toiletNumber
singleData.southWidth = propertySinle.bnsProduct.southWidth
singleData.liveRoomWidth = propertySinle.bnsProduct.liveRoomWidth
singleData.masterRoomWidth = propertySinle.bnsProduct.masterRoomWidth
singleData.guestRoomWidth = propertySinle.bnsProduct.guestRoomWidth
singleData.filePath = propertySinle.productImgList[0].filePath
propertySinle.familyFunc.forEach(item => {
if(item.list) {
item.list.forEach(item2 => {
if(item2.checkboxGroup && item2.checkboxGroup.length > 0) {
const value = item2.checkboxGroup[0]
singleData[item.parentName + '-' + item2.functionName] = this.propertyFunctionMap[value]
} else {
singleData[item.parentName + '-' + item2.functionName] = this.propertyFunctionMap['null']
}
})
}
})
propertyProjectInfoArr.push(singleData)
})
this.propertyData.propertyBanner.hxBanner = propertyProjectInfoArr
this.hxObjectData = this.propertyData.propertyBanner.hxBanner[0] || {}
this.propertyLoading = false
} else {
this.propertyLoading = false
}
}).catch(e => {
this.$message({
type: 'error',
message: e.msg
})
this.propertyLoading = false
})
},
getPropertySupplyData () {
queryPropertySupplyData(this.propertyId).then(res => {
const areaRange = []
const supplyNum = []
const dealNum = []
const rate = []
this.supplySaleData.rows = res.data
this.supplyDemandRatioData.rows = res.data
res.data.forEach(item => {
areaRange.push(item.areaRange)
supplyNum.push(item.suplyNumber)
dealNum.push(item.dealNumber)
rate.push(item.rate)
})
this.supplySaleDataDetail.areaRange.data = areaRange
this.supplySaleDataDetail.supplyNum.data = supplyNum
this.supplySaleDataDetail.dealNum.data = dealNum
this.supplyDemandRatioDataDetail.areaRange.data = areaRange
this.supplyDemandRatioDataDetail.rate.data = rate
})
}
},
computed: {
......@@ -450,8 +457,18 @@
return table
}
},
mounted() {
this.hxObjectData = this.propertyData.propertyBanner.hxBanner[0]
beforeMount() {
this.propertyId = this.$route.query.propertyId
this.getPropertyDetail()
this.getPropertySupplyData()
},
created() {
window.eventBus.$on('searchParamChange', (searchResult) => {
this.$router.push({
path: '/regionalPlate',
query: searchResult
})
})
}
}
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment