536 lines
14 KiB
Vue
536 lines
14 KiB
Vue
<template>
|
||
<div class="main">
|
||
<div class="top_title">
|
||
<img
|
||
class="title_bg"
|
||
src="../../assets/RiskWarning_img/一级标题栏bg@2x.png"
|
||
alt=""
|
||
/>
|
||
<div class="title_img_box">
|
||
<img class="title_img1" src="../../assets/RiskWarning_img/位图@2x.png" alt="" />
|
||
<img
|
||
class="title_img2"
|
||
src="../../assets/RiskWarning_img/渝路畅行-风险预警一键响应@2x.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
<!-- 四个角的装饰 -->
|
||
<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="center-info-card-container">
|
||
<div
|
||
class="center-info-card"
|
||
@click="openDialog('tongnanResponsible')"
|
||
v-if="showCenterCard.type === 'first'"
|
||
>
|
||
<div class="card-title">潼南</div>
|
||
<div class="card-content">
|
||
<div class="info-item clickable">
|
||
<span class="info-label">人数</span>
|
||
<span class="info-value">{{ showCenterCard.value }}</span>
|
||
<span class="info-unit">人</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">项目</span>
|
||
<span class="info-value">2</span>
|
||
<span class="info-unit">处</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="center-info-card"
|
||
v-if="showCenterCard.type === 'second' || showCenterCard.type === 'third'"
|
||
>
|
||
<div
|
||
class="card-title"
|
||
@click="
|
||
showCenterCard.type === 'second'
|
||
? openDialog('tongnanTeam')
|
||
: showCenterCard.type === 'third'
|
||
? openDialog('responseSituation')
|
||
: ''
|
||
"
|
||
>
|
||
潼南
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="info-item">
|
||
<span class="info-label">人数</span>
|
||
<span class="info-value">{{ showCenterCard.value }}</span>
|
||
<span class="info-unit">人</span>
|
||
</div>
|
||
<div class="info-item clickable">
|
||
<span class="info-label">路段</span>
|
||
<span class="info-value">117</span>
|
||
<span class="info-unit">条</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="left">
|
||
<left
|
||
@openWarningInfo="openDialog('warningInfo')"
|
||
@openImpactPoint="openDialog('impactPoint')"
|
||
@openWarningSituation="openDialog('warningSituation')"
|
||
@openResponseStatus="openDialog('responseStatus')"
|
||
@openDispatchDistrict="openDialog('dispatchDistrict')"
|
||
@showCenterCard="(item) => (showCenterCard = item)"
|
||
></left>
|
||
</div>
|
||
<div class="right">
|
||
<right
|
||
@openClearanceSituation="openDialog('clearanceSituation')"
|
||
@openControlSituation="openDialog('controlSituation')"
|
||
></right>
|
||
</div>
|
||
<!-- 地图中心 -->
|
||
<div class="center">
|
||
<!-- <MapCenter /> -->
|
||
</div>
|
||
<div class="bottom">
|
||
<bottom></bottom>
|
||
</div>
|
||
<top class="top" @openAIResult="openDialog('aiWarningResult')"></top>
|
||
|
||
<!-- 响应情况对话框 -->
|
||
<responseSituationDiaLog
|
||
v-model:visible="dialogVisible.responseSituation"
|
||
@close="closeDialog('responseSituation')"
|
||
/>
|
||
|
||
<!-- 预警信息对话框 -->
|
||
<warningInfoDialog
|
||
v-model:visible="dialogVisible.warningInfo"
|
||
@close="closeDialog('warningInfo')"
|
||
@responseStatus="openDialog('responseStatus')"
|
||
/>
|
||
|
||
<!-- 事件详情对话框 -->
|
||
<eventDetailDialog
|
||
v-model:visible="dialogVisible.eventDetail"
|
||
@close="closeDialog('eventDetail')"
|
||
/>
|
||
|
||
<!-- 确认对话框 -->
|
||
<confirmDialog
|
||
v-model:visible="dialogVisible.confirm"
|
||
:title="confirmConfig.title"
|
||
:message="confirmConfig.message"
|
||
:confirm-text="confirmConfig.confirmText"
|
||
:cancel-text="confirmConfig.cancelText"
|
||
@confirm="closeDialog('confirm')"
|
||
@cancel="closeDialog('confirm')"
|
||
/>
|
||
|
||
<!-- 风险点详情对话框 -->
|
||
<riskPointDetailDialog
|
||
v-model:visible="dialogVisible.riskPointDetail"
|
||
@close="closeDialog('riskPointDetail')"
|
||
/>
|
||
|
||
<!-- 影响点情况对话框 -->
|
||
<impactPointDialog
|
||
v-model:visible="dialogVisible.impactPoint"
|
||
@close="closeDialog('impactPoint')"
|
||
@detail="openDialog('impactPointDetail')"
|
||
/>
|
||
|
||
<!-- 影响点详情对话框 -->
|
||
<impactPointDetailDialog
|
||
v-model:visible="dialogVisible.impactPointDetail"
|
||
@close="closeDialog('impactPointDetail')"
|
||
/>
|
||
|
||
<!-- 响应点详情对话框 -->
|
||
<responsePointDetailDialog
|
||
v-model:visible="dialogVisible.responsePointDetail"
|
||
@close="closeDialog('responsePointDetail')"
|
||
/>
|
||
|
||
<!-- 响应点信息对话框 -->
|
||
<responsePointInfoDialog
|
||
v-model:visible="dialogVisible.responsePointInfo"
|
||
@close="closeDialog('responsePointInfo')"
|
||
/>
|
||
|
||
<!-- 响应状态对话框 -->
|
||
<responseStatusDialog
|
||
v-model:visible="dialogVisible.responseStatus"
|
||
@close="closeDialog('responseStatus')"
|
||
@detail="openDialog('impactPointDetail')"
|
||
/>
|
||
|
||
<!-- AI预警处理结果对话框 -->
|
||
<aiWarningResultDialog
|
||
v-model:visible="dialogVisible.aiWarningResult"
|
||
@close="closeDialog('aiWarningResult')"
|
||
/>
|
||
|
||
<!-- 潼南基本信息对话框 -->
|
||
<tongnanInfoDialog
|
||
v-model:visible="dialogVisible.tongnanInfo"
|
||
@close="closeDialog('tongnanInfo')"
|
||
@call="openDialog('confirm')"
|
||
/>
|
||
|
||
<!-- 潼南建设项目责任人明细对话框 -->
|
||
<tongnanResponsibleDialog
|
||
v-model:visible="dialogVisible.tongnanResponsible"
|
||
@close="closeDialog('tongnanResponsible')"
|
||
@detail="openDialog('tongnanInfo')"
|
||
/>
|
||
|
||
<!-- 抢通情况对话框 -->
|
||
<clearanceSituationDialog
|
||
v-model:visible="dialogVisible.clearanceSituation"
|
||
@close="closeDialog('clearanceSituation')"
|
||
@detail="openDialog('eventDetail')"
|
||
/>
|
||
|
||
<!-- 管控情况对话框 -->
|
||
<controlSituationDialog
|
||
v-model:visible="dialogVisible.controlSituation"
|
||
@close="closeDialog('controlSituation')"
|
||
/>
|
||
|
||
<!-- 调度详情对话框 -->
|
||
<dispatchDetailDialog
|
||
v-model:visible="dialogVisible.dispatchDetail"
|
||
@close="closeDialog('dispatchDetail')"
|
||
/>
|
||
|
||
<!-- 调度区县情况对话框 -->
|
||
<dispatchDistrictDialog
|
||
v-model:visible="dialogVisible.dispatchDistrict"
|
||
@close="closeDialog('dispatchDistrict')"
|
||
@dispatchClick="openDialog('dispatchDetail')"
|
||
/>
|
||
|
||
<!-- 潼南护路团队成员对话框 -->
|
||
<tongnanTeamDialog
|
||
v-model:visible="dialogVisible.tongnanTeam"
|
||
@close="closeDialog('tongnanTeam')"
|
||
@view="openDialog('tongnanInfo')"
|
||
/>
|
||
|
||
<!-- 预警情况对话框 -->
|
||
<warningSituationDialog
|
||
v-model:visible="dialogVisible.warningSituation"
|
||
@close="closeDialog('warningSituation')"
|
||
@impactClick="openDialog('impactPoint')"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from "vue";
|
||
import left from "./left.vue";
|
||
import right from "./right.vue";
|
||
import bottom from "./bottom.vue";
|
||
import top from "./top.vue";
|
||
import MapCenter from "../cockpit/components/MapCenter.vue";
|
||
|
||
// 引入所有弹窗组件
|
||
import responseSituationDiaLog from "./component/responseSituationDiaLog.vue";
|
||
import warningInfoDialog from "./component/warningInfoDialog.vue";
|
||
import eventDetailDialog from "./component/eventDetailDialog.vue";
|
||
import confirmDialog from "./component/confirmDialog.vue";
|
||
import riskPointDetailDialog from "./component/riskPointDetailDialog.vue";
|
||
import impactPointDialog from "./component/impactPointDialog.vue";
|
||
import impactPointDetailDialog from "./component/impactPointDetailDialog.vue";
|
||
import responsePointDetailDialog from "./component/responsePointDetailDialog.vue";
|
||
import responsePointInfoDialog from "./component/responsePointInfoDialog.vue";
|
||
import responseStatusDialog from "./component/responseStatusDialog.vue";
|
||
import aiWarningResultDialog from "./component/aiWarningResultDialog.vue";
|
||
import tongnanInfoDialog from "./component/tongnanInfoDialog.vue";
|
||
import tongnanResponsibleDialog from "./component/tongnanResponsibleDialog.vue";
|
||
import clearanceSituationDialog from "./component/clearanceSituationDialog.vue";
|
||
import controlSituationDialog from "./component/controlSituationDialog.vue";
|
||
import dispatchDetailDialog from "./component/dispatchDetailDialog.vue";
|
||
import dispatchDistrictDialog from "./component/dispatchDistrictDialog.vue";
|
||
import tongnanTeamDialog from "./component/tongnanTeamDialog.vue";
|
||
import warningSituationDialog from "./component/warningSituationDialog.vue";
|
||
|
||
// 弹窗显示状态
|
||
const dialogVisible = ref({
|
||
responseSituation: false,
|
||
warningInfo: false,
|
||
eventDetail: false,
|
||
confirm: false,
|
||
riskPointDetail: false,
|
||
impactPoint: false,
|
||
impactPointDetail: false,
|
||
responsePointDetail: false,
|
||
responsePointInfo: false,
|
||
responseStatus: false,
|
||
aiWarningResult: false,
|
||
tongnanInfo: false,
|
||
tongnanResponsible: false,
|
||
clearanceSituation: false,
|
||
controlSituation: false,
|
||
dispatchDetail: false,
|
||
dispatchDistrict: false,
|
||
tongnanTeam: false,
|
||
warningSituation: false,
|
||
});
|
||
|
||
// 打开弹窗
|
||
const openDialog = (dialogName) => {
|
||
dialogVisible.value[dialogName] = true;
|
||
};
|
||
|
||
// 关闭弹窗
|
||
const closeDialog = (dialogName) => {
|
||
dialogVisible.value[dialogName] = false;
|
||
};
|
||
|
||
// 确认对话框配置
|
||
const confirmConfig = ref({
|
||
title: "提示",
|
||
message: "是否拨打电话?",
|
||
confirmText: "确定",
|
||
cancelText: "取消",
|
||
});
|
||
|
||
// 打开确认对话框
|
||
const openConfirm = (config) => {
|
||
confirmConfig.value = { ...confirmConfig.value, ...config };
|
||
dialogVisible.value.confirm = true;
|
||
};
|
||
|
||
// 中心信息卡片显示状态
|
||
const showCenterCard = ref(false);
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 视频屏幕自适应 - 基于视口宽度动态调整
|
||
// 基准宽度 1920px，使用 vw 单位实现自适应
|
||
@function vw($px) {
|
||
@return calc($px / 1920 * 100vw);
|
||
}
|
||
|
||
.main {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-image: url("../../assets/RiskWarning_img/遮罩层.png");
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
.top_title {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: vw(100);
|
||
min-height: 70px;
|
||
z-index: 100;
|
||
|
||
.title_bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.title_img_box {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: vw(10);
|
||
}
|
||
|
||
.title_img1 {
|
||
width: vw(40);
|
||
height: vw(40);
|
||
min-width: 28px;
|
||
min-height: 28px;
|
||
}
|
||
|
||
.title_img2 {
|
||
height: vw(40);
|
||
min-height: 28px;
|
||
}
|
||
}
|
||
.left {
|
||
position: absolute;
|
||
left: 0;
|
||
top: vw(100);
|
||
width: 25%;
|
||
height: calc(100% - #{vw(100)});
|
||
}
|
||
|
||
.right {
|
||
position: absolute;
|
||
right: 0;
|
||
top: vw(100);
|
||
width: 25%;
|
||
height: calc(100% - #{vw(100)});
|
||
}
|
||
|
||
.bottom {
|
||
position: absolute;
|
||
bottom: 0px;
|
||
left: 30%;
|
||
width: 40%;
|
||
height: 50%;
|
||
}
|
||
|
||
.top {
|
||
position: absolute;
|
||
top: vw(120);
|
||
left: 30%;
|
||
width: 40%;
|
||
// height: 15%;
|
||
// background-color: #15293B;
|
||
}
|
||
|
||
.center {
|
||
position: absolute;
|
||
top: 0;
|
||
// left: 25%;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: -1;
|
||
}
|
||
|
||
// 四个角的装饰
|
||
.corner {
|
||
position: absolute;
|
||
width: vw(30);
|
||
height: vw(30);
|
||
min-width: 20px;
|
||
min-height: 20px;
|
||
border: 2px solid #40a9ff;
|
||
z-index: 100;
|
||
pointer-events: none;
|
||
|
||
&.corner-top-left {
|
||
top: vw(110);
|
||
left: vw(10);
|
||
border-right: none;
|
||
border-bottom: none;
|
||
border-top-left-radius: 4px;
|
||
}
|
||
|
||
&.corner-top-right {
|
||
top: vw(110);
|
||
right: vw(10);
|
||
border-left: none;
|
||
border-bottom: none;
|
||
border-top-right-radius: 4px;
|
||
}
|
||
|
||
&.corner-bottom-left {
|
||
bottom: vw(10);
|
||
left: vw(10);
|
||
border-right: none;
|
||
border-top: none;
|
||
border-bottom-left-radius: 4px;
|
||
}
|
||
|
||
&.corner-bottom-right {
|
||
bottom: 0;
|
||
right: vw(10);
|
||
border-left: none;
|
||
border-top: none;
|
||
border-bottom-right-radius: 4px;
|
||
}
|
||
}
|
||
|
||
.center-info-card-container {
|
||
position: absolute;
|
||
top: 30%;
|
||
left: 35%;
|
||
transform: translate(-50%, -50%);
|
||
width: vw(250);
|
||
min-width: 180px;
|
||
z-index: 200;
|
||
}
|
||
// 中心数据展示卡片
|
||
.center-info-card {
|
||
background: rgba(64, 169, 255, 0.2);
|
||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||
z-index: 50;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
margin-bottom: vw(10);
|
||
|
||
// &:hover {
|
||
// border-color: rgba(64, 169, 255, 0.6);
|
||
// box-shadow: 0 6px 30px rgba(64, 169, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||
// transform: translate(-50%, -52%);
|
||
// }
|
||
|
||
.card-title {
|
||
font-size: vw(16);
|
||
font-weight: 600;
|
||
color: #fff;
|
||
margin-bottom: vw(12);
|
||
background: rgba(64, 169, 255, 0.8);
|
||
padding: vw(16) vw(20);
|
||
border-bottom: 1px solid rgba(64, 169, 255, 0.1);
|
||
}
|
||
|
||
.card-content {
|
||
padding: 0 vw(20) vw(16) vw(20);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.info-item {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: vw(4);
|
||
|
||
.info-label {
|
||
font-size: vw(13);
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
.info-value {
|
||
font-size: vw(24);
|
||
font-weight: 700;
|
||
color: #40a9ff;
|
||
text-shadow: 0 0 10px rgba(64, 169, 255, 0.5);
|
||
}
|
||
|
||
.info-unit {
|
||
font-size: vw(12);
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
&.clickable {
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
.info-value {
|
||
color: #69c0ff;
|
||
text-shadow: 0 0 15px rgba(105, 192, 255, 0.8);
|
||
}
|
||
|
||
.info-label,
|
||
.info-unit {
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|