<!-- 总体概览右侧面板 -->
<template>
<!-- 风险评估 -->
<div class="RiskAssessment">
<div class="ListBoxHeader">
<div class="ListBoxHeader_font">风险评估</div>
</div>
<div class="RiskProportion">
<div class="TopProportion">
<div class="riskMc">
<div class="icon"></div>
<div class="text">风险占比</div>
</div>
<div class="riskZs">
<div class="eachDescribe">
<div class="icon bgcblue"></div>
<div class="text">总数</div>
</div>
<div class="eachDescribe">
<div class="icon bgcYellow"></div>
<div class="text">风险数量</div>
</div>
</div>
</div>
<div class="ContentNum">
<div class="dfFlxa" v-for="(item, index) in riskData">
<div class="middleextA flex">
<div>
<img :src="item.Imgurl" alt="" />
</div>
<div style="margin-left: 4px; cursor: pointer" @click="FxClick(item.name)">
{{ item.name }}
</div>
</div>
<div class="middleextB flex">
<div class="BJ_CenBox1" :style="getWidth(item, 1)"></div>
<div
style="
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 13px;
color: rgba(248, 116, 75, 1);
text-align: right;
line-height: 12px;
margin-left: 5px;
"
>
{{ item.sl }}
</div>
</div>
<div class="middleextC flex">
<div
style="
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 16px;
color: #12f9ff;
width: 65%;
text-align: right;
"
>
{{ item.num }}
</div>
<div
style="
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 13px;
color: #12f9ff;
"
>
{{ item.dw }}
</div>
</div>
</div>
</div>
</div>
<div class="DrainageRisk">
<div class="TopProportion">
<div class="riskMc">
<div class="icon"></div>
<div class="text">{{ FxClickName }}风险评估</div>
</div>
</div>
<tslyqk_constituent_3d />
</div>
</div>
<!-- 预警处置 -->
<div class="WarningSisposal">
<div class="ListBoxHeader">
<div class="ListBoxHeader_font">预警处置</div>
</div>
<div class="WarningSj">
<div class="TopProportion">
<div class="WarningSl">
<div class="eachDescribe">
<div class="icon bgcls"></div>
<div class="text">预警数量</div>
</div>
<div class="eachDescribe">
<div class="icon bgcYellow"></div>
<div class="text">处置数量</div>
</div>
</div>
<div class="WarningNy">
<div class="head-right" style="">
<div
class="head-item"
v-for="(item, index) in yearList"
:key="item"
:class="activedname == item.name ? 'activedright' : ''"
@click="yearclick(item, index)"
>
{{ item.name }}
</div>
</div>
</div>
</div>
<div class="WarningList">
<div class="Warningpart flex flex-justcontent-spacebetween">
<div class="part" v-for="(item, index) in tableData" :key="index">
<div class="parttop">
<div class="upper">
<div class="Major">
<img :src="item.Imgurl" class="upImg" />
</div>
<div class="lower">{{ item.name }}</div>
</div>
<div class="below">
<div class="handIn">{{ item.num }}</div>
<div
class="oflower"
:style="{
color:
item.gm == '较多'
? '#FF4D5DFF'
: item.gm == '正常'
? '#2BE7ABFF'
: '#F8E270FF',
}"
>
{{ item.gm }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="WarningEcharts">
<AssessmentjsEcharts
:data="chartData2"
:refresh="chartData2.refresh"
></AssessmentjsEcharts>
</div>
</div>
</template>
<script setup>
import tslyqk_constituent_3d from "@/views/oneMap/Echarts/tslyqk_constituent_3d.vue"; //3d图例
import AssessmentjsEcharts from "@/views/oneMap/Echarts/AssessmentjsEcharts.vue";
import { ref, reactive, toRefs, onMounted } from "vue";
const AllData = reactive({});
import yjsj from "@/assets/newImgs/yjsj.png"; //预警数据
import czsj from "@/assets/newImgs/czsj.png"; //处置数据
import czl from "@/assets/newImgs/czl.png"; //处置率
import ranqi_icon from "@/assets/newImgs/ranqi_icon.png"; //燃气
import qiaoliang from "@/assets/newImgs/qiaoliang.png"; //桥梁
import sd_icon from "@/assets/newImgs/sd_icon.png"; //隧道
import ps_icon from "@/assets/newImgs/ps_icon.png"; //隧道
import fxzb from "@/assets/newImgs/fxzb.png"; //风险占比
import bus from "@/bus";
const yearList = ref([
{ name: "月", value: 1 },
{ name: "年", value: 2 },
]);
const chartData2 = ref({
xAxis: ["12/1", "12/2", "12/3", "12/4", "12/5", "12/6"],
refresh: 1,
});
const riskData = ref([
{ name: "燃气", num: 4549.53, sl: 1922.11, Imgurl: ranqi_icon, dw: "公里" },
{ name: "排水", num: 435.7, sl: 118, Imgurl: ps_icon, dw: "公里" },
{ name: "桥梁", num: 84, sl: 0, Imgurl: qiaoliang, dw: "座" },
{ name: "隧道", num: 1, sl: 0, Imgurl: sd_icon, dw: "座" },
]);
const tableData = ref([
{ name: "预警数量", num: "60", gm: "较多", Imgurl: yjsj },
{ name: "处置数量", num: "60", gm: "正常", Imgurl: czsj },
{ name: "处置率", num: "75%", gm: "未完成", Imgurl: czl },
]);
const activedname = ref("月");
function yearclick(val) {
activedname.value = val.name;
}
// 动态计算盒子的宽度
const getWidth = (item, Num) => {
let widthNum = 0;
if (Num == 1) {
widthNum = (item.sl / (item.num + item.sl)) * 100;
}
return `width:${widthNum}%`;
};
// 风险评估点击事件
const FxClickName = ref("燃气");
const obj = ref([
{
name: "低风险 70% 1345.5",
value: 1345.5,
itemStyle: {
color: "#2BE7ABFF",
},
},
{
name: "一般风险 20% 384.5",
value: 384.5,
itemStyle: {
color: "#18A7F2FF",
},
},
{
name: "较大风险 5% 91.11",
value: 91.11,
itemStyle: {
color: "#F8E270FF",
},
},
{
name: "重大风险 5% 91",
value: 91,
itemStyle: {
color: "#FF5D6CFF",
},
},
]);
function FxClick(val) {
FxClickName.value = val;
if (FxClickName.value == "燃气") {
let obj = [
{
name: "低风险 70% 1345.5",
value: 1345.5,
itemStyle: {
color: "#2BE7ABFF",
},
},
{
name: "一般风险 20% 384.5",
value: 384.5,
itemStyle: {
color: "#18A7F2FF",
},
},
{
name: "较大风险 5% 91.11",
value: 91.11,
itemStyle: {
color: "#F8E270FF",
},
},
{
name: "重大风险 5% 91",
value: 91,
itemStyle: {
color: "#FF5D6CFF",
},
},
];
bus.emit("FxVisible", obj);
} else if (FxClickName.value == "排水") {
let obj = [
{
name: "低风险 65% 76.7",
value: 76.7,
itemStyle: {
color: "#2BE7ABFF",
},
},
{
name: "一般风险 20% 23.6",
value: 23.6,
itemStyle: {
color: "#18A7F2FF",
},
},
{
name: "较大风险 10% 11.8",
value: 11.8,
itemStyle: {
color: "#F8E270FF",
},
},
{
name: "重大风险 5% 5.9",
value: 5.9,
itemStyle: {
color: "#FF5D6CFF",
},
},
];
bus.emit("FxVisible", obj);
} else if (FxClickName.value == "桥梁") {
let obj = [
{
name: "低风险 0% 0",
value: 0,
itemStyle: {
color: "#2BE7ABFF",
},
},
{
name: "一般风险 0% 0",
value: 0,
itemStyle: {
color: "#18A7F2FF",
},
},
{
name: "较大风险 0% 0",
value: 0,
itemStyle: {
color: "#F8E270FF",
},
},
{
name: "重大风险 0% 0",
value: 0,
itemStyle: {
color: "#FF5D6CFF",
},
},
];
bus.emit("FxVisible", obj);
} else {
let obj = [
{
name: "低风险 0% 0",
value: 0,
itemStyle: {
color: "#2BE7ABFF",
},
},
{
name: "一般风险 0% 0",
value: 0,
itemStyle: {
color: "#18A7F2FF",
},
},
{
name: "较大风险 0% 0",
value: 0,
itemStyle: {
color: "#F8E270FF",
},
},
{
name: "重大风险 0% 0",
value: 0,
itemStyle: {
color: "#FF5D6CFF",
},
},
];
bus.emit("FxVisible", obj);
}
}
const showPanel = ref(true); //面板展开收起
// 面板内容展开收起控制
const props = defineProps({
showPanel: {
type: Boolean,
},
});
watch(
() => props.showPanel,
() => {
showPanel.value = props.showPanel;
},
{ immediate: true }
);
onMounted(() => {
bus.emit("FxVisible", obj.value);
});
</script>
<style lang="scss" scoped>
.RiskAssessment {
width: 450px;
height: 410px;
// background: yellowgreen;
.RiskProportion {
width: 450px;
height: 175px;
// background: red;
.ContentNum {
margin-top: 4px;
width: 450px;
height: 140px;
.dfFlxa {
width: 420px;
height: 30px;
margin: 5px auto;
display: flex;
.middleextA {
height: 30px;
width: 17%;
align-items: center;
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 14px;
color: #ebfeff;
}
.middleextB {
height: 14px;
width: 58%;
margin-top: 8px;
background: linear-gradient(
0deg,
rgba(0, 43, 67, 0.8) 0%,
rgba(0, 76, 118, 0.8) 100%
);
border-radius: 16px;
border: 1px solid #15d2fd;
// background: yellow;
.BJ_CenBox1 {
display: inline-block;
height: 12px;
background: #00f2ff;
border-radius: 15px;
box-sizing: border-box;
// padding: 0 5px;
}
}
.middleextC {
margin-left: 13px;
height: 30px;
width: 22%;
justify-content: space-between;
align-items: center;
}
}
}
}
.DrainageRisk {
margin-top: 5px;
width: 450px;
// height: 41%;
height: calc(100% - 225px);
// background: blue;
}
}
.WarningSisposal {
width: 450px;
height: calc(100vh - 530px);
// background: red;
.WarningSj {
width: 450px;
height: 190px;
margin-top: 5px;
// background: yellowgreen;
.WarningList {
margin-top: 5px;
width: 425px;
height: 85%;
// background: yellow;
margin: auto;
.Warningpart {
margin-top: 5px;
.part {
width: 130px;
height: 160px;
background: url("@/assets/newImgs/iSpt.png") no-repeat;
background-size: 100% 100%;
.parttop {
height: 160px;
.upper {
height: 50%;
.Major {
height: 70%;
.upImg {
width: 30px;
height: 30px;
position: relative;
top: 20px;
left: 38%;
}
}
.lower {
height: 30%;
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 14px;
color: #c1d3d4;
display: flex;
// align-items: center;
justify-content: center;
}
}
.below {
height: 50%;
.handIn {
height: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 22px;
color: #12f9ff;
}
.oflower {
height: 50%;
display: flex;
// align-items: center;
justify-content: center;
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 14px;
color: #c1d3d4;
}
}
}
}
}
}
}
.WarningEcharts {
margin-top: 5px;
width: 450px;
// height: 38%;
height: calc(100% - 245px);
// background: rgb(228, 228, 228);
}
}
.partTitleHM {
top: 8px;
position: relative;
width: 408px;
height: 44px;
background: url("@/assets/newImgs/partBg.png") no-repeat;
background-size: 100% 100%;
font-family: PangMenZhengDao;
font-weight: 400;
font-size: 23px;
color: #ebfeff;
line-height: 44px;
padding-left: 35px;
margin-left: 10px;
}
.TopProportion {
display: flex;
width: 100%;
.riskMc {
display: flex;
width: 60%;
.icon {
margin-left: 5px;
width: 25px;
height: 25px;
background: url("@/assets/newImgs/xtb_img.png") no-repeat;
}
.text {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 16px;
color: #ebfeff;
line-height: 25px;
padding-left: 5px;
background: linear-gradient(
0deg,
rgba(0, 242, 255, 0.5) 0%,
rgba(0, 242, 255, 0) 100%
);
height: 10px;
line-height: 0px;
margin-top: 10px;
}
}
.riskZs {
display: flex;
justify-content: space-around;
align-items: center;
width: 40%;
.eachDescribe {
display: flex;
align-items: center;
font-family: Source Han Sans CN;
font-weight: 400;
// padding-top: 5px;
.icon {
width: 8px;
height: 8px;
border-radius: 50%;
}
.bgcYellow {
background: #f8744bff;
}
.bgcblue {
background: #18ffff;
}
.text {
padding: 0 10px 0 6px;
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 16px;
color: #c1d3d4;
}
}
}
.WarningSl {
display: flex;
justify-content: space-around;
align-items: center;
width: 55%;
.eachDescribe {
display: flex;
align-items: center;
font-family: Source Han Sans CN;
font-weight: 400;
// padding-top: 5px;
.icon {
width: 8px;
height: 8px;
border-radius: 50%;
}
.bgcYellow {
background: #2be7abff;
}
.bgcls {
background: #18a7f2ff;
}
.text {
padding: 0 10px 0 6px;
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 14px;
color: #c1d3d4;
}
}
}
.WarningNy {
display: flex;
width: 45%;
.head-right {
cursor: pointer;
font-size: 14px;
color: #ffffff;
display: flex;
line-height: 18px;
.head-item {
width: 70px;
margin-right: 10px;
padding: 2px 3px;
background: #00344f;
height: 23px;
text-align: center;
position: relative;
left: 40px;
}
.activedright {
border: 1px solid #2cfce9;
color: #e4f5ff;
background: #166f84;
}
}
}
}
.ListBoxHeader {
height: 44px;
line-height: 50px;
width: 98%;
background: url("@/assets/newImgs/partBg.png") no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 7px 0px 0px 8px;
.ListBoxHeader_font {
font-family: PangMenZhengDao;
font-weight: 400;
font-size: 23px;
color: #ebfeff;
padding-left: 34px;
}
}
</style>
