Skip to content

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

feat: 楼盘详情页面创建70% 

fix: 导航菜单某些情况跳转错误
parent 250c24e7
Hide whitespace changes
Inline Side-by-side
Showing with 318 additions and 262 deletions
src/components/Breadcrumb/index.vue
View file @ a96226ca
......@@ -36,7 +36,6 @@ export default {
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
},
pathCompile(path) {
// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
const { params } = this.$route
var toPath = compile(path)
return toPath(params)
......
src/components/Layout/SidebarItem.vue
View file @ a96226ca
......@@ -97,6 +97,9 @@ export default {
width: 100%;
overflow: hidden;
text-decoration none
.active {
background-color: rgb(46, 117, 182)!important
}
}
.svg-icon {
margin-right: 12px;
......
src/components/Layout/index.vue
View file @ a96226ca
......@@ -161,7 +161,7 @@ export default {
}
.el-main {
height 100%
background bodyBg
background #ffffff
}
.el-footer {
color #909399
......
src/components/asyncSearch/index.vue
View file @ a96226ca
<template>
` <div class="asyncSearch" style="display: inline-flex;flex-direction: row;align-items: center">
<div class="asyncSearch" style="display: inline-flex;flex-direction: row;align-items: center">
<el-autocomplete
prefix-icon="el-icon-search"
v-model="search"
......@@ -7,8 +7,7 @@
:trigger-on-focus="false"
:fetch-suggestions="querySearchAsync"
placeholder="请输入内容"
@select="handleSelect"
>
@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>
......
src/components/bannerDetail/index.vue 0 → 100644
View file @ a96226ca
<template>
<div class="bannerMap">
<el-carousel :interval="5000" arrow="always" indicator-position="outside">
<el-carousel-item v-for="(item, index) in bannerData" :key="index">
<h3>{{ item}}</h3>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
name: "banner",
props: {
bannerData: {
type: [Array,Number],
default () {
return []
}
}
}
}
</script>
<style lang="stylus">
.bannerMap{
.el-carousel__container{
min-height 400px
}
.el-carousel__item h3 {
color: #475669;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
}
</style>
src/components/mapOverlay/index.vue
View file @ a96226ca
......@@ -37,7 +37,6 @@
const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
el.style.left = pixel.x - this.width / 2 + 'px'
el.style.top = pixel.y - this.height / 2 + 'px'
console.log(el)
}
}
}
......@@ -75,7 +74,6 @@
-o-transform: rotate(45deg);
transform: rotate(45deg);
color: #ffffff;
text-align: center;
writing-mode: vertical-lr;
}
</style>
src/router/example.js
View file @ a96226ca
import demo1 from "../views/example/Demo1";
var demoRoutes = [
{
path: "/demo1",
name: "demo1",
component: demo1,
hidden: true
}
];
export default demoRoutes;
src/router/index.js
View file @ a96226ca
......@@ -13,7 +13,7 @@ let routes = [
{
path: '/',
component: Layout,
redirect: '/regionalPlate/index',
redirect: '/regionalPlate',
name: 'home',
meta: { title: '首页' },
hidden: true,
......@@ -26,7 +26,7 @@ let routes = [
component: Layout,
children: [
{
path: 'index',
path: '/regionalPlate',
name: 'regionalPlate',
hidden: false,
meta: { title: '户型查询' },
......@@ -34,27 +34,6 @@ let routes = [
}
]
},
{
path: '/soilBeatHeat',
hidden: false,
meta: { title: '土拍热度', icon: 'el-icon-location-outline' },
component: Layout,
children: [
{
path: '/soilBeatHeat',
name: 'soilBmaineatHeat',
hidden: false,
meta: { title: '土拍热度' },
component: () => import('@/views/SoilBeatHeat/index.vue'),
}
]
},
{
path: '/demo',
hidden: true,
meta: { title: 'demo', icon: 'el-icon-location-outline' },
component: () => import('@/views/RegionalPlate/demo.vue')
},
{
path: '/plateSupplyData',
hidden: false,
......@@ -85,6 +64,21 @@ let routes = [
}
]
},
{
path: '/detail',
hidden: false,
meta: { title: '楼盘详情' },
component: Layout,
children: [
{
path: '/propertiesDetail',
name: 'propertiesDetail',
hidden: false,
meta: { title: '楼盘详情' },
component: () => import('@/views/propertiesDetail/index.vue'),
}
]
},
{
path: "/login",
name: "login",
......
src/views/ProductAnalysis/index.vue
View file @ a96226ca
......@@ -78,14 +78,14 @@
}
},
histogramData: {
columns: ['houseTypeWidth', '主力产品', '下单用户', '下单率'],
columns: ['houseTypeWidth', 'mainProduction', 'mainProduction1', 'mainProduction2'],
rows: [
{ 'houseTypeWidth': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ 'houseTypeWidth': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ 'houseTypeWidth': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ 'houseTypeWidth': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ 'houseTypeWidth': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ 'houseTypeWidth': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
{ 'houseTypeWidth': '80-90', 'mainProduction': 1393, 'mainProduction1': 1093, 'mainProduction2': 0.32 },
{ 'houseTypeWidth': '80-90', 'mainProduction': 3530, 'mainProduction1': 3230, 'mainProduction2': 0.26 },
{ 'houseTypeWidth': '80-90', 'mainProduction': 2923, 'mainProduction1': 2623, 'mainProduction2': 0.76 },
{ 'houseTypeWidth': '80-90', 'mainProduction': 1723, 'mainProduction1': 1423, 'mainProduction2': 0.49 },
{ 'houseTypeWidth': '80-90', 'mainProduction': 3792, 'mainProduction1': 3492, 'mainProduction2': 0.323 },
{ 'houseTypeWidth': '80-90', 'mainProduction': 4593, 'mainProduction1': 4293, 'mainProduction2': 0.78 }
]
},
chartSettings : {
......
src/views/RegionalPlate/demoData.js
View file @ a96226ca
......@@ -46,8 +46,8 @@ export const regionData = [
state: 1
},
{
lng: 117.20404,
lat: 39.14547,
lng: 117.20504,
lat: 39.14320,
text: '楼盘2',
state: 1
}
......
src/views/RegionalPlate/index.vue
View file @ a96226ca
<template>
<section class="main">
<baidu-map :center="map.center" @ready="mapReadied" :zoom="map.setZoom" @zoomend="zoomChanged" :scroll-wheel-zoom="true" class="map">
<baidu-map :center="map.center" @ready="mapReadied" :min-zoom="10" :zoom="map.setZoom" @zoomend="zoomChanged" :scroll-wheel-zoom="true" class="map">
<!-- 展示蓝色圆形组件=====行政区域-->
<my-overlay
v-show="showType === 'region'"
......@@ -184,7 +184,7 @@
mounted() {
setTimeout(() => {
this.dataType.region = regionData
}, 3000)
}, 1000)
// 请求所有楼盘、行政区、板块的所有信息
},
created() {
......
src/views/SoilBeatHeat/index.vue deleted 100644 → 0
View file @ 250c24e7
<template>
<!-- 土拍热度-->
<section class="main">
<baidu-map :scroll-wheel-zoom="true" :center="map.center" :zoom="map.zoom" class="map">
<bm-control anchor="BMAP_ANCHOR_TOP_LEFT">
<div>
<el-date-picker
@change="showHeatMap"
v-model="monthVal"
value-format="yyyy-MM"
type="monthrange"
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份">
</el-date-picker>
</div>
</bm-control>
<!--热力图-->
<bml-heatmap :data="heatMapData" :max="100" :radius="20">
</bml-heatmap>
<!-- 标尺-->
<bm-scale anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale>
<!-- 缩放比例-->
<bm-navigation :showZoomInfo="false" :enableGeolocation="false" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
</baidu-map>
</section>
</template>
<script>
import { BmlHeatmap } from 'vue-baidu-map'
export default {
name: "SoilBeatHeat",
components: {
BmlHeatmap
},
data () {
return {
map: {
center: {
lng: 117.200, // 经度
lat: 39.133 // 纬度
},
zoom: 12
},
heatMapData: [
{lng: 117.300, lat: 39.143, count: 100},
{lng: 117.310, lat: 39.153, count: 80},
{lng: 117.320, lat: 39.163, count: 60}
],
monthVal: ''
}
},
methods: {
showHeatMap (val) {
console.log(val)
}
}
}
</script>
<style scoped>
.main, .map{
width: 100%;
height: 100%;
}
</style>
src/views/dashboard/index.vue deleted 100644 → 0
View file @ 250c24e7
<template>
<div class="dashboard-container">
<div class="dashboard-text">name:{{ name }}</div>
<div class="dashboard-text">roles:<span v-for="role in roles" :key="role">{{ role }}</span></div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'dashboard',
computed: {
...mapGetters([
'name',
'roles',
'authorities'
])
},
created() {
console.log('用户权限：', this.authorities)
}
}
</script>
<style lang="stylus" scoped>
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
</style>
src/views/example/Demo1.vue deleted 100644 → 0
View file @ 250c24e7
<template>
<section class="demo1">
src/views/example/Demo1.vue 文件的代码格式作为【标准的vue文件模板】
</section>
</template>
<script>
export default {
name: "demo1",
components: {},
props: {},
data() {
return {};
},
created() {},
mounted() {},
methods: {},
computed: {},
watch: {},
};
</script>
<style lang="stylus">
.demo1 {
text-align center
}
</style>
src/views/form/index.vue deleted 100644 → 0
View file @ 250c24e7
<template>
<div class="app-container">
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="Activity name">
<el-input v-model="form.name"/>
</el-form-item>
<el-form-item label="Activity zone">
<el-select v-model="form.region" placeholder="please select your zone">
<el-option label="Zone one" value="shanghai"/>
<el-option label="Zone two" value="beijing"/>
</el-select>
</el-form-item>
<el-form-item label="Activity time">
<el-col :span="11">
<el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;"/>
</el-col>
<el-col :span="2" class="line">-</el-col>
<el-col :span="11">
<el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time" style="width: 100%;"/>
</el-col>
</el-form-item>
<el-form-item label="Instant delivery">
<el-switch v-model="form.delivery"/>
</el-form-item>
<el-form-item label="Activity type">
<el-checkbox-group v-model="form.type">
<el-checkbox label="Online activities" name="type"/>
<el-checkbox label="Promotion activities" name="type"/>
<el-checkbox label="Offline activities" name="type"/>
<el-checkbox label="Simple brand exposure" name="type"/>
</el-checkbox-group>
</el-form-item>
<el-form-item label="Resources">
<el-radio-group v-model="form.resource">
<el-radio label="Sponsor"/>
<el-radio label="Venue"/>
</el-radio-group>
</el-form-item>
<el-form-item label="Activity form">
<el-input v-model="form.desc" type="textarea"/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Create</el-button>
<el-button @click="onCancel">Cancel</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
methods: {
onSubmit() {
this.$message('submit!')
},
onCancel() {
this.$message({
message: 'cancel!',
type: 'warning'
})
}
}
}
</script>
<style scoped>
.line{
text-align: center;
}
</style>
src/views/propertiesDetail/index.vue 0 → 100644
View file @ a96226ca
<template>
<section class="propertiesMain">
<header class="header">
<div class="back">
<el-link type="primary">返回</el-link>
</div>
<div class="name">
{{'家园'}}
</div>
<div class="bannerOptions">
<el-radio-group v-model="bannerType">
<el-radio-button :label="0">总图</el-radio-button>
<el-radio-button :label="1">立面</el-radio-button>
<el-radio-button :label="2">户型</el-radio-button>
</el-radio-group>
</div>
</header>
<main class="detailMain">
<!-- banner图划分-->
<div class="banner">
<div v-if="bannerType === 0">
<banner :banner-data="[10, 354, 23]"/>
</div>
<div v-if="bannerType === 1">
<banner :banner-data="[1, 2, 3, 4]"/>
</div>
<div v-if="bannerType === 2">
<banner :banner-data="[7, 8, 9]" />
</div>
</div>
<!-- 规划信息-->
<div class="planningInformation">
<div class="title">规划信息</div>
<div class="container">
<el-tag :key="i" v-for="i in 10" type="info" class="tagsInfo">{{i}}</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="singleData">
<el-table
:data="soilData"
border
style="width: 100%">
<el-table-column
v-for="item in colum"
:prop="item.prop"
:key="item.prop"
:label="item.label">
</el-table-column>
</el-table>
</div>
</div>
</div>
<!--销售信息-->
<div class="salesInfomation">
<div class="title">销售信息</div>
<div class="container"></div>
</div>
</main>
</section>
</template>
<script>
import { columData } from "./tableColum";
import banner from '@comp/bannerDetail'
export default {
name: "propertiesDetail",
components: {banner},
data () {
return {
bannerType: 0,
soilData: [
{
region: '西青区',
area: '所属区域',
landArea: '土地面积',
lotRatio: '容积率',
builtArea: '建筑面积',
floorPrice: '楼面价元',
buildingDensity: '建筑密度',
closingDate: '成交日期',
totalPrice: '成交价',
premium: '溢价',
transferee: '受让方',
}
]
}
},
methods: {
},
computed: {
colum () {
return columData
}
}
}
</script>
<style scoped lang="stylus">
.propertiesMain{
padding 0 20px
.header{
height 50px
line-height 50px
padding 0 10px 0 80px
position relative
overflow hidden
margin-bottom 15px
.back {
position absolute
left 0
}
.name {
float left
font-size 22px
font-family "Arial Black"
font-weight bold
}
.bannerOptions {
float right
}
}
.detailMain{
width 100%
.banner{
padding 0 80px
}
.planningInformation {
margin-top 20px
min-height 100px
padding 0 20px
border 2px solid rgb(222, 235, 247)
.container {
padding-left 20px
.tagsInfo {
margin-right 10px
}
}
}
.soilPhotoInformation {
border 2px solid rgb(222, 235, 247)
padding 0 20px
min-height 100px
margin 20px 0
padding-bottom 30px
.container {
.singleTitle {
font-size 15px
font-family sans-serif
font-weight 600
color #45aaf2
margin 20px 0
}
}
}
.salesInfomation {
border 2px solid rgb(222, 235, 247)
padding 0 20px
min-height 100px
}
.title {
line-height 2
font-size 18px
font-weight bold
font-family sans-serif
}
}
}
</style>
<style lang="stylus">
.propertiesMain{
.soilPhotoInformation{
.el-table__header-wrapper{
.el-table__header {
th {
background rgb(189,215, 238)
color #ffffff
text-align center
}
}
}
.el-table__body-wrapper{
.el-table__body {
td {
background-color: rgb(210, 222, 239);
color #000000
text-align center
}
}
}
}
}
</style>
src/views/propertiesDetail/tableColum.js 0 → 100644
View file @ a96226ca
export const columData = [
{
prop: 'region',
label: '行政分区'
},
{
prop: 'area',
label: '区域'
},
{
prop: 'landArea',
label: '土地面积'
},
{
prop: 'lotRatio',
label: '容积率'
},{
prop: 'builtArea',
label: '建筑面积'
},{
prop: 'buildingDensity',
label: '建筑密度'
},{
prop: 'floorPrice',
label: '楼面价元/m2'
},{
prop: 'closingDate',
label: '成交日期'
},{
prop: 'totalPrice',
label: '成交总价(亿)'
},{
prop: 'premium',
label: '溢价'
},{
prop: 'transferee',
label: '受让方'
}
]
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