bxztApp/packages/screen/src/views/RiskWarning/component/aiWarningResultDialog.vue

<template>
  <div v-if="visible" class="ai-dialog-overlay" @click="handleOverlayClick">
    <div class="ai-dialog" @click.stop>
      <!-- 标题栏 -->
      <div class="dialog-header">
        <div class="header-title">AI预警处理结果</div>
        <div class="close-btn" @click="handleClose">
          <el-icon><Close /></el-icon>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="content-wrapper">
        <!-- AI处理前预警 -->
        <div class="panel before-panel" style="background: linear-gradient(135deg, rgba(30, 80, 140, 0.6) 0%, rgba(20, 60, 110, 0.8) 100%);">
          <div class="panel-title">AI处理前预警</div>
          <div class="panel-content">
            <div class="info-item">
              <span class="info-label">发布单位&#xff1a;</span>
              <span class="info-value">{{ beforeData.publishOrg }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">发布内容&#xff1a;</span>
              <span class="info-value content-text">{{ beforeData.publishContent }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">生效时间&#xff1a;</span>
              <span class="info-value">{{ beforeData.effectiveTime }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">失效时间&#xff1a;</span>
              <span class="info-value">{{ beforeData.expireTime }}</span>
            </div>
          </div>
        </div>

        <!-- 中间AI标识 -->
        <div class="ai-center">
          <img class="ai-icon-img" src="../../../assets/RiskWarning_img/AI1@2x.png" alt="AI" />
          <div class="ai-arrow">
            <el-icon><DArrowRight /></el-icon>
          </div>
        </div>

        <!-- AI处理后预警 -->
        <div class="panel after-panel panel1" style="background: #2699FF">
          <div class="panel-title" style="color:#fff">AI处理后预警</div>
          <div class="panel-content">
            <!-- 标签页 -->
            <div class="tab-header">
              <div
                v-for="tab in tabs"
                :key="tab.key"
                class="tab-item"
                :class="{ active: activeTab === tab.key }"
                @click="activeTab = tab.key"
              >
                {{ tab.label }}
              </div>
            </div>
            <!-- 标签内容 -->
            <div class="tab-content">
              <div class="info-item">
                <span class="info-label">预警等级&#xff1a;</span>
                <span class="info-value">{{ afterData.warningLevel }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">预警信息&#xff1a;</span>
                <span class="info-value content-text">{{ afterData.warningInfo }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">预警详情&#xff1a;</span>
                <span class="info-value content-text">{{ afterData.warningDetail }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { Close, DArrowRight } from "@element-plus/icons-vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  aiData: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["update:visible", "close"]);

// 标签页
const tabs = ref([
  { key: "frontline", label: "一线人员" },
  { key: "district", label: "区县人员" },
  { key: "handler", label: "处室人员" },
  { key: "leader", label: "中心领导" },
]);

const activeTab = ref("frontline");

// AI处理前数据
const beforeData = ref({
  publishOrg: "潼南区预警中心",
  publishContent: '潼南区气象台2025年11月13日0时40分发布"暴雨蓝色预警信号"，预计23日0:40-6:40，龙形、宝龙、上和、大佛、桂林、玉溪、米心、花岩、双江、古溪、群力、柏梓、崇龛、梓潼、太安等15个乡镇（街道）强降水趋于减弱，未来6小时累计雨量将达50～100毫米，最大小时雨强将达20～40毫米，局地伴有雷电、阵性大风，请各地注意防范。',
  effectiveTime: "2025-11-13 00:31:30.0",
  expireTime: "2025-11-13 00:31:30.0",
});

// AI处理后数据
const afterData = ref({
  warningLevel: "重庆市潼南气象台发布大雾黄色预警[III级/较重]",
  warningInfo: '潼南区区气象台发布暴雨红色预警，按照相关要求，启动I级防御响应，并请及时关注地质、水文等风险提示信息，落实主动封闭管控/"关停撒转"措施',
  warningDetail: "请立即按照2小时一次频率对你管养的重点路段/重点部位进行巡查，重点巡查较高及以上风险路段、涉灾隐患点、地质条件复杂路段、临河临崖路段/两区三厂、大型设施设备、取弃土（渣）场、砂石料场、涉水桥梁、富水隧道、围堰、支架脚手架、高切坡、滑坡处置等部位，重点关注涉水桥梁基础及墩台、不良地质隧道、隧道洞口边仰坡及侧切结构、高陡边坡支挡防护以及防排水设施，发现异常情况，立即向上报告，采取紧急排危、告警阻拦、吹哨撒转等措施，并及时报送工作开展情况。",
});

// 关闭对话框
const handleClose = () => {
  emit("update:visible", false);
  emit("close");
};

// 点击遮罩关闭
const handleOverlayClick = () => {
  handleClose();
};

// 监听visible变化
watch(
  () => props.visible,
  (newVal) => {
    if (newVal && props.aiData) {
      Object.assign(beforeData.value, props.aiData.before);
      Object.assign(afterData.value, props.aiData.after);
    }
  }
);
</script>

<style lang="scss" scoped>
.ai-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.ai-dialog {
  width: 1000px;
  background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
  border: 1px solid rgba(64, 169, 255, 0.3);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

// 标题栏
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 24px;

  .header-title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    padding: 8px 40px;
    background: linear-gradient(90deg, transparent 0%, rgba(64, 169, 255, 0.2) 20%, rgba(64, 169, 255, 0.2) 80%, transparent 100%);
    border-bottom: 2px solid #40a9ff;
  }

  .close-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 20px;
    transition: color 0.3s;

    &:hover {
      color: #fff;
    }
  }
}

// 内容区域
.content-wrapper {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

// 面板
.panel {
  flex: 1;
  
  border: 1px solid rgba(64, 169, 255, 0.3);
  border-radius: 12px;
  padding: 20px;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(64, 169, 255, 0.5) 0%, transparent 50%, rgba(64, 169, 255, 0.5) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  .panel-title {
    font-size: 16px;
    font-weight: 600;
    color: #40a9ff;
    text-align: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(64, 169, 255, 0.2);
  }

  .panel-content {
    .info-item {
      margin-bottom: 12px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .info-label {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.6);
      margin-right: 8px;
    }

    .info-value {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.6;

      &.content-text {
        display: block;
        margin-top: 6px;
        text-align: justify;
      }
    }
  }
}

// 中间AI标识
.ai-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 10px;
  .ai-icon-img {
    width: 60px;
    height: 60px;
  }

  .ai-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 4px 20px rgba(64, 169, 255, 0.4);
  }

  .ai-arrow {
    font-size: 32px;
    color: #40a9ff;
    animation: pulse 1.5s infinite;

    :deep(.el-icon) {
      font-size: 32px;
    }
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: translateX(0);
  }
  50% {
    opacity: 0.6;
    transform: translateX(5px);
  }
}

// 标签页
.tab-header {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(64, 169, 255, 0.2);

  .tab-item {
    padding: 6px 14px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    background-color: rgba(64, 169, 255, 0.1);
    border: 1px solid rgba(64, 169, 255, 0.2);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background-color: rgba(64, 169, 255, 0.2);
      border-color: rgba(64, 169, 255, 0.4);
    }

    &.active {
      // background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
      background: #163B6C;
      border-color: #40a9ff;
      color: #fff;
    }
  }
}

.tab-content {
  .info-item {
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>