pm/pm_ui/src/views/patrol/index.vue

<template>
  <div class="app-container">
    <el-tabs v-model="activeTab">
      <!-- 巡更点管理标签页 -->
      <el-tab-pane label="巡更点管理" name="points">
        <el-form :model="pointQuery" ref="pointQueryRef" :inline="true" label-width="85px">
          <el-form-item label="巡更点编号" label-width="85px" prop="pointCode">
            <el-input v-model="pointQuery.pointCode" placeholder="请输入巡更点编号" clearable />
          </el-form-item>
          <el-form-item label="巡更点名称" prop="pointName">
            <el-input v-model="pointQuery.pointName" placeholder="请输入巡更点名称" clearable />
          </el-form-item>
          <el-form-item label="楼栋" prop="buildingId">
            <el-select v-model="pointQuery.buildingId" placeholder="请选择楼栋" clearable>
              <el-option v-for="building in buildingList" :key="building.id" :label="building.name" :value="building.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="楼层" prop="floorId">
            <el-select v-model="pointQuery.floorId" placeholder="请选择楼层" clearable>
              <el-option v-for="floor in floorList" :key="floor.id" :label="floor.name" :value="floor.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="巡更点类型" prop="pointType">
            <el-select v-model="pointQuery.pointType" placeholder="请选择类型" clearable>
              <el-option label="普通" value="normal" />
              <el-option label="重点" value="key" />
              <el-option label="紧急" value="emergency" />
            </el-select>
          </el-form-item>
          <el-form-item label="是否启用" prop="isActive">
            <el-select v-model="pointQuery.isActive" placeholder="请选择" clearable>
              <el-option label="启用" :value="1" />
              <el-option label="禁用" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="getPointList">搜索</el-button>
            <el-button icon="Refresh" @click="resetPointQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAddPoint" v-hasPermi="['patrol:point:add']">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdatePoint" v-hasPermi="['patrol:point:edit']">修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDeletePoint" v-hasPermi="['patrol:point:remove']">删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="info" plain icon="View" @click="handleView3D">三维展示</el-button>
          </el-col>
        </el-row>

        <el-table v-loading="pointLoading" :data="pointList" stripe border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="巡更点编号" prop="pointCode"  />
          <el-table-column label="巡更点名称" prop="pointName"  />
          <el-table-column label="楼栋" prop="buildingName"  />
          <el-table-column label="楼层" prop="floorName"  />
          <el-table-column label="类型" prop="pointType" >
            <template #default="scope">
              <el-tag :type="pointTypeTag(scope.row.pointType)">
                {{ pointTypeText(scope.row.pointType) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="巡更频率" prop="patrolFrequency" >
            <template #default="scope">
              {{ frequencyText(scope.row.patrolFrequency) }}
            </template>
          </el-table-column>
          <el-table-column label="关联摄像头" prop="cameraIds" width="150" show-overflow-tooltip />
          <el-table-column label="状态" prop="isActive" width="80">
            <template #default="scope">
              <el-switch v-model="scope.row.isActive" :active-value="1" :inactive-value="0" @change="(value) => handleStatusChange(scope.row, value)" />
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime" width="160" />
          <el-table-column label="操作" fixed="right" width="200">
            <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="handleUpdatePoint(scope.row)">修改</el-button>
              <el-button link type="primary" icon="View" @click="handleViewPoint(scope.row)">详情</el-button>
              <el-button link type="danger" icon="Delete" @click="handleDeletePoint(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="pointTotal > 0" :total="pointTotal" v-model:page="pointQuery.pageNum" v-model:limit="pointQuery.pageSize" @pagination="getPointList" />
      </el-tab-pane>

      <!-- 巡更记录标签页 -->
      <el-tab-pane label="巡更记录" name="records">
        <el-form :model="recordQuery" ref="recordQueryRef" :inline="true" label-width="80px">
          <el-form-item label="巡更点" prop="pointCode">
            <el-select v-model="recordQuery.pointCode" placeholder="请选择巡更点" clearable>
              <el-option v-for="point in allPointList" :key="point.point_code" :label="point.point_name" :value="point.point_code" />
            </el-select>
          </el-form-item>
          <el-form-item label="巡更人员" prop="patrolPersonName">
            <el-input v-model="recordQuery.patrolPersonName" placeholder="请输入巡更人员" clearable />
          </el-form-item>
          <el-form-item label="巡更路线" prop="patrolRouteId">
            <el-select v-model="recordQuery.patrolRouteId" placeholder="请选择路线" clearable>
              <el-option v-for="route in routeList" :key="route.id" :label="route.name" :value="route.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="巡更状态" prop="patrolStatus">
            <el-select v-model="recordQuery.patrolStatus" placeholder="请选择状态" clearable>
              <el-option label="正常" :value="1" />
              <el-option label="异常" :value="0" />
              <el-option label="超时" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围" prop="timeRange">
            <el-date-picker v-model="recordQuery.timeRange" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="getRecordList">搜索</el-button>
            <el-button icon="Refresh" @click="resetRecordQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExportRecord" v-hasPermi="['patrol:record:export']">导出</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="info" plain icon="Monitor" @click="handleRealTimeMonitor">实时监控</el-button>
          </el-col>
        </el-row>

        <el-table v-loading="recordLoading" :data="recordList" stripe border>
          <el-table-column label="记录ID" prop="recordId" width="150" />
          <el-table-column label="巡更点" prop="pointName" width="150" />
          <el-table-column label="巡更人员" prop="patrolPersonName" width="120" />
          <el-table-column label="巡更时间" prop="patrolTime" width="160" />
          <el-table-column label="巡更路线" prop="patrolRouteName" width="150" />
          <el-table-column label="状态" prop="patrolStatus" width="100">
            <template #default="scope">
              <el-tag :type="statusTag(scope.row.patrolStatus)">
                {{ statusText(scope.row.patrolStatus) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="GPS位置" width="150">
            <template #default="scope">
              <span v-if="scope.row.gps_longitude && scope.row.gps_latitude">
                {{ scope.row.gps_longitude }}, {{ scope.row.gps_latitude }}
              </span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="巡检仪" prop="deviceSn" width="150" />
          <el-table-column label="当日次数" prop="patrolCount" width="100" />
          <el-table-column label="异常信息" prop="exceptionInfo" width="200" show-overflow-tooltip />
          <el-table-column label="操作" fixed="right" width="150">
            <template #default="scope">
              <el-button link type="primary" icon="View" @click="handleViewRecord(scope.row)">详情</el-button>
              <el-button link type="primary" icon="Camera" @click="handleViewCamera(scope.row)" v-if="scope.row.pointCode">监控</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="recordTotal > 0" :total="recordTotal" v-model:page="recordQuery.pageNum" v-model:limit="recordQuery.pageSize" @pagination="getRecordList" />
      </el-tab-pane>

      <!-- 实时监控标签页 -->
      <el-tab-pane label="实时监控" name="monitor">
        <div class="monitor-container">
          <el-row :gutter="20">
            <el-col :span="16">
              <el-card class="monitor-map">
                <template #header>
                  <div class="card-header">
                    <span>巡更路线实时监控</span>
                    <el-button type="text" @click="refreshMonitor">刷新</el-button>
                  </div>
                </template>
                <div id="patrolMap" style="height: 500px;"></div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="monitor-info">
                <template #header>
                  <span>实时巡更信息</span>
                </template>
                <div class="monitor-list">
                  <el-scrollbar height="450px">
                    <div v-for="item in realtimeList" :key="item.id" class="monitor-item">
                      <div class="monitor-item-header">
                        <span class="monitor-person">{{ item.patrolPersonName }}</span>
                        <el-tag :type="statusTag(item.patrolStatus)" size="small">
                          {{ statusText(item.patrolStatus) }}
                        </el-tag>
                      </div>
                      <div class="monitor-item-info">
                        <p>巡更点：{{ item.pointName }}</p>
                        <p>时间：{{ item.patrolTime }}</p>
                        <p>设备：{{ item.deviceSn }}</p>
                      </div>
                    </div>
                  </el-scrollbar>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 巡更点新增/修改对话框 -->
    <el-dialog :title="pointTitle" v-model="pointOpen" width="600px" append-to-body>
      <el-form ref="pointRef" :model="pointForm" :rules="pointRules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="巡更点编号" prop="pointCode">
              <el-input v-model="pointForm.pointCode" placeholder="请输入巡更点编号" :disabled="pointForm.id != null" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="巡更点名称" prop="pointName">
              <el-input v-model="pointForm.pointName" placeholder="请输入巡更点名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="楼栋" prop="buildingId">
              <el-select v-model="pointForm.buildingId" placeholder="请选择楼栋" @change="handleBuildingChange" style="width: 100%">
                <el-option v-for="building in buildingList" :key="building.id" :label="building.name" :value="building.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="楼层" prop="floorId">
              <el-select v-model="pointForm.floorId" placeholder="请选择楼层" style="width: 100%">
                <el-option v-for="floor in floorList" :key="floor.id" :label="floor.name" :value="floor.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="巡更点类型" prop="pointType">
              <el-select v-model="pointForm.pointType" placeholder="请选择类型" style="width: 100%">
                <el-option label="普通" value="normal" />
                <el-option label="重点" value="key" />
                <el-option label="紧急" value="emergency" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="巡更频率" prop="patrolFrequency">
              <el-select v-model="pointForm.patrolFrequency" placeholder="请选择频率" style="width: 100%">
                <el-option label="每小时" value="hourly" />
                <el-option label="每日" value="daily" />
                <el-option label="每周" value="weekly" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="X坐标" prop="positionX">
              <el-input-number v-model="pointForm.positionX" :precision="6" :step="0.1" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="Y坐标" prop="positionY">
              <el-input-number v-model="pointForm.positionY" :precision="6" :step="0.1" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="Z坐标" prop="positionZ">
              <el-input-number v-model="pointForm.positionZ" :precision="6" :step="0.1" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="关联摄像头" prop="cameraIds">
              <el-select v-model="pointForm.cameraIds" multiple placeholder="请选择关联摄像头" style="width: 100%">
                <el-option v-for="camera in cameraList" :key="camera.id" :label="camera.name" :value="camera.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="pointForm.remark" type="textarea" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitPointForm">确 定</el-button>
          <el-button @click="cancelPoint">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 巡更记录详情对话框 -->
    <el-dialog title="巡更记录详情" v-model="recordDetailOpen" width="800px" append-to-body>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="记录ID">{{ recordDetail.recordId }}</el-descriptions-item>
        <el-descriptions-item label="巡更点">{{ recordDetail.pointName }}</el-descriptions-item>
        <el-descriptions-item label="巡更人员">{{ recordDetail.patrolPersonName }}</el-descriptions-item>
        <el-descriptions-item label="巡更时间">{{ recordDetail.patrolTime }}</el-descriptions-item>
        <el-descriptions-item label="巡更路线">{{ recordDetail.patrolRouteName }}</el-descriptions-item>
        <el-descriptions-item label="巡更状态">
          <el-tag :type="statusTag(recordDetail.patrolStatus)">
            {{ statusText(recordDetail.patrolStatus) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="GPS位置">
          {{ recordDetail.gps_longitude }}, {{ recordDetail.gpsLatitude }}
        </el-descriptions-item>
        <el-descriptions-item label="巡检仪">{{ recordDetail.deviceSn }}</el-descriptions-item>
        <el-descriptions-item label="当日次数">{{ recordDetail.patrolCount }}</el-descriptions-item>
        <el-descriptions-item label="异常信息" :span="2">{{ recordDetail.exceptionInfo || '-' }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ recordDetail.remark || '-' }}</el-descriptions-item>
      </el-descriptions>
      <div v-if="recordDetail.images && recordDetail.images.length > 0" class="image-preview">
        <h4>现场照片</h4>
        <el-image v-for="(img, index) in recordDetail.images" :key="index" :src="img" :preview-src-list="recordDetail.images" fit="cover" style="width: 150px; height: 150px; margin: 5px" />
      </div>
    </el-dialog>

    <!-- 摄像头监控对话框 -->
    <el-dialog title="摄像头监控" v-model="cameraOpen" width="900px" append-to-body>
      <div class="camera-container">
        <video ref="videoPlayer" controls autoplay style="width: 100%; max-height: 500px;"></video>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { listPatrolPoint, getPatrolPoint, addPatrolPoint, updatePatrolPoint, delPatrolPoint, changePointStatus } from '@/api/patrol/point'
import { listPatrolRecord, getPatrolRecord, exportPatrolRecord } from '@/api/patrol/record'
import { getRealtimePatrol } from '@/api/patrol/monitor'

const { proxy } = getCurrentInstance()
const activeTab = ref('points')

// 巡更点相关
const pointQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  pointCode: null,
  pointName: null,
  buildingId: null,
  floorId: null,
  pointType: null,
  isActive: null
})
const pointList = ref([])
const isIniting = ref(true)
const pointTotal = ref(0)
const pointLoading = ref(false)
const pointTitle = ref('')
const pointOpen = ref(false)
const pointForm = ref({})
const pointRules = {
  pointCode: [{ required: true, message: '巡更点编号不能为空', trigger: 'blur' }],
  pointName: [{ required: true, message: '巡更点名称不能为空', trigger: 'blur' }],
  buildingId: [{ required: true, message: '请选择楼栋', trigger: 'change' }],
  floorId: [{ required: true, message: '请选择楼层', trigger: 'change' }],
  pointType: [{ required: true, message: '请选择巡更点类型', trigger: 'change' }]
}

// 巡更记录相关
const recordQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  pointCode: null,
  patrolPersonName: null,
  patrolRouteId: null,
  patrolStatus: null,
  timeRange: []
})
const recordList = ref([])
const recordTotal = ref(0)
const recordLoading = ref(false)
const recordDetailOpen = ref(false)
const recordDetail = ref({})

// 实时监控相关
const realtimeList = ref([])
const monitorTimer = ref(null)

// 其他数据
const buildingList = ref([])
const floorList = ref([])
const allPointList = ref([])
const routeList = ref([])
const cameraList = ref([])
const cameraOpen = ref(false)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)

