Industrial-image-management-system---web/src/views/project-operation-platform/data-processing/clearance-detection/index.vue

<template>
  <GiPageLayout>
    <div class="clearance-detection-container">
      <!-- 页面标题 -->
      <div class="page-header">
        <h2 class="page-title">净空距离检测</h2>
      </div>

      <!-- 查询表单 -->
      <a-card class="search-card" :bordered="false">
        <a-form :model="searchForm" layout="inline">
          <a-form-item label="选择检测日期">
            <a-date-picker 
              v-model="searchForm.detectionDate" 
              style="width: 200px"
              format="YYYY-MM-DD"
              :placeholder="'选择检测日期'"
            />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleSearch">
              <template #icon><icon-search /></template>
              查询
            </a-button>
          </a-form-item>
          <a-form-item>
            <a-button @click="handleExport">
              <template #icon><icon-download /></template>
              导出数据
            </a-button>
          </a-form-item>
        </a-form>
      </a-card>

      <!-- 数据表格 -->
      <a-card class="table-card" :bordered="false">
        <a-table
          :columns="columns"
          :data="tableData"
          :loading="loading"
          :pagination="pagination"
          @page-change="handlePageChange"
          @page-size-change="handlePageSizeChange"
        >
          <!-- 状态列 -->
          <template #status="{ record }">
            <a-tag :color="getStatusColor(record.status)">
              {{ getStatusText(record.status) }}
            </a-tag>
          </template>
          
          <!-- 操作列 -->
          <template #action="{ record }">
            <a-link @click="handleViewDetail(record)">详情</a-link>
          </template>
        </a-table>
      </a-card>

      <!-- 详情模态框 -->
      <a-modal
        v-model:visible="detailModalVisible"
        title="净空距离检测详情"
        width="800px"
        @ok="detailModalVisible = false"
        @cancel="detailModalVisible = false"
      >
        <div v-if="selectedRecord" class="detail-content">
          <a-descriptions :column="2" bordered>
            <a-descriptions-item label="检测时间">
              {{ selectedRecord.detectionTime }}
            </a-descriptions-item>
            <a-descriptions-item label="机组编号">
              {{ selectedRecord.unitNumber }}
            </a-descriptions-item>
            <a-descriptions-item label="净空距离">
              {{ selectedRecord.clearanceDistance }}m
            </a-descriptions-item>
            <a-descriptions-item label="状态">
              <a-tag :color="getStatusColor(selectedRecord.status)">
                {{ getStatusText(selectedRecord.status) }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="安全阈值">
              {{ selectedRecord.safetyThreshold }}m
            </a-descriptions-item>
            <a-descriptions-item label="检测设备">
              {{ selectedRecord.detectionDevice }}
            </a-descriptions-item>
            <a-descriptions-item label="风速">
              {{ selectedRecord.windSpeed }}m/s
            </a-descriptions-item>
            <a-descriptions-item label="温度">
              {{ selectedRecord.temperature }}°C
            </a-descriptions-item>
            <a-descriptions-item label="备注" :span="2">
              {{ selectedRecord.remark || '-' }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </a-modal>
    </div>
  </GiPageLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import { IconSearch, IconDownload } from '@arco-design/web-vue/es/icon'
import type { TableColumnData } from '@arco-design/web-vue'

defineOptions({ name: 'ClearanceDetection' })

// 搜索表单
const searchForm = reactive({
  detectionDate: ''
})

// 表格数据
const tableData = ref([
  {
    id: 1,
    detectionTime: '2023-11-05 08:00',
    unitNumber: 'A-001',
    clearanceDistance: 12.5,
    status: 'normal',
    safetyThreshold: 10.0,
    detectionDevice: 'LiDAR-001',
    windSpeed: 8.2,
    temperature: 15.3,
    remark: '正常范围内'
  },
  {
    id: 2,
    detectionTime: '2023-11-05 12:00',
    unitNumber: 'A-001',
    clearanceDistance: 11.8,
    status: 'normal',
    safetyThreshold: 10.0,
    detectionDevice: 'LiDAR-001',
    windSpeed: 7.9,
    temperature: 18.1,
    remark: '正常范围内'
  },
  {
    id: 3,
    detectionTime: '2023-11-05 16:00',
    unitNumber: 'A-001',
    clearanceDistance: 9.2,
    status: 'warning',
    safetyThreshold: 10.0,
    detectionDevice: 'LiDAR-001',
    windSpeed: 12.5,
    temperature: 16.8,
    remark: '接近安全阈值，需要关注'
  }
])

// 表格配置
const columns: TableColumnData[] = [
  {
    title: '时间',
    dataIndex: 'detectionTime',
    width: 150
  },
  {
    title: '机组编号',
    dataIndex: 'unitNumber',
    width: 100
  },
  {
    title: '净空距离(m)',
    dataIndex: 'clearanceDistance',
    width: 120
  },
  {
    title: '状态',
    dataIndex: 'status',
    slotName: 'status',
    width: 100
  },
  {
    title: '操作',
    slotName: 'action',
    width: 100,
    fixed: 'right'
  }
]

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 100,
  showTotal: true,
  showPageSize: true
})

// 加载状态
const loading = ref(false)

// 详情模态框
const detailModalVisible = ref(false)
const selectedRecord = ref<any>(null)

// 状态颜色映射
const getStatusColor = (status: string) => {
  const colorMap = {
    normal: 'green',
    warning: 'orange',
    error: 'red'
  }
  return colorMap[status] || 'gray'
}

// 状态文本映射
const getStatusText = (status: string) => {
  const textMap = {
    normal: '正常',
    warning: '警告',
    error: '异常'
  }
  return textMap[status] || '未知'
}

// 查询处理
const handleSearch = () => {
  loading.value = true
  
  // 模拟API调用
  setTimeout(() => {
    Message.success('查询成功')
    loading.value = false
  }, 1000)
}

// 导出数据
const handleExport = () => {
  Message.success('导出成功')
}

// 分页变化
const handlePageChange = (page: number) => {
  pagination.current = page
  handleSearch()
}

const handlePageSizeChange = (pageSize: number) => {
  pagination.pageSize = pageSize
  pagination.current = 1
  handleSearch()
}

// 查看详情
const handleViewDetail = (record: any) => {
  selectedRecord.value = record
  detailModalVisible.value = true
}

onMounted(() => {
  handleSearch()
})
</script>

<style scoped lang="scss">
.clearance-detection-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: #1d2129;
}

.search-card {
  margin-bottom: 20px;
}

.table-card {
  .arco-table {
    .arco-table-th {
      background-color: #f7f8fa;
      font-weight: 600;
    }
  }
}

.detail-content {
  .arco-descriptions {
    margin-top: 16px;
  }
}
</style>