设备异常反馈对接完成

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

@@ -1,49 +1,75 @@
 <template>
     <a-modal :width="800" title="设备异常反馈" :maskClosable="false" :closable="false" :okButtonProps="{ hidden: true }"
         cancelText="关闭" v-model:visible="visible" @cancel="onClickClose">
-        <a-form :colon="false" :label-col="labelCol" :wrapper-col="wrapperCol">
-            <a-form-item label='异常描述' name="describe">
-                {{ formModel.describe || '--' }}
-            </a-form-item>
-            <a-form-item label='发生时间' name="date">
-                {{ formModel.date || '--' }}
-            </a-form-item>
-            <a-form-item label='联系电话' name="phone">
-                {{ formModel.phone || '--' }}
-            </a-form-item>
-            <a-form-item label='联系邮箱' name="email">
-                {{ formModel.email || '--' }}
-            </a-form-item>
-            <a-form-item label='附件' name="file">
-                <div>
-                    {{ '--' }}
+        <a-spin :spinning="state.loading">
+            <a-form :colon="false" :label-col="labelCol" :wrapper-col="wrapperCol">
+                <a-form-item label='异常描述'>
+                    {{ state.info.logs_info || '--' }}
+                </a-form-item>
+                <a-form-item label='发生时间'>
+                    {{ state.info.happen_time || '--' }}
+                </a-form-item>
+                <a-form-item label='联系电话'>
+                    {{ state.info.contact_number || '--' }}
+                </a-form-item>
+                <a-form-item label='联系邮箱'>
+                    {{ state.info.contact_email || '--' }}
+                </a-form-item>
+            </a-form>
+            <div class="log-list">
+                <div class="log-list-item borderRight">
+                    <div class="log-list-item-title">
+                        机场日志
+                    </div>
+                    <div class="log-list-item-content">
+                        <div class="log-list-item-content-cell" v-for="item in state.info.airportLogList"
+                            :key="item.boot_index">
+                            <div>
+                                <div>
+                                    {{ getDateTime(item.start_time) }}
+                                    <span style="margin: 0 5px;">
+                                        -
+                                    </span>
+                                    {{ getDateTime(item.end_time) }}
+                                </div>
+                            </div>
+                            <div>
+                                {{ getLogSize(item.size) }} G
+                            </div>
+                        </div>
+                    </div>
                 </div>
-            </a-form-item>
-        </a-form>
-        <div class="log-list">
-            <div class="log-list-item">
-                <div>
-                    机场日志
-                </div>
-                <div>
-                    内容
-                </div>
-            </div>
-            <div class="log-list-item">
-                <div>
-                    飞行器日志
-                </div>
-                <div>
-                    内容
+                <div class="log-list-item borderLeft">
+                    <div class="log-list-item-title">
+                        飞行器日志
+                    </div>
+                    <div class="log-list-item-content">
+                        <div class="log-list-item-content-cell" v-for="item in state.info.droneLogList"
+                            :key="item.boot_index">
+                            <div>
+                                <div>
+                                    {{ getDateTime(item.start_time) }}
+                                    <span style="margin: 0 5px;">
+                                        -
+                                    </span>
+                                    {{ getDateTime(item.end_time) }}
+                                </div>
+                            </div>
+                            <div>
+                                {{ getLogSize(item.size) }} G
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
-        </div>
+        </a-spin>
     </a-modal>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted } from 'vue';
+import { reactive, onMounted } from 'vue';
 import { apis } from '/@/api/custom';
