<template>
|
<div class="lifeline">
|
<!-- <div class="changeBox">
|
<div
|
:style="{ color: typeIdx == 0 ? '#5EB4FF' : '#fff' }"
|
@click="handleChangeMenu(0)"
|
>
|
风险监测
|
</div>
|
<div
|
:style="{ color: typeIdx == 1 ? '#5EB4FF' : '#fff' }"
|
@click="handleChangeMenu(1)"
|
>
|
预警分析
|
</div>
|
</div> -->
|
<div class="aside" style="margin-left: 30px">
|
<left-charts v-if="typeIdx == 0"></left-charts>
|
<warn-left-charts v-if="typeIdx == 1"></warn-left-charts>
|
</div>
|
<div class="aside" style="margin-right: 30px">
|
<right-charts v-if="typeIdx == 0"></right-charts>
|
<warn-right-charts v-if="typeIdx == 1"></warn-right-charts>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import LeftCharts from "@/views/xianCim/lifeline/LeftCharts1";
|
import RightCharts from "@/views/xianCim/lifeline/RightCharts1";
|
import WarnLeftCharts from "@/views/xianCim/warnAnalysis/LeftCharts1";
|
import WarnRightCharts from "@/views/xianCim/warnAnalysis/RightCharts1";
|
export default {
|
name: "lifeline",
|
components: {
|
LeftCharts,
|
RightCharts,
|
WarnLeftCharts,
|
WarnRightCharts,
|
},
|
data() {
|
return {
|
typeIdx: 0,
|
};
|
},
|
methods: {
|
handleChangeMenu(type) {
|
this.typeIdx = type;
|
// this.$router.push("/xianCim/UEView/warnAnalysis")
|
},
|
},
|
};
|
</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;
|
|
.changeBox {
|
position: absolute;
|
top: 80px;
|
right: calc(25% + 50px);
|
display: flex;
|
flex-direction: column;
|
pointer-events: auto;
|
|
div {
|
padding: 15px;
|
font-size: 18px;
|
font-weight: bold;
|
margin-bottom: 10px;
|
background: no-repeat url("~@/assets/img/riskMonitor/integrated/monitorOverview/nameBg.png");
|
background-size: 100% 100%;
|
cursor: pointer;
|
color: #fff;
|
}
|
}
|
|
.aside {
|
width: 25%;
|
height: auto;
|
//border: solid 1px red;
|
display: flex;
|
flex-direction: column;
|
padding-top: 80px;
|
padding-bottom: 60px;
|
font-size: 50px;
|
color: aliceblue;
|
gap: 10px;
|
background: rgba(18, 41, 75, 0.5);
|
border-radius: 10px;
|
|
}
|
|
.selColor {
|
color: red;
|
background: red;
|
}
|
}
|
</style>
|
