268 lines
6.8 KiB
Vue
268 lines
6.8 KiB
Vue
|
<template>
|
|||
|
|
<div class="tunnel-info-dialog" v-if="visible">
|
|||
|
|
<!-- 四个角的装饰 -->
|
|||
|
|
<div class="corner corner-top-left"></div>
|
|||
|
|
<div class="corner corner-top-right"></div>
|
|||
|
|
<div class="corner corner-bottom-left"></div>
|
|||
|
|
<div class="corner corner-bottom-right"></div>
|
|||
|
|
|
|||
|
|
<div class="dialog-header">
|
|||
|
|
<div class="header-title">
|
|||
|
|
<span class="title-text">{{ data.title }}</span>
|
|||
|
|
<img class="title-icon" src="../../../assets/RiskWarning_img/图标_media_dvr@2x.png" alt="" />
|
|||
|
|
</div>
|
|||
|
|
<!-- <div class="close-btn" @click="closeDialog">
|
|||
|
|
<span class="close-icon">×</span>
|
|||
|
|
</div> -->
|
|||
|
|
<div class="close-btn" style="pointer-events: auto;" @click="closeDialog">
|
|||
|
|
<el-icon color="#5DD7F6"><Close /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="dialog-content">
|
|||
|
|
<div class="info-item" v-for="(item, index) in data.items" :key="index">
|
|||
|
|
<label class="info-label">{{ item.label }}：</label>
|
|||
|
|
<span class="info-value">{{ item.value }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { defineProps, defineEmits } from "vue";
|
|||
|
|
import { Close } from "@element-plus/icons-vue";
|
|||
|
|
|
|||
|
|
defineProps({
|
|||
|
|
visible: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false,
|
|||
|
|
},
|
|||
|
|
data: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => ({
|
|||
|
|
title: "隧道信息",
|
|||
|
|
items: [
|
|||
|
|
{ label: "隧道名称", value: "蔺市隧道右线" },
|
|||
|
|
{ label: "编号", value: "G212线" },
|
|||
|
|
{ label: "所属区县", value: "涪陵" },
|
|||
|
|
{ label: "隧道长度", value: "1782(米)" },
|
|||
|
|
{ label: "路线编号", value: "G50351" },
|
|||
|
|
{ label: "路线名称", value: "石柱-重庆" },
|
|||
|
|
{ label: "建成时间", value: "2023年" },
|
|||
|
|
{ label: "入口桩号", value: "159.079" },
|
|||
|
|
{ label: "隧道净宽", value: "22(米)" },
|
|||
|
|
{ label: "隧道净高", value: "5(米)" },
|
|||
|
|
{ label: "长度分类", value: "长隧道" },
|
|||
|
|
{ label: "评定等级", value: "2类" },
|
|||
|
|
],
|
|||
|
|
}),
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 边坡信息数据
|
|||
|
|
const slopeData = {
|
|||
|
|
title: "边坡信息",
|
|||
|
|
items: [
|
|||
|
|
{ label: "边坡坡长", value: "0.1(km)" },
|
|||
|
|
{ label: "边坡最大高度", value: "46(m)" },
|
|||
|
|
{ label: "边坡构成", value: "土石混合边坡 (坡高>=25m)" },
|
|||
|
|
{ label: "风险等级", value: "三级 (一般)" },
|
|||
|
|
{ label: "变形形式", value: "框架梁" },
|
|||
|
|
{ label: "监测设施设置", value: "无" },
|
|||
|
|
{ label: "起点桩号", value: "1447.7" },
|
|||
|
|
{ label: "止点桩号", value: "1447.8" },
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 隧道信息数据
|
|||
|
|
const tunnelData = {
|
|||
|
|
title: "隧道信息",
|
|||
|
|
items: [
|
|||
|
|
{ label: "隧道名称", value: "蔺市隧道右线" },
|
|||
|
|
{ label: "编号", value: "G212 线" },
|
|||
|
|
{ label: "所属区县", value: "涪陵" },
|
|||
|
|
{ label: "隧道长度", value: "1782(米)" },
|
|||
|
|
{ label: "路线编号", value: "G50351" },
|
|||
|
|
{ label: "路线名称", value: "石柱 - 重庆" },
|
|||
|
|
{ label: "建成时间", value: "2023 年" },
|
|||
|
|
{ label: "入口桩号", value: "159.079" },
|
|||
|
|
{ label: "隧道净宽", value: "22(米)" },
|
|||
|
|
{ label: "隧道净高", value: "5(米)" },
|
|||
|
|
{ label: "长度分类", value: "长隧道" },
|
|||
|
|
{ label: "评定等级", value: "2 类" },
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 桥梁信息数据
|
|||
|
|
const bridgeData = {
|
|||
|
|
title: "桥梁信息",
|
|||
|
|
items: [
|
|||
|
|
{ label: "桥梁名称", value: "蔺市隧道右线" },
|
|||
|
|
{ label: "编号", value: "K212 线" },
|
|||
|
|
{ label: "所属区县", value: "涪陵" },
|
|||
|
|
{ label: "桥梁长度", value: "46(米)" },
|
|||
|
|
{ label: "路线编号", value: "G50351" },
|
|||
|
|
{ label: "路线名称", value: "银川 - 重庆" },
|
|||
|
|
{ label: "建成时间", value: "2013" },
|
|||
|
|
{ label: "中心桩号", value: "1278.994" },
|
|||
|
|
{ label: "桥梁长度", value: "46 米" },
|
|||
|
|
{ label: "跨径总长", value: "40 米" },
|
|||
|
|
{ label: "跨径分类", value: "长隧道" },
|
|||
|
|
{ label: "技术状况", value: "一类" },
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 抢险队伍数据
|
|||
|
|
const rescueTeamData = {
|
|||
|
|
title: "抢险队伍",
|
|||
|
|
items: [
|
|||
|
|
{ label: "队伍名称", value: "重庆公路应急抢险指挥及物资储备中心" },
|
|||
|
|
{ label: "防范状态", value: "已出动" },
|
|||
|
|
{ label: "人数", value: "50" },
|
|||
|
|
{ label: "联系人", value: "18602981928" },
|
|||
|
|
{ label: "地址", value: "重庆市江津区双福工业园区赵坪路 157 号" },
|
|||
|
|
{ label: "物资装备", value: "应急物资:8100 件;应急装备:33 台" },
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
defineExpose({
|
|||
|
|
slopeData,
|
|||
|
|
tunnelData,
|
|||
|
|
bridgeData,
|
|||
|
|
rescueTeamData,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const emit = defineEmits(["close"]);
|
|||
|
|
|
|||
|
|
const closeDialog = () => {
|
|||
|
|
emit("close");
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
// 视频屏幕自适应 - 基于视口宽度动态调整
|
|||
|
|
@function vw($px) {
|
|||
|
|
@return calc($px / 1920 * 100vw);
|
|||
|
|
}
|
|||
|
|
.tunnel-info-dialog {
|
|||
|
|
width: vw(300);
|
|||
|
|
width: 250px;
|
|||
|
|
background: rgba(64, 169, 255, 0.2);
|
|||
|
|
border: 1px solid rgba(64, 169, 255, 0.3);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|||
|
|
backdrop-filter: blur(10px);
|
|||
|
|
position: fixed;
|
|||
|
|
top: 20%;
|
|||
|
|
left: 45%;
|
|||
|
|
// 四个角的装饰
|
|||
|
|
.corner {
|
|||
|
|
position: absolute;
|
|||
|
|
width: vw(20);
|
|||
|
|
height: vw(20);
|
|||
|
|
border: 2px solid #40a9ff;
|
|||
|
|
pointer-events: none;
|
|||
|
|
|
|||
|
|
&.corner-top-left {
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
border-right: none;
|
|||
|
|
border-bottom: none;
|
|||
|
|
border-top-left-radius: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.corner-top-right {
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
border-left: none;
|
|||
|
|
border-bottom: none;
|
|||
|
|
border-top-right-radius: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.corner-bottom-left {
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
border-right: none;
|
|||
|
|
border-top: none;
|
|||
|
|
border-bottom-left-radius: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.corner-bottom-right {
|
|||
|
|
bottom: 0;
|
|||
|
|
right: 0;
|
|||
|
|
border-left: none;
|
|||
|
|
border-top: none;
|
|||
|
|
border-bottom-right-radius: 6px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dialog-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: vw(16) vw(20);
|
|||
|
|
border-bottom: 1px solid rgba(64, 169, 255, 0.2);
|
|||
|
|
|
|||
|
|
.header-title {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: vw(10);
|
|||
|
|
|
|||
|
|
.title-text {
|
|||
|
|
font-size: vw(16);
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title-icon {
|
|||
|
|
width: vw(24);
|
|||
|
|
height: vw(24);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close-btn {
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
|
|||
|
|
.close-icon {
|
|||
|
|
font-size: vw(24);
|
|||
|
|
color: rgba(255, 255, 255, 0.7);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
.close-icon {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dialog-content {
|
|||
|
|
padding: vw(16) vw(20);
|
|||
|
|
|
|||
|
|
.info-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: vw(8) 0;
|
|||
|
|
border-bottom: 1px solid rgba(64, 169, 255, 0.1);
|
|||
|
|
|
|||
|
|
.info-label {
|
|||
|
|
font-size: vw(14);
|
|||
|
|
color: rgba(255, 255, 255, 0.7);
|
|||
|
|
flex: 0 0 vw(100);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-value {
|
|||
|
|
font-size: vw(14);
|
|||
|
|
color: #4fecff;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-item:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|