<!--管网风险评估清单-->
<template>
  <div class="pipeline-risk-assessment">
    <!-- 页面头部 -->
    <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 high-risk"><i class="dot"></i>高风险 {{ highRiskCount }}</span>
          <span class="stat-item medium-risk"><i class="dot"></i>中风险 {{ mediumRiskCount }}</span>
          <span class="stat-item low-risk"><i class="dot"></i>低风险 {{ lowRiskCount }}</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>

    <!-- KPI指标卡片 -->
    <div class="kpi-cards">
      <div class="kpi-card">
        <div class="kpi-value">{{ totalPipelines }}</div>
        <div class="kpi-label">评估管段总数</div>
      </div>
      <div class="kpi-card high-risk">
        <div class="kpi-value">{{ highRiskCount }}</div>
        <div class="kpi-label">高风险管段</div>
        <div class="kpi-trend">占比 {{ highRiskRate }}%</div>
      </div>
      <div class="kpi-card medium-risk">
        <div class="kpi-value">{{ mediumRiskCount }}</div>
        <div class="kpi-label">中风险管段</div>
        <div class="kpi-trend">占比 {{ mediumRiskRate }}%</div>
      </div>
      <div class="kpi-card low-risk">
        <div class="kpi-value">{{ lowRiskCount }}</div>
        <div class="kpi-label">低风险管段</div>
        <div class="kpi-trend">占比 {{ lowRiskRate }}%</div>
      </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',
              'risk-low': pipeline.riskLevel === 'low'
            }"
              @click="selectPipeline(pipeline)"
          >
            <div class="pipeline-header">
              <span class="pipeline-name">{{ pipeline.name }}</span>
              <el-tag :type="getRiskTagType(pipeline.riskLevel)" size="small">
                {{ getRiskText(pipeline.riskLevel) }}
              </el-tag>
            </div>
            <div class="pipeline-info">
              <div class="info-item">编号: {{ pipeline.code }}</div>
              <div class="info-item">长度: {{ pipeline.length }}km</div>
            </div>
            <div class="pipeline-location">
              <el-icon><Location /></el-icon> {{ pipeline.area }}
            </div>
            <div class="risk-score">
              风险评分: <span :class="getScoreClass(pipeline.riskScore)">{{ pipeline.riskScore }}</span> 分
            </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">
        <el-tabs v-model="activeTab">
          <!-- 基本信息 -->
          <el-tab-pane label="基本信息" name="basic">
            <div class="info-section">
              <div class="section-title">
                <span><el-icon><Document /></el-icon> 管段电子档案</span>
                <el-button size="small" type="primary" link @click="editArchive">编辑档案</el-button>
              </div>
              <el-descriptions :column="2" border>
                <el-descriptions-item label="管段名称">{{ selectedPipeline.name }}</el-descriptions-item>
                <el-descriptions-item label="管段编号">{{ selectedPipeline.code }}</el-descriptions-item>
                <el-descriptions-item label="所属区域">{{ selectedPipeline.area }}</el-descriptions-item>
                <el-descriptions-item label="管材材质">{{ selectedPipeline.material }}</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.buildYear }}</el-descriptions-item>
                <el-descriptions-item label="设计压力">{{ selectedPipeline.pressure }}MPa</el-descriptions-item>
                <el-descriptions-item label="权属单位">{{ selectedPipeline.owner }}</el-descriptions-item>
                <el-descriptions-item label="上次检测">{{ selectedPipeline.lastInspection }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </el-tab-pane>

          <!-- 风险评估详情 -->
          <el-tab-pane label="风险评估" name="risk">
            <div class="risk-section">
              <div class="section-title">风险评估模型分析结果</div>
              <div class="risk-level-card" :class="selectedPipeline.riskLevel">
                <div class="risk-level-title">综合风险等级</div>
                <div class="risk-level-value">{{ getRiskText(selectedPipeline.riskLevel) }}</div>
                <div class="risk-score-large">风险评分: {{ selectedPipeline.riskScore }} 分</div>
              </div>

              <div class="risk-dimensions">
                <div class="dimension-title">风险维度评分</div>
                <div class="dimension-grid">
                  <div class="dimension-item">
                    <div class="dimension-name">泄漏可能性</div>
                    <el-progress :percentage="selectedPipeline.dimensions.leakProbability" :color="getProgressColor(selectedPipeline.dimensions.leakProbability)" />
                  </div>
                  <div class="dimension-item">
                    <div class="dimension-name">后果严重性</div>
                    <el-progress :percentage="selectedPipeline.dimensions.consequenceSeverity" :color="getProgressColor(selectedPipeline.dimensions.consequenceSeverity)" />
                  </div>
                  <div class="dimension-item">
                    <div class="dimension-name">腐蚀风险</div>
                    <el-progress :percentage="selectedPipeline.dimensions.corrosionRisk" :color="getProgressColor(selectedPipeline.dimensions.corrosionRisk)" />
                  </div>
                  <div class="dimension-item">
                    <div class="dimension-name">第三方破坏风险</div>
                    <el-progress :percentage="selectedPipeline.dimensions.thirdPartyRisk" :color="getProgressColor(selectedPipeline.dimensions.thirdPartyRisk)" />
                  </div>
                  <div class="dimension-item">
                    <div class="dimension-name">设备老化程度</div>
                    <el-progress :percentage="selectedPipeline.dimensions.agingLevel" :color="getProgressColor(selectedPipeline.dimensions.agingLevel)" />
                  </div>
                </div>
              </div>

              <div class="risk-factors">
                <div class="sub-title">主要风险因素</div>
                <ul>
                  <li v-for="(factor, idx) in selectedPipeline.riskFactors" :key="idx">• {{ factor }}</li>
                </ul>
              </div>

              <div class="mitigation-measures">
                <div class="sub-title">建议管控措施</div>
                <ul>
                  <li v-for="(measure, idx) in selectedPipeline.mitigationMeasures" :key="idx">• {{ measure }}</li>
                </ul>
              </div>
            </div>
          </el-tab-pane>

          <!-- 历史评估记录 -->
          <el-tab-pane label="评估历史" name="history">
            <div class="history-section">
              <div class="section-title">历史风险评估记录</div>
              <el-timeline>
                <el-timeline-item
                    v-for="record in selectedPipeline.historyRecords"
                    :key="record.id"
                    :timestamp="record.time"
                    :type="record.type"
                >
                  <div class="history-content">
                    风险等级: {{ getRiskText(record.riskLevel) }} | 评分: {{ record.score }}分
                    <div class="history-desc">{{ record.description }}</div>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-tab-pane>

          <!-- 附件文档 -->
          <el-tab-pane label="附件文档" name="attachments">
            <div class="attachment-section">
              <div class="section-title">电子档案附件</div>
              <div class="attachment-list">
                <div v-for="file in selectedPipeline.attachments" :key="file.name" class="attachment-item">
                  <el-icon><Document /></el-icon>
                  <span>{{ file.name }}</span>
                  <el-button size="small" link type="primary">下载</el-button>
                </div>
              </div>
              <el-upload class="upload-area" drag action="#" :auto-upload="false" :show-file-list="false">
                <el-icon class="upload-icon"><Upload /></el-icon>
                <div class="upload-text">点击或拖拽上传档案附件</div>
              </el-upload>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 未选中状态 -->
      <div v-else class="empty-panel">
        <el-empty description="请从左侧选择管段查看电子档案" :image-size="140" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { DataAnalysis, Search, Refresh, Download, Location, Document, Upload } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 沅陵县管网风险评估数据（8段）
const pipelines = ref([
  {
    id: 1, code: 'PL-YL-001', name: '辰州路高压管线', area: '沅陵县太常片区', material: '钢管', diameter: 500, length: 3.8,
    buildYear: '2015', pressure: 1.6, owner: '沅陵燃气有限公司', lastInspection: '2026-03-15',
    riskLevel: 'high', riskScore: 86.5,
    dimensions: { leakProbability: 85, consequenceSeverity: 92, corrosionRisk: 78, thirdPartyRisk: 88, agingLevel: 82 },
    riskFactors: ['管道服役超过10年，老化程度较高', '辰州路主干道交通密集，第三方破坏风险大', '防腐层检测发现多处局部破损', '沿线有市政雨污分流施工活动'],
    mitigationMeasures: ['立即安排管道内检测及完整性评价', '加密巡检频次至每周2次', '在施工区域设置警示标识并派专人监护', '制定辰州路段专项应急预案'],
    historyRecords: [
      { id: 1, time: '2026-03-15', riskLevel: 'high', score: 86.5, type: 'danger', description: '2026年度春季风险评估，高风险，腐蚀加剧' },
      { id: 2, time: '2025-09-20', riskLevel: 'high', score: 84.2, type: 'danger', description: '秋季评估，因施工活动风险上调' },
      { id: 3, time: '2025-03-10', riskLevel: 'medium', score: 68.5, type: 'warning', description: '春季评估，首次发现防腐层破损' },
      { id: 4, time: '2024-09-05', riskLevel: 'medium', score: 62.3, type: 'primary', description: '首次全面风险评估' }
    ],
    attachments: [{ name: '辰州路高压管线检测报告_20260315.pdf' }, { name: '管线竣工图纸.dwg' }, { name: '防腐层检测记录.xlsx' }]
  },
  {
    id: 2, code: 'PL-YL-002', name: '建设东路高压管', area: '沅陵县太常片区', material: '钢管', diameter: 400, length: 3.6,
    buildYear: '2016', pressure: 1.6, owner: '沅陵燃气有限公司', lastInspection: '2025-11-08',
    riskLevel: 'high', riskScore: 79.2,
    dimensions: { leakProbability: 82, consequenceSeverity: 76, corrosionRisk: 85, thirdPartyRisk: 72, agingLevel: 88 },
    riskFactors: ['高压运行风险等级高', '管道穿越工业园区域，周边有化工企业', '检测发现多处腐蚀点，局部壁厚减薄', '建设路沿线重型车辆通行频繁'],
    mitigationMeasures: ['紧急申请维修资金进行局部换管', '加强对化工企业周边管段的气体监测', '在工业园段增设阴极保护', '每季度进行一次壁厚检测'],
    historyRecords: [
      { id: 1, time: '2025-11-08', riskLevel: 'high', score: 79.2, type: 'danger', description: '检测发现严重腐蚀，壁厚减薄超限' },
      { id: 2, time: '2025-06-15', riskLevel: 'high', score: 76.8, type: 'danger', description: '中期评估，腐蚀风险升高' },
      { id: 3, time: '2025-01-20', riskLevel: 'medium', score: 61.5, type: 'warning', description: '年度风险评估，发现局部异常' }
    ],
    attachments: [{ name: '建设东路高压管腐蚀检测报告.pdf' }, { name: '壁厚检测数据.xlsx' }, { name: '维修方案_v2.docx' }]
  },
  {
    id: 3, code: 'PL-YL-003', name: '古城路中压管线', area: '沅陵县太常片区', material: '钢管', diameter: 300, length: 3.2,
    buildYear: '2018', pressure: 0.4, owner: '沅陵燃气有限公司', lastInspection: '2026-02-10',
    riskLevel: 'medium', riskScore: 64.3,
    dimensions: { leakProbability: 58, consequenceSeverity: 72, corrosionRisk: 55, thirdPartyRisk: 68, agingLevel: 42 },
    riskFactors: ['沿线有在建房地产开发工程', '部分区域防腐层老化脱落', '古城路商业区人流量大，后果严重性较高', '管线穿越古城地下管沟区域，交叉风险'],
    mitigationMeasures: ['对施工区域加密巡查至每周3次', '计划2026年Q3进行内检测', '与开发商签订管线保护协议', '更新防腐层老化段'],
    historyRecords: [
      { id: 1, time: '2026-02-10', riskLevel: 'medium', score: 64.3, type: 'warning', description: '季度评估，施工活动导致风险上升' },
      { id: 2, time: '2025-11-15', riskLevel: 'medium', score: 61.8, type: 'primary', description: '秋季风险评估，防腐层检测' },
      { id: 3, time: '2025-08-20', riskLevel: 'medium', score: 58.5, type: 'primary', description: '夏季常规评估' },
      { id: 4, time: '2025-05-10', riskLevel: 'low', score: 38.2, type: 'success', description: '春季评估，风险较低' }
    ],
    attachments: [{ name: '古城路中压管线检测报告_20260210.pdf' }, { name: '管沟交叉段详图.dwg' }, { name: '巡检记录_2026Q1.xlsx' }]
  },
  {
    id: 4, code: 'PL-YL-004', name: '迎宾路中压管线', area: '沅陵县太常片区', material: '钢管', diameter: 300, length: 3.6,
    buildYear: '2019', pressure: 0.4, owner: '沅陵燃气有限公司', lastInspection: '2026-04-28',
    riskLevel: 'medium', riskScore: 55.8,
    dimensions: { leakProbability: 48, consequenceSeverity: 62, corrosionRisk: 52, thirdPartyRisk: 58, agingLevel: 38 },
    riskFactors: ['管道运行正常但有轻微腐蚀迹象', '迎宾路商业区人流较大', '沿线有电力管沟交叉，存在杂散电流干扰'],
    mitigationMeasures: ['加强日常巡检，每月至少2次', '排查电力管沟交叉段杂散电流影响', '计划2026年Q4进行防腐层检测'],
    historyRecords: [
      { id: 1, time: '2026-04-28', riskLevel: 'medium', score: 55.8, type: 'warning', description: '春季评估，轻微腐蚀需关注' },
      { id: 2, time: '2025-10-15', riskLevel: 'medium', score: 52.3, type: 'primary', description: '秋季常规评估' },
      { id: 3, time: '2025-04-20', riskLevel: 'medium', score: 50.1, type: 'primary', description: '年度风险评估' }
    ],
    attachments: [{ name: '迎宾路中压管线运行记录.pdf' }, { name: '杂散电流检测报告.docx' }]
  },
  {
    id: 5, code: 'PL-YL-005', name: '天宁路中压管线', area: '沅陵县太常片区', material: 'PE管', diameter: 250, length: 3.8,
    buildYear: '2020', pressure: 0.4, owner: '沅陵燃气有限公司', lastInspection: '2026-05-12',
    riskLevel: 'medium', riskScore: 48.2,
    dimensions: { leakProbability: 42, consequenceSeverity: 55, corrosionRisk: 28, thirdPartyRisk: 65, agingLevel: 25 },
    riskFactors: ['PE管接头处需定期检测维护', '天宁西路有地下车库临近施工', '管道穿越太常安置区，人口密集', '地质沉降风险需关注'],
    mitigationMeasures: ['每年对PE管接头进行超声波检测', '临近施工期间加密巡查', '建立安置区居民燃气安全宣传机制'],
    historyRecords: [
      { id: 1, time: '2026-05-12', riskLevel: 'medium', score: 48.2, type: 'warning', description: '夏季评估，地下车库施工影响' },
      { id: 2, time: '2025-11-20', riskLevel: 'low', score: 35.6, type: 'success', description: '秋季评估，风险可控' },
      { id: 3, time: '2025-05-10', riskLevel: 'low', score: 32.8, type: 'success', description: '春季常规评估' }
    ],
    attachments: [{ name: '天宁路中压PE管检测报告.pdf' }, { name: '接头检测记录_2026.xlsx' }]
  },
  {
    id: 6, code: 'PL-YL-006', name: '辰州北路中压管线', area: '沅陵县太常片区', material: 'PE管', diameter: 200, length: 1.2,
    buildYear: '2021', pressure: 0.4, owner: '沅陵燃气有限公司', lastInspection: '2026-05-28',
    riskLevel: 'medium', riskScore: 42.5,
    dimensions: { leakProbability: 38, consequenceSeverity: 48, corrosionRisk: 20, thirdPartyRisk: 55, agingLevel: 18 },
    riskFactors: ['辰州北路综合管廊相邻区域，交叉风险', '管段较短但周边地下管线复杂', '电力、通信管线共用管廊通道'],
    mitigationMeasures: ['加强管廊交叉段气体监测', '与管廊管理单位建立联动机制', '定期检查PE管与管廊的隔离情况'],
    historyRecords: [
      { id: 1, time: '2026-05-28', riskLevel: 'medium', score: 42.5, type: 'warning', description: '管廊交叉段专项评估' },
      { id: 2, time: '2025-11-10', riskLevel: 'low', score: 35.2, type: 'success', description: '秋季评估，低风险' },
      { id: 3, time: '2025-05-05', riskLevel: 'low', score: 30.8, type: 'success', description: '春季常规评估' }
    ],
    attachments: [{ name: '辰州北路管廊交叉段评估报告.pdf' }, { name: '管廊通道图纸.dwg' }]
  },
  {
    id: 7, code: 'PL-YL-007', name: '滨江路低压管线', area: '沅陵县太常片区', material: 'PE管', diameter: 200, length: 3.8,
    buildYear: '2022', pressure: 0.1, owner: '沅陵燃气有限公司', lastInspection: '2026-06-03',
    riskLevel: 'low', riskScore: 28.6,
    dimensions: { leakProbability: 25, consequenceSeverity: 35, corrosionRisk: 18, thirdPartyRisk: 32, agingLevel: 15 },
    riskFactors: ['新建管道状况良好，整体风险低', '低压运行，泄漏后果可控', '滨江路河堤段需关注汛期水土流失影响'],
    mitigationMeasures: ['常规巡检（每月1次）', '汛期前后加强河堤段管线上方土体检查', '建立运行档案，记录运行参数'],
    historyRecords: [
      { id: 1, time: '2026-06-03', riskLevel: 'low', score: 28.6, type: 'success', description: '夏季汛期前风险评估，低风险' },
      { id: 2, time: '2025-12-10', riskLevel: 'low', score: 26.2, type: 'success', description: '冬季评估，运行正常' },
      { id: 3, time: '2025-06-05', riskLevel: 'low', score: 24.5, type: 'success', description: '首次年度风险评估' }
    ],
    attachments: [{ name: '滨江路低压管线竣工图纸.pdf' }, { name: '运行记录_2026.xlsx' }]
  },
  {
    id: 8, code: 'PL-YL-008', name: '太常南路低压管线', area: '沅陵县太常片区', material: 'PE管', diameter: 160, length: 1.5,
    buildYear: '2023', pressure: 0.1, owner: '沅陵燃气有限公司', lastInspection: '2026-06-08',
    riskLevel: 'low', riskScore: 18.3,
    dimensions: { leakProbability: 18, consequenceSeverity: 22, corrosionRisk: 10, thirdPartyRisk: 25, agingLevel: 8 },
    riskFactors: ['新建管道风险极低', '位于城南新开发区域，周边环境稳定', '管径小、压力低，风险可控'],
    mitigationMeasures: ['常规巡检（每2月1次）', '关注区域开发建设动态', '定期更新电子档案'],
    historyRecords: [
      { id: 1, time: '2026-06-08', riskLevel: 'low', score: 18.3, type: 'success', description: '年度风险评估，新建管道运行良好' },
      { id: 2, time: '2025-12-15', riskLevel: 'low', score: 16.8, type: 'success', description: '首次运行评估，各项指标正常' }
    ],
    attachments: [{ name: '太常南路竣工图纸.pdf' }, { name: '管道材质证明.pdf' }, { name: '验收报告.pdf' }]
  }
])

// 统计数据
const totalPipelines = computed(() => pipelines.value.length)
const highRiskCount = computed(() => pipelines.value.filter(p => p.riskLevel === 'high').length)
const mediumRiskCount = computed(() => pipelines.value.filter(p => p.riskLevel === 'medium').length)
const lowRiskCount = computed(() => pipelines.value.filter(p => p.riskLevel === 'low').length)
const highRiskRate = computed(() => ((highRiskCount.value / totalPipelines.value) * 100).toFixed(1))
const mediumRiskRate = computed(() => ((mediumRiskCount.value / totalPipelines.value) * 100).toFixed(1))
const lowRiskRate = computed(() => ((lowRiskCount.value / totalPipelines.value) * 100).toFixed(1))

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

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) || p.area.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 getRiskTagType = (level) => {
  const map = { high: 'danger', medium: 'warning', low: 'success' }
  return map[level]
}
const getRiskText = (level) => {
  const map = { high: '高风险', medium: '中风险', low: '低风险' }
  return map[level]
}
const getScoreClass = (score) => {
  if (score >= 70) return 'high-score'
  if (score >= 40) return 'medium-score'
  return 'low-score'
}
const getProgressColor = (percentage) => {
  if (percentage >= 70) return '#f56c6c'
  if (percentage >= 40) return '#e6a23c'
  return '#67c23a'
}

