<template>
|
<div class="leftChartsContainer">
|
<div class="topContainer commonTitle">
|
<div class="topTitle">
|
<i
|
><img
|
src="@/assets/img/riskMonitor/integrated/rightCons/titleRight.png"
|
alt=""
|
/></i>
|
<div class="nameCh">
|
<span>重点防护目标</span>
|
</div>
|
<div class="nameEn">
|
<span>KEY PROTECTIVE TARGETS</span>
|
</div>
|
<div class="countAll fr">
|
<!-- <div class="all">-->
|
<!-- <b>共计</b><span>5</span><span>2</span><span>4</span>-->
|
<!-- </div>-->
|
</div>
|
</div>
|
<div class="chartMain">
|
<KeyProtectiveTargets />
|
</div>
|
</div>
|
<div class="bottomContainer commonTitle">
|
<div class="chartMain">
|
<DynamicRiskAnalysis />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import KeyProtectiveTargets from "@/components/warnAnalysis/leftCharts/KeyProtectiveTargets1";
|
import DynamicRiskAnalysis from "@/components/warnAnalysis/leftCharts/DynamicRiskAnalysis1";
|
export default {
|
name: "leftCharts",
|
components: {
|
KeyProtectiveTargets,
|
DynamicRiskAnalysis,
|
},
|
data() {
|
return {};
|
},
|
methods: {},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.leftChartsContainer {
|
width: 100%;
|
height: 100%;
|
box-sizing: border-box;
|
|
.topContainer {
|
width: 100%;
|
height: 60%;
|
.topTitle {
|
.countAll {
|
.all {
|
overflow: hidden;
|
box-sizing: border-box;
|
b {
|
margin: 6px 0px 0 0;
|
float: left;
|
font-size: 14px;
|
font-family: Alimama ShuHeiTi;
|
font-weight: bold;
|
color: #f8fcff;
|
}
|
span {
|
//width: 20px;
|
padding: 0 3px;
|
height: 34px;
|
line-height: 34px;
|
text-align: center;
|
float: left;
|
font-size: 12px;
|
font-family: DIN Alternate;
|
font-weight: bold;
|
color: #ffffff;
|
background: url("~@/assets/img/warnAnalysis/countBg.png") no-repeat;
|
background-size: 100% 100%;
|
}
|
}
|
}
|
}
|
.chartMain {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.bottomContainer {
|
width: 100%;
|
height: 40%;
|
|
.chartMain {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
</style>
|
