354 lines
9.5 KiB
Vue
354 lines
9.5 KiB
Vue
<template>
|
||
<div
|
||
v-if="props.visible"
|
||
class="map-info-dialog"
|
||
:style="{ backgroundImage: `url(${iconProject})` }"
|
||
>
|
||
<!-- 关闭按钮 -->
|
||
<div class="dialog-close" @click="handleClose">×</div>
|
||
|
||
<!-- 标题栏 -->
|
||
<div class="dialog-header" @click="handleClose">
|
||
<span class="header-title">{{ dialogTitle }}</span>
|
||
<img class="header-icon" :src="iconTunnel" alt="" />
|
||
</div>
|
||
|
||
<!-- 内容区域 -->
|
||
<div class="dialog-content">
|
||
<div class="info-row" v-for="(item, index) in dialogItems" :key="index">
|
||
<span class="info-label">{{ item.label }}：</span>
|
||
<span class="info-value">{{ item.value }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { defineProps, defineEmits, computed } from 'vue';
|
||
import iconProject from '../../../assets/RiskWarning_img/弹窗背景@2x.png';
|
||
import iconTunnel from '../../../assets/RiskWarning_img/图标_media_dvr@2x.png';
|
||
|
||
const props = defineProps({
|
||
visible: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
type: {
|
||
type: String,
|
||
default: 'project', // project, tunnel, bridge, road
|
||
},
|
||
data: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
});
|
||
|
||
const emit = defineEmits(['update:visible']);
|
||
|
||
const handleClose = () => {
|
||
emit('update:visible', false);
|
||
};
|
||
|
||
// 根据类型和数据显示不同的标题和内容
|
||
const dialogTitle = computed(() => {
|
||
const titleMap = {
|
||
project: '项目信息',
|
||
tunnel: '隧道信息',
|
||
bridge: '桥梁信息',
|
||
road: '路段信息',
|
||
emergency: '抢险队伍',
|
||
slope: '边坡信息',
|
||
};
|
||
return titleMap[props.type] || '详细信息';
|
||
});
|
||
|
||
const dialogItems = computed(() => {
|
||
const data = props.data;
|
||
const type = props.type;
|
||
|
||
switch (type) {
|
||
case 'project':
|
||
return [
|
||
{ label: '项目名称', value: data.PROJECT_NAME || '-' },
|
||
{ label: '子项目名称', value: data.SUB_PROJECT_NAME || '-' },
|
||
{ label: '影响区域', value: data.ADMINISTRATIVE_REGION || '-' },
|
||
{ label: '驻地名称', value: data.SITE_NAME || '-' },
|
||
{ label: '驻地地址', value: data.SITE_ADDRESS || data.COUNTY || '-' },
|
||
{ label: '驻地人数', value: data.SITE_POPULATION || '-' },
|
||
{ label: '驻地类型', value: data.SITE_TYPE || '-' },
|
||
{ label: '驻地风险等级', value: data.RISK_LEVEL || '-' },
|
||
{ label: '搬迁状态', value: data.RELOCATION_STATUS || '-' },
|
||
{ label: '项目类型', value: data.PROJECT_TYPE || '-' },
|
||
{ label: '房建类型', value: data.BUILDING_TYPE || '-' },
|
||
{ label: '建设单位', value: data.CONSTRUCTION_UNIT || '-' },
|
||
{ label: '业主责任人', value: data.OWNER_RESPONSIBLE_PERSON || '-' },
|
||
{ label: '业主责任人电话', value: data.OWNER_RESPONSIBLE_PHONE || '-' },
|
||
{ label: '施工责任人', value: data.CONSTRUCTOR_RESPONSIBLE_PERSON || '-' },
|
||
{ label: '施工责任人电话', value: data.CONSTRUCTOR_RESPONSIBLE_PHONE || '-' },
|
||
{ label: '驻地责任人', value: data.SITE_RESPONSIBLE_PERSON || '-' },
|
||
{ label: '驻地责任人电话', value: data.SITE_RESPONSIBLE_PHONE || '-' },
|
||
{ label: '市级责任人', value: data.CITY_RESPONSIBLE_PERSON || '-' },
|
||
{ label: '市级责任人电话', value: data.CITY_RESPONSIBLE_PHONE || '-' },
|
||
{ label: '区县责任人', value: data.DISTRICT_RESPONSIBLE_PERSON || '-' },
|
||
{ label: '区县责任人电话', value: data.DISTRICT_RESPONSIBLE_PHONE || '-' },
|
||
{ label: '吹哨人', value: data.WHISTLEBLOWER_NAME || '-' },
|
||
{ label: '吹哨人电话', value: data.WHISTLEBLOWER_PHONE || '-' },
|
||
{ label: '备注', value: data.REMARKS || '-' },
|
||
];
|
||
case 'tunnel':
|
||
return [
|
||
{
|
||
label: '隧道名称',
|
||
value: data.GL1_SDMC || '-',
|
||
},
|
||
{
|
||
label: '建成时间',
|
||
value: data.HEIGHT || data.GL1_SDGD ? `${data.HEIGHT || data.GL1_SDGD}(米)` : '-',
|
||
},
|
||
|
||
{
|
||
label: '编号',
|
||
value: data.GL1_ZJ || '-',
|
||
},
|
||
{
|
||
label: '入口桩号',
|
||
value: data.GL1_RKZH || '-',
|
||
},
|
||
|
||
{
|
||
label: '所属区县',
|
||
value: data.GL1_QXMC || '-',
|
||
},
|
||
|
||
{
|
||
label: '隧道净宽',
|
||
value: data.GL1_SDJG || '-',
|
||
},
|
||
{
|
||
label: '隧道净高',
|
||
value: data.GL1_SDJK || '-',
|
||
},
|
||
{
|
||
label: '隧道长度',
|
||
value: data.GL1_SDC || '-',
|
||
},
|
||
|
||
{
|
||
label: '路线编号',
|
||
value: data.GL1_LXBH || '-',
|
||
},
|
||
{
|
||
label: '长度分类',
|
||
value: data.GL1_SDLX || '-',
|
||
},
|
||
{
|
||
label: '路线名称',
|
||
value: data.GL1_LXMC || '-',
|
||
},
|
||
|
||
{
|
||
label: '评定等级',
|
||
value: data.GL1_PDDJ || '-',
|
||
},
|
||
];
|
||
case 'bridge':
|
||
return [
|
||
{
|
||
label: '桥梁名称',
|
||
value: data.GL1_QLMC || '-',
|
||
},
|
||
{
|
||
label: '编号',
|
||
value: data.GL1_QLDM || '-',
|
||
},
|
||
{
|
||
label: '所属区县',
|
||
value: data.GL1_QXMC || '-',
|
||
},
|
||
{
|
||
label: '桥梁长度',
|
||
value: data.GL1_QLQC || '-',
|
||
},
|
||
{
|
||
label: '路线编号',
|
||
value: data.GL1_QLDM || '-',
|
||
},
|
||
{
|
||
label: '路线名称',
|
||
value: data.GL1_LXMC || '-',
|
||
},
|
||
{
|
||
label: '建成时间',
|
||
value: data.GL1_GXSJ,
|
||
},
|
||
{
|
||
label: '中心桩号',
|
||
value: data.GL1_ZXZH || '-',
|
||
},
|
||
|
||
{
|
||
label: '跨径总长',
|
||
value: data.GL1_AKJFLDM || '-',
|
||
},
|
||
{
|
||
label: '跨径分类',
|
||
value: data.GL1_AKJFLLX || '-',
|
||
},
|
||
{
|
||
label: '技术状况',
|
||
value: data.GL1_JSZKPJDJ || '-',
|
||
},
|
||
];
|
||
case 'road':
|
||
return [
|
||
{
|
||
label: '区县名称',
|
||
value: data.GL1_QXMC || '-',
|
||
},
|
||
{
|
||
label: '风险等级',
|
||
value: data.GL1_FXDJ || '',
|
||
},
|
||
{
|
||
label: '公路编号',
|
||
value: data.GL1_GLBH,
|
||
},
|
||
{
|
||
label: '位置',
|
||
value: data.GL1_GLMC ,
|
||
},
|
||
{
|
||
label: '风险描述',
|
||
value: data.GL1_FXMS || '-',
|
||
},
|
||
{
|
||
label: '采取措施',
|
||
value: data.GL1_CQCS || '-',
|
||
},
|
||
{
|
||
label: '照片',
|
||
value: data.photos || data.photos || '-',
|
||
},
|
||
];
|
||
case 'emergency':
|
||
return [
|
||
{ label: '队伍名称', value: data.gl1Yjllmc || '-' },
|
||
{ label: '防范状态', value: data.preventionStatus || '-' },
|
||
{ label: '人数', value: data.gl1Rysl || '-' },
|
||
{ label: '联系人', value: data.gl1Lxr || '-' },
|
||
{ label: '地址', value: data.gl1Xxdz || '-' },
|
||
{ label: '物资装备', value: data.materialsAndEquipments || '-' },
|
||
{ label: '照片', value: data.photos || data.photos || '-' },
|
||
];
|
||
case 'slope':
|
||
return [
|
||
{ label: '边坡坡长(km)', value: data.NAME || data.name || '-' },
|
||
{ label: '边坡最大高度(m)', value: data.COUNTY || data.county || '-' },
|
||
{ label: '边坡构成', value: data.COUNTY || data.county || '-' },
|
||
{ label: '风险等级', value: data.COUNTY || data.county || '-' },
|
||
{ label: '支护形式', value: data.COUNTY || data.county || '-' },
|
||
{ label: '监测设施设置', value: data.COUNTY || data.county || '-' },
|
||
{ label: '起点桩号', value: data.photos || data.photos || [] },
|
||
{ label: '止点桩号', value: data.photos || data.photos || [] },
|
||
];
|
||
|
||
default:
|
||
return [
|
||
{ label: '名称', value: data.NAME || data.name || '-' },
|
||
{ label: '所属区县', value: data.COUNTY || data.county || '-' },
|
||
];
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@function vw($px) {
|
||
@return calc($px / 1920 * 100vw);
|
||
}
|
||
|
||
.map-info-dialog {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: vw(400);
|
||
// min-height: vw(200);
|
||
background-size: 100% 100%;
|
||
padding-bottom: vw(20);
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
z-index: 1000;
|
||
padding: vw(20);
|
||
box-sizing: border-box;
|
||
|
||
.dialog-close {
|
||
position: absolute;
|
||
top: vw(22);
|
||
right: vw(15);
|
||
width: vw(24);
|
||
height: vw(24);
|
||
line-height: vw(24);
|
||
text-align: center;
|
||
font-size: vw(30);
|
||
color: #3e9ff0;
|
||
cursor: pointer;
|
||
opacity: 0.8;
|
||
transition: opacity 0.3s;
|
||
|
||
&:hover {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.dialog-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: vw(15);
|
||
padding-bottom: vw(10);
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||
|
||
.header-icon {
|
||
width: vw(24);
|
||
height: vw(24);
|
||
margin-left: vw(10);
|
||
}
|
||
|
||
.header-title {
|
||
font-size: vw(16);
|
||
font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.dialog-content {
|
||
max-height: vw(350);
|
||
padding-bottom: vw(20);
|
||
overflow-y: auto;
|
||
&::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: vw(8);
|
||
line-height: 1.5;
|
||
|
||
.info-label {
|
||
color: rgba(255, 255, 255, 0.7);
|
||
font-size: vw(13);
|
||
// min-width: vw(100);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.info-value {
|
||
color: #fff;
|
||
font-size: vw(13);
|
||
flex: 1;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|