195 lines
5.2 KiB
Vue
195 lines
5.2 KiB
Vue
<template>
|
||
<base-dialog
|
||
v-model:visible="props.visible"
|
||
:title="rescueTeamData.title"
|
||
:table-data="[]"
|
||
:table-columns="[]"
|
||
:table-height="0"
|
||
:total="0"
|
||
:current-page="1"
|
||
:page-size="10"
|
||
:z-index="1000"
|
||
:max-width="400"
|
||
:show-filter="false"
|
||
:show-pagination="false"
|
||
@close="handleClose"
|
||
>
|
||
<!-- 标题栏下方自定义插槽 -->
|
||
<template #header>
|
||
<div class="dialog-content">
|
||
<div class="info-item" v-for="(item, index) in rescueTeamData.items" :key="index">
|
||
<label class="info-label">{{ item.label }}：</label>
|
||
<span class="info-value">{{ item.value }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="dialog-imgs">
|
||
<img
|
||
class="dialog-img"
|
||
v-for="(img, index) in rescueTeamData.imgs"
|
||
:key="index"
|
||
:src="img"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</template>
|
||
</base-dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { defineProps, defineEmits } from "vue";
|
||
import baseDialog from "../component/baseDialog.vue";
|
||
|
||
const props = 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 台" },
|
||
],
|
||
imgs: ["", "", "", "", ""],
|
||
};
|
||
|
||
defineExpose({
|
||
slopeData,
|
||
tunnelData,
|
||
bridgeData,
|
||
rescueTeamData,
|
||
});
|
||
|
||
const emit = defineEmits(["update:visible", "close"]);
|
||
|
||
const handleClose = () => {
|
||
emit("update:visible", false);
|
||
emit("close");
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 信息项样式
|
||
.dialog-content {
|
||
padding: 16px 20px;
|
||
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid rgba(64, 169, 255, 0.1);
|
||
|
||
.info-label {
|
||
font-size: 14px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
flex: 0 0 100px;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 14px;
|
||
color: #4fecff;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.info-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
// 图片样式
|
||
.dialog-imgs {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 6px;
|
||
padding: 16px 20px;
|
||
|
||
.dialog-img {
|
||
width: 75px;
|
||
height: 75px;
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
}
|
||
</style>
|