<template>
|
<div class="right">
|
<div class="right-top">
|
<span>模拟结果</span>
|
</div>
|
<div class="right-content" style="height: 370px">
|
<div class="listInfo-title">灾害模拟</div>
|
<div class="listinfo-btns container">
|
<div class="listinfo-btn" @click="exitMock">灾前情况</div>
|
<div class="listinfo-btn" @click="getResult">受灾统计</div>
|
<div class="listinfo-btn" @click="startPlay">灾情对比</div>
|
</div>
|
<div class="listInfo-title">降雨影响</div>
|
<div class="listinfo-btns container">
|
<div class="listinfo-btn" @click="rain1">动态更新</div>
|
<div class="listinfo-btn" @click="rain2">降雨影响</div>
|
<div class="listinfo-btn" @click="rain3">降雨淹没</div>
|
</div>
|
<div class="listInfo-title">降雨过程</div>
|
<div class="listinfo-btns container">
|
<div class="listinfo-btn" @click="openBar">过程模拟</div>
|
<!-- <div class="listinfo-btn" @click="rain1">退出模拟</div>
|
<div class="listinfo-btn" @click="rain1">默认场景</div> -->
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import echartInfo from "@/components/monifangzhen/echartInfo.vue"
|
|
export default {
|
name: "RightRiver",
|
components: {
|
echartInfo,
|
},
|
data() {
|
return {
|
showPreview: false,
|
}
|
},
|
methods: {
|
exitMock() {
|
this.$emit("close")
|
},
|
getResult() {
|
this.$parent.debuffShow = true
|
},
|
startPlay() {
|
this.showPreview = !this.showPreview
|
this.$parent.showPreview = this.showPreview
|
},
|
rain1() {
|
ps.emitMessage({ func_name: "RainChange", visibility: false })
|
ps.emitMessage({ func_name: "RiverDrown", visibility: false })
|
setTimeout(() => {
|
ps.emitMessage({
|
func_name: "HotMap",
|
visibility: true,
|
})
|
}, 1000)
|
},
|
rain2() {
|
ps.emitMessage({ func_name: "HotMap", visibility: false })
|
ps.emitMessage({ func_name: "RiverDrown", visibility: false })
|
|
setTimeout(() => {
|
ps.emitMessage({ func_name: "RainChange", visibility: true })
|
}, 1000)
|
},
|
rain3() {
|
ps.emitMessage({ func_name: "HotMap", visibility: false })
|
ps.emitMessage({ func_name: "RainChange", visibility: false })
|
setTimeout(() => {
|
ps.emitMessage({ func_name: "RiverDrown", visibility: true })
|
}, 1000)
|
},
|
openBar() {
|
this.$parent.barShow = !this.$parent.barShow
|
},
|
},
|
unmounted() {
|
ps.emitMessage({ func_name: "RainChange", visibility: false })
|
ps.emitMessage({ func_name: "RiverDrown", visibility: false })
|
ps.emitMessage({ func_name: "HotMap", visibility: false })
|
},
|
}
|
</script>
|
<style lang="less" scoped>
|
@import url("../../assets/css/right.css");
|
.container {
|
width: 100%;
|
height: 80px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.listinfo-btn {
|
margin: 5px;
|
}
|
}
|
.listInfo-title {
|
color: #fff;
|
font-size: 20px;
|
font-weight: 700;
|
margin: 10px;
|
}
|
</style>
|
