Skip to content

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

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

fix: 覆盖物样式调整
parent 1156b46e
Expand all 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 @@
placeholder="请输入内容"
@select="handleSelect">
<template slot-scope="{ item }">
<div style="float: left">{{ item.text }}</div>
<span style="float: right;font-size: 13px;color: #8492a6">{{ item.type }}</span>
<div style="float: left">{{ item.name }}</div>
<span style="float: right;font-size: 13px;color: #8492a6">{{ item.tips }}</span>
</template>
</el-autocomplete>
<el-button type="primary" @click="searchEmit">搜索</el-button>
......@@ -18,26 +18,77 @@
</template>
<script>
import { asyncSearch, queryDetailByName } from "../../assets/js/api/unitManage";
export default {
name: "search",
data () {
return {
search: '',
selectData : ''
selectData : '',
dataMap: {
lng: '',
lat: '',
}
}
},
methods: {
querySearchAsync(queryString, cb) {
const result = [ { lng: 117.200, lat: 39.133, text: '好楼盘', type: '楼盘' },
{ lng: 117.200, lat: 39.133, text: '好楼盘2', type: '板块'} ]
cb(result)
querySearchAsync(queryString, callback) {
console.log(queryString)
asyncSearch().then(res => {
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) {
this.selectData = item
this.search = item.name
},
searchEmit () {
if(this.selectData) {
window.eventBus.$emit('searchParamChange', this.selectData)
if(this.search) {
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>
<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">
<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>
</el-carousel-item>
</el-carousel>
......@@ -26,6 +26,11 @@
return 100;
}
}
},
methods: {
bannerChange (index) {
this.$emit('bannerChange', this.bannerData[index])
}
}
}
</script>
......
src/components/mapOverlay/index.vue
View file @ ea8971c0
......@@ -2,8 +2,8 @@
<bm-overlay
ref="customOverlay"
pane="labelPane"
:class="{'flex': true, 'circle': circle && width === height}"
:style="backGroundType === 'image' ? {} : { width: width + 'px', height: height + 'px', color: textColor, backgroundColor: bgColor}"
:class="{'flex': true}"
:style="backGroundType === 'image' ? {} : { width: width + 'px', height: height + 'px', color: textColor, backgroundColor: bgColor, borderRadius: circle }"
@draw="draw">
<div
:style="{fontSize: fontSize, fontFamily: 'Arial', textAlign: 'center', fontWeight: 'normal'}"
......@@ -11,10 +11,8 @@
{{text}}
<div v-if="num" style="font-weight: 600;height: 20px;line-height: 40px">{{num}}</div>
</div>
<div v-if="backGroundType === 'waterDrop'" class="flex-colum">
<div style="transform: rotate(-45deg)">
{{text}}
</div>
<div v-if="backGroundType === 'waterDrop'" class="flex-colum" :title="text">
<i class="el-icon-location"></i>
</div>
</bm-overlay>
</template>
......@@ -42,7 +40,7 @@
}
</script>
<style scoped>
<style scoped lang="stylus">
.circle{
border-radius: 50%;
}
......@@ -52,10 +50,11 @@
justify-content: center;
align-items: center;
cursor: pointer;
opacity: 0.6;
filter: grayscale(0%)
}
.flex:hover{
opacity: 1;
filter: grayscale(50%)
z-index: 9999;
}
.centerImage{
display: flex;
......@@ -63,17 +62,7 @@
align-items: center;
}
.flex-colum{
width: 70px;
height: 70px;
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;
font-size 45px
color red
}
</style>
src/components/multilHeaderTable/index.vue
View file @ ea8971c0
......@@ -44,7 +44,7 @@
<el-row v-for="(value, key) in dataMap" :key="key" :class="{ 'dataCell': true, 'imgHeigth': value === 'img' }">
<div v-if="value === 'string'">{{tableData[key] || '无'}}</div>
<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>
<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>
......
src/plugins/router/index.js
View file @ ea8971c0
......@@ -5,7 +5,7 @@ import { getToken } from '@assets/js/auth'
const whiteList = ['/login', '/test']
router.beforeEach((to, from, next) => {
if (!getToken()) {
if (getToken()) {
// 拥有访问权限
if (to.path === '/login') {
// 访问登录页时，重定向至首页（已具备访问权限）
......
src/views/RegionalPlate/demoData.js
View file @ ea8971c0
......@@ -55,16 +55,10 @@ export const regionData = [
}
]
},
{
lng: 117.250,
lat: 39.183,
text: '西青区',
number: 0
},
{
lng: 117.300,
lat: 39.333,
text: '行政区3',
number: 5
number: 0
}
]
src/views/RegionalPlate/index.vue
View file @ ea8971c0
This diff is collapsed.
src/views/plateSupplyData/index.vue
View file @ ea8971c0
......@@ -67,7 +67,7 @@
chartData: {
columns: ['areaRange', 'supplyProportion', 'dealProportion'],
rows: [
{ areaRange: '面积区间', supplyProportion: '供应套数比例', dealProportion: '成交套数比例', supplyNum: '供应套数数量', dealNum: '成交套数数量', rate: '供求比'}
]
},
chartSettings : {
......
src/views/propertiesDetail/index.vue
View file @ ea8971c0
......@@ -5,7 +5,7 @@
<el-link type="primary">返回</el-link>
</div>
<div class="name">
{{'家园'}}
{{propertyData.propertyName}}
</div>
<div class="bannerOptions">
<el-radio-group v-model="bannerType">
......@@ -19,13 +19,13 @@
<!-- banner图划分-->
<div class="banner">
<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 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 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>
<!-- 户型信息 只在banner类型为户型时才显示-->
......@@ -39,17 +39,17 @@
<div class="planningInformation">
<div class="title">规划信息</div>
<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 class="soilPhotoInformation">
<div class="title">土拍信息</div>
<div class="container" v-for="i in 2">
<div class="singleTitle">{{'天津市西青区天津南站附近'}}</div>
<div class="container" v-for="(item,index) in propertyData.propertySoildInfo" :key="index">
<div class="singleTitle">{{item.soildName}}</div>
<div class="singleData">
<el-table
:data="soilData"
:data="item.soildTableData"
border
style="width: 100%">
<el-table-column
......@@ -60,6 +60,7 @@
</el-table-column>
</el-table>
</div>
<div style="margin: 10px" v-if="item.tips">{{`*注：${item.tips}`}}</div>
</div>
</div>
......@@ -104,14 +105,14 @@
<table cellspacing="0" cellpadding="0" class="table">
<tr>
<th>产品类型</th>
<td>产品供应数量</td>
<td>开间数</td>
<td>居室数</td>
<td>厅数</td>
<td>卫生间数</td>
<th>产品供应数量</th>
<th>开间数</th>
<th>居室数</th>
<th>厅数</th>
<th>卫生间数</th>
</tr>
<tr v-for="item in supplyData.rows">
<th>{{item.production}}</th>
<td>{{item.production}}</td>
<td>{{item.supplication}}</td>
<td>{{item.kjNum}}</td>
<td>{{item.jsNum}}</td>
......@@ -155,28 +156,12 @@
import html2canvas from "html2canvas"
import multiHeaderTable from '@comp/multilHeaderTable'
import tableHeader from "../ProductAnalysis/tableHeader"
import { demoDataObject } from "../ProductAnalysis/tableHeader";
export default {
name: "propertiesDetail",
components: {banner, multiHeaderTable},
data () {
return {
bannerType: 0,
soilData: [
{
region: '西青区',
area: '所属区域',
landArea: '土地面积',
lotRatio: '容积率',
builtArea: '建筑面积',
floorPrice: '楼面价元',
buildingDensity: '建筑密度',
closingDate: '成交日期',
totalPrice: '成交价',
premium: '溢价',
transferee: '受让方',
}
],
supplySaleData: {
columns: ['areaRange', 'supplyProportion', 'dealProportion'],
rows: [
......@@ -281,7 +266,148 @@
{ production: '143平', nxmk: 10.1, qjsmk: 10.5, zwmk: 15, kwmk: 13 },
],
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: {
......@@ -309,6 +435,9 @@
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type: mime });
},
saleingChange (item) {
this.hxObjectData = item
}
},
computed: {
......@@ -320,6 +449,9 @@
table.splice(0,1)
return table
}
},
mounted() {
this.hxObjectData = this.propertyData.propertyBanner.hxBanner[0]
}
}
</script>
......@@ -360,9 +492,13 @@
border 2px solid rgb(222, 235, 247)
.container {
margin-top 10px
padding-left 20px
.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 = [
{
title: '区域定位',
flex: 24,
prop: 'regionLcation'
prop: 'regionPosition'
},
{
title: '产品类型',
......@@ -13,22 +13,22 @@ export const plateRegionDetail = [
{
title: '区域优势',
flex: 24,
prop: 'regionAdvantages'
prop: 'regionAdvantage'
},
{
title: '已有楼盘',
flex: 24,
prop: 'existingProperty'
prop: 'existProject'
},
{
title: '置业均价',
flex: 12,
prop: 'averageEstate'
prop: 'businessAveragePrice'
},
{
title: '楼面均价',
flex: 12,
prop: 'averageFool'
prop: 'projectAveragePrice'
},
{
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