设备管理-机场列表

src/api/demo/device.ts

@@ -0,0 +1,11 @@
+import { defHttp } from '@/utils/http/axios';
+enum Api {
+  GetDataList = '/api/Manage/GetDataList',
+}
+
+export function GetDataList(params) {
+  return defHttp.get({
+    url: Api.GetDataList,
+    params
+  });
+}

src/utils/mqtt.ts

@@ -13,7 +13,7 @@ const connection = {
   connectTimeout: 30 * 1000, // ms
   reconnectPeriod: 4000, // ms
   // clientId: 'mqttx_' + Math.random().toString(16).substring(2, 8),
-  clientId: 'mqtt_client_1581F8HGX254V00A0BUY',
+  clientId: `mqtt_${Math.random().toString(16).slice(2)}`,
   // auth
   username: 'sdhc',
   password: '',
@@ -43,11 +43,23 @@ const handleOnReConnect = () => {
   }
 };
 // 创建连接函数
-const createConnection = () => {
+const createConnection = (callback?) => {
   try {
     const { protocol, host, port, endpoint, ...options } = connection;
     const connectUrl = `${protocol}://${host}:${port}${endpoint}`;
     client = mqtt.connect(connectUrl, options);
+    client.on('connect', () => {
+      console.log('✅ 已连接');
+      if(callback){
+        callback()
+      }
+    });
+    client.on('close', () => {
+      console.log('❌ 连接已关闭');
+    });
+    client.on('error', (err) => {
+      console.error('❌ 出错了:', err);
+    });
     if (client.on) {
     }
   } catch (error) {
@@ -95,6 +107,14 @@ const clientPublish = (topic: string, querys: any) => {
     }
   });
 };
+// 获取连接状态
+const getConnectStatus = () => {
+  console.log('client',client)
+  if (!client.connected) {
+    return false
+  }
+  return true
+}
 // on 事件
 //   connect 连接
 //   reconnect 重新连接
@@ -162,4 +182,5 @@ export {
   getReizeClient,
   clientReizeSubscribe,
   clientReizePublish,
+  getConnectStatus,
 };

src/views/demo/workmanagement/device/Airport/index.vue

@@ -1,16 +1,29 @@
 <template>
-  <BasicTable class="w-4/4 xl:w-5/5" @register="registerTable">
+  <BasicTable @register="registerTable">
     <template #toolbar>
       <a-button type="primary" @click="openFeedbackDrawer">设备定损与反馈</a-button>
       <a-button type="primary" @click="openDeviceBindingModal">设备绑定码</a-button>
     </template>
     <template #bodyCell="{ column, record }">
+      <template v-if="column.key == 'workSpaceId'">
+        {{ props.projectList.find(item => item.value == record.workSpaceId)?.label }}
+      </template>
+      <template v-if="column.key == 'first_power_on'">
+        {{ record.first_power_on? dayjs(record.first_power_on).format('YYYY-MM-DD HH:mm:ss'): '' }}
+      </template>
+      <template v-if="column.key == 'compatible_status'">
+        {{ record.compatible_status? record.compatible_status == 0? "不需要一致性升级": "需要一致性升级": "" }}
+      </template>
+      <template v-if="column.key == 'flighttask_step_code'">
+        {{ workStatus(record)}}
+      </template>
       <template v-if="column.key === 'action'">
         <TableAction
           :actions="[
             {
               icon: 'ant-design:file-search-outlined',
               onClick: () => {
+                console.log('deviceInfoList',deviceInfoList)
               },
             },
             {
@@ -26,24 +39,70 @@
   <a-drawer class="feedback-drawer" v-model:open="feedbackDrawer" width="80%" :closable="false">
     <FeedbackDrawer />
   </a-drawer>
+  <a-drawer class="feedback-drawer" v-model:open="feedbackDrawer" width="45%" :closable="false">
+    <FeedbackDrawer />
+  </a-drawer>
   <a-modal v-model:open="deviceBindingModal" title="设备绑定码" @ok="handleOk">
     <DeviceBindModal />
   </a-modal>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref, defineProps, onMounted, watch, nextTick } from "vue"
 import { BasicTable, useTable, TableAction } from '@/components/Table';
-import { columns, dataSource, searchFormSchema } from './utils'
+import { columns, searchFormSchema } from './utils'
 import FeedbackDrawer from './FeedbackDrawer/index.vue'
 import DeviceBindModal from './DeviceBindModal/index.vue'
+import { GetDataList } from '@/api/demo/device'
+import { getClient, clientSubscribe } from '@/utils/mqtt'
+import dayjs from "dayjs";
+
+const props = defineProps(['projectList','connected'])
+watch(() => props.projectList, () => {
+  const targetField = searchFormSchema.find(item => item.field === 'project');
+  if (targetField) {
+    targetField.componentProps = {
+      ...(targetField.componentProps || {}),
+      options: props.projectList,
+    };
+  }
+})
+watch(() => props.connected, () => {
+  getClient().on('message', (topic, message) => {
+    const rs = JSON.parse(message)
+    console.log('rs',rs)
+    console.log('getDataSource',getDataSource())
+    let list = getDataSource()
+    let sn = rs.gateway
+    for(let i = 0; i < list.length; i++){
+      if(list[i].sn == sn){
+        list[i] = {...list[i],...rs.data}
+      }
+    }
+    setTableData(list)
+  });
+})
 
 const feedbackDrawer = ref(false)
 const deviceBindingModal = ref(false)
