Skip to content

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

改版

parent 9dbc49a4
Show 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'
import router from './router'
import common from './util/common'
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'
Vue.config.productionTip = false
......@@ -18,6 +18,7 @@ Vue.component('Collapse', Collapse)
Vue.component('Panel', Panel)
Vue.component('Modal', Modal)
Vue.component('Table', Table)
Vue.component('Drawer', Drawer)
/* eslint-disable no-new */
new Vue({
el: '#app',
......
src/util/api.js
View file @ 35728540
......@@ -4,7 +4,7 @@ case 'production':
BASE_URL = 'http://211.136.105.193/elev/static/'
break
default:
BASE_URL = 'http://localhost:8081/static/'
BASE_URL = 'http://localhost:8080/static/'
};
export default {
BASE_URL,
......
src/util/common.js
View file @ 35728540
......@@ -11,6 +11,21 @@ export default{
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) {
if (!str1 || !str2 || typeof(str1) != 'string' || typeof(str2) != 'string') {
console.error('参数需要是string类型！')
......
src/views/main.vue
View file @ 35728540
<template>
<div id="container">
<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">
{{curStreetData.name}}小区列表
<div slot="content" class="community-list">
......@@ -19,6 +19,34 @@
</Panel>
</Collapse>
</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">
<Table v-if="detailModal" :columns="columns" :data="detailData" size="small" :max-height="tableHeight"/>
</Modal>
......@@ -27,16 +55,14 @@
<script>
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'
export default {
name: 'Map3D',
data() {
return {
map: null,
detailDrawer: false,
detailDrawerData: {},
buildingOptions: {
hideWithoutStyle:false,//是否隐藏设定区域外的楼块
areas:[
......@@ -261,14 +287,10 @@ export default {
methods: {
initMap(area) {
this.map = new AMap.Map('container', this.mapConfig)
// this.initLayers()
this.addController()
// this.addMarker()
// this.addEvents() // TODO 添加完数据后要恢复
this.highlightPudong()
this.initMenu()
},
initMenu() {
initMenu() { // 初始化列表菜单
const streets = Object.keys(this.refer)
if (this.$route.query && this.$route.query.name) { // 判断路由有街镇则显示该街镇列表，没街镇显示所有街镇列表
const streetName = this.$route.query.name
......@@ -281,8 +303,7 @@ export default {
this.streetList = [result]
this.$nextTick(() => { // 为了展开默认街镇小区列表
this.curStreet = result
// this.handleSelect([this.curStreet])
this.initStreetAndBuilding()
this.initStreet()
})
} else {
this.streetList = streets
......@@ -302,19 +323,7 @@ export default {
})
this.detailModal = true
},
handleSelect(key) {
// 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() {
initStreet() { // 初始化街镇
const streetData = require(`@/mock/${this.curStreet}.js`).default
this.curStreetData = streetData
this.map.setZoomAndCenter(15, streetData.location)
......@@ -322,28 +331,13 @@ export default {
this.map.clearMap()
}
this.highlightArea(streetData)
// this.initLayers(key)
},
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
const communityList = [...this.curStreetData.community]
if (this.buildingData) {
communityList.push(...this.buildingData.community)
}
const buildingOptions = {
areas: communityList.map(item => {
if (item.type != 'building') {
......@@ -410,6 +404,7 @@ export default {
})
prism.transparent = true
object3d.add(prism)
return object3d
},
addController() { // 添加地图控制器
this.map.addControl(new AMap.ControlBar({
......@@ -421,116 +416,115 @@ export default {
}
}))
},
addMarker(name) {
addMarker(name) { // 点击小区后展示各楼栋的marker
this.map.remove(this.markerList) // 移除之前的marker
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 = []
this.buildingData.building.forEach(item => {
axios.get('http://yapi.omniview.pro/mock/279/public/elv/consentRate').then(res => {
const mock = [{
'unitNo': '20号',
'streetId': '12345',
'streetName': '街道',
'sectId': '123123',
'sectName': '浦东龙阳花苑',
'unitId': '112',
'unitAddr': '门牌地址',
'totUnit': 33,//应投
'ratio': 0.15233445,//同意率
'agree': 10,//统一
'disagree': 10, //不同意
'status' : '2'
}]
const communityName = name && (name + '').replace('(补)', '').replace('（补）', '')
const datasource = mock.filter(e => e.sectName.indexOf(communityName) >= 0 || communityName.indexOf(e.sectName) >= 0) // 筛选出返回数据中的相关小区数据
const initMarker = (item) => { // 配置楼栋的marker
const buildingName = item.name && (item.name + '').replace('(补)', '').replace('（补）', '')
if (buildingName.indexOf(name) < 0 && (item.buildingNo + '').indexOf(name) < 0) return
if (buildingName.indexOf(name) < 0 && (item.buildingNo + '').indexOf(name) < 0) return // （筛选出点击的小区的楼栋）楼栋的小区名和name一致则往下走
const curObj = datasource.find(e => e.unitNo.indexOf(item.buildingNo) >= 0 || item.buildingNo.indexOf(e.unitNo) >= 0) // 查找出返回数据中的同一幢楼栋数据
if (!curObj) return
if(item.lon && item.lat && item.intention) {
const image = whichImage(item.intention)
const style = {
img:image.src,
size:image.size,//可见区域的大小
fitZoom:18,//最合适的级别
scaleFactor:2,//地图放大一级的缩放比例系数
maxScale:1.4,//最大放大比例
minScale:0.8//最小放大比例
}
const marker = new AMap.ElasticMarker({
const marker = new AMap.Marker({
position: [item.lon, item.lat],
zooms:[16,20],
icon: new AMap.Icon({
size: [30, 10],
image: require(`@/assets/images/${this.switchImg(curObj.ratio)}.png`),
}),
extData: {
title: item.buildingNo,
content: `居民意愿度:${item.intention}`
},
styles:[
{
icon:{
ancher:[0,30],//锚点
...style,
}
},
{
icon:{
ancher:[0,45],//锚点
...style,
}
},
{
icon:{
ancher:[0,60],//锚点
...style,
}
community: item.name,
buildingNo: item.buildingNo,
intention: item.intention,
lon: item.lon,
lat: item.lat,
color: item.color,
...curObj
},
{
icon:{
ancher:[0,80],//锚点
...style,
}
},
{
icon:{
ancher:[0,100],//锚点
...style,
}
}
],
zoomStyleMapping: {
16:0,
17:1,
18:2,
19:3,
20:4,
}
}).on('click', e => {
const location = [e.lnglat.getLng(), e.lnglat.getLat()]
this.showDetail(e, location, marker.getExtData())
this.detailDrawer = true
this.detailDrawerData = marker.getExtData()
const LENGTH = 0.00015
const {lon, lat} = this.detailDrawerData
const po1 = [
Number(lon) + LENGTH,
lat,
]
const po2 = [
lon,
Number(lat) + LENGTH
]
const po3 = [
Number(lon) - LENGTH,
lat,
]
const po4 = [
lon,
Number(lat) - LENGTH
]
const prism = this.addPrism([po1, po2, po3, po4, po1])
this.showDetail(e, location, marker.getExtData(), prism)
})
markerList.push(marker)
}
})
}
this.buildingData.building.forEach(initMarker) // 遍历楼栋数据
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) {
// TODO
const infoWindow = new AMap.InfoWindow({
switchImg(ratio) {
if (!ratio) ratio = 0
if (ratio < 1) {
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>
<b>${data.title}</b>
......@@ -538,16 +532,28 @@ export default {
</div>
`
})
infoWindow.open(this.map, location)
},
addEvents() {
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())
} 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)
},
highlightArea(area) {
highlightArea(area) { // 高亮区域
if (!area.path || area.path <= 0) return
const polygon = new AMap.Polygon({
zIndex: 1,
......@@ -561,121 +567,13 @@ export default {
console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
})
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])
},
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: {
tableHeight() {
return screen.height / 2
},
// buildingData() {
// const data = require(`@/mock/${this.curStreet}-building.js`)
// return (data && data.default) || null
// }
},
watch: {
async curStreet(cur) {
......@@ -704,8 +602,6 @@ export default {
top 1rem
left 1rem
z-index 100
// max-height 90vh
// overflow-y auto
</style>
<style lang="stylus">
.amap-logo
......@@ -726,4 +622,39 @@ export default {
button
text-align left
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>
src/views/test.vue
View file @ 35728540
......@@ -23,7 +23,7 @@
</div>
</template>
// <script>
<script>
// const {AMap} = window
// const star1 = require('@/assets/images/star1.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