city-life-line/src/views/subSystem/dispatch/disDecisionDep/DisPlanSelection.vue

<!--应急预案选择-->
<template>
  <div class="app-container">
    <div class="plan-layout">
      <!-- 左侧条件面板 -->
      <div class="left-panel">
        <!-- 突发事件条件设定 -->
        <el-card shadow="never" class="panel-card">
          <template #header>
            <div class="card-title">
              <el-icon><Setting /></el-icon>
              <span>突发事件条件设定</span>
            </div>
          </template>
          <el-form label-position="top" size="default">
            <el-form-item label="事件类型">
              <el-select v-model="form.eventType" placeholder="请选择事件类型" style="width:100%">
                <el-option v-for="item in eventTypeOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item label="事件级别">
              <el-select v-model="form.eventLevel" placeholder="请选择事件级别" style="width:100%">
                <el-option v-for="item in eventLevelOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item label="发生区域">
              <el-select v-model="form.eventRegion" placeholder="请选择发生区域" style="width:100%">
                <el-option v-for="item in eventRegionOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item label="事故责任单位">
              <el-select v-model="form.responsibleUnit" placeholder="请选择责任单位" style="width:100%">
                <el-option v-for="item in unitOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 预案匹配规则 -->
        <el-card shadow="never" class="panel-card">
          <template #header>
            <div class="card-title">
              <el-icon><InfoFilled /></el-icon>
              <span>预案匹配规则</span>
            </div>
          </template>
          <div class="rule-desc">
            <p>根据事件类型、级别、区域、责任单位进行数字预案库权重匹配：</p>
            <div class="rule-weights">
              <div class="weight-item">
                <span class="weight-label">事件类型</span>
                <el-progress :percentage="40" :stroke-width="14" :format="() => '40%'" color="#409EFF" />
              </div>
              <div class="weight-item">
                <span class="weight-label">事件级别</span>
                <el-progress :percentage="25" :stroke-width="14" :format="() => '25%'" color="#67C23A" />
              </div>
              <div class="weight-item">
                <span class="weight-label">发生区域</span>
                <el-progress :percentage="20" :stroke-width="14" :format="() => '20%'" color="#E6A23C" />
              </div>
              <div class="weight-item">
                <span class="weight-label">责任单位</span>
                <el-progress :percentage="15" :stroke-width="14" :format="() => '15%'" color="#F56C6C" />
              </div>
            </div>
            <p class="rule-tip">系统根据加权相似度搜寻最佳匹配预案</p>
          </div>
          <el-button type="primary" style="width:100%;margin-top:12px" @click="manualMatch">
            <el-icon><Search /></el-icon> 立即匹配预案
          </el-button>
        </el-card>

        <!-- 最近匹配记录 -->
        <el-card shadow="never" class="panel-card">
          <template #header>
            <div class="card-title">
              <el-icon><Clock /></el-icon>
              <span>最近匹配记录</span>
            </div>
          </template>
          <div class="history-list">
            <div v-for="item in matchHistory" :key="item.id" class="history-item">
              <div class="history-date">{{ item.date }}</div>
              <div class="history-desc">{{ item.desc }} → {{ item.planName }}</div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 右侧结果面板 -->
      <div class="right-panel">
        <!-- 一键快速查找 -->
        <el-card shadow="never" class="panel-card">
          <template #header>
            <div class="card-title">
              <el-icon><Promotion /></el-icon>
              <span>常见专题预案 · 一键快速查找</span>
            </div>
          </template>
          <div class="topic-row">
            <el-button
              v-for="topic in topics"
              :key="topic.value"
              :type="activeTopic === topic.value ? 'primary' : 'default'"
              round
              @click="matchByTopic(topic.value)"
            >
              {{ topic.label }}
            </el-button>
          </div>
          <div class="topic-tip">支持一键选择，系统自动定位匹配数字预案库中的专题预案</div>
        </el-card>

        <!-- 匹配结果 -->
        <el-card shadow="never" class="panel-card">
          <template #header>
            <div class="card-title">
              <el-icon><Document /></el-icon>
              <span>数字预案库 · 匹配结果</span>
              <el-tag v-if="matchResults.length > 0" type="success" size="small" style="margin-left:8px">
                匹配到 {{ matchResults.length }} 个预案
              </el-tag>
              <el-tag v-else type="info" size="small" style="margin-left:8px">待匹配</el-tag>
            </div>
          </template>
          <div v-if="matchResults.length === 0" class="empty-state">
            <el-empty description="请设置突发事件条件，点击「立即匹配预案」或选择专题预案" />
          </div>
          <div v-else class="plan-list">
            <div
              v-for="plan in matchResults"
              :key="plan.id"
              class="plan-item"
              :class="{ selected: selectedPlan?.id === plan.id }"
              @click="selectPlan(plan)"
            >
              <div class="plan-head">
                <span class="plan-name">{{ plan.name }}</span>
                <el-tag :type="plan.matchScore >= 90 ? 'danger' : plan.matchScore >= 70 ? 'warning' : 'info'" size="small">
                  匹配度 {{ plan.matchScore }}%
                </el-tag>
              </div>
              <div class="plan-tags">
                <el-tag size="small" type="primary">{{ plan.type }}</el-tag>
                <el-tag size="small" type="warning">{{ plan.level }}</el-tag>
                <el-tag size="small">{{ plan.region }}</el-tag>
                <el-tag size="small" type="success">{{ plan.unit }}</el-tag>
              </div>
              <div class="plan-summary">{{ plan.summary }}</div>
            </div>
          </div>
        </el-card>

        <!-- 当前选定预案详情 -->
        <el-card shadow="never" class="panel-card detail-card">
          <template #header>
            <div class="card-title">
              <el-icon><Checked /></el-icon>
              <span>当前选定预案详情</span>
              <el-button
                v-if="selectedPlan"
                type="primary"
                size="small"
                style="margin-left:auto"
                @click="applyPlan"
              >
                应用预案
              </el-button>
            </div>
          </template>
          <div v-if="selectedPlan" class="detail-content">
            <el-descriptions :column="2" border size="small">
              <el-descriptions-item label="预案名称">{{ selectedPlan.name }}</el-descriptions-item>
              <el-descriptions-item label="匹配度">
                <el-tag :type="selectedPlan.matchScore >= 90 ? 'danger' : 'warning'" size="small">
                  {{ selectedPlan.matchScore }}%
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="事件类型">{{ selectedPlan.type }}</el-descriptions-item>
              <el-descriptions-item label="事件级别">{{ selectedPlan.level }}</el-descriptions-item>
              <el-descriptions-item label="发生区域">{{ selectedPlan.region }}</el-descriptions-item>
              <el-descriptions-item label="责任单位">{{ selectedPlan.unit }}</el-descriptions-item>
            </el-descriptions>
            <div class="detail-summary">
              <div class="summary-label">预案内容概要</div>
              <div class="summary-text">{{ selectedPlan.content }}</div>
            </div>
          </div>
          <div v-else class="empty-detail">
            <el-empty description="未选择具体预案，点击上方匹配结果中的预案可查看详情" :image-size="60" />
          </div>
        </el-card>
      </div>
    </div>

    <!-- 应用预案确认弹窗 -->
    <el-dialog v-model="applyDialogVisible" title="应用预案确认" width="480px" append-to-body>
      <div v-if="selectedPlan" style="line-height:2">
        <p><strong>预案名称：</strong>{{ selectedPlan.name }}</p>
        <p><strong>匹配度：</strong>{{ selectedPlan.matchScore }}%</p>
        <p><strong>事件类型：</strong>{{ selectedPlan.type }} | <strong>级别：</strong>{{ selectedPlan.level }}</p>
        <p><strong>区域：</strong>{{ selectedPlan.region }} | <strong>责任单位：</strong>{{ selectedPlan.unit }}</p>
        <el-divider />
        <p>预案内容将分发至应急指挥中心及相应处置单位，确定应用此预案？</p>
      </div>
      <template #footer>
        <el-button @click="applyDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmApply">确认应用</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Setting, InfoFilled, Clock, Promotion, Document, Checked, Search } from '@element-plus/icons-vue'

