Commit f5751069 authored by xiexingan's avatar xiexingan

bug修复

parent 107585c9
......@@ -50,12 +50,14 @@
{
align: 'center',
prop: 'setting_mode',
label: '设定模式'
label: '设定模式',
slot: true
},
{
align: 'center',
prop: 'setting_wind_speed',
label: '设定风速'
label: '设定风速',
slot: true
},
{
align: 'center',
......
......@@ -38,6 +38,19 @@
<span>--</span>
</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>
<el-dialog
title="空调设置"
......
<template lang="pug">
<div class="ol_point">
<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">
<div class="ol_point_left_top">
<div class="ol_point_left_topL">
......@@ -61,7 +61,11 @@
<div v-show="transformationSta==1">
<el-row style="padding-bottom:15px;height:calc(100vh - 150px);background:#fff;" :span="24">
<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-row>
</div>
......@@ -102,6 +106,7 @@ import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
import LineString from 'ol/geom/LineString'
import Polygon from 'ol/geom/Polygon'
import Overlay from 'ol/Overlay'
// 用来添加相关文字描述的
import { Text, Fill, Stroke, Circle, Style } from 'ol/style'
......@@ -200,6 +205,18 @@ export default {
},
// 初始化地图
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 = []
let mapList = this.mapList
// let mapsrcList = []
......@@ -333,6 +350,37 @@ export default {
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) {
//默认样式
......@@ -390,17 +438,17 @@ export default {
scale: zoom || 0.4,
//rotation:0 旋转度
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
},
......@@ -994,6 +1042,14 @@ export default {
}
</script>
<style lang="scss" scoped>
#popup-content{
// height: 20px;
color: blue;
font-weight: bold;
text-align: center;
background: #fff;
padding:2px 5px;
}
.dic_tree {
background: #f4f4f4;
font-size: 14px;
......@@ -1140,7 +1196,7 @@ export default {
}
.el-tree {
background: #f4f4f4;
font-size: 12px;
// font-size: 12px;
overflow-y: auto;
height: 750px;
}
......
......@@ -2,8 +2,7 @@ export const tableColums = [
{
align: 'center',
prop: 'name',
label: '设备名称',
width: 162
label: '设备名称'
},
{
align: 'center',
......@@ -14,8 +13,7 @@ export const tableColums = [
{
align: 'center',
prop: 'electric_energy',
label: '当日用电量(kwh)',
width: 162
label: '当日用电量(kwh)'
},
// {
// align: 'center',
......@@ -26,13 +24,11 @@ export const tableColums = [
{
align: 'center',
prop: 'statusName',
label: '设备状态',
width: 152
label: '设备状态'
},
{
align: 'center',
prop: 'code',
label: '设备编号',
width: 152
label: '设备编号'
}
]
......@@ -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')") 保存
div(style="clear:both")
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;')
div(class="monitor_point_left_top")
div.title-bold(slot='header' class="monitor_point_left_topL") 资源点列表
......@@ -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)")
el-row(style="padding-bottom:15px;height:680px" ,:span="24")
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()
// 弹窗, 新增 / 修改
......@@ -69,6 +73,7 @@ import Zoom from 'ol/control/Zoom'
import { DoubleClickZoom } from 'ol/interaction'
import Draw from 'ol/interaction/Draw'
import LineString from 'ol/geom/LineString'
import Overlay from 'ol/Overlay'
// 图上图标相关
import OlFeature from 'ol/Feature'
......@@ -199,6 +204,18 @@ export default {
},
// 初始化地图
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 extent = [-1100, 110, 1460, 820]
......@@ -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) {
if (this.editable) {
......@@ -486,17 +535,17 @@ export default {
scale: zoom || 0.4,
//rotation:0 旋转度
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
},
......@@ -1667,6 +1716,15 @@ export default {
</style>
<style lang="scss" scoped>
#popup-content{
// height: 20px;
color: blue;
font-weight: bold;
text-align: center;
background: #fff;
padding:2px 5px;
}
#map {
/deep/.ol-zoom {
// 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