// 状态相关函数
const pointTypeTag = (type) => {
  const map = { normal: '', key: 'warning', emergency: 'danger' }
  return map[type] || ''
}

const pointTypeText = (type) => {
  const map = { normal: '普通', key: '重点', emergency: '紧急' }
  return map[type] || type
}

const frequencyText = (freq) => {
  const map = { hourly: '每小时', daily: '每日', weekly: '每周' }
  return map[freq] || freq
}

const statusTag = (status) => {
  const map = { 0: 'danger', 1: 'success', 2: 'warning' }
  return map[status] || 'info'
}

const statusText = (status) => {
  const map = { 0: '异常', 1: '正常', 2: '超时' }
  return map[status] || '未知'
}

// 查询巡更点列表
function getPointList() {
  pointLoading.value = true
  listPatrolPoint(pointQuery).then(response => {
    pointList.value = response.rows
    pointTotal.value = response.total
    pointLoading.value = false
   // 数据加载完成，结束初始化阶段
    // 延迟关闭初始化标志，确保 DOM 完全渲染完成
     // 延迟关闭初始化标志，确保 DOM 完全渲染完成
    setTimeout(() => {
      isIniting.value = false
    }, 100)
  })
}

// 查询巡更记录列表
function getRecordList() {
  recordLoading.value = true

  const params = { ...recordQuery }
  if (recordQuery.timeRange && recordQuery.timeRange.length === 2) {
    params.beginTime = recordQuery.timeRange[0]
    params.endTime = recordQuery.timeRange[1]
  }
  listPatrolRecord(params).then(response => {
    recordList.value = response.rows
    recordTotal.value = response.total
    recordLoading.value = false
  })
  
}