// 下拉选项
const eventTypeOptions = ['管道泄漏', '管网爆管', '第三方破坏', '路面塌陷', '火灾']
const eventLevelOptions = ['一般(IV级)', '较大(III级)', '重大(II级)', '特别重大(I级)']
const eventRegionOptions = ['城东管网区', '城南管网区', '城北管网区', '城西管网区']
const unitOptions = ['县供水集团', '市燃气集团', '区排水公司']

// 表单
const form = reactive({
  eventType: '管道泄漏',
  eventLevel: '较大(III级)',
  eventRegion: '城东管网区',
  responsibleUnit: '市燃气集团'
})

// 数字预案库
const digitalPlanLibrary = ref([
  { id: 'P001', name: '城东燃气管网泄漏应急预案', type: '管道泄漏', level: '较大(III级)', region: '城东管网区', unit: '市燃气集团', score: 95, content: '立即关闭上下游阀门，启动应急疏散，调集抢修车组，联动消防。专题：燃气泄漏专题', summary: '针对城东燃气管网泄漏的应急处置方案，涵盖阀门控制、疏散、消防联动等步骤。' },
  { id: 'P002', name: '城南供水管网爆管抢修预案', type: '管网爆管', level: '重大(II级)', region: '城南管网区', unit: '县供水集团', score: 92, content: '隔离爆管区域，启用备用水源，组织抢修班组，发布停水公告。专题：供水爆管专题', summary: '城南区域供水管网爆管处置流程，包括区域隔离、备用水源调度和抢修组织。' },
  { id: 'P003', name: '第三方破坏应急联动预案', type: '第三方破坏', level: '一般(IV级)', region: '城西管网区', unit: '区排水公司', score: 88, content: '制止施工，评估破坏程度，快速修复，责任认定。专题：第三方施工破坏', summary: '针对第三方施工破坏管网的应急处置，涵盖制止施工、评估修复及责任认定。' },
  { id: 'P004', name: '城北燃气重大泄漏预案', type: '管道泄漏', level: '特别重大(I级)', region: '城北管网区', unit: '市燃气集团', score: 96, content: '区域交通管制，全方面稀释，紧急疏散周边居民。专题：燃气泄漏专题', summary: '城北枢纽区特别重大燃气泄漏处置方案，含交通管制、疏散及稀释措施。' },
  { id: 'P005', name: '中心城区防汛排涝应急预案', type: '路面塌陷', level: '较大(III级)', region: '城南管网区', unit: '区排水公司', score: 85, content: '启动排涝泵站，布防沙袋，应急抽水组待命。专题：防汛排涝专题', summary: '中心城区防汛排涝预案，涉及排涝泵站、沙袋布防和应急抽水调度。' },
  { id: 'P006', name: '供热管道故障处置预案', type: '管道泄漏', level: '一般(IV级)', region: '城西管网区', unit: '县供水集团', score: 82, content: '隔离故障段，启动备用热源，入户安抚。专题：供热故障专题', summary: '供热管道泄漏故障的处置方案，含故障隔离、备用热源启动及入户安抚。' },
  { id: 'P007', name: '电力管廊事故紧急处置预案', type: '第三方破坏', level: '重大(II级)', region: '城南管网区', unit: '区排水公司', score: 87, content: '切断电源，组织电缆抢修，应急供电车保障。专题：电力管廊事故', summary: '电力管廊事故应急处置，涵盖断电、电缆抢修和应急供电车调度。' },
  { id: 'P008', name: '通信光缆中断抢修预案', type: '路面塌陷', level: '一般(IV级)', region: '城东管网区', unit: '区排水公司', score: 80, content: '启用备用路由，光缆熔接抢修，协调运营商。专题：通信光缆中断', summary: '通信光缆中断抢修方案，涉及备用路由启用、光缆熔接及运营商协调。' },
  { id: 'P009', name: '火灾应急处置预案', type: '火灾', level: '重大(II级)', region: '城北管网区', unit: '市燃气集团', score: 91, content: '启动消防联动，现场灭火，疏散周边人员，设置警戒区。专题：火灾专题', summary: '火灾事故应急处置方案，包含消防联动、人员疏散和警戒区设置。' },
  { id: 'P010', name: '城南火灾联动应急方案', type: '火灾', level: '较大(III级)', region: '城南管网区', unit: '区排水公司', score: 84, content: '调集消防力量，控制火势蔓延，保护周边管网设施。专题：火灾专题', summary: '城南区域火灾联动方案，侧重火势控制与管网设施保护。' }
])

