设备管理-飞行器-编辑删除及列表数据通过mqtt补足

src/api/demo/device.ts

@@ -3,6 +3,9 @@ enum Api {
   GetDataList = '/api/Manage/GetDataList',
   EditDronePort = '/api/Manage/EditDronePort',
   DeleteDronePort = '/api/Manage/DeleteDronePort',
+  GetUavPageList = '/api/Manage/GetUavPageList',
+  EditUav = '/api/Manage/EditUav',
+  DeleteUav = '/api/Manage/DeleteUav',
 }
 
 export function GetDataList(params) {
@@ -11,14 +14,31 @@ export function GetDataList(params) {
     params
   });
 }
+export function GetUavPageList(params) {
+  return defHttp.get({
+    url: Api.GetUavPageList,
+    params
+  });
+}
 export function EditDronePort(params) {
   return defHttp.post({
     url: Api.EditDronePort,
     data:params
   });
 }
+export function EditUav(params) {
+  return defHttp.post({
+    url: Api.EditUav,
+    data:params
+  });
+}
 export function DeleteDronePort(id: string) {
   return defHttp.post({
     url: `${Api.DeleteDronePort}?id=${id}`,
   });
+}
+export function DeleteUav(id: string) {
+  return defHttp.post({
+    url: `${Api.DeleteUav}?id=${id}`,
+  });
 }

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

@@ -0,0 +1,43 @@
+<template>
+  <div style="padding: 20px;">
+    <div style="margin-bottom: 8px;">设备名称</div>
+    <a-input v-model:value="props.editDeviceDate.name" style="margin-bottom: 10px;" placeholder="请输入设备名称" />
+    <div style="margin-bottom: 8px;">所属项目</div>
+    <a-select
+      v-model:value="props.editDeviceDate.workSpaceId"
+      style="width:100%;margin-bottom: 20px;"
+      :options="props.projectList"
+    ></a-select>
+    <div style="display: flex;justify-content: end;">
+      <a-button style="margin-right: 10px;" @click="emits('changeEditDeviceModal',false)">取消</a-button>
+      <a-button type="primary" @click="submit">确定</a-button>
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from "vue"
+import { EditUav } from '@/api/demo/device'
+import { message } from "ant-design-vue"
+const props = defineProps(['editDeviceDate', 'projectList'])
+const emits = defineEmits(['changeEditDeviceModal','reload'])
+
+const submit = () => {
+  console.log('123',props.editDeviceDate)
+  let params = {}
+  let useId = ['id','name','firmwareVersion','isDelete','pId','pName','psn','sn','typeId','updateTime','workSpaceId']
+  Object.keys(props.editDeviceDate).forEach(id => {
+    if(useId.includes(id)){
+      params[id] = props.editDeviceDate[id]
+    }
+  })
+  EditUav(params).then(res => {
+    message.success('编辑成功')
+    emits('reload')
+    emits('changeEditDeviceModal',false)
+  })
+}
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -4,18 +4,23 @@
       <a-button type="primary">导出飞行器信息</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 === 'action'">
         <TableAction
           :actions="[
             {
               icon: 'ant-design:edit-outlined',
               onClick: () => {
+                edit(record)
               },
             },
             {
               color: 'error',
               icon: 'ant-design:delete-outlined',
               onClick: () => {
+                delDate(record)
               },
             },
           ]"
@@ -23,17 +28,65 @@
       </template>
     </template>
   </BasicTable>
+  <a-modal v-model:open="editDeviceModal" title="飞行器编辑" :footer="null">
+    <EditDevice :editDeviceDate="editDeviceDate" :projectList="projectList" @changeEditDeviceModal="changeEditDeviceModal" @reload="reload"/>
+  </a-modal>
 </template>
 
 <script setup lang="ts">
-import { h, } from "vue"
+import { h, watch, onMounted, ref, nextTick } from "vue"
 import { EditOutlined } from '@ant-design/icons-vue'
 import { BasicTable, useTable, TableAction } from '@/components/Table';
 import { columns, dataSource, searchFormSchema } from './utils'
