1559 lines
35 KiB
Vue
1559 lines
35 KiB
Vue
<template>
|
||
<div class="map">
|
||
<div id="map" ref="rootmap" />
|
||
<div class="community-info" v-show="isShowInfo">
|
||
<div class="community-info__close" title="关闭" @click="closeInfo">
|
||
<i class="iconClean iconfont"></i>
|
||
</div>
|
||
<div class="community-info__header">
|
||
<div class="user">
|
||
<span>{{ formatName(info.name) }}</span>
|
||
</div>
|
||
<h2>{{ info.name }}</h2>
|
||
<h3>{{ info.gpsDesc }}</h3>
|
||
<p>最后更新时间：{{ info.lastUpdateTime }}</p>
|
||
<div class="community-info__header--status">
|
||
<div :style="{color: info.onlineStatus === '1' ? '#2EA222' : '#F46' }">
|
||
<i class="iconfont iconzhuangtai"></i>
|
||
<span>设备{{ info.onlineStatus === '1' ? '在线' : '离线' }}</span>
|
||
</div>
|
||
<div>
|
||
<i class="iconfont icondianliang"></i>
|
||
<span>剩余{{ info.electricQuantity }}%</span>
|
||
</div>
|
||
</div>
|
||
<div class="community-info__header--info">
|
||
<div class="community-info__header--info-item" v-for="(item, index) in testItem" :key="item.name">
|
||
<div class="left">
|
||
<div :style="{backgroundColor: item.color}">
|
||
<i :class="item.icon" class="iconfont"></i>
|
||
</div>
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
<i :style="{color: (testData[index] && testData[index].abnormalStatus === '1') ? '#F46' : ''}">{{ testData[index] ? testData[index].itemValue : '-' }}{{ index === '1' ? '℃' : '' }}</i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="community-info__wrapper">
|
||
<div class="community-info__title">
|
||
<h2>人员信息</h2>
|
||
<span :style="{backgroundColor: userStatusColor}">{{ userStatus }}</span>
|
||
</div>
|
||
<div class="community-info__item">
|
||
<label>姓名</label>
|
||
<span>{{ info.name}}</span>
|
||
</div>
|
||
<div class="community-info__item">
|
||
<label>性别</label>
|
||
<span>{{ info.sex === '1' ? '男' : '女' }}</span>
|
||
</div>
|
||
<div class="community-info__item">
|
||
<label>年龄</label>
|
||
<span>{{ info.age }}</span>
|
||
</div>
|
||
<div class="community-info__item">
|
||
<label>所属地区</label>
|
||
<span>{{ info.areaName }}</span>
|
||
</div>
|
||
<div class="community-info__item">
|
||
<label>联系电话</label>
|
||
<span>{{ info.phone }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="map-menu">
|
||
<div class="map-menu__item">
|
||
<div class="map-layers__wrapper">
|
||
<div class="map-layers">
|
||
<div class="map-layers__item" @click="switchLayer(false)"
|
||
:class="[!isImageMap ? 'map-layers__item-active' : '']">
|
||
<img src="https://cdn.cunwuyun.cn/AppCommunityMap/dz.png" alt="">
|
||
<div class="map-layers__item--tag" :class="[!isImageMap ? 'map-layers__item--tag-active' : '']">地图</div>
|
||
</div>
|
||
<div class="map-layers__item" @click="switchLayer(true)"
|
||
:class="[isImageMap ? 'map-layers__item-active' : '']">
|
||
<img src="https://cdn.cunwuyun.cn/AppCommunityMap/yx.png" alt="">
|
||
<div class="map-layers__item--tag" :class="[isImageMap ? 'map-layers__item--tag-active' : '']">卫星</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<i class="iconfont iconEarth"></i>
|
||
</div>
|
||
<div class="map-menu__item" @click="changeZoom(true)">
|
||
<i class="iconfont iconfangda"></i>
|
||
</div>
|
||
<div class="map-menu__item" @click="changeZoom()">
|
||
<i class="iconfont iconsuoxiao"></i>
|
||
</div>
|
||
</div>
|
||
<div class="left-info" v-if="treeData.length">
|
||
<div class="left-info__wrapper" :class="[isShowLeft ? 'left-info__wrapper--active' : '']">
|
||
<div class="left-info__wrapper--container">
|
||
<div class="left-info__top">
|
||
<h2>监护地图</h2>
|
||
<div class="left-info__top--middle">
|
||
<div>
|
||
<span>人员总数：</span>
|
||
<i>{{ treeData[0].deviceCount }}</i>
|
||
</div>
|
||
<div>
|
||
<span>在线人数：</span>
|
||
<i>{{ treeData[0].onlineCount }}</i>
|
||
</div>
|
||
</div>
|
||
<el-progress type="circle" :stroke-width="3" color="#19D286" :percentage="percentage" :width="48"></el-progress>
|
||
</div>
|
||
<div class="left-info__middle">
|
||
<el-select v-model="search.status" size="small" placeholder="请选择在线状态" @change="getTree()">
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
<el-input placeholder="请输入姓名" prefix-icon="iconsearch iconfont" size="small" v-model="search.name">
|
||
</el-input>
|
||
</div>
|
||
<div class="left-info__tree">
|
||
<h2>设备列表</h2>
|
||
<el-tree
|
||
:filter-node-method="filterNode"
|
||
ref="tree"
|
||
:props="defaultProps"
|
||
node-key="parentId"
|
||
:data="treeData"
|
||
:default-expand-all="defaultExpandAll"
|
||
highlight-current
|
||
:default-expanded-keys="defaultExpanded"
|
||
@current-change="onTreeChange">
|
||
<template slot-scope="{ node, data }">
|
||
<div class="tree-user">
|
||
<i class="iconfont iconProlife" :style="{color: data.deviceOnlineStatus === '1' ? '#32a426' : '#777'}" v-if="data.type === '1'"></i>
|
||
<span>{{ data.type === '1' ? data.deviceName : data.areaName }}</span>
|
||
</div>
|
||
</template>
|
||
</el-tree>
|
||
<!-- :current-node-key="search.departmentId"
|
||
:default-expanded-keys="defaultExpanded"
|
||
:default-checked-keys="defaultChecked" -->
|
||
</div>
|
||
</div>
|
||
<div class="left-info__btn" @click="isShowLeft = !isShowLeft">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/zhjh/left.png">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import AMapLoader from '@amap/amap-jsapi-loader'
|
||
import {mapState} from 'vuex'
|
||
|
||
export default {
|
||
name: 'AppTutlageMap',
|
||
label: '监护地图',
|
||
provide() {
|
||
return {
|
||
root: this
|
||
}
|
||
},
|
||
props: {
|
||
instance: Function,
|
||
dict: Object
|
||
},
|
||
data() {
|
||
return {
|
||
map: null,
|
||
community: '',
|
||
isShowLeft: true,
|
||
isImageMap: false,
|
||
isShowInfo: false,
|
||
info: {},
|
||
defaultExpandAll: false,
|
||
satellite: null,
|
||
zoom: 11,
|
||
choosedId: '',
|
||
defaultProps: {
|
||
children: 'childrenArea',
|
||
label: 'areaName'
|
||
},
|
||
search: {
|
||
status: '3',
|
||
name: ''
|
||
},
|
||
testItem: [{
|
||
name: '体温',
|
||
icon: 'icontiwen',
|
||
color: '#6BA3DB'
|
||
}, {
|
||
name: '心率',
|
||
icon: 'iconxinlv',
|
||
color: '#72BB5C'
|
||
}, {
|
||
name: '血压',
|
||
icon: 'iconxueya',
|
||
color: '#7577CB'
|
||
}, {
|
||
name: '血氧',
|
||
icon: 'iconxueyang',
|
||
color: '#FF5656'
|
||
}],
|
||
defaultExpanded: [],
|
||
testData: [],
|
||
treeData: [],
|
||
center: []
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(['user']),
|
||
|
||
options () {
|
||
return [{
|
||
value: '3',
|
||
label: '全部'
|
||
}, {
|
||
value: '1',
|
||
label: '在线'
|
||
}, {
|
||
value: '0',
|
||
label: '离线'
|
||
}]
|
||
},
|
||
|
||
userStatus () {
|
||
if (this.info.abnormalStatus === '2') {
|
||
return '求助'
|
||
}
|
||
|
||
if (this.info.abnormalStatus === '1') {
|
||
return '异常'
|
||
}
|
||
|
||
if (this.info.abnormalStatus === '0') {
|
||
return '正常'
|
||
}
|
||
|
||
return '-'
|
||
},
|
||
|
||
userStatusColor () {
|
||
if (this.info.abnormalStatus === '2') {
|
||
return '#F46159'
|
||
}
|
||
|
||
if (this.info.abnormalStatus === '1') {
|
||
return '#FFAA44'
|
||
}
|
||
|
||
if (this.info.abnormalStatus === '0') {
|
||
return '#0F8F64'
|
||
}
|
||
|
||
return '#0F8F64'
|
||
},
|
||
|
||
percentage () {
|
||
if (!this.treeData.length) {
|
||
return 0
|
||
}
|
||
|
||
if (this.treeData[0].deviceCount == 0 || this.treeData[0].onlineCount == 0) {
|
||
return 0
|
||
}
|
||
|
||
return Number((this.treeData[0].onlineCount / this.treeData[0].deviceCount).toFixed(2)) * 100
|
||
}
|
||
},
|
||
|
||
watch: {
|
||
'search.name' (val) {
|
||
this.$refs.tree.filter(val)
|
||
}
|
||
},
|
||
|
||
created() {
|
||
this.getTree()
|
||
},
|
||
|
||
mounted() {
|
||
this.getCorpLocation()
|
||
},
|
||
|
||
methods: {
|
||
getIdInfo (UUserCard, num) {
|
||
if (num == 1) {
|
||
var birth = UUserCard.substring(6, 10) + '-' + UUserCard.substring(10, 12) + '-' + UUserCard.substring(12, 14)
|
||
return birth
|
||
}
|
||
if (num == 2) {
|
||
if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {
|
||
return '1'
|
||
} else {
|
||
return '0'
|
||
}
|
||
}
|
||
|
||
if (num == 3) {
|
||
var myDate = new Date()
|
||
var month = myDate.getMonth() + 1
|
||
var day = myDate.getDate()
|
||
var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
|
||
if (UUserCard.substring(10, 12) < month || UUserCard.substring(10, 12) == month && UUserCard.substring(12, 14) <= day) {
|
||
age ++
|
||
}
|
||
|
||
return age
|
||
}
|
||
},
|
||
|
||
getCorpLocation(){
|
||
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
|
||
if(res.code==0){
|
||
this.initMap(res.data);
|
||
}
|
||
})
|
||
},
|
||
|
||
getList () {
|
||
this.instance.post(`/app/appintelligentguardianshipdevice/list`, null, {
|
||
params: {
|
||
size: 100000,
|
||
current: 1
|
||
}
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
const points = res.data.records.map(item => {
|
||
return {
|
||
...item,
|
||
lnglat: [item.lng, item.lat],
|
||
id: item.id,
|
||
corpId: item.corpId,
|
||
areaName:item.areaName,
|
||
name: item.name
|
||
}
|
||
})
|
||
|
||
this.addMakert(points)
|
||
|
||
if (this.$route.query.id) {
|
||
this.onTreeChange({
|
||
type: '1',
|
||
deviceId: this.$route.query.id,
|
||
lng: this.$route.query.lng,
|
||
lat: this.$route.query.lat
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
filterNode(value, data) {
|
||
if (!value) return true
|
||
|
||
return data.areaName.indexOf(value) !== -1 || (data.deviceName && data.deviceName.indexOf(value) !== -1)
|
||
},
|
||
|
||
onTreeChange (e) {
|
||
if (e.type === '1') {
|
||
this.map.setZoomAndCenter(16, [e.lng, e.lat], false, 300)
|
||
this.getInfo(e.deviceId)
|
||
this.choosedId = e.deviceId
|
||
}
|
||
},
|
||
|
||
getTree(){
|
||
this.instance.post(`/app/appintelligentguardianshipdevice/queryTree?areaId=${this.user.info.areaId}`).then(res=>{
|
||
if (res.code === 0) {
|
||
this.treeData = this.formatList([res.data])
|
||
|
||
this.$nextTick(() => {
|
||
this.defaultExpanded = [res.data.parentId]
|
||
this.$refs.tree.setCurrentKey(res.data.parentId)
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
formatList (list) {
|
||
var arr = []
|
||
var i = 0
|
||
for (let item of list) {
|
||
if (!item.parentId) {
|
||
item.parentId = 0
|
||
} else {
|
||
item.parentId = `${item.parentId}-${i}`
|
||
}
|
||
i = i + 1
|
||
if (item.childrenDevice && item.childrenDevice.length) {
|
||
let userList = JSON.parse(JSON.stringify(item.childrenDevice))
|
||
|
||
if (this.search.status !== '3') {
|
||
userList = userList.filter(v => {
|
||
if (this.search.status === v.deviceOnlineStatus) {
|
||
this.defaultExpanded.push(item.parentId)
|
||
return true
|
||
}
|
||
|
||
return false
|
||
})
|
||
}
|
||
|
||
if (item.childrenArea) {
|
||
item.childrenArea = [
|
||
...item.childrenArea,
|
||
...userList,
|
||
]
|
||
} else {
|
||
item.childrenArea = [
|
||
...userList
|
||
]
|
||
}
|
||
delete item.childrenDevice
|
||
}
|
||
|
||
if (item.childrenArea && item.childrenArea.length) {
|
||
this.formatList(item.childrenArea)
|
||
}
|
||
|
||
arr.push(item)
|
||
}
|
||
|
||
return arr
|
||
},
|
||
|
||
changeZoom(isAdd) {
|
||
const zoom = isAdd ? this.map.getZoom() + 1 : this.map.getZoom() - 1
|
||
this.map.setZoom(zoom, false, 600)
|
||
},
|
||
|
||
formatName (str) {
|
||
if (!str) return ''
|
||
|
||
return str.substr(str.length - 2)
|
||
},
|
||
|
||
getInfo (id) {
|
||
this.instance.post(`/app/appintelligentguardianshipdevice/queryMonitorList?deviceId=${id}&type=1`).then(res => {
|
||
if (res.code === 0) {
|
||
let obj = {}
|
||
this.testData = res.data.records.forEach(item => {
|
||
obj[item.item] = item
|
||
})
|
||
|
||
this.testData = obj
|
||
}
|
||
})
|
||
this.instance.post(`/app/appintelligentguardianshipdevice/queryDetailById?id=${id}`).then(res => {
|
||
if (res.code === 0) {
|
||
this.info = res.data
|
||
this.info.age = this.getIdInfo(res.data.idNumber, 3)
|
||
this.isShowInfo = true
|
||
}
|
||
})
|
||
},
|
||
|
||
toCenter() {
|
||
this.map.setZoomAndCenter(this.zoom, this.center, false, 600)
|
||
},
|
||
|
||
renderClusterMarker(context) {
|
||
let el = `<div class="polymeric">
|
||
<div class="polymeric-container">
|
||
<p>${context.count}</p>
|
||
</div>
|
||
</div>`
|
||
|
||
let offset = new AMap.Pixel(-9, -9)
|
||
context.marker.setContent(el)
|
||
context.marker.setOffset(offset)
|
||
context.marker.lnglat = context.clusterData[0].lnglat
|
||
|
||
context.marker.on('click', e => {
|
||
this.map.setZoomAndCenter(this.map.getZoom() + 3, e.target.lnglat, false, 500)
|
||
})
|
||
},
|
||
|
||
getColor (data) {
|
||
if (data.id === this.choosedId) {
|
||
return '#2266FF'
|
||
}
|
||
|
||
if (data.abnormalStatus === '2') {
|
||
return '#F46159'
|
||
}
|
||
|
||
if (data.abnormalStatus === '1') {
|
||
return '#FFAA44'
|
||
}
|
||
|
||
if (data.onlineStatus === '0') {
|
||
return '#0F8F64'
|
||
}
|
||
|
||
return '#0F8F64'
|
||
},
|
||
|
||
renderMarker(context) {
|
||
const buildId = context.data[0].id
|
||
|
||
let el = `<div class="mark mark${context.data[0].abnormalStatus}" id="buildId-${buildId}" data-color="${this.getColor(context.data[0])}" style="background-color: ${this.getColor(context.data[0])}">
|
||
<div class="mark-contaienr">
|
||
<span>${context.data[0].areaName}</span>
|
||
<span>${context.data[0].name}</span>
|
||
</div>
|
||
<div class="arrow" style="border-top-color: ${this.getColor(context.data[0])}"></div>
|
||
</div>`
|
||
|
||
context.marker.setContent(el);
|
||
context.marker.setAnchor("center")
|
||
context.marker.id = `${buildId}`
|
||
context.marker.data = JSON.stringify(context.data[0])
|
||
context.marker.lnglat = context.data[0].lnglat
|
||
|
||
context.marker.on('click', e => {
|
||
this.choosedId = e.target.id
|
||
this.getInfo(e.target.id)
|
||
context.marker.setContent(el);
|
||
document.querySelectorAll('.mark').forEach(el => {
|
||
el.style['background-color'] = el.getAttribute('data-color')
|
||
el.querySelector('.arrow').style['border-top-color'] = el.getAttribute('data-color')
|
||
})
|
||
document.querySelector(`#buildId-${e.target.id}`).style['background-color'] = '#2266FF'
|
||
document.querySelector(`#buildId-${e.target.id}`).querySelector('.arrow').style['border-top-color'] = '#2266FF'
|
||
this.map.setZoomAndCenter(this.map.getZoom() + 0.000000001, e.target.lnglat, false, 300)
|
||
})
|
||
},
|
||
|
||
closeInfo () {
|
||
this.info = {}
|
||
this.isShowInfo = false
|
||
this.choosedId = ''
|
||
this.map.setZoom(this.map.getZoom() + 0.0001)
|
||
},
|
||
|
||
addMakert(points) {
|
||
new AMap.MarkerClusterer(this.map, points, {
|
||
gridSize: 60,
|
||
maxZoom: 15,
|
||
clusterByZoomChange: false,
|
||
renderClusterMarker: this.renderClusterMarker,
|
||
renderMarker: this.renderMarker
|
||
})
|
||
},
|
||
|
||
switchLayer(flag) {
|
||
if (flag) {
|
||
this.map.addLayer(this.satellite)
|
||
} else {
|
||
this.map.removeLayer(this.satellite)
|
||
}
|
||
|
||
this.isImageMap = flag
|
||
},
|
||
|
||
initMap({lng,lat}) {
|
||
this.center = [lng,lat];
|
||
AMapLoader.load({
|
||
key: '54a02a43d9828a8f9cd4f26fe281e74e',
|
||
version: '2.0',
|
||
plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.MouseTool', 'AMap.MarkerClusterer'],
|
||
AMapUI: {
|
||
version: '1.1',
|
||
plugins: []
|
||
}
|
||
}).then((AMap) => {
|
||
this.map = new AMap.Map('map', {
|
||
resizeEnable: true,
|
||
zooms: [6, 20],
|
||
center: [lng, lat],
|
||
zoom: this.zoom
|
||
})
|
||
this.satellite = new AMap.TileLayer.Satellite()
|
||
this.getList()
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.map {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
|
||
.community-info {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
width: 380px;
|
||
max-height: calc(100% - 20px);
|
||
overflow-y: overlay;
|
||
overflow-x: hidden;
|
||
z-index: 111;
|
||
background: #fff;
|
||
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
|
||
border-radius: 2px;
|
||
|
||
.community-info__close {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
padding: 16px 12px 0 12px;
|
||
font-size: 16px;
|
||
color: #8899bb;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 1px;
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb {
|
||
border-radius: 6px;
|
||
background: rgba(144, 147, 153, .5);
|
||
}
|
||
|
||
.community-info__header {
|
||
padding-top: 40px;
|
||
text-align: center;
|
||
background: url(https://cdn.cunwuyun.cn/dvcp/zhjh/map-bg.png) no-repeat;
|
||
background-size: 100% 210px;
|
||
|
||
.user {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 50px;
|
||
height: 50px;
|
||
margin: 0 auto 8px;
|
||
border-radius: 50%;
|
||
background: #2266FF;
|
||
|
||
span {
|
||
color: #fff;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
h2 {
|
||
line-height: 24px;
|
||
margin-bottom: 12px;
|
||
font-weight: 700;
|
||
color: #222222;
|
||
font-size: 18px;
|
||
}
|
||
|
||
h3, p {
|
||
width: 300px;
|
||
line-height: 22px;
|
||
margin: 0 auto 4px;
|
||
font-size: 13px;
|
||
color: #888888;
|
||
text-align: center;
|
||
font-weight: normal;
|
||
}
|
||
|
||
& > h3 {
|
||
line-height: 1.4;
|
||
// overflow: hidden;
|
||
// text-overflow:ellipsis;
|
||
// white-space: nowrap;
|
||
}
|
||
|
||
.community-info__header--info {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 0 20px;
|
||
|
||
.community-info__header--info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 160px;
|
||
height: 56px;
|
||
margin-bottom: 20px;
|
||
padding: 0 12px;
|
||
background: #FFFFFF;
|
||
border-radius: 4px;
|
||
border: 1px solid #EEEEEE;
|
||
|
||
&:nth-of-type(2n - 1) {
|
||
margin-right: 20px;
|
||
}
|
||
|
||
& > i {
|
||
position: relative;
|
||
top: 2px;
|
||
font-style: normal;
|
||
color: #222222;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 8px;
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
background: #6BA3DB;
|
||
|
||
i {
|
||
color: #fff;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.community-info__header--status {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 20px;
|
||
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #2EA222;
|
||
}
|
||
|
||
span {
|
||
font-size: 14px;
|
||
}
|
||
|
||
div:first-child {
|
||
margin-right: 20px;
|
||
}
|
||
|
||
i {
|
||
position: relative;
|
||
top: 2px;
|
||
margin-right: 2px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
div:last-child {
|
||
color: #2266FF;
|
||
|
||
span {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.community-info__wrapper {
|
||
padding: 0 20px 40px;
|
||
|
||
.community-info__title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 20px;
|
||
|
||
h2 {
|
||
position: relative;
|
||
padding: 0 8px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
|
||
&:after {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
z-index: 1;
|
||
width: 3px;
|
||
height: 16px;
|
||
background: #2266FF;
|
||
transform: translateY(-50%);
|
||
content: ' ';
|
||
}
|
||
}
|
||
|
||
span {
|
||
width: 52px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
border-radius: 12px;
|
||
}
|
||
}
|
||
|
||
.community-info__item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 40px;
|
||
padding: 0 12px;
|
||
font-size: 12px;
|
||
color: #666;
|
||
background: #F3F9FF;
|
||
|
||
&:nth-of-type(2n) {
|
||
background: #fff;
|
||
}
|
||
|
||
span {
|
||
max-width: 70%;
|
||
text-align: right;
|
||
}
|
||
|
||
label {
|
||
flex-shrink: 1;
|
||
color: #222;
|
||
}
|
||
}
|
||
|
||
&.community-info__wrapper--last {
|
||
.community-info__item {
|
||
background: #fff;
|
||
|
||
&:nth-of-type(2n) {
|
||
background: #F3F6F9;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.left-info {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 11;
|
||
height: 100%;
|
||
|
||
.left-info__btn {
|
||
display: flex;
|
||
position: absolute;
|
||
align-items: center;
|
||
justify-content: center;
|
||
top: 50%;
|
||
right: 0;
|
||
width: 32px;
|
||
height: 86px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
background: url(https://cdn.cunwuyun.cn/dvcp/zhjh/right.png) no-repeat;
|
||
background-size: 32px 86px;
|
||
transform: translate(26px, -50%);
|
||
|
||
&:hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
img {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
|
||
.left-info__wrapper {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 280px;
|
||
height: 100%;
|
||
background: #F3F4F7;
|
||
box-shadow: 2px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
||
transition: all 0.3s ease;
|
||
transform: translateX(-100%);
|
||
|
||
.left-info__wrapper--container {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 1px;
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb {
|
||
border-radius: 6px;
|
||
background: rgba(144, 147, 153, .5);
|
||
}
|
||
}
|
||
|
||
&.left-info__wrapper--active {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
.left-info__top {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 16px;
|
||
|
||
h2 {
|
||
color: #222222;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.left-info__top--middle {
|
||
flex: 1;
|
||
text-align: center;
|
||
color: #555555;
|
||
|
||
i {
|
||
padding-left: 8px;
|
||
color: #222222;
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
}
|
||
|
||
div {
|
||
line-height: 20px;
|
||
font-size: 12px;
|
||
|
||
&:last-child {
|
||
i {
|
||
color: #19D286;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.left-info__tree {
|
||
margin-top: 8px;
|
||
height: 28px;
|
||
line-height: 28px;
|
||
padding: 0 16px;
|
||
background: #E5E9EE;
|
||
|
||
.tree-user {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #555;
|
||
font-size: 15px;
|
||
|
||
i {
|
||
margin-right: 4px;
|
||
}
|
||
|
||
span {
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
::v-deep .el-tree {
|
||
.el-tree-node__content {
|
||
height: 32px;
|
||
}
|
||
|
||
.el-tree-node__expand-icon.is-leaf {
|
||
color: transparent!important;
|
||
}
|
||
|
||
.is-current > .el-tree-node__content {
|
||
&:hover {
|
||
background-color: #2266FF;
|
||
color: #fff;
|
||
}
|
||
|
||
background: #2266FF;
|
||
|
||
span {
|
||
color: #fff;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
||
.tree-user {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
h2 {
|
||
margin-bottom: 4px;
|
||
color: #555555;
|
||
font-size: 14px;
|
||
}
|
||
|
||
::v-deep .el-tree {
|
||
background: transparent;
|
||
}
|
||
}
|
||
|
||
.left-info__middle {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 16px;
|
||
|
||
.el-select {
|
||
flex-shrink: 1;
|
||
width: 80px;
|
||
margin-right: 4px;
|
||
|
||
::v-deep i {
|
||
color: #8899bb;
|
||
}
|
||
}
|
||
|
||
.el-input {
|
||
width: 164px;
|
||
|
||
::v-deep i {
|
||
color: #8899bb;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .ol-zoom {
|
||
display: none !important;
|
||
top: inherit !important;
|
||
bottom: 0.5em !important;
|
||
}
|
||
|
||
div {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
#map {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
::v-deep .amap-logo, ::v-deep .amap-copyright {
|
||
display: none !important;
|
||
}
|
||
|
||
::v-deep .amap-icon {
|
||
width: 40px !important;
|
||
height: 40px !important;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.no-more {
|
||
display: block;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
margin-top: 2px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: #999;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.map-menu {
|
||
position: absolute;
|
||
bottom: 52px;
|
||
left: 30px;
|
||
z-index: 11;
|
||
|
||
.map-layers__wrapper {
|
||
display: none;
|
||
position: absolute;
|
||
bottom: 28px;
|
||
left: 0;
|
||
padding-bottom: 4px;
|
||
}
|
||
|
||
.map-layers {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 180px;
|
||
height: 66px;
|
||
margin-bottom: 4px;
|
||
padding: 5px;
|
||
background: #FFFFFF;
|
||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
|
||
border-radius: 2px;
|
||
|
||
.map-layers__item {
|
||
position: relative;
|
||
width: 80px;
|
||
height: 56px;
|
||
margin-right: 10px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
border: 1px solid transparent;
|
||
|
||
&.map-layers__item-active {
|
||
border: 1px solid #366FFF;
|
||
}
|
||
|
||
.map-layers__item--tag {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 32px;
|
||
height: 18px;
|
||
line-height: 18px;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
border: 1px solid transparent;
|
||
background: transparent;
|
||
|
||
&.map-layers__item--tag-active {
|
||
background: #366FFF;
|
||
}
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.map-menu__item {
|
||
display: flex;
|
||
position: relative;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 28px;
|
||
height: 28px;
|
||
margin-bottom: 10px;
|
||
background: #FFFFFF;
|
||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
|
||
&:hover {
|
||
.map-layers__wrapper {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
i {
|
||
font-size: 16px;
|
||
color: #89b;
|
||
}
|
||
}
|
||
}
|
||
|
||
.switch-layer {
|
||
position: absolute;
|
||
bottom: 4.6em;
|
||
left: .56em;
|
||
z-index: 11;
|
||
width: 29px;
|
||
height: 29px;
|
||
padding: 3px;
|
||
color: #fff;
|
||
background-color: rgba(255, 255, 255, 0.4);
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
|
||
.switch-layer__wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
background-color: rgba(0, 60, 136, 0.5);
|
||
|
||
&:hover {
|
||
background-color: rgba(0, 60, 136, 0.7);
|
||
}
|
||
}
|
||
}
|
||
|
||
.community {
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
height: 28px;
|
||
padding: 0 10px;
|
||
background: #0F8F64;
|
||
border-radius: 26px;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
|
||
&.color1 {
|
||
background: #2266FF;
|
||
|
||
em:after {
|
||
border-top-color: #2266FF !important;
|
||
}
|
||
}
|
||
|
||
&.color2 {
|
||
background: #F46159;
|
||
|
||
em:after {
|
||
border-top-color: #F46159 !important;
|
||
}
|
||
}
|
||
|
||
em {
|
||
position: absolute;
|
||
bottom: -6px;
|
||
left: 50%;
|
||
transform: translate(-50%, 0);
|
||
|
||
&::after {
|
||
position: absolute;
|
||
bottom: -6px;
|
||
left: 0;
|
||
width: 0;
|
||
height: 0;
|
||
border: 6px solid #0F8F64;
|
||
border-bottom-color: transparent;
|
||
border-left-color: transparent;
|
||
border-right-color: transparent;
|
||
transform: translate(-50%, 0);
|
||
overflow: hidden;
|
||
content: ' ';
|
||
}
|
||
}
|
||
|
||
i {
|
||
padding-right: 2px;
|
||
position: relative;
|
||
color: #ffc928;
|
||
font-size: 16px;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
::v-deep .polymeric {
|
||
display: flex;
|
||
position: relative;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 62px;
|
||
height: 62px;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
|
||
&.polymeric-active {
|
||
.polymeric-container {
|
||
background: #F46159;
|
||
}
|
||
|
||
&::after {
|
||
background-color: #F46159;
|
||
}
|
||
}
|
||
|
||
&::after {
|
||
position: absolute;
|
||
z-index: -1;
|
||
width: 62px;
|
||
height: 62px;
|
||
border-radius: 50%;
|
||
-webkit-animation: warn 1s ease-out 0s infinite;
|
||
animation: warn 1s ease-out 0s infinite;
|
||
background-color: rgba(15, 143, 100, 1);
|
||
transform: translate(-50%, -50%);
|
||
content: " ";
|
||
}
|
||
|
||
.polymeric-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
width: 62px;
|
||
height: 62px;
|
||
border-radius: 50%;
|
||
background: rgba(15, 143, 100, 1);
|
||
|
||
p {
|
||
text-align: center;
|
||
width: 58px;
|
||
color: #fff;
|
||
font-size: 18px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
p:first-child{
|
||
font-size: 14px;
|
||
}
|
||
|
||
h2 {
|
||
color: #fff;
|
||
font-weight: normal;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .mark{
|
||
position: relative;
|
||
user-select: none;
|
||
cursor: pointer;
|
||
height: 32px;
|
||
border-radius: 26px;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
padding: 0 12px;
|
||
|
||
&.mark1::after {
|
||
position: absolute;
|
||
z-index: -1;
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 50%;
|
||
-webkit-animation: warn 1s ease-out 0s infinite;
|
||
animation: warn 1s ease-out 0s infinite;
|
||
background-color: rgba(255, 68, 102, 1);
|
||
transform: translate(-50%, -50%);
|
||
content: " ";
|
||
}
|
||
|
||
&.mark2::after {
|
||
position: absolute;
|
||
z-index: -1;
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 50%;
|
||
-webkit-animation: warn 1s ease-out 0s infinite;
|
||
animation: warn 1s ease-out 0s infinite;
|
||
background-color: rgba(211, 38, 199, 1);
|
||
transform: translate(-50%, -50%);
|
||
content: " ";
|
||
}
|
||
|
||
.mark-contaienr{
|
||
color: white;
|
||
font-size: 14px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.arrow{
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: -16px;
|
||
width: 0;
|
||
height: 0;
|
||
border: 8px solid transparent;
|
||
border-top: 8px solid #0F8F64;
|
||
}
|
||
|
||
}
|
||
|
||
@-webkit-keyframes warn {
|
||
0% {
|
||
transform: scale(.5);
|
||
opacity: 1
|
||
}
|
||
|
||
30% {
|
||
opacity: .5
|
||
}
|
||
|
||
to {
|
||
transform: scale(1.8);
|
||
opacity: 0
|
||
}
|
||
}
|
||
|
||
@keyframes warn {
|
||
0% {
|
||
transform: scale(.5);
|
||
opacity: 1
|
||
}
|
||
|
||
30% {
|
||
opacity: .5
|
||
}
|
||
|
||
to {
|
||
transform: scale(1.4);
|
||
opacity: 0
|
||
}
|
||
}
|
||
|
||
.map-area__list {
|
||
position: absolute;
|
||
top: 51px;
|
||
left: 0;
|
||
z-index: 111;
|
||
width: 320px;
|
||
overflow-y: auto;
|
||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
|
||
border-radius: 2px;
|
||
background: #fff;
|
||
|
||
.content {
|
||
padding: 10px 20px;
|
||
font-size: 0;
|
||
|
||
h2 {
|
||
margin-bottom: 10px;
|
||
color: #5088FF;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
span {
|
||
display: inline-block;
|
||
margin-right: 10px;
|
||
margin-bottom: 10px;
|
||
color: #333;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
color: #5088FF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.top {
|
||
height: 36px;
|
||
line-height: 36px;
|
||
padding: 0 20px;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
|
||
h2 {
|
||
font-weight: normal;
|
||
color: #666666;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
.map-area {
|
||
position: absolute;
|
||
top: 58px;
|
||
left: 10px;
|
||
z-index: 111;
|
||
|
||
.map-area__container {
|
||
display: flex;
|
||
|
||
.map-area__left {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 360px;
|
||
height: 36px;
|
||
padding: 0 16px 0 0;
|
||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
background: #fff;
|
||
|
||
.left {
|
||
display: flex;
|
||
position: relative;
|
||
align-items: center;
|
||
height: 100%;
|
||
line-height: 1;
|
||
padding: 0 20px 0 8px;
|
||
|
||
&:hover {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
&:after {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
width: 1px;
|
||
height: 24px;
|
||
background: #DDDDDD;
|
||
transform: translateY(-50%);
|
||
box-shadow: -1px 0px 0px 0px #DDDDDD;
|
||
border-radius: 2px 0 0 0;
|
||
opacity: 0.9;
|
||
content: ' ';
|
||
}
|
||
|
||
span {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-size: 12px;
|
||
color: #333;
|
||
}
|
||
|
||
i {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-input, ::v-deep input {
|
||
border: none;
|
||
}
|
||
|
||
::v-deep input {
|
||
position: relative;
|
||
flex: 1;
|
||
height: 36px;
|
||
padding: 0 32px 0 16px;
|
||
font-size: 14px;
|
||
border: none;
|
||
}
|
||
|
||
.search-icon {
|
||
&:after {
|
||
position: absolute;
|
||
left: -16px;
|
||
top: 50%;
|
||
width: 1px;
|
||
height: 24px;
|
||
background: #DDDDDD;
|
||
transform: translateY(-50%);
|
||
box-shadow: -1px 0px 0px 0px #DDDDDD;
|
||
border-radius: 2px 0 0 0;
|
||
opacity: 0.9;
|
||
content: ' ';
|
||
}
|
||
}
|
||
|
||
i {
|
||
position: relative;
|
||
color: #89B;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|