Skip to content

C
crsf-ptvue
Commit 6fbb9435 authored by xiexingan's avatar xiexingan
Browse files
Options

update

parent 13ec9701
Show whitespace changes
Inline Side-by-side
Showing with 55 additions and 1113 deletions
src/pages/routes/ol/index/index copy.vue deleted 100644 → 0
View file @ 13ec9701
<template>
<el-container style="padding:0px;">
<!-- <el-header style='height:42px;line-height:42px;border: 1px solid rgba(195, 195, 195, 1);background: #f4f4f4;'>
<span class="title-bold title-left-color">监控中心</span>
</el-header> -->
<div id="map" class="map" :style="{height:(currentHeight+105)+'px'}"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.2)" >
<div v-for="(list,i) in stationList" :key="'line'+i">
<div v-for="(station,j) in list" :key="'station'+j">
<!-- <div v-for="(alarm,k) in alarmList" :key="'alarm'+k">
<div class='css_animation' :id="'css_animation'+station.id" v-if="station.id===alarm.stationId"></div>
</div> -->
<div v-for="(alarm,k) in stationAlarmList" :key="'alarm'+k">
<div class='css_animation' :id="'css_animation'+station.id" v-if="station.id===alarm.stationId"></div>
</div>
</div>
</div>
<!-- <div id="css_animation" class='css_animation'></div> -->
<div class="access_point_right_button_r">
<div :class="[transformationSta == 2?'on':'']" @click="transformation(2)" :disabled="map">卫星</div>
<div :class="[transformationSta == 1?'on':'']" @click="transformation(1)" :disabled="map">地图</div>
</div>
<!-- 当前坐标：<label id="nowCoordinate"></label>-->
<div id="popup" class="ol-popup">
<!-- <a href="#" id="popup-closer" class="ol-popup-closer"></a> -->
<div id="popup-content" style="width:300px; height:120px;"></div>
</div>
<div class="tip-img" @click="openOrClose" :style="'right:'+imgRight+'px'">
<!-- <img :src="require('@/assets/images/map/'+imgName)" style="width: 14px;"/> -->
<i :class="imgName"></i>
</div>
<div class="map_right" v-show="showMapRight" :style="{height:(currentHeight+105)+'px'}">
<el-container>
<el-header class="map_right_header">
<div class="tip-header redBg">
<el-image class="tip-image" :src="require('@/assets/images/map/especiallyMajor1.png')"/>
<div class="tip-label-count" style="color: #FF3823">{{oneCount}}</div>
<div class="tip-label">特别重大</div>
</div>
<div class="tip-header yellowBg"><el-image class="tip-image" :src="require('@/assets/images/map/major1.png')"/><div class="tip-label-count" style="color: #E2A80C">{{twoCount}}</div><div class="tip-label">重大</div></div>
<div class="tip-header blueBg"><el-image class="tip-image" :src="require('@/assets/images/map/general1.png')"/><div class="tip-label-count" style="color: #21ACFC">{{threeCount}}</div><div class="tip-label">一般</div></div>
</el-header>
<el-main :style="{height:currentHeight-30+'px'}">
<div class="map_right_main" v-for="(item,index) in alarmList" :key="index" @click="alarmDetailHandle(item)" >
<div class="map_right_main_header" >
<el-image class="tip-image" v-if="item.eventLevel===1" :src="require('@/assets/images/map/especiallyMajor2.png')"/>
<el-image class="tip-image" v-if="item.eventLevel===2" :src="require('@/assets/images/map/major2.png')"/>
<el-image class="tip-image" v-if="item.eventLevel===3" :src="require('@/assets/images/map/general2.png')"/>
<div class="tip-label" :title="item.eventName">{{item.eventName | ellipsis}}</div>
</div>
<el-row class="map_right_main_row" >
<el-col :span="24" class="map_right_main_col">
<el-image class="time-image" :src="require('@/assets/images/map/time.png')"/>
<div class="tip-label">{{item.createTime}}</div>
</el-col>
<el-col :span="24" class="map_right_main_col">
<el-image class="place-image" :src="require('@/assets/images/map/place.png')"/>
<div class="tip-label">{{item.lineName+"-"+item.stationName+"-"+item.tierName}}</div>
</el-col>
</el-row>
</div>
</el-main>
</el-container>
</div>
</div>
<alarm-detail v-if="alarmDetailVisible" ref="alarmDetail"/>
</el-container>
</template>
<script>
import 'ol/ol.css'
import Map from 'ol/Map'
import View from 'ol/View'
import { defaults } from 'ol/control'
import { boundingExtent } from 'ol/extent'
import { fromLonLat, transform, transformExtent } from 'ol/proj'
import { OSM, Vector as VectorSource } from 'ol/source'
import { Fill, Stroke, Style, Text, Circle } from 'ol/style'
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
import Overlay from 'ol/Overlay'
import LineString from 'ol/geom/LineString'
import TileWMS from 'ol/source/TileWMS'
import OlStyleIcon from 'ol/style/Icon'
import Zoom from 'ol/control/Zoom'
import alarmDetail from '../../alarms/untreated/alarm-detail'
import store from '@/store'
let that
export default {
components: {
alarmDetail
},
filters: {
ellipsis (value) {
if (!value) return ''
if (value.length > 15) {
return value.slice(0, 15) + '...'
}
return value
}
},
data() {
return {
sId: '',
alarmDetailVisible: false,
nowCoordinate: null,
lineId: null,
alarmList: [], //线路未处理报警信息
stationAlarmList: [], //线路未处理报警信息-按站点id
features: [],
features2: [],
coordinatesPolygon: [],
lineList: [],
stationList: [],
transformationSta: 2,
oneLayer: null,
twoLayer: null,
lineLayer: null,
optionLayer: null,
optionLayer2: null,
overlayList: [],
map: null,
oneCount: 0,
twoCount: 0,
threeCount: 0,
showMapRight: true,
imgRight: 315,
// imgName: 'arrow-double-right.png',
imgName: 'el-icon-arrow-right',
bean: '',
level: 13,
setTime: 60000,
loading: true
}
},
computed: {
currentHeight() {
return this.$store.state.d2admin.currentHeight.height
}
},
watch: {
sId(nVal) {
console.log('线路监控中心-监听', nVal)
}
},
created() {
that = this
localStorage.stationId = localStorage.getItem('sysSign')
this.lineId = localStorage.stationId
localStorage.removeItem('lineId')
localStorage.removeItem('stationName')
localStorage.removeItem('currenLineId')
this.bean = JSON.parse(localStorage.getItem('sysSystem'))
window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
},
//页面切换时触发
beforeDestroy() {
// 断开
this.websocketclose()
},
mounted() {
this.init()
//监听鼠标滚动事件
window.addEventListener('mousewheel', this.debounce(this.handleScroll, 300), true) || window.addEventListener('DOMMouseScroll', this.debounce(this.handleScroll, 300), false)
// 初始
this.initWebSocketOl()
},
methods: {
// ====================================
//初始化weosocket-ol
initWebSocketOl() {
if (typeof WebSocket === 'undefined') {
alert('您的浏览器不支持WebSocket')
return false
}
// websocket地址？
const wsuri = this.$http.adornUrl('').slice(5)
console.log('wsuriLog:' + wsuri)
let webpath = ''
if (wsuri != null && wsuri.indexOf(':') <= -1) {
webpath = 'ws://api.crsh.cn:8091/websocket/1001'
} else {
webpath = 'ws:' + wsuri.substring(0, wsuri.indexOf(':')) + ':8091/websocket/1001'
}
this.websock = new WebSocket(webpath)
this.websock.onopen = this.websocketonopen
this.websock.onmessage = this.websocketonmessage
this.websock.onerror = this.websocketonerror
this.websock.onclose = this.websocketclose
// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = this.websocketclose
},
//连接成功
websocketonopen() {
console.log('WebSocket连接成功2')
},
//接收后端返回的数据
websocketonmessage(e) {
// 在这里使用后端返回的数据，对数据进行处理渲染
if (sessionStorage.getItem('token') && sessionStorage.getItem('token') != undefined) { //登录才能获取
//收到报警信息，异步加载
this.init()
}
},
//连接建立失败重连
websocketonerror(e) {
console.log(`连接失败的信息ol：`, e)
this.initWebSocketOl() // 连接失败后尝试重新连接
},
//关闭连接
websocketclose(e) {
console.log('断开连接ol', e)
},
send() {
this.websock.send('ol')
},
// ====================================
init() {
this.initMap()
this.initAlarmInfo().then(res => {
if (res) {
this.initLine()
}
})
},
//刷新时触发
beforeunloadFn (e) {
},
//函数防抖
debounce(func, wait) {
let timeout
return function () {
let context = this
let args = arguments
if (timeout) clearTimeout(timeout)
timeout = setTimeout(() => {
func.apply(context, args)
}, wait)
}
},
//判断滚动方向
handleScroll(e) {
let direction = e.deltaY > 0 ? 'down' : 'up'
if (!this.map) {
return
}
let level = this.map.getView().getZoom()
this.changeLayer(level, direction)
},
//切换图层
changeLayer(level, direction) {
// console.log('changeLayer:', level, direction)
let intLevel = parseInt(level)
let mapLevel = 13
if (intLevel > 9 && intLevel < 15) {
mapLevel = intLevel
} else if (intLevel <= 9) {
mapLevel = '09'
} else if (intLevel >= 15) {
mapLevel = 15
}
if (this.level === mapLevel) {
return
} else {
this.level = mapLevel
}
//初始化图层
this.transformationNoVal()
},
openOrClose() {
this.showMapRight = !this.showMapRight
if (this.imgRight === 315) {
this.imgRight = -12
this.imgName = 'el-icon-arrow-left'
} else {
this.imgRight = 315
this.imgName = 'el-icon-arrow-right'
}
},
//初始化线路未处理报警数据
async initAlarmInfo() {
let isSuccess = false
let params = {
lineId: this.lineId,
limit: 5
}
//线路
if (this.bean.type === '2') {
params.lineId = this.lineId
}
//路网
if (this.bean.type === '3') {
params.lineId = ''
}
await this.$http({
url: this.$http.adornUrlAlarm('/alarmsInfo/queryRoutesList'),
method: 'post',
params: this.$http.adornParams(params)
}).then(data => {
if (data && data.code === 0) {
this.alarmList = data.list
this.stationAlarmList = data.stationAlarmList
console.log('stationAlarmList:', this.stationAlarmList)
isSuccess = true
this.oneCount = data.countList.oneCount
this.twoCount = data.countList.twoCount
this.threeCount = data.countList.threeCount
} else {
this.$message.error(data.msg)
}
})
return isSuccess
},
async initLine() {
let isSuccess = false
//获取地铁坐标点信息
this.features = []
this.features2 = []
this.coordinatesPolygon = []
let params = {
lineId: this.lineId
}
//线路
if (this.bean.type === '2') {
params.lineId = this.lineId
}
//路网
if (this.bean.type === '3') {
params.lineId = ''
}
await this.$http({
url: this.$http.adornUrl(`/liStation/queryAllLineList/`),
method: 'get',
params: this.$http.adornParams(params)
}).then(data => {
if (data) {
// console.log('stationList:', data.list)
this.stationList = data.list
this.lineList = data.lineList
isSuccess = true
}
}).then(data => {
this.stationList.forEach((list, i) => {
if (list && list.length > 0) {
this.initStation(list, this.lineList[i].byx1)
}
})
}).then(data => {
if (this.map === null) {
this.initMap()
}
this.initMapLayers()
this.initMapEvent()
this.loading = false
})
return isSuccess
},
initStation(list, color) {
let k = 0
let coordinatesPolygonOne = []
let featuresOne = []
let features2One = []
let businessAlarm = []
// let equAlarm = []
list.forEach((station, i) => {
let iconStyle = null
let iconStyle2 = null
let iconStyle3 = null
let image3 = new Circle({
color: '#44ccff',
radius: 0,
fill: new Fill({ color: '#3E698D' })
})
let image = new Circle({
color: '#44ccff',
radius: 7,
fill: new Fill({ color: '#FFFFFF' }),
stroke: new Stroke({ color: color, width: 2 })
})
if (station.isMaster === 1 || this.bean.type === '2') {
// let aColor = ''
this.stationAlarmList.forEach(alarm => {
// console.log('alarm:', alarm)
if (alarm.stationId === station.id) {
/*if (alarm.eventLevel === 1 && !aColor) {
aColor = '#FF3823'
} else if (alarm.eventLevel === 2 && !aColor) {
aColor = '#E2A80C'
} else if (alarm.eventLevel === 3 && !aColor) {
aColor = '#21ACFC'
}*/
image = new Circle({
color: '#44ccff',
radius: 14,
fill: new Fill({ color: '#FF3823' }),
stroke: new Stroke({ color: '#FFFFFF', width: 2 })
})
// 业务报警 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
image3 = new OlStyleIcon({
anchor: [0.5, 0.5],
scale: 0.2,
offset: [-39, 0],
//rotation:0 旋转度
src: require('@/assets/images/icon/bao-jing-show.png')
})
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//动画效果
let element = document.getElementById('css_animation' + station.id)
let pointOverlay = new Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, 75]
})
if (element) {
element.style.display = 'block'
}
pointOverlay.setPosition(transform([station.x, station.y], 'EPSG:4326', 'EPSG:3857'))
this.overlayList.push(pointOverlay)
}
})
if (station.isMaster !== 1) {
image = new Circle({
color: '#44ccff',
radius: 7,
// fill: new Fill({ color: '#FFFFFF' }),
stroke: new Stroke({ color: color, width: 2 })
})
}
iconStyle = new Style({
image: image,
text: new Text({
offsetY: 23,
//位置
textAlign: 'center',
//基准线
textBaseline: 'middle',
//文字样式
font: 'normal 14px 微软雅黑',
//文本内容
text: station.stationName,
//文本填充样式（即文字颜色）
fill: new Fill({ color: '#000000' })
})
})
iconStyle2 = new Style({
image: image,
text: new Text({
offsetY: 23,
//位置
textAlign: 'center',
//基准线
textBaseline: 'middle',
//文字样式
font: 'normal 14px 微软雅黑',
//文本内容
text: station.stationName,
//文本填充样式（即文字颜色）
fill: new Fill({ color: '#FFFFFF' })
})
})
iconStyle3 = new Style({
image: image3
})
} else {
let stroke = new Stroke({ color: color, width: 0 })
iconStyle = new Style({
stroke: stroke
})
iconStyle2 = new Style({
stroke: stroke
})
iconStyle3 = new Style({
stroke: stroke
})
}
featuresOne.push(new Feature(new Point(fromLonLat([station.x, station.y]))))
features2One.push(new Feature(new Point(fromLonLat([station.x, station.y]))))
businessAlarm.push(new Feature(new Point(fromLonLat([station.x, station.y])))) //业务报警
coordinatesPolygonOne.push(transform([station.x, station.y], 'EPSG:4326', 'EPSG:3857'))
featuresOne[k].setStyle(iconStyle)
features2One[k].setStyle(iconStyle2)
businessAlarm[k].setStyle(iconStyle3) //业务报警
featuresOne[k].setId(station.id)
features2One[k].setId(station.id)
businessAlarm[k].setId(station.id) //业务报警
featuresOne[k].set('isMaster', station.isMaster)
features2One[k].set('isMaster', station.isMaster)
businessAlarm[k].set('isMaster', station.isMaster) //业务报警增加主从站标识
k++
})
this.features2.push(features2One)
this.features2.push(businessAlarm) //业务报警
this.features.push(featuresOne)
this.features.push(businessAlarm) //业务报警
this.coordinatesPolygon.push(coordinatesPolygonOne)
},
initMap() {
//底图
this.oneLayer = new TileLayer({
id: 1,
source: new TileWMS({
url: window.CONFIG.geoServer,
params: { 'service': 'WMS', 'LAYERS': 'crsf:sl_13', 'tiled': true }
})
})
this.twoLayer = new TileLayer({
id: 2,
source: new TileWMS({
url: window.CONFIG.geoServer,
params: { 'service': 'WMS', 'LAYERS': 'crsf:yx_13', 'tiled': true }
})
})
let layers2 = [this.twoLayer]
// 地图显示边界范围
let maxExtent = boundingExtent([[102.990000, 29.900000], [104.970000, 31.500000]])
this.map = new Map({
layers: layers2,
attribution: false,
zoom: false,
rotate: false,
target: document.getElementById('map'),
view: new View({
center: fromLonLat([104.095736, 30.657467]),
zoom: 13, //默认图层等级
minZoom: 9, //限制最小等级
maxZoom: 16, //限制最大等级
extent: transformExtent(maxExtent, 'EPSG:4326', 'EPSG:3857')//控制地图显示边界
}),
controls: defaults({
rotate: false,
zoom: false
})
})
// setTimeout(() => {
// this.initMapLayers()
// this.initMapEvent()
// }, 1000)
},
initMapLayers() {
//线路图层
this.lineLayer = []
this.coordinatesPolygon.forEach((coor, i) => {
let lineLayerOne = new VectorLayer({
source: new VectorSource({
features: [new Feature(new LineString(coor))]
}),
style: new Style({
stroke: new Stroke({
color: this.lineList[i].byx1,
width: 6
})
})
})
this.lineLayer.push(lineLayerOne)
})
//站点图层
this.optionLayer = []
this.features.forEach(fea => {
let optionLayerOne = new VectorLayer({
source: new VectorSource({
features: fea
})
})
this.optionLayer.push(optionLayerOne)
})
this.optionLayer2 = []
this.features2.forEach(fea => {
let optionLayerOne = new VectorLayer({
source: new VectorSource({
features: fea
})
})
this.optionLayer2.push(optionLayerOne)
})
//初始化图层
this.lineLayer.forEach(e => {
this.map.addLayer(e)
})
this.optionLayer2.forEach(e => {
this.map.addLayer(e)
})
//向地图中添加动画效果
this.overlayList.forEach(layer => {
this.map.addOverlay(layer)
})
},
initMapEvent() {
let _this = this
let element = document.getElementById('popup')
let content = document.getElementById('popup-content')
//let closer = document.getElementById('popup-closer')
if (!element || !content) {
return
}
let popup = new Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false
// offset: [0, -50]
})
// display popup on click
this.map.addEventListener('click', function (evt) {
// console.log('evt', evt)
let feature = that.map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature
})
//判断点击的坐标是否在当前图标上
if (feature) {
let isMaster = feature.get('isMaster')
if (isMaster !== 1) {
//线路
if (_this.bean.type === '2') {
_this.$message.warning('从站标识站点无法进行操作！')
}
return
}
let stationId = feature.getId()
let actionsArray = Array.prototype.concat.apply([], _this.stationList)
let currenLinetItem = actionsArray.filter(e => e.id === stationId)
localStorage.currenLineId = currenLinetItem[0].lineId
_this.sId = stationId
localStorage.stationName = currenLinetItem[0].stationName
localStorage.stationId = stationId
localStorage.lineId = _this.lineId
that.$http({
url: that.$http.adornUrl('/sys/menu/nav1'),
method: 'get',
params: stationId
}).then((data) => {
if (data && data.code === 0) {
if (!data.menuList || data.menuList.length === 0) {
that.$message.warning('无站点系统访问权限！')
return
}
that.loading = that.$loading({
lock: true,
text: '加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
that.$router.replace({ path: data.menuList[0].list[0].path })
// 设置顶栏菜单
const lineMenu = JSON.parse(sessionStorage.getItem('menuList')) //线路站点菜单
let obj = JSON.parse(JSON.stringify(lineMenu[0]))
obj.title = '返回首页'
obj.name = '返回首页'
obj.list[0].name = '返回首页'
obj.list[0].title = '返回首页'
data.menuList.push(obj)
// data.menuList.unshift(lineMenu[0])
store.dispatch('d2admin/menu/headerSetAsync', data.menuList)
sessionStorage.setItem('permissions', JSON.stringify(data.permissions || '[]'))
// that.$router.replace({path:data.menuList[1].list[0].path})
return data
} else {
sessionStorage.setItem('menuList', '[]')
sessionStorage.setItem('permissions', '[]')
// next()
}
}).then((data) => {
let t = null
if (t) {
clearTimeout(t)
}
if (data) {
t = setTimeout(() => {
that.$router.go(0)
}, 100)
}
that.$menu.checkScroll()
}).then(() => {
setTimeout(() => {
// that.$router.go(0)
that.loading.close()
}, 1000)
}).catch((e) => {
console.log(`%c${e} 请求菜单列表和权限失败，跳转至登录页！！`, 'color:blue')
// next({
// name: 'login'
// })
})
}
})
this.map.addEventListener('pointermove', function (evt) {
// console.log('evt', evt)
let feature = that.map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature
})
//判断点击的坐标是否在当前图标上
if (feature) {
let coordinate = feature.getGeometry().getCoordinates()
// console.log(coordinate)
let stationId = feature.getId()
let infoText = ''
_this.stationAlarmList.forEach(alarm => {
if (alarm.stationId === stationId) {
alarm.list.forEach(e => {
infoText += e.createTime + e.tierName + '<br><span class="alarm-info">' + e.eventName + '</span><br>'
})
}
})
if (infoText) {
let infoHtml = '<code>' + infoText + '</code>'
content.innerHTML = infoHtml
element.style.display = 'block'
popup.setPosition(coordinate)
that.map.addOverlay(popup)
} else {
element.style.display = 'none'
}
} else {
element.style.display = 'none'
}
})
// 当指针移动时触发。注意，在触摸设备上，这是在地图平移时触发的，因此与mousemove不同
// this.map.on('pointermove', function(e) {
// //document.getElementById('nowCoordinate').innerHTML = transform(e.coordinate, 'EPSG:3857', 'EPSG:4326')
// if (e.dragging) {
// element.style.display = 'none'
// return
// }
// let pixel = map.getEventPixel(e.originalEvent)
// let hit = map.hasFeatureAtPixel(pixel)
// that.map.getTarget().style.cursor = hit ? 'pointer' : ''
// })
},
alarmDetailHandle(alarm) {
//展示报警详情
this.alarmDetailVisible = true
this.$nextTick(() => {
this.$refs.alarmDetail.init(alarm)
})
},
transformation(val) {
if (this.transformationSta === val) return
this.transformationSta = val
console.log('transformation:', this.transformationSta, val)
if (this.transformationSta === 1) {
this.transMapOne()
}
if (this.transformationSta === 2) {
console.log('transformation2:', this.transformationSta)
this.transMapTwo()
}
// console.log(this.map.getLayers())
},
transformationNoVal() {
if (this.transformationSta === 1) {
this.transMapOne()
}
if (this.transformationSta === 2) {
this.transMapTwo()
}
},
transMapOne() {
this.oneLayer = new TileLayer({
id: 1,
source: new TileWMS({
url: window.CONFIG.geoServer,
params: { 'service': 'WMS', 'LAYERS': 'crsf:sl_' + this.level, 'tiled': true }
})
})
this.map.getLayers().clear()
this.map.addLayer(this.oneLayer)
this.lineLayer.forEach(e => {
this.map.addLayer(e)
})
if (this.level > 10) {
this.optionLayer.forEach(e => {
this.map.addLayer(e)
})
}
},
transMapTwo() {
console.log('this.level:', this.level)
this.twoLayer = new TileLayer({
id: 1,
source: new TileWMS({
url: window.CONFIG.geoServer,
params: { 'service': 'WMS', 'LAYERS': 'crsf:yx_' + this.level, 'tiled': true }
})
})
this.map.getLayers().clear()
this.map.addLayer(this.twoLayer)
this.lineLayer.forEach(e => {
this.map.addLayer(e)
})
if (this.level > 10) {
this.optionLayer2.forEach(e => {
this.map.addLayer(e)
})
}
}
}
}
</script>
<style lang="scss" scoped>
.css_animation {
height: 150px;//图标高
width: 150px;//图标高
border-radius: 50%;//圆形
// background: rgb(255, 0, 0);//颜色 可以为rgba()透明度
background: rgba(skyblue,0.3);//颜色 可以为rgba()透明度
transform: scale(0.2);//变换初始大小
animation: myfirst 2s;//变换速度
animation-iteration-count:infinite;//重复闪烁
z-index: 200;
display:none;
}
@keyframes myfirst {
to {
transform: scale(0.8);//变换结束大小
background: rgba(skyblue,0);//结束时颜色
}
}
#map {
width: 100%;
height:825px;
position: relative;
}
.ol-popup {
display: none;
position: absolute;
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "✖";
}
.tip-img{
width:25px;
height: 30px;
border-radius: 50%;
// border: 1px solid red;
cursor: pointer;
background-color: #E1EDF4;
position: absolute;
top: 50px;
// left:50px;
z-index: 100;
i{
vertical-align: middle;
transform: translateY(6px);
opacity: .4;
font-size: 15px;
font-weight: 900;
}
}
.map_right{
position: absolute;
right: 0px;
top: 0px;
width:333px;
z-index: 99;
background: rgb(244, 244, 245);
}
.map_right_header{
width:100%;
padding: 0;
height: 133px !important;
display: flex;
align-items: center;
font-weight: bold;
text-align: center;
background-color: #E1EDF4;
.tip-header{
margin-left:20px;
display: flex;
flex-direction: column ;
align-items: center;
width:84px;
height:93px;
.tip-image{
width: 30px;
height: 30px;
margin-top:10px;
}
.tip-label-count{
font-size:20px;
font-family:Adobe Heiti Std;
font-weight:bold;
color:rgba(0,0,0,1);
line-height:26px;
transform: translateY(3px);
}
.tip-label{
font-size:12px;
font-family:Microsoft YaHei;
font-weight:400;
color:#fff;
transform: translateY(9px);
}
}
.redBg{
background:url('~@/assets/images/redBg.png');
background-size:100% 100%;
}
.yellowBg{
background:url('~@/assets/images/yellowBg.png');
background-size:100% 100%;
}
.blueBg{
background:url('~@/assets/images/blueBg.png');
background-size:100% 100%;
}
}
.map_right_main{
margin-top: 21px;
background: #fff;
width:292px;
height:102px;
border:1px solid rgba(209, 209, 209, 1);
border-radius:3px;
cursor: pointer;
}
.map_right_main:first-child{
margin-top: 0px;
}
.map_right_main_header {
padding-left: 21px;
height:42px;
background:rgba(53,175,248,0.08);
border-radius:3px;
font-size:16px;
font-family:Adobe Heiti Std;
font-weight:normal;
color:rgba(0,0,0,1);
line-height:42px;
display: flex;
align-items: left;
/deep/ img{
vertical-align: middle;
margin-bottom: 4px;
}
.tip-image{
width: 18px;
height: 18px;
margin-right: 8px;
overflow: visible;
}
.tip-label{
font-size:16px;
font-family:Adobe Heiti Std;
font-weight:normal;
color:rgba(0,0,0,1);
line-height:42px;
}
}
.map_right_main_row{
margin-top: 8px;
margin-bottom: 8px;
padding-left: 20px;
.map_right_main_col{
font-size:12px;
font-family:Microsoft YaHei;
font-weight:400;
color:rgba(102,102,102,1);
line-height:22px;
text-align: left;
display: flex;
align-items: left;
/deep/ img{
vertical-align: middle;
margin-bottom: 5px;
}
.time-image{
width: 16px;
height: 16px;
margin-right: 4px;
overflow: visible;
}
.place-image{
width: 12px;
height: 16px;
margin-right: 6px;
overflow: visible;
margin-left: 2px;
}
.tip-label{
font-size:12px;
font-family:Microsoft YaHei;
font-weight:400;
color:rgba(102,102,102,1);
line-height:22px;
}
}
}
#popup{
background:#2A2828;
opacity:.95;
box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.1);
}
#popup-content{
opacity:1;
font-size:12px;
font-family:Microsoft YaHei;
font-weight:400;
color:rgba(196,196,196,1);
line-height:20px;
height: auto!important;
/deep/.alarm-info{
font-size:16px;
color: red;
font-weight: 600;
}
}
#popup-closer{
color: #FFFFFF;
}
.access_point_right_button_r {
position: absolute;
left: 20px;
bottom: 20px;
width: 95px;
height: 26px;
z-index: 10;
font-size: 12px;
line-height: 25px;
overflow: hidden;
border-radius: 13px;
background: #ced1d6;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 0px 1px rgba(255, 255, 255, 0.25),
0px 2px 4px 0px rgba(0, 0, 0, 0.1);
// margin-right: 20px;
div {
width: 46px;
height: 24px;
float: left;
text-align: center;
cursor: pointer;
}
div.on {
background: #45b5f8;
color: #fff;
border-radius: 13px;
border: 1px solid rgba(23, 41, 71, 0.5);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.3),
0px 2px 0px 0px rgba(255, 255, 255, 0.15);
}
}
.ol-unselectable.ol-control{
display: none!important;
}
.ol-overlaycontainer-stopevent
{
display:none;
}
</style>
src/pages/routes/ol/index/index.vue
View file @ 6fbb9435
......@@ -175,6 +175,61 @@
handleStation(id) {
console.log('站点id', id)
that.$http({
url: that.$http.adornUrl('/sys/menu/nav1'),
method: 'get',
params: id
}).then((data) => {
if (data && data.code === 0) {
if (!data.menuList || data.menuList.length === 0) {
that.$message.warning('无站点系统访问权限！')
return
}
that.loading = that.$loading({
lock: true,
text: '加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
that.$router.replace({ path: data.menuList[0].list[0].path })
// 设置顶栏菜单
const lineMenu = JSON.parse(sessionStorage.getItem('menuList')) //线路站点菜单
let obj = JSON.parse(JSON.stringify(lineMenu[0]))
obj.title = '返回首页'
obj.name = '返回首页'
obj.list[0].name = '返回首页'
obj.list[0].title = '返回首页'
data.menuList.push(obj)
// data.menuList.unshift(lineMenu[0])
store.dispatch('d2admin/menu/headerSetAsync', data.menuList)
sessionStorage.setItem('permissions', JSON.stringify(data.permissions || '[]'))
return data
} else {
sessionStorage.setItem('menuList', '[]')
sessionStorage.setItem('permissions', '[]')
// next()
}
}).then((data) => {
let t = null
if (t) {
clearTimeout(t)
}
if (data) {
t = setTimeout(() => {
that.$router.go(0)
}, 100)
}
that.$menu.checkScroll()
}).then(() => {
setTimeout(() => {
that.loading.close()
}, 1000)
}).catch((e) => {
console.log(`%c${e} 请求菜单列表和权限失败，跳转至登录页！！`, 'color:blue')
})
},
// ====================================
......
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