const selectPipeline = (pipeline) => { selectedPipeline.value = pipeline }
const refreshData = () => { ElMessage.success('数据已刷新') }
const exportReport = () => { ElMessage.success('导出风险评估报表（演示）') }
const editArchive = () => { ElMessage.info('编辑电子档案（演示）') }
</script>

<style scoped>
.pipeline-risk-assessment {
  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.high-risk { color: #f56c6c; }
.stat-item.medium-risk { color: #e6a23c; }
.stat-item.low-risk { color: #67c23a; }
.stat-item .dot { width: 8px; height: 8px; border-radius: 50%; background: #67c23a; }
.stat-item.high-risk .dot { background: #f56c6c; }
.stat-item.medium-risk .dot { background: #e6a23c; }
.header-right { display: flex; gap: 12px; }

.kpi-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.kpi-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.kpi-card.high-risk .kpi-value { color: #f56c6c; }
.kpi-card.medium-risk .kpi-value { color: #e6a23c; }
.kpi-card.low-risk .kpi-value { color: #67c23a; }
.kpi-value { font-size: 32px; font-weight: bold; }
.kpi-label { font-size: 13px; color: #909399; margin-top: 4px; }
.kpi-trend { font-size: 11px; color: #909399; margin-top: 4px; }

.main-layout {
  display: flex;
  gap: 20px;
}
.pipeline-list-panel {
  width: 360px;
  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: 14px;
  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-item.risk-low { border-left: 3px solid #67c23a; }
.pipeline-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.pipeline-name { font-weight: 600; }
.pipeline-info { display: flex; gap: 16px; font-size: 12px; color: #606266; margin-bottom: 6px; }
.pipeline-location { font-size: 12px; color: #6c757d; display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.risk-score { font-size: 12px; }
.risk-score .high-score { color: #f56c6c; font-weight: bold; }
.risk-score .medium-score { color: #e6a23c; font-weight: bold; }
.risk-score .low-score { color: #67c23a; }

.detail-panel {
  flex: 1;
  background: white;
  border-radius: 16px;
  padding: 20px;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}
.empty-panel {
  flex: 1;
  background: white;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-title { font-weight: 600; margin: 16px 0 12px 0; display: flex; justify-content: space-between; align-items: center; }

.risk-level-card {
  text-align: center;
  padding: 20px;
  border-radius: 16px;
  margin-bottom: 20px;
}
.risk-level-card.high { background: #fff8f8; border: 1px solid #f56c6c; }
.risk-level-card.medium { background: #fffef5; border: 1px solid #e6a23c; }
.risk-level-card.low { background: #f5fff5; border: 1px solid #67c23a; }
.risk-level-title { font-size: 14px; color: #909399; }
.risk-level-value { font-size: 28px; font-weight: bold; margin: 8px 0; }
.risk-level-card.high .risk-level-value { color: #f56c6c; }
.risk-level-card.medium .risk-level-value { color: #e6a23c; }
.risk-level-card.low .risk-level-value { color: #67c23a; }
.risk-score-large { font-size: 16px; }

.risk-dimensions { margin-bottom: 20px; }
.dimension-title { font-weight: 500; margin-bottom: 12px; }
.dimension-grid { display: flex; flex-direction: column; gap: 12px; }
.dimension-name { margin-bottom: 4px; font-size: 13px; }

.risk-factors, .mitigation-measures { margin-bottom: 20px; }
.sub-title { font-weight: 500; margin-bottom: 8px; }
ul { margin: 0; padding-left: 20px; }
li { margin: 6px 0; font-size: 13px; }

.history-content { font-size: 13px; }
.history-desc { font-size: 12px; color: #909399; margin-top: 4px; }

.attachment-list { margin-bottom: 16px; }
.attachment-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.upload-area { margin-top: 16px; }
.upload-icon { font-size: 32px; color: #c0c4cc; margin-bottom: 8px; }
.upload-text { font-size: 12px; color: #909399; }

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