<!-- 总体概览右侧面板 -->
<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);
bus.emit('clearAllLayer');
bus.emit('SetLayerShow', ['燃气视角']);
} 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);
bus.emit('clearAllLayer');
bus.emit('SetLayerShow', ['雨水管网', '综合视角']);
} 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);
bus.emit('clearAllLayer');
bus.emit('SetLayerShow', ['仿真地图', '桥梁视角']);
} 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);
bus.emit('clearAllLayer');
bus.emit('SetLayerShow', ['仿真地图', '隧道视角']);
}
}
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>