+import moment from 'moment';
 
 interface Props {
     currentId: string,
@@ -55,28 +81,70 @@ const props = withDefaults(defineProps<Props>(), {
 
 });
 
-const formModel = reactive({
-    describe: undefined,
-    date: undefined,
-    phone: undefined,
-    email: undefined,
-    file: undefined,
+interface State {
+    loading: boolean,
+    info: {
+        logs_info: string,
+        happen_time: string,
+        contact_number: string,
+        contact_email: string,
+        airportLogList: {
+            boot_index: number,
+            end_time: number,
+            size: number,
+            start_time: number,
+        }[],
+        droneLogList: {
+            boot_index: number,
+            end_time: number,
+            size: number,
+            start_time: number,
+        }[],
+    }
+}
+
+const state: State = reactive({
+    loading: false,
+    info: {
+        logs_info: '',
+        happen_time: '',
+        contact_number: '',
+        contact_email: '',
+        airportLogList: [],
+        droneLogList: [],
+    }
 })
 
-const labelCol = { span: 4 };
+const labelCol = { style: { width: '100px', marginRight: '30px' } };
 
 const wrapperCol = { span: 18 };
 
-const state = reactive({
-    loading: false,
-});
-
 const fetchDetail = async () => {
     state.loading = true;
     try {
         const res = await apis.fetchDeviceLogDetail({ logsId: props.currentId });
-        console.log(res, 'res');
-
+        if (res.code !== 0) {
+            return;
+        }
+        const info = res.data;
+        const list = info.list || [];
+        const data = {
+            logs_info: info.logs_info,
+            happen_time: moment(info.happen_time).format('YYYY-MM-DD HH:mm:ss'),
+            contact_number: info.contact_number,
+            contact_email: info.contact_email,
+            airportLogList: [],
+            droneLogList: [],
+        }
+        const airportLog = list.find((item: any) => item.module === '3');
+        if (airportLog) {
+            data.airportLogList = airportLog.list;
+        }
+        const droneLog = list.find((item: any) => item.module === '0');
+        if (droneLog) {
+            data.droneLogList = droneLog.list;
+        }
+        state.info = data;
     } catch (error) {
         console.error(error);
     } finally {
@@ -87,15 +155,56 @@ const fetchDetail = async () => {
 onMounted(async () => {
     await fetchDetail();
 })
+
+const getDateTime = (timestamp: number) => {
+    const date = moment.unix(timestamp).format('YYYY-MM-DD HH:mm');
+    return date;
+}
+
+const getLogSize = (size: number) => {
+    // 将字节转换为GB
+    const gbSize = size / (1024 * 1024 * 1024);
+    // 保留一位小数
+    return parseFloat(gbSize.toFixed(1));
+};
 </script>
 
 <style lang="scss" scoped>
 .log-list {
+    border-top: 1px solid #f0f0f0;
     display: flex;
     justify-content: space-between;
 
+    .borderRight {
+        border-right: 1px solid #f0f0f0;
+    }
+
+    .borderLeft {
+        border-left: 1px solid #f0f0f0;
+    }
+
     &-item {
         width: 48%;
+        padding: 10px;
+        margin-top: 20px;
+
+        &-title {
+            font-weight: bold;
+        }
+
+        &-content {
+            width: 100%;
+            max-height: 300px;
+            padding: 0 10px;
+            overflow-y: auto;
+
+            &-cell {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-top: 10px;
+            }
+        }
     }
 }
 </style>

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

@@ -53,7 +53,7 @@
                 <!-- 操作 -->
                 <template #operation="{ record }">
                     <a-tooltip title="详情">
-                        <FileSearchOutlined @click="handleClickDetail(record.logs_id)" />
+                        <FileSearchOutlined style="color: #2d8cf0" @click="handleClickDetail(record.logs_id)" />
                     </a-tooltip>
                 </template>
             </a-table>

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

@@ -1,36 +0,0 @@
-<template>
-    <a-drawer :width="800" title="详情" placement="right" v-model:visible="visible" @close="onClose">
-        详情
-    </a-drawer>
-</template>
-
-<script lang="ts" setup>
-import { reactive, onMounted } from 'vue'
-import { apis } from '/@/api/custom/index'
-
-interface Props {
-    id: string,
-    visible: boolean,
-    onClose: () => void,
-};
-
-const props = withDefaults(defineProps<Props>(), {
-
-});
-
-interface State {
-    listLoading: boolean,
-    list: any[],
-};
-
-const state: State = reactive({
-    listLoading: false,
-    list: [],
-});
-
-onMounted(async () => {
-
-})
-</script>
-
-<style lang="scss" scoped></style>

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

@@ -24,14 +24,16 @@
           <div class="editable-row-operations">
             <div class="flex-align-center flex-row" style="color: #2d8cf0">
               <a-tooltip title="详情">
-                <FileSearchOutlined style="margin-right: 10px;" @click="onClickDetail(record.id)" />
+                <FileSearchOutlined style="margin-right: 10px;" @click="onClickDetail(record.logs_id)" />
               </a-tooltip>
             </div>
           </div>
         </template>
       </a-table>
     </div>
-    <Drawer :id="state.currentId" :visible="state.drawerVisible" :onClose="drawerOnClickClose" />
+    <!-- 异常反馈-详情弹出层 -->
+    <FeedbackDetailModal :currentId="state.currentId" :visible="state.drawerVisible"
+      :onClickClose="() => state.drawerVisible = false" v-if="state.drawerVisible" />
   </div>
 </template>
 
@@ -39,7 +41,7 @@
 import { reactive, onMounted } from 'vue';
 import { FileSearchOutlined } from '@ant-design/icons-vue';
 import Search from './components/Search.vue';
-import Drawer from './components/Drawer.vue';
+import FeedbackDetailModal from '../deviceList/components/FeedbackDetailModal.vue';
 import { apis } from '/@/api/custom/index';
 
 interface State {
@@ -187,10 +189,6 @@ const onClickDetail = (id: string) => {
   state.currentId = id;
   state.drawerVisible = true;
 }
-
-const drawerOnClickClose = () => {
-  state.drawerVisible = false;
-}
 </script>
 
 <style lang="scss">