<template>
|
<div class="lifeline">
|
<!-- <div class="switchBox">
|
<div :class="typeIdx === 0 ? 'menuItemSel':''" @click="handleChangeMenu(0)">风险监测</div>
|
<div :class="typeIdx === 1 ? 'menuItemSel':''" @click="handleChangeMenu(1)">预警分析</div>
|
<div :class="typeIdx === 2 ? 'menuItemSel':''" @click="handleChangeMenu(2)">公共安全</div>
|
</div> -->
|
<div class="aside" style="left: 30px;" v-show="typeIdx != 0">
|
<left-charts v-if="typeIdx === 1"></left-charts>
|
<warn-left-charts v-if="typeIdx === 2"></warn-left-charts>
|
<public-safety-left v-if="typeIdx === 3"></public-safety-left>
|
</div>
|
<div class="aside" style="right: 30px;" v-show="typeIdx != 0">
|
<right-charts v-if="typeIdx === 1"></right-charts>
|
<warn-right-charts v-if="typeIdx === 2"></warn-right-charts>
|
<public-safety-right v-if="typeIdx === 3"></public-safety-right>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import LeftCharts from "@/views/xianCim/lifeline/LeftCharts";
|
import RightCharts from "@/views/xianCim/lifeline/RightCharts";
|
import WarnLeftCharts from "@/views/xianCim/warnAnalysis/LeftCharts";
|
import WarnRightCharts from "@/views/xianCim/warnAnalysis/RightCharts";
|
import PublicSafetyLeft from "@/views/xianCim/lifeline/publicSafetyLeft";
|
import PublicSafetyRight from "@/views/xianCim/lifeline/publicSafetyRight";
|
export default {
|
name: "lifeline",
|
components: {
|
LeftCharts,
|
RightCharts,
|
WarnLeftCharts,
|
WarnRightCharts,
|
PublicSafetyLeft,
|
PublicSafetyRight
|
},
|
data() {
|
return {
|
typeIdx: 0,
|
}
|
},
|
watch: {
|
"$store.state.currentMenu": function (val) {
|
let index = 0
|
switch (val) {
|
case '预警分析':
|
index = 2
|
break;
|
|
case '风险监测':
|
index = 1
|
break;
|
|
case '公共安全':
|
index = 3
|
break;
|
|
default:
|
index = 0
|
break;
|
}
|
if (this.typeIdx == index) {
|
// this.typeIdx = 0
|
} else {
|
this.typeIdx = index
|
}
|
|
this.$nextTick(() => [
|
window.dispatchEvent(new Event('resize'))//初始化echarts
|
])
|
}
|
},
|
methods: {
|
handleChangeMenu(type) {
|
this.typeIdx = type;
|
}
|
},
|
}
|
</script>
|
|
<style scoped lang="less">
|
.lifeline {
|
height: 100%;
|
width: 100%;
|
position: absolute;
|
z-index: 100;
|
top: 0px;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
pointer-events: none;
|
|
.switchBox {
|
position: absolute;
|
bottom: 120px;
|
right: 50%;
|
transform: translateX(50%);
|
display: flex;
|
pointer-events: auto;
|
|
.menuItemSel {
|
background: no-repeat url('~@/assets/img/lifeline/menu_sel.png');
|
background-size: 100% 100%;
|
}
|
|
div {
|
height: 38px;
|
line-height: 30px;
|
text-align: center;
|
padding: 0 15px;
|
font-size: 12px;
|
font-weight: 400;
|
background: no-repeat url('~@/assets/img/lifeline/menu_nor.png');
|
background-size: 100% 100%;
|
cursor: pointer;
|
color: #fff;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
text-shadow: -0.87px 0.5px 4px 0px rgba(5, 27, 54, 0.42);
|
letter-spacing: 1.1px;
|
}
|
}
|
|
.aside {
|
width: 20%;
|
height: auto;
|
position: absolute;
|
display: flex;
|
flex-direction: column;
|
top: 80px;
|
bottom: 60px;
|
//padding-top: 80px;
|
//padding-bottom: 60px;
|
//font-size: 50px;
|
color: aliceblue;
|
gap: 10px;
|
background: rgba(24, 47, 78, 0.5);
|
border-radius: 10px;
|
pointer-events: auto;
|
}
|
}
|
</style>
|