// 专题列表
const topics = ref([
  { label: '燃气泄漏专题', value: '燃气泄漏专题' },
  { label: '供水爆管专题', value: '供水爆管专题' },
  { label: '防汛排涝专题', value: '防汛排涝专题' },
  { label: '供热故障专题', value: '供热故障专题' },
  { label: '电力管廊事故', value: '电力管廊事故' },
  { label: '通信光缆中断', value: '通信光缆中断' }
])

// 最近匹配记录
const matchHistory = ref([
  { id: 1, date: '2025-06-18', desc: '城东泄漏', planName: '城东燃气管网泄漏应急预案' },
  { id: 2, date: '2025-06-15', desc: '城南爆管', planName: '供水管网爆管抢修预案' },
  { id: 3, date: '2025-06-10', desc: '第三方破坏', planName: '第三方施工破坏应急方案' },
  { id: 4, date: '2025-06-05', desc: '城北火灾', planName: '火灾应急处置预案' }
])

// 状态
const matchResults = ref([])
const selectedPlan = ref(null)
const activeTopic = ref('')
const applyDialogVisible = ref(false)

// 匹配算法
const matchPreplan = (eventType, eventLevel, eventRegion, responsibleUnit) => {
  const scored = digitalPlanLibrary.value.map(plan => {
    let score = 0
    if (plan.type === eventType) score += 40
    if (plan.level === eventLevel) score += 25
    if (plan.region === eventRegion) score += 20
    if (plan.unit === responsibleUnit) score += 15
    return { ...plan, matchScore: score }
  })
  return scored.filter(p => p.matchScore > 0).sort((a, b) => b.matchScore - a.matchScore)
}

