city-life-line/src/views/subSystem/drainage/jcyj/lsyjgl.vue

<template>
  <div class="app-container lsyjgl-page">

    <!-- ==================== 搜索区域 ==================== -->
    <div class="search-panel">
      <div class="search-form">
        <div class="form-item">
          <span class="form-label">预警名称：</span>
          <el-input v-model="filters.equipmentName" placeholder="请输入" clearable style="width:200px" />
        </div>
        <div class="form-item">
          <span class="form-label">预警级别：</span>
          <el-select v-model="filters.warningLevel" placeholder="请选择" clearable style="width:160px">
            <el-option label="严重" :value="1" />
            <el-option label="重要" :value="2" />
            <el-option label="一般" :value="3" />
          </el-select>
        </div>
        <div class="form-item">
          <span class="form-label">处理状态：</span>
          <el-select v-model="filters.status" placeholder="请选择" clearable style="width:160px">
            <el-option label="已处置" value="HANDLED" />
            <el-option label="已解除" value="CLOSED" />
          </el-select>
        </div>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleClear">清除</el-button>
      </div>
    </div>

    <!-- ==================== 数据表格 ==================== -->
    <div class="table-panel">
      <el-table :data="tableData" border style="width:100%" v-loading="loading">
        <el-table-column prop="warningNo" label="预警编号" min-width="140" />
        <el-table-column prop="equipmentName" label="预警名称" min-width="140" show-overflow-tooltip />
        <el-table-column prop="warningLevel" label="预警级别" width="90" align="center">
          <template #default="{ row }">
            <el-tag :type="levelTagType(row.warningLevel)" size="small">{{ levelText(row.warningLevel) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="deviceCode" label="预警类型" width="110" align="center">
          <template #default="{ row }">
            {{ equipmentTypeMap.get(String(row.deviceCode)) || row.deviceCode || row.warningType || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="warningSpecial" label="预警专项" width="110" align="center" show-overflow-tooltip />
        <el-table-column prop="location" label="位置" min-width="180" show-overflow-tooltip />
        <el-table-column prop="createTime" label="预警时间" width="160" />
        <el-table-column prop="status" label="处理状态" width="90" align="center">
          <template #default="{ row }">
            <el-tag :type="statusTagType(row.status)" size="small">{{ statusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleView(row)">查看</el-button>
            <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 16px; justify-content: flex-end"
        @size-change="loadData"
        @current-change="loadData"
      />
    </div>

    <!-- ==================== 查看详情弹窗 ==================== -->
    <el-drawer
      v-model="dialogVisible"
      title="历史预警详情"
      size="680px"
      :close-on-click-modal="false"
     class="detail-drawer" direction="rtl">
      <div class="detail-body" v-if="currentDetail">
        <!-- 右侧信息 -->
        <div class="detail-info">
          <div class="info-code">预警编号：{{ currentDetail.warningNo }}</div>
          <div class="info-grid">
            <div class="info-row">
              <div class="info-item">
                <span class="info-label">预警名称：</span>
                <span class="info-value">{{ currentDetail.equipmentName }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">预警级别：</span>
                <span class="info-value">
                  <el-tag :type="levelTagType(currentDetail.warningLevel)" size="small">{{ levelText(currentDetail.warningLevel) }}</el-tag>
                </span>
              </div>
            </div>
            <div class="info-row">
              <div class="info-item">
                <span class="info-label">预警类型：</span>
                <span class="info-value">{{ equipmentTypeMap.get(String(currentDetail.deviceCode)) || currentDetail.deviceCode || currentDetail.warningType || '-' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">预警专项：</span>
                <span class="info-value">{{ currentDetail.warningSpecial || '-' }}</span>
              </div>
            </div>
            <div class="info-row">
              <div class="info-item">
                <span class="info-label">预警时间：</span>
                <span class="info-value">{{ currentDetail.createTime }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">发布人：</span>
                <span class="info-value">{{ currentDetail.publisher || '-' }}</span>
              </div>
            </div>
            <div class="info-row">
              <div class="info-item">
                <span class="info-label">处理状态：</span>
                <span class="info-value">
                  <el-tag :type="statusTagType(currentDetail.status)" size="small">{{ statusText(currentDetail.status) }}</el-tag>
                </span>
              </div>
              <div class="info-item">
                <span class="info-label">发布时间：</span>
                <span class="info-value">{{ currentDetail.publishTime || '-' }}</span>
              </div>
            </div>
            <div class="info-row single">
              <div class="info-item">
                <span class="info-label">位置：</span>
                <span class="info-value desc-text">{{ currentDetail.location }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-drawer>

  </div>
</template>

<script setup name="Lsyjgl">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getWarningHistoryPage, deleteWarning, getEquipmentTypeList } from '@/api/drainage'

// ==================== 设备类型映射 ====================
const equipmentTypeMap = ref(new Map())

async function loadEquipmentTypes() {
  try {
    const res = await getEquipmentTypeList('2')
    const list = res.code !== undefined ? res.data : res
    const map = new Map()
    if (Array.isArray(list)) {
      list.forEach(item => {
        if (item.id !== undefined && item.id !== null) map.set(String(item.id), item.typeName)
      })
    }
    equipmentTypeMap.value = map
  } catch (error) {
    console.error('加载设备类型列表失败', error)
  }
}

// ==================== 等级/状态工具方法 ====================
function levelText(level) {
  const map = { 1: '严重', 2: '重要', 3: '一般' }
  return map[level] || '-'
}
function levelTagType(level) {
  const map = { 1: 'danger', 2: 'warning', 3: '' }
  return map[level] || 'info'
}
function statusText(status) {
  const map = { DRAFT: '草稿', PENDING: '待办', PROCESSING: '处置中', RELEASED: '已发布', HANDLED: '已处置', CLOSED: '已解除' }
  return map[status] ?? '-'
}
function statusTagType(status) {
  const map = { DRAFT: 'info', PENDING: 'warning', PROCESSING: 'warning', RELEASED: 'success', HANDLED: 'success', CLOSED: '' }
  return map[status] || 'info'
}

// ==================== 表格数据 ====================
const tableData = ref([])
const total = ref(0)
const loading = ref(false)
const pageNum = ref(1)
const pageSize = ref(10)

// ==================== 搜索筛选 ====================
const filters = reactive({
  equipmentName: '',
  warningLevel: '',
  status: ''
})

// ==================== 数据加载 ====================
async function loadData() {
  loading.value = true
  try {
    // 历史页由后端按历史状态（HANDLED/CLOSED）限定；不再写死
    // 旧的数字类型和 HANDLED 状态，避免过滤掉实际历史记录。
    const params = {
      historyOnly: true,
      equipmentType: 'drainage'
    }
    if (filters.equipmentName) params.equipmentName = filters.equipmentName
    if (filters.warningLevel) params.warningLevel = filters.warningLevel
    if (filters.status !== '' && filters.status !== null) params.status = filters.status
    const res = await getWarningHistoryPage(pageNum.value, pageSize.value, params)
    const pageData = res.code !== undefined ? res.data : res
    tableData.value = pageData.records || []
    total.value = pageData.total || 0
  } catch (error) {
    console.error('加载历史预警列表失败', error)
    ElMessage.error('加载历史预警列表失败')
  } finally {
    loading.value = false
  }
}

function handleSearch() {
  pageNum.value = 1
  loadData()
}

function handleClear() {
  filters.equipmentName = ''
  filters.warningLevel = ''
  filters.status = ''
  pageNum.value = 1
  loadData()
}

// ==================== 操作：删除 ====================
async function handleDelete(row) {
  try {
    await ElMessageBox.confirm('确认删除该预警？删除后不可恢复。', '提示', { type: 'warning' })
    await deleteWarning(row.id)
    ElMessage.success('删除成功')
    loadData()
  } catch (error) {
    if (error !== 'cancel') console.error('删除预警失败', error)
  }
}

// ==================== 查看详情弹窗 ====================
const dialogVisible = ref(false)
const currentDetail = ref(null)

function handleView(row) {
  currentDetail.value = { ...row }
  dialogVisible.value = true
}

onMounted(async () => {
  await loadEquipmentTypes()
  loadData()
})
</script>

<style scoped>
.lsyjgl-page {
  background: #fff;
  min-height: 100%;
  padding: 16px;
}

/* 搜索区 */
.search-panel {
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.search-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.form-item {
  display: flex;
  align-items: center;
}

.form-label {
  font-size: 14px;
  color: #606266;
  white-space: nowrap;
  margin-right: 4px;
}

/* 表格区 */
.table-panel {
  background: #fff;
  border-radius: 4px;
}

/* 所属类型标签 */
.type-tag {
  font-weight: 500;
  font-size: 13px;
}

.type-pipe {
  color: #409eff;
}

.type-point {
  color: #67c23a;
}

.type-well {
  color: #e6a23c;
}

/* 详情弹窗 */
.detail-body {
  display: flex;
  gap: 24px;
  padding: 8px 4px;
}

/* 左侧图片占位 */
.detail-img {
  flex-shrink: 0;
  width: 150px;
  height: 150px;
  background: #d9ecff;
  border: 2px solid #b3d8ff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-placeholder-icon {
  font-size: 64px;
  color: #409eff;
  opacity: 0.7;
}

/* 右侧详情信息 */
.detail-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-code {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  padding-bottom: 6px;
  border-bottom: 1px solid #f0f0f0;
}

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-row {
  display: flex;
  gap: 16px;
}

.info-row.single {
  display: block;
}

.info-item {
  flex: 1;
  display: flex;
  align-items: baseline;
  font-size: 14px;
}

.info-label {
  color: #909399;
  white-space: nowrap;
  min-width: 64px;
}

.info-value {
  color: #303133;
}

.desc-text {
  color: #606266;
  line-height: 1.6;
  word-break: break-all;
}
</style>