city-life-line/src/views/subSystem/gas/gasfxpg/gwfxxq.vue

<!--管网风险详情-->
<template>
  <div class="pipeline-risk-analysis">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-icon><DataAnalysis /></el-icon>
        <span class="title">燃气管网风险构成要素分析</span>
        <div class="stats-badge">
          <span class="stat-item"><i class="dot"></i>管网总长 {{ totalLength }}km</span>
          <span class="stat-item"><i class="dot"></i>管段数量 {{ totalPipelines }}</span>
          <span class="stat-item critical"><i class="dot"></i>高风险 {{ highRiskCount }}</span>
        </div>
      </div>
      <div class="header-right">
        <el-input
            v-model="searchKeyword"
            placeholder="搜索管段/地址"
            clearable
            :prefix-icon="Search"
            style="width: 220px"
        />
        <el-button type="primary" :icon="Refresh" @click="refreshData">刷新</el-button>
        <el-button :icon="Download" @click="exportReport">导出报告</el-button>
      </div>
    </div>

    <!-- 主内容区：左侧列表 + 右侧详情 -->
    <div class="main-layout">
      <!-- 左侧管网列表 -->
      <div class="pipeline-list-panel">
        <div class="panel-header">
          <span>工艺单元（管网）列表</span>
          <el-select v-model="riskFilter" placeholder="风险等级" clearable size="small" style="width: 110px">
            <el-option label="高风险" value="high" />
            <el-option label="中风险" value="medium" />
            <el-option label="低风险" value="low" />
          </el-select>
        </div>
        <div class="pipeline-list">
          <div
              v-for="pipeline in paginatedPipelines"
              :key="pipeline.id"
              class="pipeline-item"
              :class="{
              selected: selectedPipeline?.id === pipeline.id,
              'risk-high': pipeline.riskLevel === 'high',
              'risk-medium': pipeline.riskLevel === 'medium'
            }"
              @click="selectPipeline(pipeline)"
          >
            <div class="pipeline-header">
              <span class="pipeline-name">{{ pipeline.name }}</span>
              <el-tag :type="pipeline.riskLevel === 'high' ? 'danger' : pipeline.riskLevel === 'medium' ? 'warning' : 'success'" size="small">
                {{ pipeline.riskLevel === 'high' ? '高风险' : pipeline.riskLevel === 'medium' ? '中风险' : '低风险' }}
              </el-tag>
            </div>
            <div class="pipeline-code">编号: {{ pipeline.code }}</div>
            <div class="pipeline-location">
              <el-icon><Location /></el-icon> {{ pipeline.area }}
            </div>
            <div class="risk-score">风险评分: {{ pipeline.riskScore }}分</div>
          </div>
        </div>
        <div class="pagination-area">
          <el-pagination small layout="prev, pager, next" :total="filteredPipelines.length" :page-size="pageSize" v-model:current-page="currentPage" />
        </div>
      </div>

      <!-- 右侧风险分析详情 -->
      <div class="detail-panel" v-if="selectedPipeline">
        <div class="detail-header">
          <h3>{{ selectedPipeline.name }}</h3>
          <el-tag :type="selectedPipeline.riskLevel === 'high' ? 'danger' : selectedPipeline.riskLevel === 'medium' ? 'warning' : 'success'" size="large">
            {{ selectedPipeline.riskLevel === 'high' ? '高风险' : selectedPipeline.riskLevel === 'medium' ? '中风险' : '低风险' }}
          </el-tag>
        </div>

        <!-- 风险成因雷达图 -->
        <div class="radar-section">
          <div class="section-title">风险构成要素雷达图</div>
          <div ref="radarRef" class="radar-chart"></div>
          <div class="risk-summary">
            综合风险评分: <strong :class="getScoreClass(selectedPipeline.riskScore)">{{ selectedPipeline.riskScore }}分</strong>
            <span class="risk-level">属于{{ selectedPipeline.riskLevel === 'high' ? '高风险' : selectedPipeline.riskLevel === 'medium' ? '中风险' : '低风险' }}管段</span>
          </div>
        </div>

        <!-- 四个信息卡片区 -->
        <div class="info-cards">
          <!-- 燃气管网基础信息 -->
          <div class="info-card">
            <div class="card-header">
              <el-icon><Monitor /></el-icon>
              <span>管网基础信息</span>
            </div>
            <el-descriptions :column="1" border size="small">
              <el-descriptions-item label="管材材质">{{ selectedPipeline.material }}</el-descriptions-item>
              <el-descriptions-item label="压力级别">{{ selectedPipeline.pressureLevel }}</el-descriptions-item>
              <el-descriptions-item label="管径">{{ selectedPipeline.diameter }}mm</el-descriptions-item>
              <el-descriptions-item label="长度">{{ selectedPipeline.length }}km</el-descriptions-item>
              <el-descriptions-item label="埋设年代">{{ selectedPipeline.buryYear }}</el-descriptions-item>
              <el-descriptions-item label="设计使用年限">{{ selectedPipeline.designLife }}年</el-descriptions-item>
              <el-descriptions-item label="权属单位">{{ selectedPipeline.owner }}</el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 历史维修记录 -->
          <div class="info-card">
            <div class="card-header">
              <el-icon><Document /></el-icon>
              <span>历史维修记录</span>
            </div>
            <div class="maintenance-list">
              <div v-for="record in selectedPipeline.maintenanceRecords" :key="record.id" class="maintenance-item">
                <div class="maintenance-time">{{ record.time }}</div>
                <div class="maintenance-desc">{{ record.description }}</div>
                <div class="maintenance-type">
                  <el-tag :type="record.type === '紧急' ? 'danger' : 'info'" size="small">{{ record.type }}</el-tag>
                </div>
              </div>
              <div v-if="selectedPipeline.maintenanceRecords.length === 0" class="empty-text">暂无维修记录</div>
            </div>
          </div>

          <!-- 周边危险源 -->
          <div class="info-card">
            <div class="card-header">
              <el-icon><Warning /></el-icon>
              <span>周边危险源</span>
            </div>
            <div class="hazard-list">
              <div v-for="hazard in selectedPipeline.hazards" :key="hazard.id" class="hazard-item">
                <div class="hazard-name">{{ hazard.name }}</div>
                <div class="hazard-distance">距离: {{ hazard.distance }}m</div>
                <div class="hazard-level">
                  <el-tag :type="hazard.level === '高' ? 'danger' : hazard.level === '中' ? 'warning' : 'info'" size="small">
                    风险等级: {{ hazard.level }}
                  </el-tag>
                </div>
              </div>
              <div v-if="selectedPipeline.hazards.length === 0" class="empty-text">周边无危险源</div>
            </div>
          </div>

          <!-- 周边防护目标 -->
          <div class="info-card">
            <div class="card-header">
              <el-icon><OfficeBuilding /></el-icon>
              <span>周边防护目标</span>
            </div>
            <div class="target-list">
              <div v-for="target in selectedPipeline.protectionTargets" :key="target.id" class="target-item">
                <div class="target-name">{{ target.name }}</div>
                <div class="target-distance">距离: {{ target.distance }}m</div>
                <div class="target-type">{{ target.type }}</div>
              </div>
              <div v-if="selectedPipeline.protectionTargets.length === 0" class="empty-text">周边无敏感目标</div>
            </div>
          </div>
        </div>

        <!-- 风险成因分析 -->
        <div class="risk-cause-section">
          <div class="section-title">风险成因分析</div>
          <div class="cause-list">
            <div v-for="(cause, idx) in selectedPipeline.riskCauses" :key="idx" class="cause-item">
              <el-icon><CircleClose /></el-icon>
              <span>{{ cause }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 未选中状态 -->
      <div v-else class="empty-panel">
        <el-empty description="请从左侧选择管段查看风险构成要素" :image-size="140" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { DataAnalysis, Search, Refresh, Download, Location, Monitor, Document, Warning, OfficeBuilding, CircleClose } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'

// 沅陵县管网风险构成分析数据（8段）
const pipelines = ref([
  {
    id: 1, code: 'PL-YL-001', name: '辰州路高压管线', area: '沅陵县太常片区辰州路',
    riskLevel: 'high', riskScore: 86.5,
    material: '钢管', pressureLevel: '高压 (1.6MPa)', diameter: 500, length: 3.8,
    buryYear: '2015年', designLife: '30年', owner: '沅陵燃气有限公司',
    maintenanceRecords: [
      { id: 1, time: '2025-09-15', description: '防腐层检测发现3处破损，补口修复', type: '紧急' },
      { id: 2, time: '2025-03-20', description: '辰州路雨污分流施工段增设管线保护盖板', type: '常规' },
      { id: 3, time: '2024-08-10', description: '定期巡检，发现1处标识桩损坏，已更换', type: '常规' }
    ],
    hazards: [
      { id: 1, name: '城南加油站', distance: 85, level: '高' },
      { id: 2, name: '辰州路在建施工工地', distance: 50, level: '高' },
      { id: 3, name: '太常LNG储配站', distance: 180, level: '中' }
    ],
    protectionTargets: [
      { id: 1, name: '县人民医院太常分院', distance: 120, type: '医院' },
      { id: 2, name: '太常中学', distance: 280, type: '学校' },
      { id: 3, name: '辰州路商业街', distance: 60, type: '商业区' }
    ],
    riskCauses: [
      '管道服役超过10年，防腐层出现老化剥落现象',
      '辰州路主干道交通密集，重型车辆震动荷载大',
      '雨污分流施工距管线仅50m，第三方破坏风险高',
      '周边有加油站及LNG储配站等重大危险源',
      '历史维修记录显示防腐层已多次修复'
    ],
    radarData: [82, 88, 78, 85, 92]
  },
  {
    id: 2, code: 'PL-YL-002', name: '建设东路高压管', area: '沅陵县太常片区建设东路',
    riskLevel: 'high', riskScore: 79.2,
    material: '钢管', pressureLevel: '高压 (1.6MPa)', diameter: 400, length: 3.6,
    buryYear: '2016年', designLife: '30年', owner: '沅陵燃气有限公司',
    maintenanceRecords: [
      { id: 1, time: '2025-11-08', description: '壁厚检测发现局部减薄超限，紧急停气修复', type: '紧急' },
      { id: 2, time: '2025-06-20', description: '工业园段增设阴极保护装置', type: '常规' },
      { id: 3, time: '2025-01-10', description: '检测发现多处腐蚀点，标记重点监控', type: '常规' }
    ],
    hazards: [
      { id: 1, name: '太常化工仓库', distance: 130, level: '高' },
      { id: 2, name: '工业园计量站', distance: 90, level: '中' },
      { id: 3, name: '建设路加油站', distance: 200, level: '中' }
    ],
    protectionTargets: [
      { id: 1, name: '太常工业园', distance: 150, type: '工业区' },
      { id: 2, name: '建设东路居民区', distance: 100, type: '住宅区' }
    ],
    riskCauses: [
      '高压运行，泄漏后果严重性高',
      '管道穿越工业园区域，周边化工企业密集',
      '检测发现多处腐蚀点，局部壁厚减薄',
      '建设路重型车辆通行频繁，地面荷载大',
      '防腐层老化加速，需加密监测'
    ],
    radarData: [88, 72, 85, 76, 65]
  },
  {
    id: 3, code: 'PL-YL-003', name: '古城路中压管线', area: '沅陵县太常片区古城路',
    riskLevel: 'medium', riskScore: 64.3,
    material: '钢管', pressureLevel: '中压 (0.4MPa)', diameter: 300, length: 3.2,
    buryYear: '2018年', designLife: '30年', owner: '沅陵燃气有限公司',
    maintenanceRecords: [
      { id: 1, time: '2026-01-12', description: '古城路管沟交叉段防腐层修复', type: '常规' },
      { id: 2, time: '2025-08-05', description: '房地产开发区域增设警示标识及隔离围栏', type: '常规' }
    ],
    hazards: [
      { id: 1, name: '古城路在建房地产项目', distance: 65, level: '中' },
      { id: 2, name: '古城中路电力管沟', distance: 30, level: '中' }
    ],
    protectionTargets: [
      { id: 1, name: '古城路商业步行街', distance: 80, type: '商业区' },
      { id: 2, name: '太常安置小区', distance: 150, type: '住宅区' },
      { id: 3, name: '沅陵古城游客中心', distance: 200, type: '公共场所' }
    ],
    riskCauses: [
      '沿线房地产开发施工，第三方破坏风险中等',
      '与电力管沟交叉段存在杂散电流干扰',
      '古城路商业区人流量大，后果严重性较高',
      '部分区域防腐层出现老化脱落',
      '管沟交叉区域检测难度大'
    ],
    radarData: [42, 68, 55, 58, 72]
  },
  {
    id: 4, code: 'PL-YL-004', name: '迎宾路中压管线', area: '沅陵县太常片区迎宾路',
    riskLevel: 'medium', riskScore: 55.8,
    material: '钢管', pressureLevel: '中压 (0.4MPa)', diameter: 300, length: 3.6,
    buryYear: '2019年', designLife: '30年', owner: '沅陵燃气有限公司',
    maintenanceRecords: [
      { id: 1, time: '2025-11-10', description: '电力管沟交叉段杂散电流排流治理', type: '常规' },
      { id: 2, time: '2025-05-18', description: '定期巡检，防腐层状况整体良好', type: '常规' }
    ],
    hazards: [
      { id: 1, name: '迎宾东路地下通道', distance: 120, type: '中' },
      { id: 2, name: '迎宾路电力管沟', distance: 25, level: '中' }
    ],
    protectionTargets: [
      { id: 1, name: '迎宾路商业广场', distance: 100, type: '商业区' },
      { id: 2, name: '太常街道办事处', distance: 200, type: '办公区' }
    ],
    riskCauses: [
      '电力管沟交叉段存在杂散电流干扰风险',
      '迎宾路商业区人流较大，防护目标敏感',
      '钢管轻微腐蚀，需定期检测维护',
      '管线运行正常，整体风险可控'
    ],
    radarData: [38, 58, 52, 48, 62]
  },
  {
    id: 5, code: 'PL-YL-005', name: '天宁路中压管线', area: '沅陵县太常片区天宁路',
    riskLevel: 'medium', riskScore: 48.2,
    material: 'PE管', pressureLevel: '中压 (0.4MPa)', diameter: 250, length: 3.8,
    buryYear: '2020年', designLife: '50年', owner: '沅陵燃气有限公司',
    maintenanceRecords: [
      { id: 1, time: '2025-12-05', description: '天宁西路地下车库施工段PE管接头超声波检测', type: '常规' }
    ],
    hazards: [
      { id: 1, name: '天宁西路地下车库施工区', distance: 40, level: '中' }
    ],
    protectionTargets: [
      { id: 1, name: '太常安置小区', distance: 60, type: '住宅区' },
      { id: 2, name: '天宁路小学', distance: 180, type: '学校' },
      { id: 3, name: '县政府办公区', distance: 250, type: '办公区' }
    ],
    riskCauses: [
      '地下车库施工距管线仅40m，需重点监控',
      'PE管接头处需定期检测确保密封',
      '管道穿越安置区，人口密集防护要求高',
      'PE管材耐腐蚀但抗外力破坏能力较弱'
    ],
    radarData: [25, 55, 28, 42, 48]
  },
  {
    id: 6, code: 'PL-YL-006', name: '辰州北路中压管线', area: '沅陵县太常片区辰州北路',
    riskLevel: 'medium', riskScore: 42.5,
    material: 'PE管', pressureLevel: '中压 (0.4MPa)', diameter: 200, length: 1.2,
    buryYear: '2021年', designLife: '50年', owner: '沅陵燃气有限公司',
    maintenanceRecords: [
      { id: 1, time: '2025-10-15', description: '管廊交叉段巡检，隔离设施完好', type: '常规' }
    ],
    hazards: [
      { id: 1, name: '辰州北路综合管廊', distance: 15, level: '高' }
    ],
    protectionTargets: [
      { id: 1, name: '辰州北路商业区', distance: 80, type: '商业区' },
      { id: 2, name: '古城北路居民区', distance: 120, type: '住宅区' }
    ],
    riskCauses: [
      '与综合管廊共通道，电力通信管线交叉密集',
      '管廊内可燃气体可能积聚，交叉风险高',
      '管段较短但周边地下环境复杂',
      'PE管与管廊结构隔离需持续维护'
    ],
    radarData: [18, 55, 20, 65, 48]
  },
  {
    id: 7, code: 'PL-YL-007', name: '滨江路低压管线', area: '沅陵县太常片区滨江路',
    riskLevel: 'low', riskScore: 28.6,
    material: 'PE管', pressureLevel: '低压 (0.1MPa)', diameter: 200, length: 3.8,
    buryYear: '2022年', designLife: '50年', owner: '沅陵燃气有限公司',
    maintenanceRecords: [
      { id: 1, time: '2025-08-20', description: '汛期后河堤段土体稳定性检查，正常', type: '常规' }
    ],
    hazards: [
      { id: 1, name: '滨江东路河堤管廊', distance: 100, level: '低' }
    ],
    protectionTargets: [
      { id: 1, name: '滨江公园', distance: 80, type: '公园' },
      { id: 2, name: '滨江路居民区', distance: 150, type: '住宅区' }
    ],
    riskCauses: [
      '新建管道，整体状况良好',
      '低压运行，泄漏后果可控',
      '河堤段需关注汛期水土流失影响',
      'PE管耐腐蚀，维护需求低'
    ],
    radarData: [15, 25, 18, 22, 35]
  },
  {
    id: 8, code: 'PL-YL-008', name: '太常南路低压管线', area: '沅陵县太常片区太常南路',
    riskLevel: 'low', riskScore: 18.3,
    material: 'PE管', pressureLevel: '低压 (0.1MPa)', diameter: 160, length: 1.5,
    buryYear: '2023年', designLife: '50年', owner: '沅陵燃气有限公司',
    maintenanceRecords: [],
    hazards: [],
    protectionTargets: [
      { id: 1, name: '城南新开发小区', distance: 100, type: '住宅区' }
    ],
    riskCauses: [
      '新建管道，风险极低',
      '管径小、压力低，泄漏影响范围有限',
      '位于城南新开发区域，周边环境稳定',
      'PE管材耐腐蚀性能好，寿命长'
    ],
    radarData: [8, 18, 10, 12, 22]
  }
])

// 统计数据
const totalLength = computed(() => pipelines.value.reduce((sum, p) => sum + p.length, 0).toFixed(1))
const totalPipelines = computed(() => pipelines.value.length)
const highRiskCount = computed(() => pipelines.value.filter(p => p.riskLevel === 'high').length)

// 筛选
const searchKeyword = ref('')
const riskFilter = ref('')
const currentPage = ref(1)
const pageSize = 5
const selectedPipeline = ref(pipelines.value[0])

const filteredPipelines = computed(() => {
  let list = pipelines.value
  if (searchKeyword.value) {
    const kw = searchKeyword.value.toLowerCase()
    list = list.filter(p => p.name.toLowerCase().includes(kw) || p.code.toLowerCase().includes(kw))
  }
  if (riskFilter.value) {
    list = list.filter(p => p.riskLevel === riskFilter.value)
  }
  return list
})

const paginatedPipelines = computed(() => {
  const start = (currentPage.value - 1) * pageSize
  return filteredPipelines.value.slice(start, start + pageSize)
})

// 雷达图
const radarRef = ref(null)
let radarInstance = null

function renderRadarChart() {
  if (!radarRef.value || !selectedPipeline.value) return
  if (!radarInstance) {
    radarInstance = echarts.init(radarRef.value)
  }
  const data = selectedPipeline.value.radarData
  radarInstance.setOption({
    tooltip: {},
    legend: { data: ['风险评分'], bottom: 0 },
    radar: {
      indicator: [
        { name: '管道老化风险', max: 100 },
        { name: '第三方破坏', max: 100 },
        { name: '腐蚀泄漏风险', max: 100 },
        { name: '危险源影响', max: 100 },
        { name: '防护目标敏感性', max: 100 }
      ],
      shape: 'circle',
      center: ['50%', '50%'],
      radius: '62%',
      name: { textStyle: { fontSize: 10, color: '#606266' } }
    },
    series: [{
      type: 'radar',
      data: [{ value: data, name: '风险评分' }],
      areaStyle: { color: 'rgba(245, 108, 108, 0.2)' },
      lineStyle: { color: '#f56c6c', width: 2 },
      itemStyle: { color: '#f56c6c' }
    }]
  })
}

const getScoreClass = (score) => {
  if (score >= 70) return 'high-score'
  if (score >= 40) return 'medium-score'
  return 'low-score'
}

const selectPipeline = (pipeline) => {
  selectedPipeline.value = pipeline
  nextTick(() => renderRadarChart())
}

const refreshData = () => { ElMessage.success('数据已刷新') }
const exportReport = () => { ElMessage.success('导出风险分析报告（演示）') }

onMounted(() => {
  nextTick(() => renderRadarChart())
})

onBeforeUnmount(() => {
  if (radarInstance) {
    radarInstance.dispose()
    radarInstance = null
  }
})
</script>

<style scoped>
.pipeline-risk-analysis {
  background: #f0f2f6;
  min-height: 100vh;
  padding: 20px;
}
.page-header {
  background: white;
  border-radius: 16px;
  padding: 16px 24px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.header-left { display: flex; align-items: center; gap: 20px; }
.header-left .title { font-size: 1.3rem; font-weight: 600; }
.stats-badge { display: flex; gap: 20px; }
.stat-item { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.stat-item.critical { color: #f56c6c; }
.stat-item .dot { width: 8px; height: 8px; border-radius: 50%; background: #67c23a; }
.header-right { display: flex; gap: 12px; }

.main-layout {
  display: flex;
  gap: 20px;
}
.pipeline-list-panel {
  width: 320px;
  background: white;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.panel-header {
  padding: 16px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}
.pipeline-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}
.pipeline-item {
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: #fafbfc;
  border: 1px solid #e9ecef;
  cursor: pointer;
  transition: all 0.2s;
}
.pipeline-item.selected { background: #ecf5ff; border-color: #409eff; }
.pipeline-item.risk-high { border-left: 3px solid #f56c6c; }
.pipeline-item.risk-medium { border-left: 3px solid #e6a23c; }
.pipeline-header { display: flex; justify-content: space-between; margin-bottom: 6px; }
.pipeline-name { font-weight: 600; }
.pipeline-code { font-size: 11px; color: #909399; margin-bottom: 4px; }
.pipeline-location { font-size: 11px; color: #6c757d; display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.risk-score { font-size: 12px; font-weight: 500; }

.detail-panel {
  flex: 1;
  background: white;
  border-radius: 16px;
  padding: 20px;
  overflow-y: auto;
  max-height: calc(100vh - 160px);
}
.empty-panel {
  flex: 1;
  background: white;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.detail-header h3 { margin: 0; font-size: 20px; }

.section-title { font-weight: 600; margin: 16px 0 12px 0; font-size: 15px; }
.radar-section { background: #fafbfc; border-radius: 12px; padding: 16px; margin-bottom: 20px; }
.radar-chart { height: 280px; }
.risk-summary { text-align: center; margin-top: 12px; font-size: 14px; }
.risk-summary .high-score { color: #f56c6c; font-size: 24px; }
.risk-summary .medium-score { color: #e6a23c; font-size: 24px; }
.risk-summary .low-score { color: #67c23a; font-size: 24px; }
.risk-level { margin-left: 12px; color: #606266; }

.info-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.info-card {
  background: #fafbfc;
  border-radius: 12px;
  padding: 12px;
}
.card-header { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 12px; }
.maintenance-list, .hazard-list, .target-list { max-height: 200px; overflow-y: auto; }
.maintenance-item, .hazard-item, .target-item {
  padding: 8px 0;
  border-bottom: 1px solid #e9ecef;
}
.maintenance-time { font-size: 11px; color: #909399; }
.maintenance-desc { font-size: 12px; margin: 4px 0; }
.hazard-name, .target-name { font-weight: 500; font-size: 13px; }
.hazard-distance, .target-distance { font-size: 11px; color: #909399; }
.empty-text { color: #c0c4cc; text-align: center; padding: 16px; }

.cause-list { display: flex; flex-direction: column; gap: 10px; }
.cause-item { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid #f0f0f0; }
.cause-item .el-icon { color: #f56c6c; }

.pagination-area { padding: 12px; text-align: center; border-top: 1px solid #eee; }
</style>