// 重置查询
function resetPointQuery() {
  proxy.resetForm('pointQueryRef')
  getPointList()
}

function resetRecordQuery() {
  proxy.resetForm('recordQueryRef')
  getRecordList()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id)
  single.value = selection.length !== 1
  multiple.value = !selection.length
}

// 状态修改
function handleStatusChange(row, value) {
  if (isIniting.value) return
  const text = row.isActive === 1 ? '启用' : '停用'
  proxy.$modal.confirm(`确认要${text}"${row.pointName}"巡更点吗？`).then(() => {
    return changePointStatus(row.id, row.isActive)
  }).then(() => {
    proxy.$modal.msgSuccess(`${text}成功`)
  }).catch(() => {
    row.isActive = row.isActive === 1 ? 0 : 1
  })
}

// 新增巡更点
function handleAddPoint() {
  resetPoint()
  pointOpen.value = true
  pointTitle.value = '添加巡更点'
}

// 修改巡更点
function handleUpdatePoint(row) {
  resetPoint()
  const pointId = row.id || ids.value[0]
  getPatrolPoint(pointId).then(response => {
    pointForm.value = response.data
    if (pointForm.value.cameraIds && typeof pointForm.value.cameraIds === 'string') {
      pointForm.value.cameraIds = pointForm.value.cameraIds.split(',')
    }
    pointOpen.value = true
    pointTitle.value = '修改巡更点'
  })
}