// 专题匹配
const matchByTopic = (topicName) => {
  activeTopic.value = topicName
  const keywordMap = {
    '燃气泄漏专题': p => p.name.includes('燃气') || p.content.includes('燃气'),
    '供水爆管专题': p => p.name.includes('供水') || p.type === '管网爆管',
    '防汛排涝专题': p => p.name.includes('防汛') || p.content.includes('防汛'),
    '供热故障专题': p => p.name.includes('供热') || p.content.includes('供热'),
    '电力管廊事故': p => p.name.includes('电力') || p.content.includes('电力'),
    '通信光缆中断': p => p.name.includes('通信') || p.content.includes('光缆')
  }
  const filterFn = keywordMap[topicName] || (() => false)
  const matched = digitalPlanLibrary.value.filter(filterFn)
  matchResults.value = matched.map(m => ({ ...m, matchScore: 85 + Math.floor(Math.random() * 12) }))
  selectedPlan.value = matchResults.value.length > 0 ? matchResults.value[0] : null
}

// 手动匹配
const manualMatch = () => {
  activeTopic.value = ''
  const matched = matchPreplan(form.eventType, form.eventLevel, form.eventRegion, form.responsibleUnit)
  matchResults.value = matched
  selectedPlan.value = matched.length > 0 ? matched[0] : null
}

// 选择预案
const selectPlan = (plan) => {
  selectedPlan.value = plan
}

// 应用预案
const applyPlan = () => {
  if (!selectedPlan.value) {
    ElMessage.warning('请先选择一个预案')
    return
  }
  applyDialogVisible.value = true
}

const confirmApply = () => {
  applyDialogVisible.value = false
  ElMessage.success(`已启动预案: ${selectedPlan.value.name}，预案内容将分发至应急指挥中心及相应处置单位。`)
}

// 初始化默认匹配
const initDefaultMatch = () => {
  const matched = matchPreplan(form.eventType, form.eventLevel, form.eventRegion, form.responsibleUnit)
  if (matched.length) {
    matchResults.value = matched
    selectedPlan.value = matched[0]
  }
}
initDefaultMatch()
</script>

<style scoped>
.app-container {
  padding: 16px;
  background: #f0f2f5;
  min-height: calc(100vh - 84px);
}

.plan-layout {
  display: flex;
  gap: 16px;
  height: 100%;
}

.left-panel {
  width: 30%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.panel-card {
  border-radius: 8px;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  color: #303133;
}

.card-title .el-icon {
  color: #409EFF;
  font-size: 16px;
}

/* 匹配规则 */
.rule-desc {
  font-size: 13px;
  color: #606266;
  line-height: 1.8;
}

.rule-weights {
  margin: 10px 0;
}

.weight-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.weight-label {
  width: 70px;
  font-size: 12px;
  color: #909399;
  flex-shrink: 0;
}

.weight-item .el-progress {
  flex: 1;
}

.rule-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

/* 最近匹配记录 */
.history-list {
  max-height: 160px;
  overflow-y: auto;
}

.history-item {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 12px;
  color: #606266;
}

.history-item:last-child {
  border-bottom: none;
}

.history-date {
  color: #909399;
  font-size: 11px;
}

.history-desc {
  margin-top: 2px;
  color: #303133;
}

/* 专题按钮 */
.topic-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.topic-tip {
  margin-top: 10px;
  font-size: 12px;
  color: #909399;
  text-align: center;
}

/* 预案列表 */
.plan-list {
  max-height: 360px;
  overflow-y: auto;
}

.plan-item {
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  background: #fafafa;
}

.plan-item:hover {
  border-color: #409EFF;
  background: #ecf5ff;
}

.plan-item.selected {
  border-color: #409EFF;
  background: #ecf5ff;
  border-left: 3px solid #409EFF;
}

.plan-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.plan-name {
  font-weight: 600;
  font-size: 14px;
  color: #303133;
}

.plan-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.plan-summary {
  font-size: 12px;
  color: #909399;
  line-height: 1.6;
}

/* 详情区域 */
.detail-content {
  font-size: 13px;
}

.detail-summary {
  margin-top: 12px;
}

.summary-label {
  font-weight: 600;
  color: #303133;
  margin-bottom: 6px;
  font-size: 13px;
}

.summary-text {
  font-size: 13px;
  color: #606266;
  line-height: 1.8;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
}

.empty-state {
  padding: 20px 0;
}

.empty-detail {
  padding: 10px 0;
}
</style>