yuanling-manage/src/views/zhdpgl/yqzl/yqdl.vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import ElectricityDetail from '@/views/zhdpgl/yqzl/components/ElectricityDetail.vue'
import { Search, Eye, Cpu, Gauge, X } from 'lucide-vue-next'
import { ElButton, ElInput, ElDialog, ElCard } from 'element-plus'

interface ElectricityDevice {
  tableNumber: string
  negativeSensor: number
}

// Sample data - replace with your actual data source
const deviceList = ref<ElectricityDevice[]>([
  { tableNumber: '110125022003', negativeSensor: 20 },
  { tableNumber: '110125022004', negativeSensor: 15 },
  { tableNumber: '110125022005', negativeSensor: 30 },
  { tableNumber: '110125022006', negativeSensor: 25 },
  { tableNumber: '110125022007', negativeSensor: 18 }
])

const searchQuery = ref('')
const showDetail = ref(false)
const currentDevice = ref<ElectricityDevice>({
  tableNumber: '',
  negativeSensor: 0
})

// Filter devices based on search query
const filteredDevices = computed(() => {
  if (!searchQuery.value) return deviceList.value

  return deviceList.value.filter(device =>
    device.tableNumber.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})

// View device details
const viewDeviceDetail = (device: ElectricityDevice) => {
  currentDevice.value = device
  showDetail.value = true
}

// Close detail view
const closeDetail = () => {
  showDetail.value = false
}
</script>

<template>
  <div class="device-list-container p-4">
    <!-- Search and header -->
    <div class="flex justify-between items-center mb-4">
      <h2 class="text-xl font-bold">设备列表</h2>
      <div class="search-box flex items-center">
        <ElInput
          v-model="searchQuery"
          placeholder="搜索设备表号"
          class="w-64"
          :prefix-icon="Search"
        />
      </div>
    </div>

    <!-- Replace the Device list table section with this card grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-4">
      <el-card
        v-for="device in filteredDevices"
        :key="device.tableNumber"
        class="device-card hover:shadow-lg transition-shadow duration-300"
        shadow="hover"
      >
        <div class="flex flex-col">
          <div class="flex items-center mb-3">
            <div class="bg-blue-100 p-2 rounded-full mr-3">
              <cpu class="text-blue-500 h-5 w-5" />
            </div>
            <div>
              <h3 class="font-bold">设备表号</h3>
              <p class="text-gray-600">{{ device.tableNumber }}</p>
            </div>
          </div>

          <div class="flex items-center mb-4">
            <div class="bg-green-100 p-2 rounded-full mr-3">
              <gauge class="text-green-500 h-5 w-5" />
            </div>
            <div>
              <h3 class="font-bold">负感器值</h3>
              <p class="text-gray-600">{{ device.negativeSensor }}</p>
            </div>
          </div>

          <el-button
            type="primary"
            @click="viewDeviceDetail(device)"
            class="w-full flex items-center justify-center"
          >
            <Eye class="mr-1 h-4 w-4" />
            查看详情
          </el-button>
        </div>
      </el-card>
    </div>

    <!-- Modify the Full screen detail view section -->
    <ElDialog
      v-model="showDetail"
      fullscreen
      :show-close="false"
      @close="closeDetail"
      class="custom-dialog"
    >
      <div class="relative">
        <button
          @click="closeDetail"
          class="absolute top-2 left-4 bg-gray-200 hover:bg-gray-300 rounded-full p-2 transition-colors duration-200"
        >
          <x class="h-5 w-5" />
        </button>

        <div class="text-center pt-2 pb-4">
          <h3 class="text-lg font-bold">设备详情</h3>
        </div>
      </div>

      <electricity-detail
        :negativeSensor="currentDevice.negativeSensor"
        :tableNumber="currentDevice.tableNumber"
      />
    </ElDialog>
  </div>
</template>

<style scoped>
.device-list-container {
  height: 100%;
  background-color: #fff;
}

.custom-dialog :deep(.el-dialog__header) {
  padding: 0;
  margin: 0;
}

.device-card {
  transition: all 0.3s;
}

.device-card:hover {
  transform: translateY(-5px);
}
</style>