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

<template>
  <base-dialog
    v-model:visible="props.visible"
    title="AI预警处理结果"
    :table-data="[]"
    :table-columns="[]"
    :table-height="0"
    :total="0"
    :current-page="1"
    :page-size="10"
    :z-index="2200"
    :tableShow="false"
    @close="handleClose"
  >
    <!-- 标题栏下方自定义插槽 -->
    <template #header>
      <!-- 内容区域 -->
      <div class="content-wrapper">
        <!-- AI处理前预警 -->
        <div class="panel">
          <div class="center">
            <div class="panel-title" style="color: #18eff7">AI处理前预警</div>
          </div>
          <div class="panel-content">
            <div class="info-container">
              <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">{{ 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>
        </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 color="#4FECFF"><DArrowRight /></el-icon>
          </div>
        </div>

        <!-- AI处理后预警 -->
        <div class="panel after-panel panel1">
          <div class="center">
            <div class="panel-title" style="color: #18eff7">AI处理后预警</div>
          </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="info-container-tab">
              <!-- 标签内容 -->
              <div class="tab-content">
                <div class="info-item">
                  <div class="info-label">预警等级;</div>
                  <div class="info-value">{{ afterData.warningLevel }}</div>
                </div>
                <div class="info-item">
                  <div class="info-label">预警信息;</div>
                  <div class="info-value">{{ afterData.warningInfo }}</div>
                </div>
                <div class="info-item">
                  <div class="info-label">预警详情;</div>
                  <div class="info-value">{{ afterData.warningDetail }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </base-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import { Close, DArrowRight } from "@element-plus/icons-vue";
import baseDialog from "../component/baseDialog.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");
};

// 点击遮罩关闭已由base-dialog组件处理

// 监听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>
// 内容区域
.content-wrapper {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

// 面板
.panel {
  flex: 1;
  position: relative;

  .panel-title {
    font-size: 16px;
    font-weight: 600;
    color: #40a9ff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0;
    width: 50%;
    background-image: url("../../../assets/RiskWarning_img/矩形@2x.png");
    background-size: 100% 100%;
    background-position: center;
  }

  .panel-content {
    background-image: url("../../../assets/RiskWarning_img/AI背景@2x.png");
    background-size: 100% 100%;
    background-position: center;
    height: 85%;
    width: 100%;
    padding: 20px;
    .info-container {
      overflow-y: auto;
      height: 100%;
      scrollbar-width: none;
      -ms-overflow-style: none;

      &::-webkit-scrollbar {
        display: none;
      }
    }
    .info-container-tab {
      overflow-y: auto;
      height: 80%;
      scrollbar-width: none;
      -ms-overflow-style: none;
      &::-webkit-scrollbar {
        display: none;
      }
    }
    .info-item {
      margin-bottom: 12px;
      display: flex;

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

    .info-label {
      white-space: nowrap;
      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;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;

  .tab-item {
    padding: 6px;
    font-size: 12px;
    color: #fff;
    background-color: #1e4f70;
    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: #18f2f9;
      border-color: #40a9ff;
      color: #075948;
    }
  }
}

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

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