Skip to content

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

feat: 板块数据分析-显示户型页面完善 户型信息卡片组件、图片查看功能 

      板块数据分析、板块供求数据 图表下方表格
      板块区域楼盘销售状态组件重新设计 与原型图样式相符
fix: 去掉百度地图左下角的水印
     每个图标的样式风格修改，现为以蓝紫色作为主色调
parent c03e83d4
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 773 additions and 153 deletions
.eslintrc.js
View file @ d280396a
...@@ -21,6 +21,7 @@ module.exports = { ...@@ -21,6 +21,7 @@ module.exports = {
], ],
// add your custom rules here // add your custom rules here
rules: { rules: {
'no-console': 'off' 'no-console': 'off',
'no-debugger': 'off',
} }
} }
package.json
View file @ d280396a
...@@ -18,9 +18,11 @@ ...@@ -18,9 +18,11 @@
"path-to-regexp": "^6.1.0", "path-to-regexp": "^6.1.0",
"svg-sprite-loader": "^4.2.7", "svg-sprite-loader": "^4.2.7",
"v-charts": "^1.19.0", "v-charts": "^1.19.0",
"v-viewer": "^1.5.1",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-baidu-map": "^0.21.22", "vue-baidu-map": "^0.21.22",
"vue-router": "^3.1.3", "vue-router": "^3.1.3",
"vue2-viewer": "^1.0.3",
"vuex": "^3.3.0" "vuex": "^3.3.0"
}, },
"devDependencies": { "devDependencies": {
......
src/App.vue
View file @ d280396a
...@@ -9,5 +9,6 @@ ...@@ -9,5 +9,6 @@
<style lang="stylus"> <style lang="stylus">
html, body, #app { html, body, #app {
height 100% height 100%
overflow hidden
} }
</style> </style>
src/components/bannerDetail/index.vue
View file @ d280396a
<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">
<el-carousel-item v-for="(item, index) in bannerData" :key="index"> <el-carousel-item class="carouselCenter" v-for="(item, index) in bannerData" :key="index">
<h3>{{ item}}</h3> <viewer :images="[]" :style="{ width: imgWidth + '%', height: '100%', margin: '0 auto' }">
<img :src="item" :style="{ width: '100%', height: '100%' }">
</viewer>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
...@@ -17,6 +19,12 @@ ...@@ -17,6 +19,12 @@
default () { default () {
return [] return []
} }
},
imgWidth: {
type: [Number, String],
default() {
return 100;
}
} }
} }
} }
...@@ -26,19 +34,18 @@ ...@@ -26,19 +34,18 @@
.bannerMap{ .bannerMap{
.el-carousel__container{ .el-carousel__container{
min-height 400px min-height 400px
text-align center
} }
.el-carousel__item h3 { }
color: #475669; </style>
font-size: 18px; <style>
opacity: 0.75; .viewer-play{
line-height: 300px; display: none;
margin: 0; }
} .viewer-prev {
.el-carousel__item:nth-child(2n) { display: none;
background-color: #99a9bf; }
} .viewer-next {
.el-carousel__item:nth-child(2n+1) { display: none;
background-color: #d3dce6;
}
} }
</style> </style>
src/components/color.js 0 → 100644
View file @ d280396a
export const colors = ['#3F6D98', '#ADC6E5', '#5B9BD5', '#C7D7EC', '#4A7FB0', '#8BB1DD', '#538EC3']
src/components/propertyControll/index.vue 0 → 100644
View file @ d280396a
<template>
<div class="container">
<div class="row">
<div class="left blue">
<div class="blockShow"></div>
</div>
<div class="right buleText">
<div :style="{ display: 'inline', cursor: 'pointer' , color: saleingState ? 'rgb(25,124,230)' : '#000' }" @click="saleingState = !saleingState">在售楼盘</div>
</div>
</div>
<div class="row">
<div class="left green">
<div class="blockShow"></div>
</div>
<div class="right greenText">
<div :style="{ display: 'inline', cursor: 'pointer' , color: soldOutState ? 'rgb(169,209,142)' : '#000' }" @click="soldOutState = !soldOutState">售罄楼盘</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "propertyControll",
data () {
return {
soldOutState: true,
saleingState: true
}
},
watch: {
saleingState (val) {
let state
if(val && this.soldOutState) {
state = 'all'
} else if (val && !this.soldOutState) {
state = 0
} else if (!val && this.soldOutState) {
state = 1
} else {
state = ''
}
this.$emit('stateChange', state)
},
soldOutState (val) {
let state
if(val && this.saleingState) {
state = 'all'
} else if (val && !this.saleingState) {
state = 1
} else if (!val && this.saleingState) {
state = 0
} else {
state = ''
}
this.$emit('stateChange', state)
}
}
}
</script>
<style scoped>
.container {
background-color: #fff;
width: 146px;
border: 1px solid #000000;
}
.row {
width: 100%;
padding: 10px 0;
display: flex;
flex-direction: row;
align-items: center;
}
.left {
width: 40%;
}
.right {
width: 60%;
font-weight: 500;
}
.green .blockShow {
width: 20px;
height: 20px;
background-color: rgb(169,209,142);
margin: 0 auto;
}
.blue .blockShow {
width: 20px;
height: 20px;
background-color: rgb(25,124,230);
margin: 0 auto;
}
.left {
text-align: center;
}
.right {
text-align: left;
}
</style>
src/components/unitCard/index.vue 0 → 100644
View file @ d280396a
<template>
<div class="unitCard">
<div class="imgContainer">
<viewer :images="[]">
<img src="@assets/img/zlhx.png" width="100%" height="100%">
</viewer>
</div>
<div class="unitDetail">
<el-col :span="8">
xxxx家园
</el-col>
<el-col :span="8">
xxxxx平方米
</el-col>
<el-col :span="8">
x室x厅x卫
</el-col>
</div>
</div>
</template>
<script>
export default {
name: 'unitCard',
props: {
},
data () {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="stylus">
.unitCard{
margin 0 auto
position relative
border: 1px solid #222222;
box-sizing border-box
width: 310px;
height: 235px;
.imgContainer {
margin auto
width 50%
height 100%
.imgPreview {
display block
width 100%
height 100%
}
}
.unitDetail{
display flex
flex-direction row
align-items center
width 100%
height 40px
position absolute
bottom 0
background-color: rgba(30, 39, 46,0.5);
.el-col{
text-align center
color #ffffff
font-size 16px
font-family "Arial Black"
}
}
}
</style>
<style>
.viewer-play{
display: none;
}
.viewer-prev {
display: none;
}
.viewer-next {
display: none;
}
</style>
src/main.js
View file @ d280396a
...@@ -11,12 +11,19 @@ import 'element-ui/lib/theme-chalk/index.css' ...@@ -11,12 +11,19 @@ import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
import BaiduMap from 'vue-baidu-map' import BaiduMap from 'vue-baidu-map'
import Vcharts from 'v-charts' import Vcharts from 'v-charts'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
import '@assets/icons' import '@assets/icons'
Vue.use(ElementUI, { locale }) Vue.use(ElementUI, { locale })
Vue.use(BaiduMap, { ak: 'zzr05y1bPhSwRpzUzONk2aRKrX8AZl84' }) Vue.use(BaiduMap, { ak: 'zzr05y1bPhSwRpzUzONk2aRKrX8AZl84' })
Vue.use(Vcharts) Vue.use(Vcharts)
Vue.use(Viewer, {
defaultOptions: {
zIndex: 9999,
toolbar: true,
fullscreen: false
} })
Vue.prototype.$axios = xhr Vue.prototype.$axios = xhr
Vue.config.productionTip = false; Vue.config.productionTip = false;
window.eventBus = new Vue() window.eventBus = new Vue()
......
src/views/ProductAnalysis/index.vue
View file @ d280396a
...@@ -52,33 +52,104 @@ ...@@ -52,33 +52,104 @@
</el-option> </el-option>
</el-select> </el-select>
</el-col> </el-col>
<el-col :span="4" style="text-align: right">
<el-radio-group v-model="showMode">
<el-radio-button :label="0">显示数据</el-radio-button>
<el-radio-button :label="1">显示户型</el-radio-button>
</el-radio-group>
</el-col>
</div> </div>
<div class="supplyDealCharts"> <div class="supplyDealCharts" v-if="showMode === 0">
<div style="width: 50%"> <div style="width: 50%">
<ve-pie :data="pieData" :settings="pieSettings"></ve-pie> <ve-pie :data="pieData" :legend="{ bottom: 20 }" :colors="colorsArr" :settings="pieSettings"></ve-pie>
<!-- 各产品 供应套数与详细信息表格-->
<table cellspacing="0" cellpadding="0" class="table">
<tr>
<th>产品类型</th>
<th>产品供应数量</th>
<th>开间数</th>
<th>居室数</th>
<th>厅数</th>
<th>卫生间数</th>
</tr>
<tr v-for="item in pieData.rows">
<td>{{item.production}}</td>
<td>{{item.supplication}}</td>
<td>{{item.kjNum || 0}}</td>
<td>{{item.jsNum || 0}}</td>
<td>{{item.tingNum || 0}}</td>
<td>{{item.wsjNum || 0}}</td>
</tr>
</table>
</div> </div>
<div style="width: 50%"> <div style="width: 50%">
<ve-histogram :data="histogramData" :settings="chartSettings"></ve-histogram> <ve-histogram :data="histogramData" :legend="{ bottom: 20 }" :colors="colorsArr" :settings="chartSettings"></ve-histogram>
<!-- 各房屋 面宽表格详情-->
<table cellspacing="0" cellpadding="0" class="table">
<tr>
<th>产品类型</th>
<th>南向面宽</th>
<th>起居室面宽</th>
<th>主卧面宽</th>
<th>客卧面宽</th>
</tr>
<tr v-for="item in histogramTableData">
<td>{{item.production}}</td>
<td>{{item.nxmk}}</td>
<td>{{item.qjsmk || 0}}</td>
<td>{{item.zwmk || 0}}</td>
<td>{{item.kwmk || 0}}</td>
</tr>
</table>
</div> </div>
</div> </div>
<div v-else class="supplyDealUnitType">
<div class="mainUnit blueBorder">
<h2 class="header">主力户型</h2>
<div class="unitContainer">
<el-col :span="8" v-for="i in 3" :key="i" >
<unit-card ></unit-card>
</el-col>
</div>
<el-pagination
:page-size="3"
layout="total, prev, pager, next"
:total="1000">
</el-pagination>
</div>
<div class="nonMainUnit blueBorder">
<h2 class="header">非主力户型</h2>
<div class="unitContainer">
<el-col :span="8" v-for="i in 3" :key="i" >
<unit-card ></unit-card>
</el-col>
</div>
<el-pagination
:page-size="3"
layout="total, prev, pager, next"
:total="1000">
</el-pagination>
</div>
</div>
</section> </section>
</template> </template>
<script> <script>
import { colors } from "../../components/color";
import unitCard from '@comp/unitCard'
export default { export default {
name: "ProductAnalysis", name: "ProductAnalysis",
components:{
unitCard
},
data () { data () {
return { return {
pieData: { pieData: {
columns: ['production', 'supplication'], columns: ['production', 'supplication'],
rows: [ rows: [
{ 'production': '主力产品', 'supplication': 1393 }, { 'production': '产品1', 'supplication': 1393, kjNum: 1, jsNum: 2, tingNum: 3, wsjNum: 2 },
{ 'production': '非主力产品1', 'supplication': 3530 }, { 'production': '产品2', 'supplication': 3530, kjNum: 2, jsNum: 3, tingNum: 5, wsjNum: 4 },
{ 'production': '非主力产品2', 'supplication': 2923 }, { 'production': '产品3', 'supplication': 2923, kjNum: 4, jsNum: 1, tingNum: 1, wsjNum: 3 }
{ 'production': '非主力产品3', 'supplication': 1723 },
{ 'production': '非主力产品4', 'supplication': 3792 },
{ 'production': '非主力产品5', 'supplication': 4593 }
] ]
}, },
pieSettings: { pieSettings: {
...@@ -88,20 +159,52 @@ ...@@ -88,20 +159,52 @@
} }
}, },
histogramData: { histogramData: {
columns: ['houseTypeWidth', 'mainProduction', 'mainProduction1', 'mainProduction2'], columns: ['rommInfo', 'proNumOne', 'proNumTwo', 'proNumThree'],
rows: [ rows: [
{ 'houseTypeWidth': '80-90', 'mainProduction': 1393, 'mainProduction1': 1093, 'mainProduction2': 0.32 }, { 'rommInfo': '南向面宽', 'proNumOne': 10.1, 'proNumTwo': 10.8, 'proNumThree': 8.9 },
{ 'houseTypeWidth': '80-90', 'mainProduction': 3530, 'mainProduction1': 3230, 'mainProduction2': 0.26 }, { 'rommInfo': '起居室面宽', 'proNumOne': 10.5, 'proNumTwo': 10.7, 'proNumThree': 4.5 },
{ 'houseTypeWidth': '80-90', 'mainProduction': 2923, 'mainProduction1': 2623, 'mainProduction2': 0.76 }, { 'rommInfo': '主卧面宽', 'proNumOne': 15, 'proNumTwo': 12, 'proNumThree': 0 },
{ 'houseTypeWidth': '80-90', 'mainProduction': 1723, 'mainProduction1': 1423, 'mainProduction2': 0.49 }, { 'rommInfo': '客卧面宽', 'proNumOne': 13, 'proNumTwo': 19, 'proNumThree': 10 }
{ 'houseTypeWidth': '80-90', 'mainProduction': 3792, 'mainProduction1': 3492, 'mainProduction2': 0.323 },
{ 'houseTypeWidth': '80-90', 'mainProduction': 4593, 'mainProduction1': 4293, 'mainProduction2': 0.78 }
] ]
}, },
map: {
'nxmk': '南向面宽',
'qjsmk': '起居室面宽',
'zwmk': '主卧面宽',
'kwmk': '客卧面宽'
}, // 房屋数据 map匹配
histogramTableData: [
{
production: '产品1',
nxmk: 10.1,
qjsmk: 10.5,
zwmk: 15,
kwmk: 13
},
{
production: '产品2',
nxmk: 8.9,
qjsmk: 4.5,
zwmk: 0,
kwmk: 10
},
{
production: '产品3',
nxmk: 10.1,
qjsmk: 10.5,
zwmk: 15,
kwmk: 13
}
],
chartSettings : { chartSettings : {
axisSite: { right: ['下单率'] }, axisSite: { right: ['下单率'] },
yAxisType: ['KMB', 'percent'], yAxisType: ['normal'],
yAxisName: ['数值', '比率'] labelMap: {
roomInfo: '面宽类型',
proNumOne: '产品1',
proNumTwo: '产品2',
proNumThree: '产品3'
}
}, },
regionOptions: [], regionOptions: [],
regionVal: '', regionVal: '',
...@@ -112,13 +215,23 @@ ...@@ -112,13 +215,23 @@
houseTypeOptions: [], houseTypeOptions: [],
houseTypeVal: '', houseTypeVal: '',
areaInterval: '', areaInterval: '',
areaIntervalData: [] areaIntervalData: [],
showMode: 0,
colorsArr: colors
} }
},
created() {
window.eventBus.$on('searchParamChange', (houseData) => {
this.$router.push({
path: '/regionalPlate',
query: houseData
})
})
} }
} }
</script> </script>
<style scoped lang="stylus"> <style lang="stylus">
.ProductAnalysis{ .ProductAnalysis{
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -131,6 +244,71 @@ ...@@ -131,6 +244,71 @@
margin: 40px auto 0; margin: 40px auto 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
table.table{
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #d1ccc0;
border-collapse: collapse;
margin 0 auto
}
table.table th {
border-width: 1px;
padding: 12px;
border-style: solid;
border-color: #d1ccc0;
background-color: #dedede;
text-align center
}
table.table td {
border-width: 1px;
padding: 12px;
border-style: solid;
border-color: #d1ccc0;
background-color: #ffffff;
text-align center
}
}
.supplyDealUnitType{
width: 90%;
margin: 40px auto 0;
display flex
flex-direction column
}
.supplyDealUnitType .blueBorder {
border 1px solid #00a8ff
min-height 200px
}
.mainUnit{
padding-bottom 20px
.header {
padding 0 15px
}
.unitContainer {
width 100%
overflow hidden
}
.el-pagination{
margin-top 10px
text-align center
}
}
.nonMainUnit{
margin-top 15px
padding-bottom 20px
.header {
padding 0 15px
}
.unitContainer {
width 100%
overflow hidden
}
.el-pagination{
margin-top 10px
text-align center
font-size 15px
}
} }
} }
</style> </style>
src/views/RegionalPlate/demoData.js
View file @ d280396a
...@@ -12,42 +12,42 @@ export const regionData = [ ...@@ -12,42 +12,42 @@ export const regionData = [
number: 5, number: 5,
children: [ children: [
{ {
lng: 117.207, lng: 117.107,
lat: 39.154, lat: 39.228,
text: '第一板块', text: '第一板块',
number: 2, number: 2,
radius: 1500, radius: 1500,
children: [ children: [
{ {
lng: 117.208, lng: 117.106,
lat: 39.155, lat: 39.2281,
text: '楼盘1', text: '楼盘1',
state: 0 state: 0
}, },
{ {
lng: 117.20721, lng: 117.1074,
lat: 39.15415, lat: 39.2286,
text: '楼盘2', text: '楼盘2',
state: 1 state: 1
} }
] ]
}, },
{ {
lng: 117.204, lng: 117.104,
lat: 39.145, lat: 39.217,
text: '第二板块', text: '第二板块',
number: 2, number: 2,
radius: 1500, radius: 1500,
children: [ children: [
{ {
lng: 117.20411, lng: 117.1048,
lat: 39.14566, lat: 39.2168,
text: '楼盘1', text: '楼盘1',
state: 1 state: 1
}, },
{ {
lng: 117.20504, lng: 117.105,
lat: 39.14320, lat: 39.2167,
text: '楼盘2', text: '楼盘2',
state: 1 state: 1
} }
......
src/views/RegionalPlate/index.vue
View file @ d280396a
This diff is collapsed.
src/views/plateSupplyData/index.vue
View file @ d280396a
...@@ -35,16 +35,42 @@ ...@@ -35,16 +35,42 @@
</div> </div>
<div class="analysisData"> <div class="analysisData">
<div style="width: 50%"> <div style="width: 50%">
<ve-histogram :data="chartData" :settings="chartSettings"></ve-histogram> <ve-histogram :data="chartData" :legend="{ bottom: 20 }" :colors="colorArr" :settings="chartSettings"></ve-histogram>
<table cellspacing="0" cellpadding="0" class="table">
<tr v-for="(value, key) in supplyData" :key="key">
<th>{{value.name}}</th>
<td v-for="(item,index) in value.data" :key="index">{{item}}</td>
</tr>
</table>
<!-- <el-table-->
<!-- border-->
<!-- style="width: 100%">-->
<!-- <el-table-column-->
<!-- prop="type"-->
<!-- label="面积区间">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="80-90"-->
<!-- label="80-90">-->
<!-- </el-table-column>-->
<!-- </el-table>-->
</div> </div>
<div style="width: 50%"> <div style="width: 50%">
<ve-histogram :data="chartData2" :settings="chartSettings2"></ve-histogram> <ve-histogram :data="chartData2" :legend="{ bottom: 20 }" :colors="colorArr" :settings="chartSettings2"></ve-histogram>
<table cellspacing="0" cellpadding="0" class="table">
<tr v-for="(value, key) in supplyRateData" :key="key">
<th>{{value.name}}</th>
<td v-for="(item,index) in value.data" :key="index">{{item}}</td>
</tr>
</table>
<div class="tips">注：供求比=供应数量/销售数量，供应比越小，销售越好</div>
</div> </div>
</div> </div>
</section> </section>
</template> </template>
<script> <script>
import { colors } from "../../components/color";
export default { export default {
name: "ProductAnalysis", name: "ProductAnalysis",
data () { data () {
...@@ -52,7 +78,7 @@ ...@@ -52,7 +78,7 @@
chartData: { chartData: {
columns: ['areaRange', 'supplyProportion', 'dealProportion'], columns: ['areaRange', 'supplyProportion', 'dealProportion'],
rows: [ rows: [
{ 'areaRange': '80-90', 'supplyProportion': 0.08, 'dealProportion': 0.9, }, { 'areaRange': '80-90', 'supplyProportion': 0.08, 'dealProportion': 1.5, },
{ 'areaRange': '90-100', 'supplyProportion': 0.04, 'dealProportion': 0.05 }, { 'areaRange': '90-100', 'supplyProportion': 0.04, 'dealProportion': 0.05 },
{ 'areaRange': '100-110', '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': '110-120', 'supplyProportion': 0.07, 'dealProportion': 0.05 },
...@@ -83,7 +109,7 @@ ...@@ -83,7 +109,7 @@
chartSettings2: { chartSettings2: {
labelMap: { labelMap: {
areaRange: '面积区间', areaRange: '面积区间',
Rate: '供求关系' Rate: '供求比'
} }
}, },
regionVal: '', // 行政区选择 regionVal: '', // 行政区选择
...@@ -92,6 +118,31 @@ ...@@ -92,6 +118,31 @@
timeOptions: [], timeOptions: [],
plateOptions: [], plateOptions: [],
regionOptions: [], regionOptions: [],
supplyData: {
areaRange: {
name: '面积区间',
data: ['80-90', '90-100', '100-110', '110-120', '120-130', '130-140']
},
supplyNum: {
name: '供应数量',
data: [10000, 20000, 30000, 40000, 50000, 60000]
},
dealNum: {
name: '成交数量',
data: [8000, 16000, 24000, 32000, 40000, 48000]
}
}, // 表格供求数量的数据
supplyRateData:{
areaRange: {
name: '面积区间',
data: ['80-90', '90-100', '100-110', '110-120', '120-130', '130-140']
},
Rate: {
name: '供求比',
data: [0.8, 0.8 ,0.8, 0.8, 0.8, 0.8]
},
}, // 表格供求比的数据
colorArr: colors
} }
} }
} }
...@@ -111,5 +162,36 @@ ...@@ -111,5 +162,36 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
table.table{
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #d1ccc0;
border-collapse: collapse;
margin 0 auto
}
table.table th {
border-width: 1px;
padding: 12px;
border-style: solid;
border-color: #d1ccc0;
background-color: #dedede;
text-align center
}
table.table td {
border-width: 1px;
padding: 12px;
border-style: solid;
border-color: #d1ccc0;
background-color: #ffffff;
text-align center
}
.tips {
font-size 16px
font-weight 500
text-align center
margin-top 15px
}
} }
</style> </style>
src/views/propertiesDetail/index.vue
View file @ d280396a
This diff is collapsed.
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