-const [registerTable, { reload, expandAll, getForm}] = useTable({
+import { GetUavPageList, DeleteUav } from '@/api/demo/device'
+import { getClient, clientSubscribe } from '@/utils/mqtt'
+import dayjs from "dayjs";
+import { Modal } from "ant-design-vue";
+import EditDevice from './EditDevice/index.vue'
+
+const props = defineProps(['projectList','connected'])
+const editDeviceDate = ref({})
+const editDeviceModal = ref(false)
+onMounted(() => {
+  const targetField = searchFormSchema.find(item => item.field === 'project');
+  if (targetField) {
+    targetField.componentProps = {
+      ...(targetField.componentProps || {}),
+      options: props.projectList,
+    };
+  }
+  getClient().on('message', (topic, msg) => {
+    console.log(123,'topic',topic)
+    if (topic.endsWith("osd")) {
+      const rs = JSON.parse(msg)
+      console.log(1231,rs)
+      let list = getDataSource()
+      let sn = rs.gateway
+      for(let i = 0; i < list.length; i++){
+        if(list[i].psn == sn){
+          if(rs.data.sub_device){
+            list[i]['online_status'] = rs.data.sub_device.device_online_status == 0? '关机': '开机'
+            list[i]['online_time'] = rs.data.first_power_on? dayjs(rs.data.first_power_on).format('YYYY-MM-DD HH:mm:ss'): ''
+          }
+        }
+      }
+    }
+  })
+})
+const afterFetch = ref(false)
+watch(() => afterFetch.value, () => {
+  console.log(123123,getDataSource())
+    nextTick(() => {
+      console.log(456,456,getDataSource())
+      getDataSource().forEach(item => {
+        let topicUrl = `thing/product/${item.psn}/osd`;
+        clientSubscribe(topicUrl);
+      })
+    })
+})
+const [registerTable, { reload, expandAll, getForm,getDataSource}] = useTable({
   title: '飞行器',
-  // api: (params) => LoadCaseInfoLists(type,params),
-  dataSource,
+  api: GetUavPageList,
   columns,
   rowKey: 'id',
   formConfig: {
@@ -49,13 +102,10 @@ const [registerTable, { reload, expandAll, getForm}] = useTable({
   showTableSetting: true,
   bordered: true,
   beforeFetch(data) {
-    let params = {...data}
-    if(!params.nowStatus){
-      params.nowStatus = '复提待审核'
-    }
-    return params
+    return data
   },
   afterFetch(data) {
+    afterFetch.value = true
     console.log('afterFetch', data);
   },
   actionColumn: {
@@ -67,6 +117,25 @@ const [registerTable, { reload, expandAll, getForm}] = useTable({
     return info;
   },
 });
+const changeEditDeviceModal = (value: boolean) => {
+  editDeviceModal.value = value
+}
+const edit = (record) => {
+  editDeviceDate.value = record
+  editDeviceModal.value = true
+}
+const delDate = (record) => {
+  Modal.confirm({
+    title: '是否删除该飞行器?',
+    onCancel() {},
+    onOk() {
+      return DeleteUav(record.id).then(res => {
+        message.success('删除成功')
+        reload()
+      })
+    },
+  });
+}
 </script>
 
 <style lang="scss" scoped></style>

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

@@ -2,7 +2,7 @@ import { BasicColumn, FormSchema } from '@/components/Table';
 export const columns = [
   {
     title: '设备型号',
-    dataIndex: 'model',
+    dataIndex: 'typeId',
   },
   {
     title: '设备SN',
@@ -14,19 +14,19 @@ export const columns = [
   },
   {
     title: '固件版本',
-    dataIndex: 'version',
+    dataIndex: 'firmwareVersion',
   },
   {
     title: '在线状态',
-    dataIndex: 'status',
+    dataIndex: 'online_status',
   },
   {
     title: '所属项目',
-    dataIndex: 'project',
+    dataIndex: 'workSpaceId',
   },
   {
     title: '加入组织时间',
-    dataIndex: 'join_time',
+    dataIndex: 'updateTime',
   },
   {
     title: '在线时间',

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

@@ -34,7 +34,7 @@ export const columns = [
   },
   {
     title: '加入组织时间',
-    dataIndex: 'join_time',
+    dataIndex: 'createTime',
   },
   {
     title: '在线时间',
@@ -95,7 +95,7 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 4 },
   },
   {
-    field: 'sn',
+    field: 'key',
     label: '设备SN',
     component: 'Input',
     colProps: { span: 6 },