Skip to content

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

feat: 异步查询搜索框与后台联动，在户型查询页面的搜索显示无问题、 

fix: 覆盖物样式调整
parent 1156b46e
Hide whitespace changes
Inline Side-by-side
Showing with 382 additions and 127 deletions
src/assets/js/api/unitManage.js 0 → 100644
View file @ ea8971c0
import xhr from '@utils/http'
// 查询全部板块与楼盘信息
export function asyncSearch() {
return xhr.get('/bnsregion/bns-region/mesName')
}
// 根据板块/楼盘名字查询指定板块/楼盘
export function queryDetailByName(name) {
return xhr.get('/bnsregion/bns-region/mesByName', {
name
})
}
// 查询全部行政区及下属信息
export function queryAllRegions() {
return xhr.get('/bnsregion/bns-region/adminAndRegion')
}
// 根据行政区信息查询下属 楼盘/板块
export function queryPlateByRegion(param) {
return xhr.get('/bnsregion/bns-region/RegionAndProjectSize', param)
}
src/components/asyncSearch/index.vue
View file @ ea8971c0
...@@ -9,8 +9,8 @@ ...@@ -9,8 +9,8 @@
placeholder="请输入内容" placeholder="请输入内容"
@select="handleSelect"> @select="handleSelect">
<template slot-scope="{ item }"> <template slot-scope="{ item }">
<div style="float: left">{{ item.text }}</div> <div style="float: left">{{ item.name }}</div>
<span style="float: right;font-size: 13px;color: #8492a6">{{ item.type }}</span> <span style="float: right;font-size: 13px;color: #8492a6">{{ item.tips }}</span>
</template> </template>
</el-autocomplete> </el-autocomplete>
<el-button type="primary" @click="searchEmit">搜索</el-button> <el-button type="primary" @click="searchEmit">搜索</el-button>
...@@ -18,26 +18,77 @@ ...@@ -18,26 +18,77 @@
</template> </template>
<script> <script>
import { asyncSearch, queryDetailByName } from "../../assets/js/api/unitManage";
export default { export default {
name: "search", name: "search",
data () { data () {
return { return {
search: '', search: '',
selectData : '' selectData : '',
dataMap: {
lng: '',
lat: '',
}
} }
}, },
methods: { methods: {
querySearchAsync(queryString, cb) { querySearchAsync(queryString, callback) {
const result = [ { lng: 117.200, lat: 39.133, text: '好楼盘', type: '楼盘' }, console.log(queryString)
{ lng: 117.200, lat: 39.133, text: '好楼盘2', type: '板块'} ] asyncSearch().then(res => {
cb(result) let property = []
let region = []
res.data.projectName.forEach(item => {
property.push({
name: item,
type: 'property',
tips: '楼盘'
})
})
res.data.regionName.forEach(item => {
region.push({
name: item,
type: 'regionPlate',
tips: '板块'
})
})
const result = new Array().concat(...property, ...region).filter(item => {
return item.name.indexOf(queryString) !== -1
})
console.log(result)
callback(result)
})
}, },
handleSelect(item) { handleSelect(item) {
this.selectData = item this.selectData = item
this.search = item.name
}, },
searchEmit () { searchEmit () {
if(this.selectData) { if(this.search) {
window.eventBus.$emit('searchParamChange', this.selectData) queryDetailByName(this.search).then(res => {
if(typeof res.data === "string") {
this.$message({
type: 'warning',
message: '无搜索结果'
})
return
}
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,
data: result
})
})
} }
} }
} }
......
src/components/bannerDetail/index.vue
View file @ ea8971c0
<template> <template>
<div class="bannerMap"> <div class="bannerMap">
<el-carousel :interval="5000" arrow="always" indicator-position="outside"> <el-carousel :interval="5000" arrow="always" indicator-position="outside" @change="bannerChange">
<el-carousel-item class="carouselCenter" v-for="(item, index) in bannerData" :key="index"> <el-carousel-item class="carouselCenter" v-for="(item, index) in bannerData" :key="index">
<viewer :images="[]" :style="{ width: imgWidth + '%', height: '100%', margin: '0 auto' }"> <viewer :images="[]" :style="{ width: imgWidth + '%', height: '100%', margin: '0 auto' }">
<img :src="item" :style="{ width: '100%', height: '100%' }"> <img :src="item.bannerSrc" :style="{ width: '100%', height: '100%' }">
</viewer> </viewer>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
...@@ -26,6 +26,11 @@ ...@@ -26,6 +26,11 @@
return 100; return 100;
} }
} }
},
methods: {
bannerChange (index) {
this.$emit('bannerChange', this.bannerData[index])
}
} }
} }
</script> </script>
......
src/components/mapOverlay/index.vue
View file @ ea8971c0
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<bm-overlay <bm-overlay
ref="customOverlay" ref="customOverlay"
pane="labelPane" pane="labelPane"
:class="{'flex': true, 'circle': circle && width === height}" :class="{'flex': true}"
:style="backGroundType === 'image' ? {} : { width: width + 'px', height: height + 'px', color: textColor, backgroundColor: bgColor}" :style="backGroundType === 'image' ? {} : { width: width + 'px', height: height + 'px', color: textColor, backgroundColor: bgColor, borderRadius: circle }"
@draw="draw"> @draw="draw">
<div <div
:style="{fontSize: fontSize, fontFamily: 'Arial', textAlign: 'center', fontWeight: 'normal'}" :style="{fontSize: fontSize, fontFamily: 'Arial', textAlign: 'center', fontWeight: 'normal'}"
...@@ -11,10 +11,8 @@ ...@@ -11,10 +11,8 @@
{{text}} {{text}}
<div v-if="num" style="font-weight: 600;height: 20px;line-height: 40px">{{num}}</div> <div v-if="num" style="font-weight: 600;height: 20px;line-height: 40px">{{num}}</div>
</div> </div>
<div v-if="backGroundType === 'waterDrop'" class="flex-colum"> <div v-if="backGroundType === 'waterDrop'" class="flex-colum" :title="text">
<div style="transform: rotate(-45deg)"> <i class="el-icon-location"></i>
{{text}}
</div>
</div> </div>
</bm-overlay> </bm-overlay>
</template> </template>
...@@ -42,7 +40,7 @@ ...@@ -42,7 +40,7 @@
} }
</script> </script>
<style scoped> <style scoped lang="stylus">
.circle{ .circle{
border-radius: 50%; border-radius: 50%;
} }
...@@ -52,10 +50,11 @@ ...@@ -52,10 +50,11 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
opacity: 0.6; filter: grayscale(0%)
} }
.flex:hover{ .flex:hover{
opacity: 1; filter: grayscale(50%)
z-index: 9999;
} }
.centerImage{ .centerImage{
display: flex; display: flex;
...@@ -63,17 +62,7 @@ ...@@ -63,17 +62,7 @@
align-items: center; align-items: center;
} }
.flex-colum{ .flex-colum{
width: 70px; font-size 45px
height: 70px; color red
line-height: 70px;
text-align: center;
background-color: rgb(203,173,91);
border-radius: 70px 70px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
color: #ffffff;
writing-mode: vertical-lr;
} }
</style> </style>
src/components/multilHeaderTable/index.vue
View file @ ea8971c0
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
<el-row v-for="(value, key) in dataMap" :key="key" :class="{ 'dataCell': true, 'imgHeigth': value === 'img' }"> <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'"> <viewer :images="[]" v-else-if="value === 'img'">
<img :src="tableData[key]" alt="" width="50%" height="80" style="cursor:pointer;"> <img :src="tableData[key] ? tableData[key] : tableData['bannerSrc']" alt="" width="30%" height="80" style="cursor:pointer;">
</viewer> </viewer>
<div v-else-if="value === 'boolean' && tableData[key] == 1" class="circle block"></div> <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] == 0" class="circle hollow"></div>
......
src/plugins/router/index.js
View file @ ea8971c0
...@@ -5,7 +5,7 @@ import { getToken } from '@assets/js/auth' ...@@ -5,7 +5,7 @@ import { getToken } from '@assets/js/auth'
const whiteList = ['/login', '/test'] const whiteList = ['/login', '/test']
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
if (!getToken()) { if (getToken()) {
// 拥有访问权限 // 拥有访问权限
if (to.path === '/login') { if (to.path === '/login') {
// 访问登录页时，重定向至首页（已具备访问权限） // 访问登录页时，重定向至首页（已具备访问权限）
......
src/views/RegionalPlate/demoData.js
View file @ ea8971c0
...@@ -55,16 +55,10 @@ export const regionData = [ ...@@ -55,16 +55,10 @@ export const regionData = [
} }
] ]
}, },
{
lng: 117.250,
lat: 39.183,
text: '西青区',
number: 0
},
{ {
lng: 117.300, lng: 117.300,
lat: 39.333, lat: 39.333,
text: '行政区3', text: '行政区3',
number: 5 number: 0
} }
] ]
src/views/RegionalPlate/index.vue
View file @ ea8971c0
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
:fontSize="16" :fontSize="16"
:bg-color="'rgb(25,124,230)'" :bg-color="'rgb(25,124,230)'"
:bg-img-url="null" :bg-img-url="null"
:circle="true" :circle="'50%'"
:width="90" :width="90"
:height="90" :height="90"
></my-overlay> ></my-overlay>
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
:text-color="'#ffffff'" :text-color="'#ffffff'"
:bg-color="'rgb(25,124,230)'" :bg-color="'rgb(25,124,230)'"
:bg-img-url="null" :bg-img-url="null"
:circle="true" :circle="'50%'"
:width="70" :width="70"
:height="70" :height="70"
></my-overlay> ></my-overlay>
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
v-show="showType === 'plateRegion' && state !== '' ? ( state === 'all' ? true : ( state == item.state ? true : false ) ) : false" v-show="showType === 'plateRegion' && state !== '' ? ( state === 'all' ? true : ( state == item.state ? true : false ) ) : false"
@click.native="ShowInfo(item)" @click.native="ShowInfo(item)"
:key="index + 'plateRegion'" :key="index + 'plateRegion'"
v-for="(item,index) in dataType.plateRegion" v-for="(item,index) in dataType.plateRegion.resultBnsProjectDTOS"
:position="{lng: item.lng, lat: item.lat}" :position="{lng: item.lng, lat: item.lat}"
:back-ground-type="'color'" :back-ground-type="'color'"
:text="item.text" :text="item.text"
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
:text-color="'#ffffff'" :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)' : 'rgb(169,209,142)'"
:bg-img-url="null" :bg-img-url="null"
:circle="false" :circle="'10px'"
:width="80" :width="80"
:height="30"></my-overlay> :height="30"></my-overlay>
<bm-control anchor="BMAP_ANCHOR_BOTTOM_LEFT" v-show="showType === 'plateRegion'"> <bm-control anchor="BMAP_ANCHOR_BOTTOM_LEFT" v-show="showType === 'plateRegion'">
...@@ -84,9 +84,9 @@ ...@@ -84,9 +84,9 @@
v-for="(item,index) in dataType.property" v-for="(item,index) in dataType.property"
:position="{lng: item.lng, lat: item.lat}" :position="{lng: item.lng, lat: item.lat}"
:back-ground-type="'waterDrop'" :back-ground-type="'waterDrop'"
:text="item.text" :text="item.name"
:text-color="'#ffffff'" :text-color="'#ffffff'"
:circle="true" :circle="'none'"
:width="80" :width="80"
:height="20" :height="20"
></my-overlay> ></my-overlay>
...@@ -110,26 +110,42 @@ ...@@ -110,26 +110,42 @@
{{item.title}} {{item.title}}
</div> </div>
<div :class="{'plateRegionDetailShowContainer': true }"> <div :class="{'plateRegionDetailShowContainer': true }">
{{item.prop}} {{dataType.plateRegion[item.prop] || '无'}}
</div> </div>
</el-col> </el-col>
</div> </div>
<div v-if="infotType === 1" style="margin-top: 10px"> <div v-if="infotType === 1" style="margin-top: 10px;" class="soildInfo">
<el-collapse v-model="soildInfoChange" class="sys-collapse"> <el-collapse v-model="soildInfoChange" class="sys-collapse">
<el-card :body-style="{padding: '0'}" class="box-card"> <el-card :body-style="{padding: '0'}" class="box-card" v-for="(item,index) in dataType.plateRegion.resultBnsLandDTOS" :key="index">
<el-collapse-item :title="'你好'" :name="0"> <el-collapse-item :title="item.name" :name="index">
你好我是 <p>行政分区：{{dataType.plateRegion.adminRegionName}}</p>
<p>所属板块: {{dataType.plateRegion.name}}</p>
<p>土地面积：{{item.landArea}}m<sup>2</sup></p>
<p>容积率：{{item.plotRatio}}%</p>
<p>建筑面积：{{item.builtArea}}m<sup>2</sup></p>
<p>建筑密度：{{item.builtDensity}}%</p>
<p>楼面价：{{item.floorPrice}}/m<sup>2</sup></p>
<p>成交日期：{{item.dealDate}}</p>
<p>成交价：{{item.dealPrice}}亿元</p>
<p>溢价率：{{item.premium}}%</p>
<p>受让方：{{item.assignee}}</p>
</el-collapse-item> </el-collapse-item>
</el-card> </el-card>
</el-collapse> </el-collapse>
</div> </div>
<div v-if="infotType === 2" style="margin-top: 10px;text-align: left"> <div v-if="infotType === 2" style="margin-top: 10px;text-align: left">
<el-card v-for="i in 5" class="box-card distanceCard" :key="i" :body-style="{ padding: '0'}"> <el-card v-for="(item, index) in dataType.plateRegion.resultBnsProjectDTOS" class="box-card distanceCard" :key="index" :body-style="{ padding: '0'}">
<div class="imgContainer"> <div class="imgContainer">
<img width="160" height="100" :src="require('@assets/img/demoPng.jpg')" alt=""> <img width="150" height="120" :src="item.fileSrc" alt="">
</div> </div>
<div class="infomationContainer"> <div class="infomationContainer">
<div class="propertyListName" style="color: #1482f0">{{item.name}}</div>
<p>价格：{{item.price}}/m<sup>2</sup></p>
<p>产品类型: {{item.productType}}</p>
<p>占地面积：{{item.landArea}}<sup>2</sup></p>
<p>建筑面积：{{item.totalArea}}<sup>2</sup></p>
<p>容积率：{{item.plotRatio}}</p>
<p>开盘时间：{{item.openTime}}</p>
</div> </div>
</el-card> </el-card>
</div> </div>
...@@ -137,9 +153,13 @@ ...@@ -137,9 +153,13 @@
<div v-else-if="showType === 'property'" class="dealWidth"> <div v-else-if="showType === 'property'" class="dealWidth">
<div class="searchDetailFlex"> <div class="searchDetailFlex">
<img height="200" :src="require('@assets/img/loupan.png')" alt=""> <img height="200" :src="require('@assets/img/loupan.png')" alt="">
<p class="propertyName">楼房名称</p> <p class="propertyName">{{propertyDetailData.name || '楼房名称'}}</p>
<p class="propertyDetail" v-for="(val, key, index) in propertyDetailDataMap" :key="index"> <p class="propertyDetail" v-html="'价格'+'：' + propertyDetailData.price + '/m<sup>2</sup>'"></p>
{{`${val}：${propertyDetailData[key]}`}} <p class="propertyDetail">{{'产品类型'+ '：' + propertyDetailData.productType}}</p>
<p class="propertyDetail"
v-for="(val, key, index) in propertyDetailDataMap"
:key="index"
v-html="val + '：' +propertyDetailData[key]">
</p> </p>
</div> </div>
</div> </div>
...@@ -157,6 +177,7 @@ ...@@ -157,6 +177,7 @@
import { plateRegionDetail } from "../propertiesDetail/staticData"; import { plateRegionDetail } from "../propertiesDetail/staticData";
import MyOverlay from '@comp/mapOverlay' import MyOverlay from '@comp/mapOverlay'
import propertyControll from '@comp/propertyControll' import propertyControll from '@comp/propertyControll'
import { queryAllRegions } from "../../assets/js/api/unitManage";
export default { export default {
name: 'RegionalPlate', name: 'RegionalPlate',
components: { components: {
...@@ -175,7 +196,9 @@ ...@@ -175,7 +196,9 @@
dataType: { dataType: {
region: [], region: [],
plate: [], plate: [],
plateRegion: [], plateRegion: {
},
property: [] property: []
}, // 四种的楼房显示类型 数据预览 }, // 四种的楼房显示类型 数据预览
allData: [], allData: [],
...@@ -187,7 +210,7 @@ ...@@ -187,7 +210,7 @@
radius: 1000, // 若为板块区域详情、圆环的半径 radius: 1000, // 若为板块区域详情、圆环的半径
zoomType: { zoomType: {
region: 11, region: 11,
plate: 13, plate: 12,
plateRegion: 15, plateRegion: 15,
property: 15 property: 15
}, // 根据行政区、板块、楼盘控制地图放大倍数 }, // 根据行政区、板块、楼盘控制地图放大倍数
...@@ -199,13 +222,12 @@ ...@@ -199,13 +222,12 @@
mapTool: null, // map类 mapTool: null, // map类
BMapTool: null, // BMap类 BMapTool: null, // BMap类
soildInfoChange: '', // 土拍信息 折叠面板绑定变量 soildInfoChange: '', // 土拍信息 折叠面板绑定变量
propertyDetailData: {}, // 搜索后点击楼盘 展示详情数据 propertyDetailData: {
}, // 搜索后点击楼盘 展示详情数据
propertyDetailDataMap: { propertyDetailDataMap: {
price: '价格', landArea: '占地面积',
productionType: '产品类型', totalArea: '建筑面积',
footprint: '占地面积', plotRatio: '容积率',
constructionArea: '建筑面积',
volumeRate: '容积率',
openTime: '开盘时间' openTime: '开盘时间'
} // key/value 对应 } // key/value 对应
} }
...@@ -225,13 +247,6 @@ ...@@ -225,13 +247,6 @@
}, },
showTowerInfo(item) { showTowerInfo(item) {
console.log(item) console.log(item)
item.propertyName = '家园'
item.price = '1123213'
item.productionType = '楼盘'
item.footprint = '1万平方米'
item.constructionArea = '2万平方米'
item.volumeRate = '2.0'
item.openTime = '2016年11月14日'
this.propertyDetailData = JSON.parse(JSON.stringify(item)) this.propertyDetailData = JSON.parse(JSON.stringify(item))
this.detailShow = true this.detailShow = true
}, },
...@@ -274,16 +289,25 @@ ...@@ -274,16 +289,25 @@
}, },
mapLoaded () { mapLoaded () {
if(this.$router.query) { if(this.$router.query) {
console.log( '111111111111111111111111', this.$router.query console.log(this.$router.query)
) } else {
const houseData = this.$route.query // 若无传递值 则查询全部行政区及其下属数目信息
this.showType = 'property' queryAllRegions().then(res => {
this.map.center.lng = houseData.lng console.log(res)
this.map.center.lat = houseData.lat })
this.map.setZoom = this.zoomType.property
this.dataType.property = [ houseData ]
this.propertyDetailData = houseData
} }
},
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() { mounted() {
...@@ -293,12 +317,25 @@ ...@@ -293,12 +317,25 @@
// 请求所有楼盘、行政区、板块的所有信息 // 请求所有楼盘、行政区、板块的所有信息
}, },
created() { created() {
window.eventBus.$on('searchParamChange', (houseData) => { window.eventBus.$on('searchParamChange', (searchResult) => {
this.showType = 'property' if(searchResult.type === 'plateRegion') {
this.map.center.lng = houseData.lng this.showType = 'plateRegion'
this.map.center.lat = houseData.lat this.map.center.lng = searchResult.data.lng
this.map.setZoom = this.zoomType.property this.map.center.lat = searchResult.data.lat
this.dataType.property = [ houseData ] this.circleCenter = { lng: searchResult.data.lng, lat: searchResult.data.lat }
this.circle = 1000
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.setZoom = this.zoomType.property
this.dataType.property = searchResult.data
this.propertyDetailData = this.dataType.property[0]
console.log(this.propertyDetailData)
}
}) })
}, },
computed: { computed: {
...@@ -421,6 +458,29 @@ ...@@ -421,6 +458,29 @@
} }
.distanceCard{ .distanceCard{
margin 10px 0 margin 10px 0
.el-card__body{
display flex
flex-direction row
.imgContainer{
padding 8px 0
cursor pointer
}
.propertyListName{
font-size 15px
text-align: left;
font-family: "Arial Black";
font-weight: bolder;
margin: 5px 0;
cursor: pointer;
}
.infomationContainer{
margin-left 20px
p {
margin 5px 0
font-size 12px
}
}
}
} }
.distanceCard:nth-child(1) { .distanceCard:nth-child(1) {
margin-top 0 margin-top 0
......
src/views/plateSupplyData/index.vue
View file @ ea8971c0
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
chartData: { chartData: {
columns: ['areaRange', 'supplyProportion', 'dealProportion'], columns: ['areaRange', 'supplyProportion', 'dealProportion'],
rows: [ rows: [
{ areaRange: '面积区间', supplyProportion: '供应套数比例', dealProportion: '成交套数比例', supplyNum: '供应套数数量', dealNum: '成交套数数量', rate: '供求比'}
] ]
}, },
chartSettings : { chartSettings : {
......
src/views/propertiesDetail/index.vue
View file @ ea8971c0
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<el-link type="primary">返回</el-link> <el-link type="primary">返回</el-link>
</div> </div>
<div class="name"> <div class="name">
{{'家园'}} {{propertyData.propertyName}}
</div> </div>
<div class="bannerOptions"> <div class="bannerOptions">
<el-radio-group v-model="bannerType"> <el-radio-group v-model="bannerType">
...@@ -19,13 +19,13 @@ ...@@ -19,13 +19,13 @@
<!-- banner图划分--> <!-- banner图划分-->
<div class="banner"> <div class="banner">
<div v-if="bannerType === 0"> <div v-if="bannerType === 0">
<banner :banner-data="[require('@assets/img/zt.png'), require('@assets/img/zt.png'), require('@assets/img/zt.png')]"/> <banner :banner-data="propertyData.propertyBanner.ztBanner"/>
</div> </div>
<div v-if="bannerType === 1"> <div v-if="bannerType === 1">
<banner :banner-data="[require('@assets/img/lm.png'), require('@assets/img/lm.png'), require('@assets/img/lm.png'), require('@assets/img/lm.png')]"/> <banner :banner-data="propertyData.propertyBanner.lmBanner"/>
</div> </div>
<div v-if="bannerType === 2"> <div v-if="bannerType === 2">
<banner :img-width="20" :banner-data="[require('@assets/img/zlhx.png'), require('@assets/img/zlhx.png'), require('@assets/img/zlhx.png')]" /> <banner :img-width="20" @bannerChange="saleingChange" :banner-data="propertyData.propertyBanner.hxBanner" />
</div> </div>
</div> </div>
<!-- 户型信息 只在banner类型为户型时才显示--> <!-- 户型信息 只在banner类型为户型时才显示-->
...@@ -39,17 +39,17 @@ ...@@ -39,17 +39,17 @@
<div class="planningInformation"> <div class="planningInformation">
<div class="title">规划信息</div> <div class="title">规划信息</div>
<div class="container"> <div class="container">
<el-tag :key="i" v-for="i in 10" type="info" class="tagsInfo">{{'我也不知道吖'}}</el-tag> <el-tag :key="index" effect="dark" v-for="(item,index) in propertyData.propertyPlaningInfo" type="info" v-html="item.title" class="tagsInfo"></el-tag>
</div> </div>
</div> </div>
<!-- 土拍信息--> <!-- 土拍信息-->
<div class="soilPhotoInformation"> <div class="soilPhotoInformation">
<div class="title">土拍信息</div> <div class="title">土拍信息</div>
<div class="container" v-for="i in 2"> <div class="container" v-for="(item,index) in propertyData.propertySoildInfo" :key="index">
<div class="singleTitle">{{'天津市西青区天津南站附近'}}</div> <div class="singleTitle">{{item.soildName}}</div>
<div class="singleData"> <div class="singleData">
<el-table <el-table
:data="soilData" :data="item.soildTableData"
border border
style="width: 100%"> style="width: 100%">
<el-table-column <el-table-column
...@@ -60,6 +60,7 @@ ...@@ -60,6 +60,7 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<div style="margin: 10px" v-if="item.tips">{{`*注：${item.tips}`}}</div>
</div> </div>
</div> </div>
...@@ -104,14 +105,14 @@ ...@@ -104,14 +105,14 @@
<table cellspacing="0" cellpadding="0" class="table"> <table cellspacing="0" cellpadding="0" class="table">
<tr> <tr>
<th>产品类型</th> <th>产品类型</th>
<td>产品供应数量</td> <th>产品供应数量</th>
<td>开间数</td> <th>开间数</th>
<td>居室数</td> <th>居室数</th>
<td>厅数</td> <th>厅数</th>
<td>卫生间数</td> <th>卫生间数</th>
</tr> </tr>
<tr v-for="item in supplyData.rows"> <tr v-for="item in supplyData.rows">
<th>{{item.production}}</th> <td>{{item.production}}</td>
<td>{{item.supplication}}</td> <td>{{item.supplication}}</td>
<td>{{item.kjNum}}</td> <td>{{item.kjNum}}</td>
<td>{{item.jsNum}}</td> <td>{{item.jsNum}}</td>
...@@ -155,28 +156,12 @@ ...@@ -155,28 +156,12 @@
import html2canvas from "html2canvas" import html2canvas from "html2canvas"
import multiHeaderTable from '@comp/multilHeaderTable' import multiHeaderTable from '@comp/multilHeaderTable'
import tableHeader from "../ProductAnalysis/tableHeader" import tableHeader from "../ProductAnalysis/tableHeader"
import { demoDataObject } from "../ProductAnalysis/tableHeader";
export default { export default {
name: "propertiesDetail", name: "propertiesDetail",
components: {banner, multiHeaderTable}, components: {banner, multiHeaderTable},
data () { data () {
return { return {
bannerType: 0, bannerType: 0,
soilData: [
{
region: '西青区',
area: '所属区域',
landArea: '土地面积',
lotRatio: '容积率',
builtArea: '建筑面积',
floorPrice: '楼面价元',
buildingDensity: '建筑密度',
closingDate: '成交日期',
totalPrice: '成交价',
premium: '溢价',
transferee: '受让方',
}
],
supplySaleData: { supplySaleData: {
columns: ['areaRange', 'supplyProportion', 'dealProportion'], columns: ['areaRange', 'supplyProportion', 'dealProportion'],
rows: [ rows: [
...@@ -281,7 +266,148 @@ ...@@ -281,7 +266,148 @@
{ production: '143平', nxmk: 10.1, qjsmk: 10.5, zwmk: 15, kwmk: 13 }, { production: '143平', nxmk: 10.1, qjsmk: 10.5, zwmk: 15, kwmk: 13 },
], ],
colorArr: colors, colorArr: colors,
hxObjectData: demoDataObject hxObjectData: [],
propertyData: {
propertyName: '这里为楼盘名字',
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
}
]
},
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: '受让方',
}]
}
]
}
} }
}, },
methods: { methods: {
...@@ -309,6 +435,9 @@ ...@@ -309,6 +435,9 @@
u8arr[n] = bstr.charCodeAt(n); u8arr[n] = bstr.charCodeAt(n);
} }
return new Blob([u8arr], {type: mime }); return new Blob([u8arr], {type: mime });
},
saleingChange (item) {
this.hxObjectData = item
} }
}, },
computed: { computed: {
...@@ -320,6 +449,9 @@ ...@@ -320,6 +449,9 @@
table.splice(0,1) table.splice(0,1)
return table return table
} }
},
mounted() {
this.hxObjectData = this.propertyData.propertyBanner.hxBanner[0]
} }
} }
</script> </script>
...@@ -360,9 +492,13 @@ ...@@ -360,9 +492,13 @@
border 2px solid rgb(222, 235, 247) border 2px solid rgb(222, 235, 247)
.container { .container {
margin-top 10px margin-top 10px
padding-left 20px
.tagsInfo { .tagsInfo {
margin-right 10px margin-right 15px
height 40px
line-height 40px
padding 0 15px
font-size 16px
font-family "sans-serif"
} }
} }
} }
......
src/views/propertiesDetail/staticData.js
View file @ ea8971c0
...@@ -3,7 +3,7 @@ export const plateRegionDetail = [ ...@@ -3,7 +3,7 @@ export const plateRegionDetail = [
{ {
title: '区域定位', title: '区域定位',
flex: 24, flex: 24,
prop: 'regionLcation' prop: 'regionPosition'
}, },
{ {
title: '产品类型', title: '产品类型',
...@@ -13,22 +13,22 @@ export const plateRegionDetail = [ ...@@ -13,22 +13,22 @@ export const plateRegionDetail = [
{ {
title: '区域优势', title: '区域优势',
flex: 24, flex: 24,
prop: 'regionAdvantages' prop: 'regionAdvantage'
}, },
{ {
title: '已有楼盘', title: '已有楼盘',
flex: 24, flex: 24,
prop: 'existingProperty' prop: 'existProject'
}, },
{ {
title: '置业均价', title: '置业均价',
flex: 12, flex: 12,
prop: 'averageEstate' prop: 'businessAveragePrice'
}, },
{ {
title: '楼面均价', title: '楼面均价',
flex: 12, flex: 12,
prop: 'averageFool' prop: 'projectAveragePrice'
}, },
{ {
title: '区域发展', title: '区域发展',
......
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