Commit f5751069 authored by xiexingan's avatar xiexingan

bug修复

parent 107585c9
...@@ -50,12 +50,14 @@ ...@@ -50,12 +50,14 @@
{ {
align: 'center', align: 'center',
prop: 'setting_mode', prop: 'setting_mode',
label: '设定模式' label: '设定模式',
slot: true
}, },
{ {
align: 'center', align: 'center',
prop: 'setting_wind_speed', prop: 'setting_wind_speed',
label: '设定风速' label: '设定风速',
slot: true
}, },
{ {
align: 'center', align: 'center',
......
...@@ -38,6 +38,19 @@ ...@@ -38,6 +38,19 @@
<span>--</span> <span>--</span>
</template> </template>
<template #setting_mode='data'>
<span v-if="data.scope.setting_mode==0"></span>
<span v-if="data.scope.setting_mode==2">制冷模式</span>
<span v-if="data.scope.setting_mode==4">除湿模式</span>
<span v-if="data.scope.setting_mode==8">送分模式</span>
<span v-if="data.scope.setting_mode==16">制热模式</span>
</template>
<template #setting_wind_speed='data'>
<span v-if="data.scope.setting_wind_speed==0"></span>
<span v-if="data.scope.setting_wind_speed==2">高风</span>
<span v-if="data.scope.setting_wind_speed==4">中风</span>
<span v-if="data.scope.setting_wind_speed==8">低风</span>
</template>
</table-list> </table-list>
<el-dialog <el-dialog
title="空调设置" title="空调设置"
......
<template lang="pug"> <template lang="pug">
<div class="ol_point"> <div class="ol_point">
<el-container style='padding-left:0px;'> <el-container style='padding-left:0px;'>
<el-aside width='333px' style='height:calc(100vh - 150px);'> <el-aside width="19vw" style='height:calc(100vh - 150px);'>
<el-card class = "tree-container"> <el-card class = "tree-container">
<div class="ol_point_left_top"> <div class="ol_point_left_top">
<div class="ol_point_left_topL"> <div class="ol_point_left_topL">
...@@ -61,7 +61,11 @@ ...@@ -61,7 +61,11 @@
<div v-show="transformationSta==1"> <div v-show="transformationSta==1">
<el-row style="padding-bottom:15px;height:calc(100vh - 150px);background:#fff;" :span="24"> <el-row style="padding-bottom:15px;height:calc(100vh - 150px);background:#fff;" :span="24">
<el-col class="resource-container" :style="obj" ref="drag"> <el-col class="resource-container" :style="obj" ref="drag">
<div id="map" class="map" ref='map' style="width: 100%;height: 720px;position:relative;" ></div> <div id="map" class="map" ref='map' style="width: 100%;height: 720px;position:relative;" >
<div id="popup" class="ol-popup">
<div id="popup-content" ></div>
</div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -102,6 +106,7 @@ import OlStyleStyle from 'ol/style/Style' ...@@ -102,6 +106,7 @@ import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon' import OlStyleIcon from 'ol/style/Icon'
import LineString from 'ol/geom/LineString' import LineString from 'ol/geom/LineString'
import Polygon from 'ol/geom/Polygon' import Polygon from 'ol/geom/Polygon'
import Overlay from 'ol/Overlay'
// 用来添加相关文字描述的 // 用来添加相关文字描述的
import { Text, Fill, Stroke, Circle, Style } from 'ol/style' import { Text, Fill, Stroke, Circle, Style } from 'ol/style'
...@@ -200,6 +205,18 @@ export default { ...@@ -200,6 +205,18 @@ export default {
}, },
// 初始化地图 // 初始化地图
initMap(url) { initMap(url) {
let _this = this
let element = document.getElementById('popup')
let content = document.getElementById('popup-content')
if (!element || !content) {
return
}
let popup = new Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, 40]
})
this.resolutions = [] this.resolutions = []
let mapList = this.mapList let mapList = this.mapList
// let mapsrcList = [] // let mapsrcList = []
...@@ -333,6 +350,37 @@ export default { ...@@ -333,6 +350,37 @@ export default {
that.queryDetailVisible = false that.queryDetailVisible = false
} }
}) })
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 id = feature.getId()
let infoText = ''
_this.list.forEach(item => {
if (item.id === id) {
infoText = '<span class="alarm-info">' + item.name + '</span>'
}
})
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'
}
})
}, },
mapClick(feature, item, flag) { mapClick(feature, item, flag) {
//默认样式 //默认样式
...@@ -390,17 +438,17 @@ export default { ...@@ -390,17 +438,17 @@ export default {
scale: zoom || 0.4, scale: zoom || 0.4,
//rotation:0 旋转度 //rotation:0 旋转度
src: require('@/assets/images/imgs/' + src) src: require('@/assets/images/imgs/' + src)
}),
text: new Text({
text: name, // 添加文字描述
font: 'bold 14px font-size', // 设置字体大小
stroke: new Stroke({ color: 'white', width: 5 }), //设置文字背景
fill: new Fill({
// 设置字体颜色
color: 'blue'
}),
offsetY: 30 // 设置文字偏移量
}) })
// text: new Text({
// text: name, // 添加文字描述
// font: 'bold 14px font-size', // 设置字体大小
// stroke: new Stroke({ color: 'white', width: 5 }), //设置文字背景
// fill: new Fill({
// // 设置字体颜色
// color: 'blue'
// }),
// offsetY: 30 // 设置文字偏移量
// })
}) })
return style return style
}, },
...@@ -994,6 +1042,14 @@ export default { ...@@ -994,6 +1042,14 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#popup-content{
// height: 20px;
color: blue;
font-weight: bold;
text-align: center;
background: #fff;
padding:2px 5px;
}
.dic_tree { .dic_tree {
background: #f4f4f4; background: #f4f4f4;
font-size: 14px; font-size: 14px;
...@@ -1140,7 +1196,7 @@ export default { ...@@ -1140,7 +1196,7 @@ export default {
} }
.el-tree { .el-tree {
background: #f4f4f4; background: #f4f4f4;
font-size: 12px; // font-size: 12px;
overflow-y: auto; overflow-y: auto;
height: 750px; height: 750px;
} }
......
...@@ -2,8 +2,7 @@ export const tableColums = [ ...@@ -2,8 +2,7 @@ export const tableColums = [
{ {
align: 'center', align: 'center',
prop: 'name', prop: 'name',
label: '设备名称', label: '设备名称'
width: 162
}, },
{ {
align: 'center', align: 'center',
...@@ -14,8 +13,7 @@ export const tableColums = [ ...@@ -14,8 +13,7 @@ export const tableColums = [
{ {
align: 'center', align: 'center',
prop: 'electric_energy', prop: 'electric_energy',
label: '当日用电量(kwh)', label: '当日用电量(kwh)'
width: 162
}, },
// { // {
// align: 'center', // align: 'center',
...@@ -26,13 +24,11 @@ export const tableColums = [ ...@@ -26,13 +24,11 @@ export const tableColums = [
{ {
align: 'center', align: 'center',
prop: 'statusName', prop: 'statusName',
label: '设备状态', label: '设备状态'
width: 152
}, },
{ {
align: 'center', align: 'center',
prop: 'code', prop: 'code',
label: '设备编号', label: '设备编号'
width: 152
} }
] ]
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
el-button(type="primary" size='mini' style="margin-right:10px;" @click="saveResourceList" :disabled='submitlDisabled' v-if="editable && isAuth('sys:point:save')") 保存 el-button(type="primary" size='mini' style="margin-right:10px;" @click="saveResourceList" :disabled='submitlDisabled' v-if="editable && isAuth('sys:point:save')") 保存
div(style="clear:both") div(style="clear:both")
el-container( style='padding-left:0px;') el-container( style='padding-left:0px;')
el-aside(width="18vw" style='height:calc(100vh - 195px);') el-aside(width="19vw" style='height:calc(100vh - 195px);')
el-card.treeCard.tree-container(style='min-height:630px;background:#f4f4f4;') el-card.treeCard.tree-container(style='min-height:630px;background:#f4f4f4;')
div(class="monitor_point_left_top") div(class="monitor_point_left_top")
div.title-bold(slot='header' class="monitor_point_left_topL") 资源点列表 div.title-bold(slot='header' class="monitor_point_left_topL") 资源点列表
...@@ -43,7 +43,11 @@ ...@@ -43,7 +43,11 @@
div( :class="item.value" :title="item.name" style="margin:5px 5px 0 0;" v-for="item in iconNameListBottom" @click="iconClick(item)") div( :class="item.value" :title="item.name" style="margin:5px 5px 0 0;" v-for="item in iconNameListBottom" @click="iconClick(item)")
el-row(style="padding-bottom:15px;height:680px" ,:span="24") el-row(style="padding-bottom:15px;height:680px" ,:span="24")
el-col() el-col()
<div id="map" style="width: 100%;height: calc(100vh - 260px);position: relative;"></div> <div id="map" style="width: 100%;height: calc(100vh - 260px);position: relative;">
<div id="popup" class="ol-popup">
<div id="popup-content" ></div>
</div>
</div>
el-col() el-col()
// 弹窗, 新增 / 修改 // 弹窗, 新增 / 修改
...@@ -69,6 +73,7 @@ import Zoom from 'ol/control/Zoom' ...@@ -69,6 +73,7 @@ import Zoom from 'ol/control/Zoom'
import { DoubleClickZoom } from 'ol/interaction' import { DoubleClickZoom } from 'ol/interaction'
import Draw from 'ol/interaction/Draw' import Draw from 'ol/interaction/Draw'
import LineString from 'ol/geom/LineString' import LineString from 'ol/geom/LineString'
import Overlay from 'ol/Overlay'
// 图上图标相关 // 图上图标相关
import OlFeature from 'ol/Feature' import OlFeature from 'ol/Feature'
...@@ -199,6 +204,18 @@ export default { ...@@ -199,6 +204,18 @@ export default {
}, },
// 初始化地图 // 初始化地图
initMap(url) { initMap(url) {
let _this = this
let element = document.getElementById('popup')
let content = document.getElementById('popup-content')
if (!element || !content) {
return
}
let popup = new Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, 40]
})
let mapList = this.mapList let mapList = this.mapList
// 计算静态地图映射到地图上的范围 // 计算静态地图映射到地图上的范围
let extent = [-1100, 110, 1460, 820] let extent = [-1100, 110, 1460, 820]
...@@ -294,6 +311,38 @@ export default { ...@@ -294,6 +311,38 @@ export default {
} }
} }
}) })
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 id = feature.getId()
let infoText = ''
// console.log(_this.list)
_this.list.forEach(item => {
if (item.id === id) {
infoText = '<span class="alarm-info">' + item.name + '</span>'
}
})
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'
}
})
}, },
openAddOrUpdate(item) { openAddOrUpdate(item) {
if (this.editable) { if (this.editable) {
...@@ -486,17 +535,17 @@ export default { ...@@ -486,17 +535,17 @@ export default {
scale: zoom || 0.4, scale: zoom || 0.4,
//rotation:0 旋转度 //rotation:0 旋转度
src: require('@/assets/images/imgs/' + src) src: require('@/assets/images/imgs/' + src)
}),
text: new Text({
text: name, // 添加文字描述
font: 'bold 14px font-size', // 设置字体大小
stroke: new Stroke({ color: 'white', width: 5 }), //设置文字背景
fill: new Fill({
// 设置字体颜色
color: 'blue'
}),
offsetY: 30 // 设置文字偏移量
}) })
// text: new Text({
// text: name, // 添加文字描述
// font: 'bold 14px font-size', // 设置字体大小
// stroke: new Stroke({ color: 'white', width: 5 }), //设置文字背景
// fill: new Fill({
// // 设置字体颜色
// color: 'blue'
// }),
// offsetY: 30 // 设置文字偏移量
// })
}) })
return style return style
}, },
...@@ -1667,6 +1716,15 @@ export default { ...@@ -1667,6 +1716,15 @@ export default {
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
#popup-content{
// height: 20px;
color: blue;
font-weight: bold;
text-align: center;
background: #fff;
padding:2px 5px;
}
#map { #map {
/deep/.ol-zoom { /deep/.ol-zoom {
// display: none; // display: none;
......
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