// 删除巡更点
function handleDeletePoint(row) {
  const pointIds = row.id || ids.value
  proxy.$modal.confirm(`是否确认删除巡更点编号为"${row.point_code || pointIds}"的数据项？`).then(() => {
    return delPatrolPoint(pointIds)
  }).then(() => {
    getPointList()
    proxy.$modal.msgSuccess('删除成功')
  })
}

// 查看巡更点详情
function handleViewPoint(row) {
  handleUpdatePoint(row)
}

// 提交巡更点表单
function submitPointForm() {
  proxy.$refs['pointRef'].validate(valid => {
    if (valid) {
      const submitData = { ...pointForm.value }
      if (submitData.cameraIds && Array.isArray(submitData.cameraIds)) {
        submitData.cameraIds = submitData.cameraIds.join(',')
      }
      if (submitData.id != null) {
        updatePatrolPoint(submitData).then(() => {
          proxy.$modal.msgSuccess('修改成功')
          pointOpen.value = false
          getPointList()
        })
      } else {
        addPatrolPoint(submitData).then(() => {
          proxy.$modal.msgSuccess('新增成功')
          pointOpen.value = false
          getPointList()
        })
      }
    }
  })
}

// 取消巡更点对话框
function cancelPoint() {
  pointOpen.value = false
  resetPoint()
}