-const [registerTable, { reload, expandAll, getForm}] = useTable({
+const afterFetch = ref(false)
+const deviceControl = ref(false)
+watch(() => [afterFetch.value, props.connected], ([newAfterFetch, newConnected], [oldAfterFetch, oldConnected]) => {
+  console.log(newAfterFetch,newConnected)
+  console.log(getDataSource())
+  if(newConnected && newAfterFetch){
+    nextTick(() => {
+      console.log(getDataSource())
+      getDataSource().forEach(item => {
+        let topicUrl = `thing/product/${item.sn}/osd`;
+        clientSubscribe(topicUrl);
+      })
+    })
+  }
+})
+const [registerTable, { reload, expandAll, getForm,getDataSource,setTableData }] = useTable({
   title: '机场',
-  // api: (params) => LoadCaseInfoLists(type,params),
-  dataSource,
+  api: GetDataList,
   columns,
   rowKey: 'id',
   formConfig: {
@@ -57,16 +116,15 @@ const [registerTable, { reload, expandAll, getForm}] = useTable({
   useSearchForm: true,
   // 显示表格设置工具
   showTableSetting: true,
-  bordered: true,
+  bordered: false,
   beforeFetch(data) {
-    let params = {...data}
-    if(!params.nowStatus){
-      params.nowStatus = '复提待审核'
-    }
-    return params
+    return data
   },
   afterFetch(data) {
-    console.log('afterFetch', data);
+    afterFetch.value = true
+    return data.map(item => {
+      return {...item, children: item.uavList}
+    })
   },
   actionColumn: {
     width: 100,
@@ -83,6 +141,30 @@ const openFeedbackDrawer = () => {
 const openDeviceBindingModal = () => {
   deviceBindingModal.value = true
 }
+const workStatus = (record) => {
+  if(record.flighttask_step_code){
+    switch(record.flighttask_step_code){
+      case 0:
+        return '作业准备中'
+      case 1:
+        return '飞行作业中'
+      case 2:
+        return '作业后状态恢复'
+      case 3:
+        return '自定义飞行区更新中'
+      case 4:
+        return '地形障碍物更新中'
+      case 5:
+        return '任务空闲'
+      case 255:
+        return '飞行器异常'
+      case 256:
+        return '未知状态'
+    }
+  }else{
+    return ''
+  }
+}
 </script>
 
 <style lang="scss" scoped>

src/views/demo/workmanagement/device/Airport/utils.ts

@@ -2,7 +2,7 @@ import { BasicColumn, FormSchema } from '@/components/Table';
 export const columns = [
   {
     title: '设备型号',
-    dataIndex: 'model',
+    dataIndex: 'typeId',
   },
   {
     title: '设备SN',
@@ -18,7 +18,7 @@ export const columns = [
   },
   {
     title: '固件升级',
-    dataIndex: 'upgrade',
+    dataIndex: 'compatible_status',
   },
   {
     title: '飞行安全数据库',
@@ -26,11 +26,11 @@ export const columns = [
   },
   {
     title: '工作状态',
-    dataIndex: 'status',
+    dataIndex: 'flighttask_step_code',
   },
   {
     title: '所属项目',
-    dataIndex: 'project',
+    dataIndex: 'workSpaceId',
   },
   {
     title: '加入组织时间',
@@ -38,26 +38,10 @@ export const columns = [
   },
   {
     title: '在线时间',
-    dataIndex: 'online_time',
+    dataIndex: 'first_power_on',
   },
 ];
-export const dataSource = [
-  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
-  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
-  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
-  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
-  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
-  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
-  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
-  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
-  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
-  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
-  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
-  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
-  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
-  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
-  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
-]
+
 export const searchFormSchema: FormSchema[] = [
   {
     field: 'upgrade_status',

src/views/demo/workmanagement/device/index.vue

@@ -2,20 +2,51 @@
   <div class="device-page">
     <a-tabs v-model:activeKey="activeKey" class="device-tabs">
       <a-tab-pane key="airport" tab="机场">
-        <Airport />
+        <Airport :connected="connected" :projectList="projectList"/>
       </a-tab-pane>
       <a-tab-pane key="aerocraft" tab="飞行器">
-        <Aerocraft />
+        <Aerocraft :projectList="projectList"/>
       </a-tab-pane>
     </a-tabs>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref, onMounted, onBeforeUnmount } from "vue"
 import Airport from './Airport/index.vue'
 import Aerocraft from './Aerocraft/index.vue'
+import { GetWorkspaceList } from '@/api/demo/projecthome'
+import { getConnectStatus,createConnection,destroyConnection } from '@/utils/mqtt'
+
+onMounted(() => {
+  if(!getConnectStatus()){
+    console.log("需要重连")
+    createConnection(changeConnect)
+    connectMQTT.value = true
+  }else{
+    changeConnect()
+  }
+  GetWorkspaceList().then(res => {
+    projectList.value = res.map(item => {
+      return {
+        label: item.WorkspaceName,
+        value: item.Id,
+      }
+    })
+  })
+})
+onBeforeUnmount(() => {
+  if(connectMQTT.value){
+    destroyConnection()
+  }
+})
+const changeConnect = () => {
+  connected.value = true
+}
 const activeKey = ref('airport')
+const projectList = ref([])
+const connectMQTT = ref(false)
+const connected = ref(false)
 
 </script>