bxztApp/packages/screen/src/views/RiskWarning/index.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>