// 重置巡更点表单
function resetPoint() {
  pointForm.value = {
    id: null,
    pointCode: null,
    pointName: null,
    buildingId: null,
    floorId: null,
    pointType: 'normal',
    patrolFrequency: 'daily',
    positionX: null,
    positionY: null,
    positionZ: null,
    cameraIds: [],
    isActive: 1,
    remark: null
  }
  proxy.resetForm('pointRef')
}

// 查看巡更记录详情
function handleViewRecord(row) {
  getPatrolRecord(row.id).then(response => {
    recordDetail.value = response.data
    if (recordDetail.value.images && typeof recordDetail.value.images === 'string') {
      recordDetail.value.images = JSON.parse(recordDetail.value.images)
    }
    recordDetailOpen.value = true
  })
}

// 导出巡更记录
function handleExportRecord() {
  proxy.$modal.confirm('确认导出巡更记录吗？').then(() => {
    const params = { ...recordQuery }
    if (recordQuery.timeRange && recordQuery.timeRange.length === 2) {
      params.beginTime = recordQuery.timeRange[0]
      params.endTime = recordQuery.timeRange[1]
    }
    exportPatrolRecord(params).then(response => {
      proxy.download(response.msg)
    })
  })
}

// 实时监控相关
function handleRealTimeMonitor() {
  activeTab.value = 'monitor'
  startRealtimeMonitor()
}

