加载地图列表数据

.env.development

@@ -6,6 +6,7 @@ ENV = 'development'
 
 # 系统/开发环境
 VUE_APP_BASE_API = '/dev-api'
+VUE_APP_PNS_API = '/pns'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

package.json

@@ -48,6 +48,7 @@
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "mqtt": "^4.2.1",
     "nprogress": "0.2.0",
     "ol": "^6.15.1",
     "quill": "2.0.2",

src/api/map/index.js

@@ -0,0 +1,92 @@
+import request from '@/utils/request'
+
+// 获取地图列表
+export function getMapList(params) {
+  return request({
+    url: '/v1/map/list',
+    baseURL: '/pns',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前地图
+export function getCurrentMap(params) {
+  return request({
+    url: '/v1/map/using',
+    method: 'get',
+    params
+  })
+}
+
+// 获取地图缩略图
+export function getMapThumbnail(params) {
+  return request({
+    url: `/v1/map/thumbnail?map=${params}`,
+    baseURL: '/pns',
+    method: 'get',
+    responseType: 'blob'
+  })
+}
+
+// 地图重命名
+export function renameMap(data) {
+  return request({
+    url: '/v1/map/rename',
+    method: 'post',
+    data
+  })
+}
+
+// 删除地图工程
+export function deleteMap(data) {
+  return request({
+    url: '/v1/map/delete',
+    method: 'delete',
+    data
+  })
+}
+
+// 地图工程下载前压缩
+export function compressMapExport(data) {
+  return request({
+    url: '/v1/map/export/compress',
+    method: 'post',
+    data
+  })
+}
+
+// 下载地图工程压缩包
+export function downloadMapExport(params) {
+  return request({
+    url: '/v1/map/export',
+    method: 'get',
+    params
+  })
+}
+
+// 导入地图工程
+export function importMap(data) {
+  return request({
+    url: '/v1/map/import',
+    method: 'post',
+    data
+  })
+}
+
+// 地图工程组件列表
+export function getMapComponents(params) {
+  return request({
+    url: '/v1/map/components',
+    method: 'get',
+    params
+  })
+}
+
+// 地图工程任意文件获取
+export function getMapFile(mapName, folderName, fileName) {
+  return request({
+    url: `/v1/map/file/${mapName}/${folderName}/${fileName}`,
+    method: 'get'
+  })
+}

src/views/map/maplist/index.vue

@@ -185,7 +185,8 @@
                         <el-table-column prop="mapName" label="地图名称" min-width="260" show-overflow-tooltip>
           <template slot-scope="scope">
                 <div class="table-name">
-                  {{ scope.row.name }}
+                  <!-- {{ scope.row.name }} -->
+                  {{ scope.row.map }}
                 </div>
           </template>
         </el-table-column>
@@ -202,12 +203,12 @@
             <el-table-column label="状态" width="120" align="center">
           <template slot-scope="scope">
                 <el-tag 
-                  :type="getStatusConfig(scope.row.status).type" 
+                  :type="getStatusConfig(scope.row.state).type" 
                   size="mini" 
                   effect="plain"
                 >
-                  <i :class="getStatusConfig(scope.row.status).icon"></i>
-                  {{ getStatusConfig(scope.row.status).text }}
+                  <i :class="getStatusConfig(scope.row.state).icon"></i>
+                  {{ getStatusConfig(scope.row.state).text }}
                 </el-tag>
           </template>
         </el-table-column>
@@ -433,7 +434,8 @@ export default {
   
   data() {
     return {
-       topics: ["/robot4inspection/a477be75f66fe3cb/task/target/action/goto/reply","/robot4inspection/a477be75f66fe3cb/task/target/event/arrive"], // 初始订阅的 topic
+      //  topics: ["/robot4inspection/a477be75f66fe3cb/task/target/action/goto/reply","/robot4inspection/a477be75f66fe3cb/task/target/event/arrive"], // 初始订阅的 topic
+      topics:[],
       // 常量
       MAP_FILE_BASE,
       
@@ -450,7 +452,7 @@ export default {
       pageSize: 12,
 
       // Mock 数据
-      mockMapList: [
+   /*    mockMapList: [
         {
           id: 1,
           code: 'SH001',
@@ -555,7 +557,7 @@ export default {
           remark: '多功能会议中心，包含大型会议厅和小型讨论室',
           updatedAt: '2024-01-07T10:05:00Z'
         }
-      ],
+      ], */
       
       // 搜索和筛选
       searchKeyword: '',
@@ -606,13 +608,13 @@ export default {
     // 原始数据：兼容不同变量名
     rawList(){
       // 按出现频率降序尝试
-      return pickArray(this.tableData, this.mapList, this.list, this.dataList, this.maps)
+      return pickArray(this.mapList)
     },
     
     // 供表格/卡片使用的数据（先不做筛选，只做分页裁切；如果你已有筛选，请把你现有的筛选结果放到最前面）
     displayedList(){
       // 如果已有筛选后的数据，优先使用
-      if (this.searchKeyword.trim() || this.statusFilter !== 'all') {
+      /* if (this.searchKeyword.trim() || this.statusFilter !== 'all') {
         // 使用现有的筛选逻辑
         let filteredData = [...this.mockMapList]
         
@@ -664,9 +666,11 @@ export default {
         const end = start + this.pageSize
         return filteredData.slice(start, end)
       }
-      
+       */
       // 否则使用通用分页逻辑
       const src = this.rawList || []
+      console.log('src', src);
+      
       const page = this.pagination?.page || this.pageNum || this.currentPage || 1
       const size = this.pagination?.pageSize || this.pageSize || 10
       const start = (page-1)*size
@@ -674,7 +678,7 @@ export default {
     },
     
     totalCount(){
-      if (this.searchKeyword.trim() || this.statusFilter !== 'all') {
+/*       if (this.searchKeyword.trim() || this.statusFilter !== 'all') {
         // 使用现有的筛选逻辑计算总数
         let filteredData = [...this.mockMapList]
         
@@ -693,7 +697,7 @@ export default {
         }
         
         return filteredData.length
-      }
+      } */
       
       const src = this.rawList || []
       return src.length
@@ -761,15 +765,10 @@ export default {
 
       publishMsg() {
         this.$refs.mqtt.publish("/robot4inspection/508b02dc5bcdca22/task/target/action/goto", {
-    "timestamp" : 12345678,
-    "args": [
-        {
-            "roadmap": "demo",
-            "nid": [10]
-        }
-    ]
-});
-      },
+        "timestamp" : 12345678,
+        "args": [{"roadmap": "demo","nid": [10]}]
+      });
+    },
 
       addTopic() {
         if (!this.topics.includes("topic3")) this.topics.push("topic3");
@@ -800,16 +799,29 @@ export default {
         const response = await mapApi.getMapList()
         console.log('Fetched map list:', response);
         
-        if (response.code === 200) {
-          this.mapList = this.processMapList(response.data.list)
-          this.total = response.data.total
+        if (response) {
+          // this.mapList = this.processMapList(response)
+          const { maps = [], states = [], total = 0 } = response || {}
+  
+          // 合并成对象数组 [{ map: 'demo', state: 'available' }]
+          this.mapList = maps.map((map, index) => ({
+            map,
+            state: states[index] || null
+          }))
+          const test = await  mapApi.getMapThumbnail(this.mapList[0].map)
+          console.log('Processed map list:', test);
+          const url = URL.createObjectURL(test)
+           
+          this.$set(this.mapList[0], 'thumbUrl', url) 
+          
+          
         }
        
         
         // 使用 Mock 数据 - 确保 mapList 被设置
-        this.mapList = [...this.mockMapList]
+        // this.mapList = [...this.mockMapList]
         
-        let filteredData = [...this.mockMapList]
+        let filteredData = [...this.mapList]
         
         // 搜索过滤
         if (this.searchKeyword.trim()) {
@@ -1211,9 +1223,10 @@ export default {
     // 获取状态配置
     getStatusConfig(status) {
       const configs = {
-        ok: { type: 'success', icon: 'el-icon-check', text: '正常' },
-        down: { type: 'danger', icon: 'el-icon-close', text: '不可用' },
-        scanning: { type: 'warning', icon: 'el-icon-loading', text: '扫描中' }
+        available: { type: 'success', icon: 'el-icon-check', text: '正常' },
+        unavailable: { type: 'danger', icon: 'el-icon-close', text: '不可用' },
+        building : { type: 'warning', icon: 'el-icon-loading', text: '正在建图' },
+        recording  : { type: 'warning', icon: 'el-icon-loading', text: '正在录制' }
       }
       return configs[status] || configs.ok
     },

vue.config.js

@@ -1,6 +1,6 @@
 'use strict'
 const path = require('path')
-
+const { defineConfig } = require('@vue/cli-service')
 function resolve(dir) {
   return path.join(__dirname, dir)
 }
@@ -41,6 +41,11 @@ module.exports = {
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''
         }
+      },
+      [process.env.VUE_APP_PNS_API]: {
+        target: `http://8.148.78.124:10001`,
+        changeOrigin: true,
+         pathRewrite: { '^/pns': '' }
       }
     },
     disableHostCheck: true