Skip to content

P
pudong-elevator-map
Commit 35728540 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

改版

parent 9dbc49a4
Hide whitespace changes
Inline Side-by-side
Showing with 213 additions and 266 deletions
src/main.js
View file @ 35728540
...@@ -6,7 +6,7 @@ import App from './App' ...@@ -6,7 +6,7 @@ import App from './App'
import router from './router' import router from './router'
import common from './util/common' import common from './util/common'
import api from './util/api' import api from './util/api'
import {Icon, Button, Collapse, Panel, Modal, Table} from 'view-design' import {Icon, Button, Collapse, Panel, Modal, Table, Drawer} from 'view-design'
import 'view-design/dist/styles/iview.css' import 'view-design/dist/styles/iview.css'
Vue.config.productionTip = false Vue.config.productionTip = false
...@@ -18,6 +18,7 @@ Vue.component('Collapse', Collapse) ...@@ -18,6 +18,7 @@ Vue.component('Collapse', Collapse)
Vue.component('Panel', Panel) Vue.component('Panel', Panel)
Vue.component('Modal', Modal) Vue.component('Modal', Modal)
Vue.component('Table', Table) Vue.component('Table', Table)
Vue.component('Drawer', Drawer)
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
el: '#app', el: '#app',
......
src/util/api.js
View file @ 35728540
...@@ -4,7 +4,7 @@ case 'production': ...@@ -4,7 +4,7 @@ case 'production':
BASE_URL = 'http://211.136.105.193/elev/static/' BASE_URL = 'http://211.136.105.193/elev/static/'
break break
default: default:
BASE_URL = 'http://localhost:8081/static/' BASE_URL = 'http://localhost:8080/static/'
}; };
export default { export default {
BASE_URL, BASE_URL,
......
src/util/common.js
View file @ 35728540
...@@ -11,6 +11,21 @@ export default{ ...@@ -11,6 +11,21 @@ export default{
return [] return []
} }
}, },
switchStatus(status) {
status = Number(status)
switch (status) {
case 0:
return '未签约'
case 1:
return '已公告'
case 2:
return '已开工'
case 3:
return '已完工'
default:
return '暂无状态'
}
},
similar(str1, str2) { similar(str1, str2) {
if (!str1 || !str2 || typeof(str1) != 'string' || typeof(str2) != 'string') { if (!str1 || !str2 || typeof(str1) != 'string' || typeof(str2) != 'string') {
console.error('参数需要是string类型！') console.error('参数需要是string类型！')
......
src/views/main.vue
View file @ 35728540
<template> <template>
<div id="container"> <div id="container">
<template v-if="curStreetData.name && curStreet"> <template v-if="curStreetData.name && curStreet">
<Collapse :value="[curStreet]" @on-change="handleSelect" class="menu" accordion> <Collapse :value="[curStreet]" class="menu" accordion>
<Panel v-for="street in streetList" :key="street" :name="street"> <Panel v-for="street in streetList" :key="street" :name="street">
{{curStreetData.name}}小区列表 {{curStreetData.name}}小区列表
<div slot="content" class="community-list"> <div slot="content" class="community-list">
...@@ -19,6 +19,34 @@ ...@@ -19,6 +19,34 @@
</Panel> </Panel>
</Collapse> </Collapse>
</template> </template>
<Drawer :closable="false" width="24%" v-model="detailDrawer">
<div slot="header">
<h2>{{detailDrawerData.community}}</h2>
<p style="font-weight:normal;color:#666;margin-top:.5rem;">{{detailDrawerData.buildingNo}}</p>
</div>
<div class="drawer-content">
<div>
<p class="title">加装条件</p>
<div class="condition" :style="switchColor(detailDrawerData.color)"/>
</div>
<div>
<p class="title">居民意愿度</p>
<!-- <p class="title">加装可能性</p> -->
<img v-for="i in switchStarNum(detailDrawerData.intention)" :key="i" class="star" src="@/assets/images/star1.png"/>
</div>
<div>
<p class="title">加装意愿收集</p>
<p class="sub-title"><span>已投/应投</span><span>{{Math.round((detailDrawerData.agree + detailDrawerData.disagree) / detailDrawerData.totUnit * 100)}}%</span></p>
<img class="bar" :src="require(`@/assets/images/${switchImg((detailDrawerData.agree + detailDrawerData.disagree) / detailDrawerData.totUnit)}.png`)"/>
<p class="sub-title"><span>同意/不同意</span><span>{{Math.round(detailDrawerData.ratio * 100)}}%</span></p>
<img class="bar" :src="require(`@/assets/images/${switchImg(detailDrawerData.ratio)}.png`)"/>
</div>
<div>
<p class="title">加装情况</p>
<span class="status"><img src="@/assets/images/signed.png"/>{{$com.switchStatus(detailDrawerData.status)}}</span>
</div>
</div>
</Drawer>
<Modal v-model="detailModal" width="90%" :footer-hide="true"> <Modal v-model="detailModal" width="90%" :footer-hide="true">
<Table v-if="detailModal" :columns="columns" :data="detailData" size="small" :max-height="tableHeight"/> <Table v-if="detailModal" :columns="columns" :data="detailData" size="small" :max-height="tableHeight"/>
</Modal> </Modal>
...@@ -27,16 +55,14 @@ ...@@ -27,16 +55,14 @@
<script> <script>
const {AMap} = window const {AMap} = window
const star1 = require('@/assets/images/star1.png')
const star2 = require('@/assets/images/star2.png')
const star3 = require('@/assets/images/star3.png')
// import {mockCommunity} from '@/mock/index.js'
import axios from 'axios' import axios from 'axios'
export default { export default {
name: 'Map3D', name: 'Map3D',
data() { data() {
return { return {
map: null, map: null,
detailDrawer: false,
detailDrawerData: {},
buildingOptions: { buildingOptions: {
hideWithoutStyle:false,//是否隐藏设定区域外的楼块 hideWithoutStyle:false,//是否隐藏设定区域外的楼块
areas:[ areas:[
...@@ -261,14 +287,10 @@ export default { ...@@ -261,14 +287,10 @@ export default {
methods: { methods: {
initMap(area) { initMap(area) {
this.map = new AMap.Map('container', this.mapConfig) this.map = new AMap.Map('container', this.mapConfig)
// this.initLayers()
this.addController() this.addController()
// this.addMarker()
// this.addEvents() // TODO 添加完数据后要恢复
this.highlightPudong()
this.initMenu() this.initMenu()
}, },
initMenu() { initMenu() { // 初始化列表菜单
const streets = Object.keys(this.refer) const streets = Object.keys(this.refer)
if (this.$route.query && this.$route.query.name) { // 判断路由有街镇则显示该街镇列表，没街镇显示所有街镇列表 if (this.$route.query && this.$route.query.name) { // 判断路由有街镇则显示该街镇列表，没街镇显示所有街镇列表
const streetName = this.$route.query.name const streetName = this.$route.query.name
...@@ -281,8 +303,7 @@ export default { ...@@ -281,8 +303,7 @@ export default {
this.streetList = [result] this.streetList = [result]
this.$nextTick(() => { // 为了展开默认街镇小区列表 this.$nextTick(() => { // 为了展开默认街镇小区列表
this.curStreet = result this.curStreet = result
// this.handleSelect([this.curStreet]) this.initStreet()
this.initStreetAndBuilding()
}) })
} else { } else {
this.streetList = streets this.streetList = streets
...@@ -302,19 +323,7 @@ export default { ...@@ -302,19 +323,7 @@ export default {
}) })
this.detailModal = true this.detailModal = true
}, },
handleSelect(key) { initStreet() { // 初始化街镇
// if (!key || key.length <= 0) return
// const streetData = require(`@/mock/${key[0]}.js`).default
// this.curStreetData = streetData
// this.map.setZoomAndCenter(15, streetData.location)
// if (this.curStreetPolygon) {
// // this.map.remove(this.curStreetPolygon) // 移除之前的街镇区域底色
// this.map.clearMap()
// }
// this.initLayers(key)
// this.highlightArea(streetData)
},
initStreetAndBuilding() {
const streetData = require(`@/mock/${this.curStreet}.js`).default const streetData = require(`@/mock/${this.curStreet}.js`).default
this.curStreetData = streetData this.curStreetData = streetData
this.map.setZoomAndCenter(15, streetData.location) this.map.setZoomAndCenter(15, streetData.location)
...@@ -322,28 +331,13 @@ export default { ...@@ -322,28 +331,13 @@ export default {
this.map.clearMap() this.map.clearMap()
} }
this.highlightArea(streetData) this.highlightArea(streetData)
// this.initLayers(key)
}, },
initLayers() { // 添加基础图层和建筑物图层 initLayers() { // 添加基础图层和建筑物图层
// const keys = Object.keys(this.areaList)
// if (keys.length <= 0) return
// const communityList = []
// if (street) {
// communityList.push(...this.areaList[street].community)
// if (this.buildingData) {
// communityList.push(...this.buildingData.community) // 添加个别不同色的，手动上色的楼栋
// }
// } else {
// keys.forEach(key => {
// communityList.push(...this.areaList[key].community)
// })
// }
if (!this.curStreetData.name) return if (!this.curStreetData.name) return
const communityList = [...this.curStreetData.community] const communityList = [...this.curStreetData.community]
if (this.buildingData) { if (this.buildingData) {
communityList.push(...this.buildingData.community) communityList.push(...this.buildingData.community)
} }
const buildingOptions = { const buildingOptions = {
areas: communityList.map(item => { areas: communityList.map(item => {
if (item.type != 'building') { if (item.type != 'building') {
...@@ -410,6 +404,7 @@ export default { ...@@ -410,6 +404,7 @@ export default {
}) })
prism.transparent = true prism.transparent = true
object3d.add(prism) object3d.add(prism)
return object3d
}, },
addController() { // 添加地图控制器 addController() { // 添加地图控制器
this.map.addControl(new AMap.ControlBar({ this.map.addControl(new AMap.ControlBar({
...@@ -421,133 +416,144 @@ export default { ...@@ -421,133 +416,144 @@ export default {
} }
})) }))
}, },
addMarker(name) { addMarker(name) { // 点击小区后展示各楼栋的marker
this.map.remove(this.markerList) // 移除之前的marker this.map.remove(this.markerList) // 移除之前的marker
if (!this.buildingData) return if (!this.buildingData) return
const whichImage = (intention) => {
if (intention.indexOf('一') >= 0) {
return {
src: star1,
size: [10, 15],
}
} else if (intention.indexOf('二') >= 0 || intention.indexOf('两') >= 0) {
return {
src: star2,
size: [15, 15],
}
} else if (intention.indexOf('三') >= 0) {
return {
src: star3,
size: [20, 15],
}
}
}
const markerList = [] const markerList = []
this.buildingData.building.forEach(item => { axios.get('http://yapi.omniview.pro/mock/279/public/elv/consentRate').then(res => {
const buildingName = item.name && (item.name + '').replace('(补)', '').replace('（补）', '') const mock = [{
if (buildingName.indexOf(name) < 0 && (item.buildingNo + '').indexOf(name) < 0) return 'unitNo': '20号',
if(item.lon && item.lat && item.intention) { 'streetId': '12345',
const image = whichImage(item.intention) 'streetName': '街道',
const style = { 'sectId': '123123',
img:image.src, 'sectName': '浦东龙阳花苑',
size:image.size,//可见区域的大小 'unitId': '112',
fitZoom:18,//最合适的级别 'unitAddr': '门牌地址',
scaleFactor:2,//地图放大一级的缩放比例系数 'totUnit': 33,//应投
maxScale:1.4,//最大放大比例 'ratio': 0.15233445,//同意率
minScale:0.8//最小放大比例 'agree': 10,//统一
} 'disagree': 10, //不同意
const marker = new AMap.ElasticMarker({ 'status' : '2'
position: [item.lon, item.lat], }]
zooms:[16,20], const communityName = name && (name + '').replace('(补)', '').replace('（补）', '')
extData: { const datasource = mock.filter(e => e.sectName.indexOf(communityName) >= 0 || communityName.indexOf(e.sectName) >= 0) // 筛选出返回数据中的相关小区数据
title: item.buildingNo, const initMarker = (item) => { // 配置楼栋的marker
content: `居民意愿度:${item.intention}` const buildingName = item.name && (item.name + '').replace('(补)', '').replace('（补）', '')
}, if (buildingName.indexOf(name) < 0 && (item.buildingNo + '').indexOf(name) < 0) return // （筛选出点击的小区的楼栋）楼栋的小区名和name一致则往下走
styles:[ const curObj = datasource.find(e => e.unitNo.indexOf(item.buildingNo) >= 0 || item.buildingNo.indexOf(e.unitNo) >= 0) // 查找出返回数据中的同一幢楼栋数据
{ if (!curObj) return
icon:{ if(item.lon && item.lat && item.intention) {
ancher:[0,30],//锚点 const marker = new AMap.Marker({
...style, position: [item.lon, item.lat],
} icon: new AMap.Icon({
}, size: [30, 10],
{ image: require(`@/assets/images/${this.switchImg(curObj.ratio)}.png`),
icon:{ }),
ancher:[0,45],//锚点 extData: {
...style, community: item.name,
} buildingNo: item.buildingNo,
}, intention: item.intention,
{ lon: item.lon,
icon:{ lat: item.lat,
ancher:[0,60],//锚点 color: item.color,
...style, ...curObj
}
}, },
{ }).on('click', e => {
icon:{ const location = [e.lnglat.getLng(), e.lnglat.getLat()]
ancher:[0,80],//锚点 this.detailDrawer = true
...style, this.detailDrawerData = marker.getExtData()
}
}, const LENGTH = 0.00015
{ const {lon, lat} = this.detailDrawerData
icon:{ const po1 = [
ancher:[0,100],//锚点 Number(lon) + LENGTH,
...style, lat,
} ]
} const po2 = [
], lon,
zoomStyleMapping: { Number(lat) + LENGTH
16:0, ]
17:1, const po3 = [
18:2, Number(lon) - LENGTH,
19:3, lat,
20:4, ]
} const po4 = [
}).on('click', e => { lon,
const location = [e.lnglat.getLng(), e.lnglat.getLat()] Number(lat) - LENGTH
this.showDetail(e, location, marker.getExtData()) ]
}) const prism = this.addPrism([po1, po2, po3, po4, po1])
markerList.push(marker)
this.showDetail(e, location, marker.getExtData(), prism)
})
markerList.push(marker)
}
} }
this.buildingData.building.forEach(initMarker) // 遍历楼栋数据
this.map.add(markerList)
this.markerList = markerList
}) })
this.map.add(markerList)
this.markerList = markerList
// new AMap.Marker({
// map: this.map,
// position: [121.498973,31.218018],
// extData: {
// title: '测试点击',
// content: '测试额外附加数据',
// },
// icon: new AMap.Icon({
// size: new AMap.Size(30, 30), //图标大小
// image: require('@/assets/images/attorney.png'),
// // imageOffset: new AMap.Pixel(0, -60)
// })
// }).on('click', e => {
// const location = [e.lnglat.getLng(), e.lnglat.getLat()]
// this.showDetail(e, location, marker.getExtData())
// })
}, },
showDetail(e, location, data) { switchImg(ratio) {
// TODO if (!ratio) ratio = 0
const infoWindow = new AMap.InfoWindow({ if (ratio < 1) {
content: ` ratio = ratio * 100
}
if (ratio <= 10) return 1
if (ratio <= 20) return 2
if (ratio <= 30) return 3
if (ratio <= 40) return 4
if (ratio <= 50) return 5
if (ratio <= 60) return 6
if (ratio <= 70) return 7
if (ratio <= 80) return 8
if (ratio <= 90) return 9
if (ratio <= 100) return 10
},
switchColor(color) {
if (!color) return null
if (color.indexOf('绿') >= 0) return {'background-color': '#8fd618'}
if (color.indexOf('黄') >= 0) return {'background-color': 'gold'}
if (color.indexOf('红') >= 0) return {'background-color': 'red'}
},
switchStarNum(intention) {
if (!intention) return 0
if (intention.indexOf('一') >= 0) return 1
if (intention.indexOf('二') >= 0 || intention.indexOf('两') >= 0) return 2
if (intention.indexOf('三') >= 0) return 3
},
showDetail(e, location, data, prism = null) {
let infoWindow = null
if (data.title && data.content) {
infoWindow = new AMap.InfoWindow({
content: `
<div> <div>
<b>${data.title}</b> <b>${data.title}</b>
<p>${data.content || '暂无其他信息'}</p> <p>${data.content || '暂无其他信息'}</p>
</div> </div>
` `
}) })
} else {
const img = require(`@/assets/images/${this.switchImg(data.ratio)}.png`)
infoWindow = new AMap.InfoWindow({
content: `
<div>
<b>${data.community}</b>
<p style="margin:0.5rem 0;">${data.community} ${data.buildingNo}</p>
<p style="display:flex;align-items:center;justify-content:space-between;">
<img style="width:80%;height:2rem;margin:0.5rem 0;" src='${img}'"/>
<b style="color:#34a2ff;">${Math.round(data.ratio * 100)}%</b>
</p>
</div>
`
}).on('close', e => {
if (prism) {
prism.clear()
}
})
}
infoWindow.open(this.map, location) infoWindow.open(this.map, location)
}, },
addEvents() { highlightArea(area) { // 高亮区域
this.map.on('click', e => {
const location = [e.lnglat.getLng(), e.lnglat.getLat()]
// this.map.setZoomAndCenter(18.8, location)
console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
})
},
highlightArea(area) {
if (!area.path || area.path <= 0) return if (!area.path || area.path <= 0) return
const polygon = new AMap.Polygon({ const polygon = new AMap.Polygon({
zIndex: 1, zIndex: 1,
...@@ -561,121 +567,13 @@ export default { ...@@ -561,121 +567,13 @@ export default {
console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat()) console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
}) })
this.curStreetPolygon = polygon this.curStreetPolygon = polygon
// const outer = [
// new AMap.LngLat(-360,90,true),
// new AMap.LngLat(-360,-90,true),
// new AMap.LngLat(360,-90,true),
// new AMap.LngLat(360,90,true),
// ]
// const holes = [area.path]
// const pathArray = [
// outer
// ]
// pathArray.push.apply(pathArray,holes)
// const polygon1 = new AMap.Polygon( {
// pathL:pathArray,
// //线条颜色，使用16进制颜色代码赋值。默认值为#006600
// strokeColor: 'rgb(20,164,173)',
// strokeWeight: 4,
// //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
// strokeOpacity:0.5,
// //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
// fillColor: 'rgba(255,255,255,0.3)',
// //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
// fillOpacity: 1,
// //轮廓线样式，实线:solid，虚线:dashed
// strokeStyle:'dashed',
// /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在
// ie9+浏览器有效 取值：
// 实线：[0,0,0]
// 虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
// 点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
// 线和10个像素的空白 （如此反复）组成的虚线*/
// strokeDasharray:[10,2,10]
// })
// polygon1.setPath(pathArray)
// this.map.add(polygon1)
this.map.add([polygon]) this.map.add([polygon])
}, },
highlightPudong() {
// new AMap.DistrictSearch({
// level: 'district',
// subdistric: 1,
// }).search('浦东新区', (status, result) => {
// console.log('---浦东新区街镇---', result.districtList[0].districtList)
// })
// 给浦东新区添加蓝色遮罩
// new AMap.DistrictSearch({
// level: 'district',
// extensions: 'all',
// subdistric: 1,
// }).search('浦东新区', (staus, result) => {
// var bounds = result.districtList[0].boundaries
// var polygon = new AMap.Polygon({
// strokeWeight: 1,
// path: bounds[0],
// fillOpacity: 0.4,
// fillColor: '#80d8ff',
// strokeColor: '#0091ea'
// })
// this.map.add([polygon])
// })
// 只显示浦东新区，其他置灰
// new AMap.DistrictSearch({
// extensions:'all',
// subdistrict:0
// }).search('浦东新区',(status,result) => {
// // 外多边形坐标数组和内多边形坐标数组
// const outer = [
// new AMap.LngLat(-360,90,true),
// new AMap.LngLat(-360,-90,true),
// new AMap.LngLat(360,-90,true),
// new AMap.LngLat(360,90,true),
// ]
// const holes = result.districtList[0].boundaries
// const pathArray = [
// outer
// ]
// pathArray.push.apply(pathArray,holes)
// const polygon = new AMap.Polygon( {
// pathL:pathArray,
// //线条颜色，使用16进制颜色代码赋值。默认值为#006600
// strokeColor: 'rgb(20,164,173)',
// strokeWeight: 4,
// //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
// strokeOpacity:0.5,
// //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
// fillColor: 'rgba(255,255,255,0.3)',
// //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
// fillOpacity: 1,
// //轮廓线样式，实线:solid，虚线:dashed
// strokeStyle:'dashed',
// /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在
// ie9+浏览器有效 取值：
// 实线：[0,0,0]
// 虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
// 点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
// 线和10个像素的空白 （如此反复）组成的虚线*/
// strokeDasharray:[10,2,10]
// })
// polygon.setPath(pathArray)
// this.map.add(polygon)
// })
},
}, },
computed: { computed: {
tableHeight() { tableHeight() {
return screen.height / 2 return screen.height / 2
}, },
// buildingData() {
// const data = require(`@/mock/${this.curStreet}-building.js`)
// return (data && data.default) || null
// }
}, },
watch: { watch: {
async curStreet(cur) { async curStreet(cur) {
...@@ -704,8 +602,6 @@ export default { ...@@ -704,8 +602,6 @@ export default {
top 1rem top 1rem
left 1rem left 1rem
z-index 100 z-index 100
// max-height 90vh
// overflow-y auto
</style> </style>
<style lang="stylus"> <style lang="stylus">
.amap-logo .amap-logo
...@@ -726,4 +622,39 @@ export default { ...@@ -726,4 +622,39 @@ export default {
button button
text-align left text-align left
font-size 1rem font-size 1rem
.drawer-content
>div
margin-bottom 2rem
.title
font-size 1rem
font-weight bold
margin-bottom .5rem
.sub-title
display flex
justify-content space-between
margin .5rem 0
span
font-size .9rem
color #666
&:last-child
font-weight bold
color #34a2ff
.condition
width 50%
height 3rem
background #8fd618
border-radius .2rem
img.star
width 10%
margin-right 5%
img.bar
width 100%
height 2rem
.status
display flex
align-items center
img
width 3rem
height @width
margin-right 1rem
</style> </style>
src/views/test.vue
View file @ 35728540
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</div> </div>
</template> </template>
// <script> <script>
// const {AMap} = window // const {AMap} = window
// const star1 = require('@/assets/images/star1.png') // const star1 = require('@/assets/images/star1.png')
// const star2 = require('@/assets/images/star2.png') // const star2 = require('@/assets/images/star2.png')
......
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