function startRealtimeMonitor() {
  getRealtimeData()
  if (monitorTimer.value) {
    clearInterval(monitorTimer.value)
  }
  monitorTimer.value = setInterval(() => {
    getRealtimeData()
  }, 5000) // 每5秒刷新一次
}

function getRealtimeData() {
  getRealtimePatrol().then(response => {
    realtimeList.value = response.data || []
    updateMapMarkers()
  })
}

function updateMapMarkers() {
  // 更新地图标记点，这里需要集成具体的地图组件
  console.log('更新地图标记点')
}

function refreshMonitor() {
  getRealtimeData()
  proxy.$modal.msgSuccess('刷新成功')
}

// 查看摄像头
function handleViewCamera(row) {
  // 这里需要调用摄像头接口获取视频流
  cameraOpen.value = true
  // 模拟加载视频流
  proxy.$nextTick(() => {
    if (proxy.$refs.videoPlayer) {
      // proxy.$refs.videoPlayer.src = getCameraStreamUrl(row.camera_ids)
    }
  })
}

// 3D展示
function handleView3D() {
  // 跳转到3D展示页面或打开3D展示对话框
  proxy.$router.push('/patrol/3d-view')
}

// 楼栋变化
function handleBuildingChange(val) {
  // 根据楼栋加载楼层数据
  loadFloorsByBuilding(val)
}

// 加载楼层数据
function loadFloorsByBuilding(buildingId) {
  // 调用接口加载楼层数据
  floorList.value = [
    { id: 'F1', name: '1楼' },
    { id: 'F2', name: '2楼' },
    { id: 'F3', name: '3楼' }
  ]
}

// 初始化数据
function initData() {
  // 模拟数据，实际项目中从接口获取
  buildingList.value = [
    { id: 'B1', name: 'A栋' },
    { id: 'B2', name: 'B栋' },
    { id: 'B3', name: 'C栋' }
  ]

  routeList.value = [
    { id: 'R1', name: '日常巡更路线' },
    { id: 'R2', name: '夜间巡更路线' },
    { id: 'R3', name: '应急巡更路线' }
  ]

  cameraList.value = [
    { id: 'C1', name: '1号摄像头' },
    { id: 'C2', name: '2号摄像头' },
    { id: 'C3', name: '3号摄像头' }
  ]

  // 加载所有巡更点
  listPatrolPoint({ pageSize: 999 }).then(response => {
    allPointList.value = response.rows
  })
}

onMounted(() => {
  initData()
  getPointList()
})

onUnmounted(() => {
  if (monitorTimer.value) {
    clearInterval(monitorTimer.value)
  }
})
</script>

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

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.monitor-list {
  padding: 10px;
}

.monitor-item {
  border-bottom: 1px solid #e6e6e6;
  padding: 10px 0;
}

.monitor-item:last-child {
  border-bottom: none;
}

.monitor-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.monitor-person {
  font-weight: bold;
  font-size: 14px;
}

.monitor-item-info p {
  margin: 3px 0;
  font-size: 12px;
  color: #666;
}

.image-preview {
  margin-top: 20px;
}

.image-preview h4 {
  margin-bottom: 10px;
}

.camera-container {
  text-align: center;
  background: #000;
  padding: 20px;
}
</style>