保存

src/view/equipment/gateway/index.vue

@@ -1,13 +1,38 @@
 <template>
-  <div>
-    <!-- <warning-bar title="注：右上角头像下拉可切换角色" /> -->
+  <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="用户名">
-          <el-input v-model="searchInfo.username" placeholder="设备ID" />
+        <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 label="关键词">
+          <el-input v-model="searchInfo.nickname" placeholder="请输入设备状态/关键词" />
         </el-form-item>
 
         <el-form-item>
@@ -18,18 +43,24 @@
     </div>
     <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button type="primary" icon="plus" @click="addUser">新增用户</el-button>
+        <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" />
+        <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="250">
+        <el-table-column align="left" label="经纬度" width="280">
           <template #default="scope">
-            <span>{{ scope.row.gatewayLong }}</span>
+            <span class="tech-coordinate">经 {{ scope.row.gatewayLong || '未知' }}</span>
             <el-divider direction="vertical" />
-            <span>{{ scope.row.gatewayLat }}</span>
+            <span class="tech-coordinate">纬 {{ scope.row.gatewayLat || '未知' }}</span>
           </template>
         </el-table-column>
       </el-table>
@@ -51,12 +82,7 @@
 <script setup>
   import * as serve from '@/api/equipment/gateway'
 
-  import { nextTick, ref, watch, onMounted } from 'vue'
-  import { ElMessage, ElMessageBox } from 'element-plus'
-  // import { id } from 'element-plus/es/locale'
-  import { useAppStore } from '@/pinia'
-
-  const appStore = useAppStore()
+  import { computed, ref, onMounted } from 'vue'
 
   const searchInfo = ref({
     username: '',
@@ -70,6 +96,9 @@
   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()
   })
@@ -113,9 +142,3 @@
     getTableData()
   }
 </script>
-
-<style lang="scss">
-  .header-img-box {
-    @apply w-52 h-52 border border-solid border-gray-300 rounded-xl flex justify-center items-center cursor-pointer;
-  }
-</style>