机场异常反馈记录

Web/src/components/devices/deviceList/components/Search.vue

@@ -1,13 +1,31 @@
 <template>
   <a-row style="margin-bottom: 20px;" justify="space-between">
     <a-col>
-      <a-button style="margin-right: 10px;">
+      <a-button style="margin-right: 10px;" @click="state.visible = true">
         机场设备绑定码
         <MenuOutlined />
       </a-button>
-      <a style="margin-right: 10px;">
-        如何绑定机场？
-      </a>
+      <a-popover trigger="hover">
+        <template #content>
+          <div class="popover">
+            <div>
+              请使用遥控器连接飞行器后，在“Pilot2首页-云服务-三方云平台”绑定设备。
+            </div>
+            <div>
+              了解更多：
+              <span>
+                <a>
+                  <ReadOutlined />
+                  说明书
+                </a>
+              </span>
+            </div>
+          </div>
+        </template>
+        <a style="margin-right: 10px;">
+          如何绑定机场？
+        </a>
+      </a-popover>
       <a-button>
         删除
       </a-button>
@@ -65,11 +83,32 @@
       </a-form>
     </a-col>
   </a-row>
+  <a-modal v-model:visible="state.visible" title="设备绑定码" :footer="null">
+    <div>
+      请在 Pilot2 机场部署流程-云服务配置中，以组织ID和设备绑定码来绑定机场设备。
+    </div>
+    <div class="modal-item">
+      <div class="modal-item-title">
+        项目名称
+      </div>
+      <div>
+        上海展域航空技术有限公司
+      </div>
+    </div>
+    <div class="modal-item">
+      <div class="modal-item-title">
+        设备绑定码
+      </div>
+      <div>
+        PB97VR
+      </div>
+    </div>
+  </a-modal>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive } from 'vue';
-import { MenuOutlined, SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';
+import { ReadOutlined, MenuOutlined, SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';
 
 interface Props {
   onClickSearch: (query: any) => Promise<any>,
@@ -88,6 +127,10 @@ const formModel = reactive({
   keyword: '',
 })
 
+const state = reactive({
+  visible: false,
+})
+
 // 点击查询
 const handleClicSekarch = async () => {
   const values = formRef.value?.getFieldsValue();
@@ -102,4 +145,18 @@ const handleClickReset = async () => {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.popover {
+  width: 200px;
+}
+
+.modal-item {
+  display: flex;
+  margin-top: 20px;
+
+  &-title {
+    width: 100px;
+    font-weight: bold;
+  }
+}
+</style>

Web/src/components/devices/feedbackRecord/components/CustomCell.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="customCell">
+        <div class="customCell-item">
+            {{ record[fieldName] }}
+        </div>
+        <div class="customCell-item" v-if="record.children && record.children[fieldName]">
+            <div class="mt-5 ml0"
+                style="border-left: 2px solid rgb(200,200,200); border-bottom: 2px solid rgb(200,200,200); height: 16px;width: 16px; float: left;">
+            </div>
+            <div style="margin-left: 5px;">
+                {{ record.children[fieldName] }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+    record: any,
+    fieldName: string,
+};
+
+const props = withDefaults(defineProps<Props>(), {
+
+});
+</script>
+
+<style lang="scss" scoped>
+.customCell {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    &-item {
+        height: 30px;
+        display: flex;
+        align-items: center;
+    }
+}
+</style>

Web/src/components/devices/feedbackRecord/index.vue

@@ -2,8 +2,28 @@
   <div class="feedbackRecord">
     <Search :onClickSearch="async () => { }" :onClickReset="async () => { }" />
     <div class="feedbackRecord-table">
-      <a-table :scroll="{ x: 'max-content', y: 500 }" rowKey="id" :loading="state.listLoading" :columns="columns"
+      <a-table :scroll="{ x: '100%', y: 500 }" :childrenColumnName="null" rowKey="device_sn"
+        :loading="state.listLoading" :columns="columns" @change="refreshData" :rowClassName="rowClassName"
         :dataSource="state.list" :pagination="paginationConfig">
+        <!-- 设备型号 -->
+        <template #device_name="{ record }">
+          <CustomCell :record="record" fieldName="device_name" />
+        </template>
+        <!-- 设备SN -->
+        <template #device_sn="{ record }">
+          <CustomCell :record="record" fieldName="device_sn" />
+        </template>
+        <!-- 设备名称 -->
+        <template #nick_name="{ record }">
+          <CustomCell :record="record" fieldName="nick_name" />
+        </template>
+        <!-- 固件版本 -->
+        <template #firmware_version="{ record }">
+          <CustomCell :record="record" fieldName="firmware_version" />
+        </template>
+        <template #status="{ record }">
+          上传状态
+        </template>
         <!-- 操作 -->
         <template #operation="{ record }">
           <div class="editable-row-operations">
@@ -28,6 +48,7 @@ import { reactive, onMounted } from 'vue';
 import { Modal } from 'ant-design-vue';
 import { DeleteOutlined, FileSearchOutlined } from '@ant-design/icons-vue';
 import Search from './components/Search.vue';
+import CustomCell from './components/CustomCell.vue';
 import Drawer from './components/Drawer.vue';
 import { apis } from '/@/api/custom/index';
 
@@ -49,95 +70,107 @@ const paginationConfig = reactive({
   pageSizeOptions: ['20', '50', '100'],
   showQuickJumper: true,
   showSizeChanger: true,
-  pageSize: 50,
+  pageSize: 20,
   current: 1,
   total: 0
 })
 
-onMounted(async () => {
+const fetchList = async () => {
   state.listLoading = true;
   try {
-    //const res = await apis.fetchfeedbackRecordList();
-    //console.log(res, 'list');
-    const list = [
-      {
-        id: '1',
-        time: '2021-01-01',
-        name: '1',
-        deviceType: 'aa',
-        sn: '123',
-        deviceName: '1',
-        firmware_version: '1',
-        description: '1',
-        status: '1',
-      },
-      {
-        id: '2',
-        time: '2021-01-01',
-        name: '1',
-        deviceType: 'aa',
-        sn: '123',
-        deviceName: '1',
-        firmware_version: '1',
-        description: '1',
-        status: '1',
-      },
-    ]
-    state.list = list;
+    const res = await apis.fetchChangeRecordList({ page: paginationConfig.current, page_size: paginationConfig.pageSize });
+    if (res.code === 0) {
+      paginationConfig.total = res.data.pagination.total
+      paginationConfig.current = res.data.pagination.page
+      paginationConfig.pageSize = res.data.pagination.page_size
+    }
+    state.list = res.data.list;
   } catch (e) {
     console.error(e);
   } finally {
     state.listLoading = false;
   }
+}
+
+onMounted(async () => {
+  await fetchList();
 })
 
 const columns = [
   {
     title: '反馈时间',
-    dataIndex: 'time',
-    sorter: (a: any, b: any) => a.time - b.time,
+    dataIndex: 'create_time',
+    width: 200,
+    sorter: (a: any, b: any) => a.create_time.localeCompare(b.create_time),
   },
   {
     title: '反馈人',
-    dataIndex: 'name',
+    dataIndex: 'username',
+    width: 150,
   },
   {
     title: '设备型号',
-    dataIndex: 'deviceType',
-    sorter: (a: any, b: any) => a.deviceType - b.deviceType,
+    dataIndex: 'device_name',
+    width: 150,
+    sorter: (a: any, b: any) => a.device_name.localeCompare(b.device_name),
+    slots: { customRender: 'device_name' }
   },
   {
     title: '设备SN',
-    dataIndex: 'sn',
+    dataIndex: 'device_sn',
+    width: 250,
+    slots: { customRender: 'device_sn' }
   },
   {
     title: '设备名称',
-    dataIndex: 'deviceName',
-    sorter: (a: any, b: any) => a.deviceName - b.deviceName,
+    dataIndex: 'nick_name',
+    width: 150,
+    slots: { customRender: 'nick_name' },
+    sorter: (a: any, b: any) => a.nick_name.localeCompare(b.nick_name),
   },
   {
     title: '固件版本',
     dataIndex: 'firmware_version',
+    width: 150,
+    ellipsis: true,
+    slots: { customRender: 'firmware_version' }
   },
   {
     title: '设备异常描述',
-    dataIndex: 'description',
+    dataIndex: 'log_info',
+    width: 150,
+    ellipsis: true,
   },
   {
     title: '上传状态',
     dataIndex: 'status',
-    sorter: (a: any, b: any) => a.time - b.time,
+    slots: { customRender: 'status' },
+    sorter: (a: any, b: any) => a.status.localeCompare(b.status),
+    width: 150,
   },
   {
     title: '操作',
     dataIndex: 'operation',
     fixed: 'right',
     width: 100,
-    className: 'titleStyle',
     slots: { customRender: 'operation' }
   },
 ]
 
+const rowClassName = (record: any, index: number) => {
+  const className = []
+  if ((index & 1) === 0) {
+    className.push('table-striped')
+  }
+  return className.toString().replaceAll(',', ' ')
+}
+
+const refreshData = async (page: any) => {
+  paginationConfig.current = page?.current!
+  paginationConfig.pageSize = page?.pageSize!
+  await fetchList();
+}
+
 // 点击编辑
 const onClickEdit = (id: string) => {
   state.currentId = id;