city-life-line/src/views/subSystem/manholeCover/mRealTimemonit/mRealApicture.vue

<!--窨井盖监测采集数据-->
<template>
  <div class="monitor-page">
    <!-- 查询条件 -->
    <el-card shadow="never" class="alarm-filter-card">
      <el-form :model="query" inline class="alarm-filters" @submit.prevent="handleSearch">
        <el-form-item label="设备编码">
          <el-input v-model="query.imeiCardNumber" placeholder="请输入设备编码" clearable style="width: 220px" @keyup.enter="handleSearch" />
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input v-model="query.deviceName" placeholder="请输入设备名称" clearable style="width: 220px" @keyup.enter="handleSearch" />
        </el-form-item>
        <el-form-item label="采集时间">
          <el-date-picker
            v-model="query.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            style="width: 260px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <section class="alarm-table-panel">
      <div class="alarm-toolbar">
        <h3>井盖监测采集数据</h3>
      </div>
      <el-table v-loading="loading" :data="list" border stripe size="small" :header-cell-style="{ background: '#f5f7fa', color: '#606266' }">
        <el-table-column prop="imeiCardNumber" label="设备编码" min-width="160" show-overflow-tooltip />
        <el-table-column prop="equipmentName" label="设备名称" min-width="160" show-overflow-tooltip />
        <el-table-column prop="createTime" label="采集时间" min-width="170" />
        <el-table-column label="倾斜角度（°）" min-width="110" align="center">
          <template #default="{ row }">{{ row.tiltAngle || '—' }}</template>
        </el-table-column>
        <el-table-column label="水浸报警状态" min-width="120" align="center">
          <template #default="{ row }">
            <el-tag :type="row.waterInfiltrationAlarmStatus === '1' ? 'danger' : 'success'" size="small">
              {{ row.waterInfiltrationAlarmStatus === '1' ? '报警' : '正常' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="水位报警状态" min-width="120" align="center">
          <template #default="{ row }">
            <el-tag :type="row.waterLevelAlarmStatus === '1' ? 'danger' : 'success'" size="small">
              {{ row.waterLevelAlarmStatus === '1' ? '报警' : '正常' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="温度（℃）" min-width="110" align="center">
          <template #default="{ row }">{{ row.temperatureValue || '—' }}</template>
        </el-table-column>
        <el-table-column label="电池电量（%）" min-width="120" align="center">
          <template #default="{ row }">{{ row.batteryLevel || '—' }}</template>
        </el-table-column>
        <template #empty><el-empty description="暂无采集数据" /></template>
      </el-table>

      <pagination
        v-show="total > 0"
        v-model:page="query.pageNum"
        v-model:limit="query.pageSize"
        :total="total"
        @pagination="loadList"
      />
    </section>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { getManholeDataPage } from '@/api/pipeNetwork/basic'

const loading = ref(false)
const list = ref([])
const total = ref(0)
const query = reactive({ imeiCardNumber: '', deviceName: '', dateRange: [], pageNum: 1, pageSize: 10 })

function buildParams() {
  const p = { pageNum: query.pageNum, pageSize: query.pageSize }
  if (query.imeiCardNumber) p.imeiCardNumber = query.imeiCardNumber
  if (query.deviceName) p.deviceName = query.deviceName
  if (query.dateRange && query.dateRange.length === 2) {
    p.startTime = query.dateRange[0] + ' 00:00:00'
    p.endTime = query.dateRange[1] + ' 23:59:59'
  }
  return p
}

async function loadList() {
  loading.value = true
  try {
    const res = await getManholeDataPage(buildParams())
    const page = res.data || {}
    list.value = page.records || []
    total.value = page.total || 0
  } catch (e) {
    list.value = []
    total.value = 0
    ElMessage.error('采集数据加载失败: ' + (e?.message || e?.msg || '未知错误'))
  } finally {
    loading.value = false
  }
}

function handleSearch() {
  query.pageNum = 1
  loadList()
}

function handleReset() {
  query.imeiCardNumber = ''
  query.deviceName = ''
  query.dateRange = []
  query.pageNum = 1
  loadList()
}

onMounted(loadList)
</script>

<style scoped>
.monitor-page {
  padding: 20px;
  background: #f0f2f6;
  min-height: 100vh;
}
.alarm-filter-card {
  margin-bottom: 16px;
}
.alarm-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.alarm-filters .el-form-item {
  margin-bottom: 0;
}
.alarm-table-panel {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
}
.alarm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.alarm-toolbar h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
</style>