|
|
@ -77,7 +77,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 地图 --> |
|
|
|
<!-- 地图 --> |
|
|
|
<div id="container" style="height: 840px;width: 100%"></div> |
|
|
|
<div id="container" style="width: 100%"></div> |
|
|
|
<!-- 放大图片 --> |
|
|
|
<!-- 放大图片 --> |
|
|
|
<transition name="fade"> |
|
|
|
<transition name="fade"> |
|
|
|
<div id="mask" v-show="showMask" @click="showMask = false"> |
|
|
|
<div id="mask" v-show="showMask" @click="showMask = false"> |
|
|
@ -88,6 +88,16 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
<style> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*去掉百度地图logo*/ |
|
|
|
|
|
|
|
.BMap_cpyCtrl { |
|
|
|
|
|
|
|
display: none; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.anchorBL { |
|
|
|
|
|
|
|
display: none; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
<script> |
|
|
|
<script> |
|
|
|
import echarts from 'echarts' |
|
|
|
import echarts from 'echarts' |
|
|
|
import "../utils/flexible" |
|
|
|
import "../utils/flexible" |
|
|
@ -146,7 +156,7 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
mounted() { |
|
|
|
// 间隔5分钟获取数据 |
|
|
|
// 间隔5分钟获取数据 |
|
|
|
this.getList() |
|
|
|
this.init() |
|
|
|
// setInterval(this.getList(), 300000) |
|
|
|
// setInterval(this.getList(), 300000) |
|
|
|
this.setMap() |
|
|
|
this.setMap() |
|
|
|
this.setTime() |
|
|
|
this.setTime() |
|
|
@ -157,56 +167,52 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
methods: { |
|
|
|
// 获取数据 |
|
|
|
// 获取数据 |
|
|
|
async getList() { |
|
|
|
init(){ |
|
|
|
|
|
|
|
this.get1().then(()=>{ |
|
|
|
|
|
|
|
// 水位数据 |
|
|
|
|
|
|
|
let show = this.showLevel.filter(item => item.flag) |
|
|
|
|
|
|
|
let id = show.length? show.map(item => item.id).join(): this.showLevel[0].id |
|
|
|
|
|
|
|
this.get1_2(id) |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
this.get2(); |
|
|
|
|
|
|
|
this.get3(); |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
async get1() { |
|
|
|
// 测站数据 |
|
|
|
// 测站数据 |
|
|
|
fetch(this.api+'info') |
|
|
|
let res = await this.$axiosGet('/api/daping/station/info'); |
|
|
|
.then(e => e.json()) |
|
|
|
if(res.code == 0){ |
|
|
|
.then(e => { |
|
|
|
this.station = res.data; |
|
|
|
this.station = e |
|
|
|
for (var i = 0; i < this.station.length; i++) { |
|
|
|
e.forEach(station => { |
|
|
|
let station = this.station[i]; |
|
|
|
if(this.showLevel.some(item => item.id == station.id)) return |
|
|
|
if(this.showLevel.some(item => item.id == station.id)) return |
|
|
|
this.showLevel.push({ |
|
|
|
this.showLevel.push({ |
|
|
|
id: station.id, |
|
|
|
id: station.id, |
|
|
|
stnm: station.stnm, |
|
|
|
stnm: station.stnm, |
|
|
|
flag: this.showLevel.filter(e => e.flag).length<5? true: false |
|
|
|
flag: this.showLevel.filter(e => e.flag).length<5? true: false |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 水位数据 |
|
|
|
|
|
|
|
let show = this.showLevel.filter(item => item.flag) |
|
|
|
|
|
|
|
let id = show.length? show.map(item => item.id).join(): this.showLevel[0].id |
|
|
|
|
|
|
|
fetch(this.api + 'waterLevelTrend?ids=' + id) |
|
|
|
|
|
|
|
.then(e => e.json()) |
|
|
|
|
|
|
|
.then(e => { |
|
|
|
|
|
|
|
this.level = e.data |
|
|
|
|
|
|
|
this.setLine() |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
.catch(e => { console.error(e) }) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.setMarks() |
|
|
|
this.setMarks() |
|
|
|
this.playInfobox() |
|
|
|
this.playInfobox() |
|
|
|
this.setTable() |
|
|
|
this.setTable() |
|
|
|
}) |
|
|
|
} |
|
|
|
.catch(e => { console.error(e) }) |
|
|
|
}, |
|
|
|
// 在线数据 |
|
|
|
async get1_2(id){ |
|
|
|
fetch(this.api + 'status') |
|
|
|
let res = await this.$axiosGet('/api/daping/station/waterLevelTrend?ids='+id); |
|
|
|
.then(e => e.json()) |
|
|
|
this.level = res.data |
|
|
|
.then(e => { |
|
|
|
this.setLine() |
|
|
|
this.status = e.data |
|
|
|
}, |
|
|
|
|
|
|
|
async get2(){ |
|
|
|
|
|
|
|
let res = await this.$axiosGet('/api/daping/station/status'); |
|
|
|
|
|
|
|
this.status = res.data |
|
|
|
this.setPie() |
|
|
|
this.setPie() |
|
|
|
}) |
|
|
|
}, |
|
|
|
.catch(e => { console.error(e) }) |
|
|
|
async get3(){ |
|
|
|
// 水位计分布 |
|
|
|
let res = await this.$axiosGet('/api/daping/station/count'); |
|
|
|
fetch(this.api + 'count') |
|
|
|
this.dist.stnms = res.data.stnms |
|
|
|
.then(e => e.json()) |
|
|
|
this.dist.values[0].value = res.data.zx |
|
|
|
.then(e => { |
|
|
|
this.dist.values[1].value = res.data.lx |
|
|
|
this.dist.stnms = e.data.stnms |
|
|
|
|
|
|
|
this.dist.values[0].value = e.data.zx |
|
|
|
|
|
|
|
this.dist.values[1].value = e.data.lx |
|
|
|
|
|
|
|
this.setDist() |
|
|
|
this.setDist() |
|
|
|
}) |
|
|
|
|
|
|
|
.catch(e => { console.error(e) }) |
|
|
|
|
|
|
|
return this.getList |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
// 实时时间 |
|
|
|
// 实时时间 |
|
|
|
setTime() { |
|
|
|
setTime() { |
|
|
@ -667,7 +673,7 @@ export default { |
|
|
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
<style scoped> |
|
|
|
.app-container{ |
|
|
|
.app-container{ |
|
|
|
height: 840px; |
|
|
|
height: calc(100vh - 50px); |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
.network_show{ |
|
|
|
.network_show{ |
|
|
@ -740,7 +746,7 @@ export default { |
|
|
|
#container { |
|
|
|
#container { |
|
|
|
position: absolute; |
|
|
|
position: absolute; |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
height: calc(100vh - 50px); |
|
|
|
} |
|
|
|
} |
|
|
|
/* 去logo */ |
|
|
|
/* 去logo */ |
|
|
|
.BMap_cpyCtrl { |
|
|
|
.BMap_cpyCtrl { |
|
|
|