city-life-line/src/views/subSystem/drainage/fxpg/zhfxtjfx.vue

<template>
  <div class="app-container risk-stat-page">
    <!-- ==================== 筛选区 ==================== -->
    <el-form :model="queryParams" :inline="true" v-show="showSearch" label-width="80px" @submit.prevent>
      <el-form-item label="管线编号">
        <el-input v-model="queryParams.networkCode" placeholder="请输入" clearable style="width: 150px"
          @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="管线类别">
        <el-select v-model="queryParams.networkLevel" placeholder="全部" clearable style="width: 140px">
          <el-option v-for="item in options.networkLevels" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属区域">
        <el-select v-model="queryParams.managementUnit" placeholder="全部" clearable filterable style="width: 160px">
          <el-option v-for="item in options.managementUnits" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="所在道路">
        <el-input v-model="queryParams.location" placeholder="请输入" clearable style="width: 160px"
          @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="风险级别">
        <el-select v-model="queryParams.riskLevel" placeholder="全部" clearable style="width: 130px">
          <el-option v-for="item in options.riskLevels" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- ==================== 统计概览 ==================== -->
    <div class="stat-cards">
      <el-card class="stat-card stat-blue" shadow="hover">
        <div class="stat-card-inner">
          <div class="stat-icon"><el-icon :size="28"><DataLine /></el-icon></div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.total ?? 0 }}</div>
            <div class="stat-label">管网总数</div>
          </div>
        </div>
      </el-card>
      <el-card class="stat-card stat-red" shadow="hover">
        <div class="stat-card-inner">
          <div class="stat-icon"><el-icon :size="28"><Warning /></el-icon></div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.withAlarm ?? 0 }}</div>
            <div class="stat-label">有报警管网</div>
          </div>
        </div>
      </el-card>
      <el-card class="stat-card stat-orange" shadow="hover">
        <div class="stat-card-inner">
          <div class="stat-icon"><el-icon :size="28"><WarningFilled /></el-icon></div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.totalAlarms ?? 0 }}</div>
            <div class="stat-label">总报警数</div>
          </div>
        </div>
      </el-card>
      <el-card class="stat-card stat-green" shadow="hover">
        <div class="stat-card-inner">
          <div class="stat-icon"><el-icon :size="28"><CircleCheck /></el-icon></div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.noAlarm ?? 0 }}</div>
            <div class="stat-label">无报警管网</div>
          </div>
        </div>
      </el-card>
      <el-card class="stat-card stat-purple" shadow="hover">
        <div class="stat-card-inner">
          <div class="stat-icon"><el-icon :size="28"><TrendCharts /></el-icon></div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.highRisk ?? 0 }}</div>
            <div class="stat-label">高风险管网</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- ==================== 风险等级分布条 ==================== -->
    <div class="level-bar" v-if="(stats.total ?? 0) > 0">
      <div class="level-bar-title">风险等级分布</div>
      <div class="level-bar-track">
        <div v-for="item in levelSegments" :key="item.name" class="level-segment"
          :class="{ active: queryParams.riskLevel === item.value }" :style="{ flex: item.value_count || 0.0001, background: item.color }"
          :title="`${item.name}：${item.value_count} 条（点击筛选）`" @click="toggleRiskLevel(item.value)">
          <span class="segment-text" v-if="item.value_count > 0">{{ item.name }} {{ item.value_count }}</span>
        </div>
      </div>
      <div class="level-bar-legend">
        <span class="legend-item" v-for="item in levelSegments" :key="item.name">
          <i :style="{ background: item.color }"></i>{{ item.name }} {{ item.value_count }}
        </span>
      </div>
    </div>

    <!-- ==================== 数据表格 ==================== -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Refresh" :loading="loading" @click="loadList">刷新</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="loadList"></right-toolbar>
    </el-row>

    <el-table :data="tableData" style="width: 100%" v-loading="loading"
      :default-sort="{ prop: 'riskScore', order: 'descending' }">
      <el-table-column label="序号" type="index" width="60" align="center"
        :index="(i) => (pageNum - 1) * pageSize + i + 1" />
      <el-table-column prop="networkCode" label="管线编号" min-width="140" show-overflow-tooltip>
        <template #default="{ row }">{{ row.networkCode || '-' }}</template>
      </el-table-column>
      <el-table-column prop="networkName" label="管网名称" min-width="150" show-overflow-tooltip>
        <template #default="{ row }">{{ row.networkName || '-' }}</template>
      </el-table-column>
      <el-table-column label="管线类别" width="110" align="center">
        <template #default="{ row }">
          <el-tag v-if="row.networkLevel" size="small" effect="plain">{{ row.networkLevel }}</el-tag>
          <span v-else class="text-muted">-</span>
        </template>
      </el-table-column>
      <el-table-column prop="managementUnit" label="所属区域" min-width="130" show-overflow-tooltip>
        <template #default="{ row }">{{ row.managementUnit || '-' }}</template>
      </el-table-column>
      <el-table-column prop="location" label="所在道路" min-width="170" show-overflow-tooltip>
        <template #default="{ row }">{{ row.location || '-' }}</template>
      </el-table-column>
      <el-table-column label="关联设备" width="100" align="center">
        <template #default="{ row }">
          <span v-if="row.equipmentCount > 0">{{ row.equipmentCount }}</span>
          <span v-else class="text-muted">未关联</span>
        </template>
      </el-table-column>
      <el-table-column label="报警次数" width="100" align="center" prop="alarmCount" sortable>
        <template #default="{ row }">
          <span :class="row.alarmCount > 0 ? 'alarm-has' : 'text-muted'">{{ row.alarmCount ?? 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="风险等级" width="100" align="center" prop="riskScore" sortable>
        <template #default="{ row }">
          <el-tag :type="riskTagType(row.riskLevel)" size="small" effect="dark">{{ row.riskLevelName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="风险评分" width="150" align="center">
        <template #default="{ row }">
          <div class="score-cell">
            <el-progress :percentage="row.riskScore || 0" :stroke-width="8" :show-text="false"
              :color="row.riskColor" class="score-bar" />
            <span class="score-num" :style="{ color: row.riskColor }">{{ row.riskScore }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="评估时间" width="168" align="center">
        <template #default="{ row }">{{ formatDateTime(row.assessTime) }}</template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center" fixed="right">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleDetail(row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- ==================== 分页 ==================== -->
    <div class="pagination-wrap">
      <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize"
        @pagination="loadList" />
    </div>

    <!-- ==================== 详情抽屉 ==================== -->
    <el-drawer v-model="detailVisible" title="管网综合风险评估详情" size="900px" :close-on-click-modal="false"
      class="risk-detail-drawer" direction="rtl">
      <div v-loading="detailLoading" class="drawer-body">
        <RiskAssessmentTabs v-if="detailData" :detail="detailData" />
      </div>
      <template #footer>
        <el-button @click="detailVisible = false">关 闭</el-button>
      </template>
    </el-drawer>
  </div>
</template>

<script setup name="Zhfxtjfx">
import { ref, reactive, computed, onMounted } from 'vue'
import { Search, Refresh, DataLine, Warning, WarningFilled, CircleCheck, TrendCharts } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {
  getDrainageRiskPage,
  getDrainageRiskStatistics,
  getDrainageRiskFilterOptions,
  getDrainageRiskDetail
} from '@/api/drainageRisk'
import RiskAssessmentTabs from './components/RiskAssessmentTabs.vue'

// ==================== 筛选与分页 ====================
const showSearch = ref(true)
const queryParams = reactive({
  networkCode: '',
  networkLevel: '',
  managementUnit: '',
  location: '',
  riskLevel: ''
})

const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
const tableData = ref([])
const loading = ref(false)

const options = reactive({
  networkLevels: [],
  managementUnits: [],
  riskLevels: []
})

const stats = ref({})

/** 组装查询条件，空值不传，避免后端把空串当筛选条件 */
function buildParams() {
  const params = {}
  Object.keys(queryParams).forEach((key) => {
    const value = queryParams[key]
    if (value !== '' && value !== null && value !== undefined) {
      params[key] = value
    }
  })
  return params
}

// ==================== 风险等级分布条 ====================
const levelSegments = computed(() => {
  const list = stats.value.levelDistribution || []
  return list.map((item) => ({
    name: item.name,
    value: item.name === '高风险' ? 'high' : item.name === '中风险' ? 'medium' : 'low',
    value_count: item.value || 0,
    color: item.color
  }))
})

function toggleRiskLevel(level) {
  queryParams.riskLevel = queryParams.riskLevel === level ? '' : level
  handleQuery()
}

// ==================== 数据加载 ====================
async function loadList() {
  loading.value = true
  try {
    const res = await getDrainageRiskPage({ ...buildParams(), pageNum: pageNum.value, pageSize: pageSize.value })
    const page = res.code !== undefined ? res.data : res
    tableData.value = page?.records || []
    total.value = page?.total || 0
  } catch (error) {
    console.error('加载综合风险列表失败', error)
    ElMessage.error('加载综合风险列表失败')
    tableData.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

async function loadStatistics() {
  try {
    const res = await getDrainageRiskStatistics(buildParams())
    stats.value = (res.code !== undefined ? res.data : res) || {}
  } catch (error) {
    console.error('加载综合风险统计失败', error)
  }
}

async function loadOptions() {
  try {
    const res = await getDrainageRiskFilterOptions()
    const data = (res.code !== undefined ? res.data : res) || {}
    options.networkLevels = data.networkLevels || []
    options.managementUnits = data.managementUnits || []
    options.riskLevels = data.riskLevels || []
  } catch (error) {
    console.error('加载筛选选项失败', error)
  }
}

function handleQuery() {
  pageNum.value = 1
  loadList()
  loadStatistics()
}

function resetQuery() {
  queryParams.networkCode = ''
  queryParams.networkLevel = ''
  queryParams.managementUnit = ''
  queryParams.location = ''
  queryParams.riskLevel = ''
  handleQuery()
}

// ==================== 详情 ====================
const detailVisible = ref(false)
const detailLoading = ref(false)
const detailData = ref(null)

async function handleDetail(row) {
  detailData.value = null
  detailVisible.value = true
  detailLoading.value = true
  try {
    const res = await getDrainageRiskDetail(row.networkId)
    detailData.value = (res.code !== undefined ? res.data : res) || null
  } catch (error) {
    console.error('加载风险评估详情失败', error)
    ElMessage.error('加载风险评估详情失败')
  } finally {
    detailLoading.value = false
  }
}

// ==================== 工具 ====================
function riskTagType(level) {
  return level === 'high' ? 'danger' : level === 'medium' ? 'warning' : 'success'
}

function formatDateTime(value) {
  if (!value) return '-'
  return String(value).replace('T', ' ').slice(0, 19)
}

// ==================== 初始化 ====================
onMounted(async () => {
  await loadOptions()
  await Promise.all([loadList(), loadStatistics()])
})
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.search-form {
  margin-bottom: 8px;
}

/* ==================== 统计卡片 ==================== */
.stat-cards {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.stat-card {
  flex: 1;
  min-width: 0;
}

.stat-card :deep(.el-card__body) {
  padding: 14px 18px;
}

.stat-card-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-blue .stat-icon { background: rgba(64, 158, 255, 0.1); color: #409EFF; }
.stat-red .stat-icon { background: rgba(245, 108, 108, 0.1); color: #F56C6C; }
.stat-orange .stat-icon { background: rgba(230, 162, 60, 0.1); color: #E6A23C; }
.stat-green .stat-icon { background: rgba(103, 194, 58, 0.1); color: #67C23A; }
.stat-purple .stat-icon { background: rgba(144, 97, 255, 0.1); color: #9061ff; }

.stat-info {
  flex: 1;
  min-width: 0;
}

.stat-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.stat-blue .stat-value { color: #409EFF; }
.stat-red .stat-value { color: #F56C6C; }
.stat-orange .stat-value { color: #E6A23C; }
.stat-green .stat-value { color: #67C23A; }
.stat-purple .stat-value { color: #9061ff; }

.stat-label {
  font-size: 13px;
  color: #909399;
  margin-top: 2px;
}

/* ==================== 风险等级分布条 ==================== */
.level-bar {
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.level-bar-title {
  font-size: 13px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.level-bar-track {
  display: flex;
  height: 22px;
  border-radius: 4px;
  overflow: hidden;
  background: #f5f7fa;
}

.level-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.15s, filter 0.15s;
  min-width: 2px;
  overflow: hidden;
}

.level-segment:hover {
  filter: brightness(1.08);
}

.level-segment.active {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.segment-text {
  font-size: 11px;
  color: #fff;
  white-space: nowrap;
  padding: 0 6px;
}

.level-bar-legend {
  display: flex;
  gap: 20px;
  margin-top: 8px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #606266;
}

.legend-item i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}

/* ==================== 表格 ==================== */
.alarm-has {
  color: #F56C6C;
  font-weight: 700;
}

.text-muted {
  color: #c0c4cc;
}

.score-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.score-bar {
  flex: 1;
  min-width: 0;
}

.score-num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  width: 26px;
  text-align: right;
  flex-shrink: 0;
}

.pagination-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.drawer-body {
  min-height: 200px;
}

.risk-detail-drawer :deep(.el-drawer__body) {
  padding-top: 12px;
}
</style>