|
|
@ -7,7 +7,7 @@ |
|
|
|
<header> |
|
|
|
<header> |
|
|
|
<h1>视频水位计数据监控大屏</h1> |
|
|
|
<h1>视频水位计数据监控大屏</h1> |
|
|
|
</header> |
|
|
|
</header> |
|
|
|
<div class="left"> |
|
|
|
<div class="left" @click="closeBox"> |
|
|
|
<!-- 实时水位 --> |
|
|
|
<!-- 实时水位 --> |
|
|
|
<div class="panel feet"> |
|
|
|
<div class="panel feet"> |
|
|
|
<div class="title"> |
|
|
|
<div class="title"> |
|
|
@ -104,7 +104,8 @@ export default { |
|
|
|
// 数据接口 |
|
|
|
// 数据接口 |
|
|
|
api: '/control-api/api/daping/station/', |
|
|
|
api: '/control-api/api/daping/station/', |
|
|
|
// 图片接口 |
|
|
|
// 图片接口 |
|
|
|
imgapi: process.env.VUE_APP_BASE_API, |
|
|
|
// imgapi: "https://www.huastech.com.cn", |
|
|
|
|
|
|
|
imgapi: process.env.VUE_APP_PIC_PREFIX, |
|
|
|
// 接口数据 |
|
|
|
// 接口数据 |
|
|
|
station: [], |
|
|
|
station: [], |
|
|
|
level: {}, |
|
|
|
level: {}, |
|
|
@ -183,7 +184,7 @@ export default { |
|
|
|
.catch(e => { console.error(e) }) |
|
|
|
.catch(e => { console.error(e) }) |
|
|
|
|
|
|
|
|
|
|
|
this.setMarks() |
|
|
|
this.setMarks() |
|
|
|
this.playInfobox() |
|
|
|
// this.playInfobox() |
|
|
|
this.setTable() |
|
|
|
this.setTable() |
|
|
|
}) |
|
|
|
}) |
|
|
|
.catch(e => { console.error(e) }) |
|
|
|
.catch(e => { console.error(e) }) |
|
|
@ -531,7 +532,7 @@ export default { |
|
|
|
// 定位 |
|
|
|
// 定位 |
|
|
|
var center = new BMap.Point(this.center[0], this.center[1]); |
|
|
|
var center = new BMap.Point(this.center[0], this.center[1]); |
|
|
|
// 生成地图 |
|
|
|
// 生成地图 |
|
|
|
map.centerAndZoom(center, 12); |
|
|
|
map.centerAndZoom(center, 13); |
|
|
|
|
|
|
|
|
|
|
|
// 地图样式 |
|
|
|
// 地图样式 |
|
|
|
map.setMapStyleV2({ |
|
|
|
map.setMapStyleV2({ |
|
|
@ -559,23 +560,37 @@ export default { |
|
|
|
// 点击地标打开窗口 |
|
|
|
// 点击地标打开窗口 |
|
|
|
marker.addEventListener('click', () => { |
|
|
|
marker.addEventListener('click', () => { |
|
|
|
clearInterval(this.play) |
|
|
|
clearInterval(this.play) |
|
|
|
|
|
|
|
//取消轮播,加上判断 |
|
|
|
|
|
|
|
if(this.box != null){ |
|
|
|
this.box.close() |
|
|
|
this.box.close() |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// this.box.close() |
|
|
|
this.flag = false |
|
|
|
this.flag = false |
|
|
|
let box = this.box = this.setInfoBox(this.map, marker, item) |
|
|
|
let box = this.box = this.setInfoBox(this.map, marker, item) |
|
|
|
setTimeout(() => { |
|
|
|
// setTimeout(() => { |
|
|
|
box.close() |
|
|
|
// box.close() |
|
|
|
this.playInfobox() |
|
|
|
// this.playInfobox() |
|
|
|
}, 9999) |
|
|
|
// }, 9999) |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
// marker.addEventListener('mouseout', () => { |
|
|
|
|
|
|
|
// //取消轮播,加上判断 |
|
|
|
|
|
|
|
// if(this.box != null){ |
|
|
|
|
|
|
|
// this.box.close() |
|
|
|
|
|
|
|
// } |
|
|
|
|
|
|
|
// }) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
closeBox(){ |
|
|
|
|
|
|
|
if(this.box != null){ |
|
|
|
|
|
|
|
this.box.close() |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
// 创建信息框 |
|
|
|
// 创建信息框 |
|
|
|
setInfoBox(map, marker, item) { |
|
|
|
setInfoBox(map, marker, item) { |
|
|
|
let htmlStr = ` |
|
|
|
let htmlStr = ` |
|
|
|
<div style="height: 100%; position: relative;"> |
|
|
|
<div style="height: 100%; position: relative;"> |
|
|
|
<div style="position: absolute; left: 14px; top: 33px; z-index: -1; background: hsla(200, 88%, 33%, .6); box-shadow: 0 0 16px hsl(200, 88%, 33%); width: 336px; height: 135px;"></div> |
|
|
|
<div style="position: absolute; left: 14px; top: 33px; z-index: -1; background: hsla(200, 88%, 33%, .6); box-shadow: 0 0 16px hsl(200, 88%, 33%); width: 336px; height: 135px;"></div> |
|
|
|
<div style="background: url('`+borderpng+`') center center; width: 100%; height: 100%; color: #effaff; font-size: 18px; text-shadow: 2px 2px 4px #17263C; display: flex;"> |
|
|
|
<div οnclick="closeBox" style="background: url('`+borderpng+`') center center; width: 100%; height: 100%; color: #effaff; font-size: 18px; text-shadow: 2px 2px 4px #17263C; display: flex;"> |
|
|
|
<div style="flex: 1; padding: 66px 0 0 20px;"> |
|
|
|
<div style="flex: 1; padding: 66px 0 0 20px;"> |
|
|
|
<div style="height: 30px; white-space: nowrap; word-wrap: ellipsis; overflow: hidden;">站点: ${item.stnm}</div> |
|
|
|
<div style="height: 30px; white-space: nowrap; word-wrap: ellipsis; overflow: hidden;">站点: ${item.stnm}</div> |
|
|
|
<div style="height: 30px;">水位: ${item.value}m</div> |
|
|
|
<div style="height: 30px;">水位: ${item.value}m</div> |
|
|
|