safePower/src/view/equipment/gateway/index.vue

<template>
  <div class="equipment-tech-page equipment-gateway-page">
    <section class="equipment-tech-header">
      <div>
        <div class="equipment-tech-kicker">
          <span class="tech-status-dot tech-status-dot--online" /> GATEWAY MATRIX
        </div>
        <h2 class="equipment-tech-title">网关通信矩阵</h2>
        <p class="equipment-tech-subtitle">网关标识 / 设备号 / MAC / 地理位置</p>
      </div>
      <div class="equipment-tech-header-line" />
    </section>

    <section class="equipment-tech-stat-grid">
      <div class="equipment-tech-stat-card">
        <div class="equipment-tech-stat-label">网关总数</div>
        <div class="equipment-tech-stat-value">{{ total }}<span class="equipment-tech-stat-unit">个</span></div>
      </div>
      <div class="equipment-tech-stat-card equipment-tech-stat-card--success">
        <div class="equipment-tech-stat-label">当前页网关</div>
        <div class="equipment-tech-stat-value">{{ currentPageCount }}<span class="equipment-tech-stat-unit">个</span></div>
      </div>
      <div class="equipment-tech-stat-card equipment-tech-stat-card--warning">
        <div class="equipment-tech-stat-label">坐标已接入</div>
        <div class="equipment-tech-stat-value">{{ coordinateCount }}<span class="equipment-tech-stat-unit">个</span></div>
      </div>
    </section>

    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="searchInfo">
        <el-form-item label="设备ID">
          <el-input v-model="searchInfo.username" placeholder="请输入设备ID" />
        </el-form-item>
        <el-form-item label="关键词">
          <el-input v-model="searchInfo.nickname" placeholder="请输入设备状态/关键词" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="search" @click="onSubmit"> 查询 </el-button>
          <el-button icon="refresh" @click="onReset"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <span class="tech-value-chip">
          <span class="tech-status-dot tech-status-dot--online" /> 网关通信档案
        </span>
      </div>
      <el-table :data="tableData">
        <el-table-column align="left" label="网关ID" prop="gatewayId" width="200">
          <template #default="{ row }">
            <span class="tech-value-chip">{{ row.gatewayId || '未设置' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="设备号" prop="imei" width="200" />
        <el-table-column align="left" label="网关mac" prop="gatewayMac" width="200" />
        <el-table-column align="left" label="网关地址" prop="gatewayAddress" />
        <el-table-column align="left" label="经纬度" width="280">
          <template #default="scope">
            <span class="tech-coordinate">经 {{ scope.row.gatewayLong || '未知' }}</span>
            <el-divider direction="vertical" />
            <span class="tech-coordinate">纬 {{ scope.row.gatewayLat || '未知' }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
  import * as serve from '@/api/equipment/gateway'

  import { computed, ref, onMounted } from 'vue'

  const searchInfo = ref({
    username: '',
    nickname: '',
    phone: '',
    email: ''
  })

  const page = ref(1)
  const total = ref(0)
  const pageSize = ref(10)
  const tableData = ref([])

  const currentPageCount = computed(() => tableData.value.length)
  const coordinateCount = computed(() => tableData.value.filter(item => item.gatewayLong && item.gatewayLat).length)

  onMounted(() => {
    getTableData()
  })

  // 分页
  const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
  }
  const handleCurrentChange = (val) => {
    page.value = val
    getTableData()
  }
  // 查询
  const getTableData = async () => {
    const table = await serve.getDeviceGatewayListByPage({
      page: page.value,
      pageSize: pageSize.value,
      ...searchInfo.value
    })
    if (table.code === 0) {
      tableData.value = table.data.list
      total.value = table.data.total
      page.value = table.data.page
      pageSize.value = table.data.pageSize
    }
  }

  const onSubmit = () => {
    page.value = 1
    getTableData()
  }

  const onReset = () => {
    searchInfo.value = {
      username: '',
      nickname: '',
      phone: '',
      email: ''
    }
    getTableData()
  }
</script>