设备异常反馈记录

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

@@ -0,0 +1,217 @@
+<template>
+    <a-drawer width="70%" title="设备异常反馈记录" :visible="visible" @close="onClose">
+        <div class="top">
+            <a-button type="primary">
+                新建异常反馈
+            </a-button>
+            <div>
+                <a-form ref="formRef" layout="inline" :model="state.query" :colon="false">
+                    <a-form-item name="rangeDate">
+                        <a-range-picker style="width: 250px;" v-model:value="state.query.rangeDate" />
+                    </a-form-item>
+                    <a-form-item name="device_name">
+                        <a-select style="width: 200px;" placeholder="请选择反馈人" v-model:value="state.query.device_name">
+                            <a-select-option value="1">
+                                pilot
+                            </a-select-option>
+                        </a-select>
+                    </a-form-item>
+                    <a-form-item name="search_info">
+                        <a-input style="width: 200px;" placeholder="设备SN、设备异常描述"
+                            v-model:value="state.query.search_info" />
+                    </a-form-item>
+                    <a-form-item>
+                        <a-button style="margin-right: 10px;" @click="handleClicSekarch">
+                            <template #icon>
+                                <SearchOutlined />
+                            </template>
+                        </a-button>
+                        <a-button @click="handleClickReset">
+                            <template #icon>
+                                <ReloadOutlined />
+                            </template>
+                        </a-button>
+                    </a-form-item>
+                </a-form>
+            </div>
+        </div>
+        <div>
+            <a-table :scroll="{ x: '100%', y: 500 }" :childrenColumnName="null" rowKey="device_sn"
+                :loading="state.listLoading" :columns="columns" :dataSource="state.list" :pagination="paginationConfig">
+                <template #status="{ record }">
+                    上传状态
+                </template>
+                <!-- 操作 -->
+                <template #operation="{ record }">
+                    <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)" />
+                            </a-tooltip>
+                            <a-tooltip title="删除">
+                                <DeleteOutlined @click="onClickDelete(record.id)" />
+                            </a-tooltip>
+                        </div>
+                    </div>
+                </template>
+            </a-table>
+        </div>
+    </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from 'vue';
+import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';
+import { apis } from '/@/api/custom';
+import { Device } from '/@/types/device';
+
+interface Props {
+    visible: boolean,
+    device: Device,
+    onClose: () => void,
+};
+
+const props = withDefaults(defineProps<Props>(), {
+
+});
+
+const formRef = ref();
+
+interface State {
+    query: any,
+    listLoading: boolean,
+    list: any[],
+    currentId: string,
+    drawerVisible: boolean,
+};
+
+const state: State = reactive({
+    query: {
+        rangeDate: [],
+        device_name: undefined,
+        search_info: '',
+    },
+    listLoading: false,
+    list: [],
+    currentId: '',
+    drawerVisible: false,
+});
+
+const paginationConfig = reactive({
+    pageSizeOptions: ['20', '50', '100'],
+    showQuickJumper: true,
+    showSizeChanger: true,
+    pageSize: 20,
+    current: 1,
+    total: 0
+})
+
+const fetchList = async () => {
+    state.listLoading = true;
+    try {
+        const res = await apis.fetchChangeRecordList({
+            ...state.query,
+            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: 'create_time',
+        width: 200,
+        sorter: (a: any, b: any) => a.create_time.localeCompare(b.create_time),
+    },
+    {
+        title: '反馈人',
+        dataIndex: 'username',
+        width: 150,
+    },
+    {
+        title: '设备型号',
+        dataIndex: 'device_name',
+        width: 150,
+    },
+    {
+        title: '设备SN',
+        dataIndex: 'device_sn',
+        width: 250,
+        slots: { customRender: 'device_sn' }
+    },
+    {
+        title: '设备名称',
+        dataIndex: 'nick_name',
+        width: 150,
+        slots: { customRender: 'nick_name' },
+    },
+    {
+        title: '设备异常描述',
+        dataIndex: 'log_info',
+        width: 150,
+        ellipsis: true,
+    },
+    {
+        title: '上传状态',
+        dataIndex: 'status',
+        slots: { customRender: 'status' },
+        sorter: (a: any, b: any) => a.status.localeCompare(b.status),
+        width: 150,
+    },
+    // {
+    //     title: '操作',
+    //     dataIndex: 'operation',
+    //     fixed: 'right',
+    //     width: 80,
+    //     slots: { customRender: 'operation' }
+    // },
+]
+
+// 点击查询
+const handleClicSekarch = async () => {
+    const values = formRef.value?.getFieldsValue();
+    const data = {
+        ...values,
+    };
+    delete data.rangeDate;
+    if (values.rangeDate.length === 2) {
+        data.begin_time = moment(values.rangeDate[0]).valueOf();
+        data.end_time = moment(values.rangeDate[1]).valueOf();
+    }
+    await props.onClickSearch(data);
+}
+
+// 点击重置
+const handleClickReset = async () => {
+    formRef.value?.resetFields();
+    const values = formRef.value?.getFieldsValue();
+    const data = {
+        ...values,
+    };
+    delete data.rangeDate;
+    await props.onClickReset(data);
+}
+</script>
+
+<style lang="scss" scoped>
+.top {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+</style>

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

@@ -51,12 +51,15 @@
           </div>
           <!-- 非编辑态操作 -->
           <div v-else class="flex-align-center flex-row" style="color: #2d8cf0">
-            <a-tooltip title="设备日志">
-              <CloudServerOutlined style="margin-right: 10px;" @click="onClickDeviceLog(record)" />
+            <a-tooltip title="异常反馈" v-if="record.domain === 3">
+              <CloudServerOutlined style="margin-right: 10px;" @click="onClickFeedback(record)" />
             </a-tooltip>
-            <a-tooltip title="告警信息">
+            <a-tooltip title="告警信息" v-if="record.domain === 3">
               <FileSearchOutlined style="margin-right: 10px;" @click="onClickDeviceHms(record)" />
             </a-tooltip>
+            <a-tooltip title="设备运维" v-if="record.domain === 3">
+              <SettingOutlined style="margin-right: 10px;" />
+            </a-tooltip>
             <a-tooltip title="编辑">
               <EditOutlined style="margin-right: 10px;" @click="onClickEdit(record)" />
             </a-tooltip>
@@ -68,8 +71,9 @@
       </a-table>
     </div>
   </div>
-  <!-- 设备日志 -->
-  <DeviceLogUploadRecordDrawer v-model:visible="state.deviceLogDrawerVisible" :device="state.currentDevice" />
+  <!-- 异常反馈 -->
+  <FeedbackDrawer :visible="state.feedbackDrawerVisible" :device="state.currentDevice"
+    :onClose="() => state.feedbackDrawerVisible = false" />
   <!-- 告警信息 -->
   <DeviceHmsDrawer v-model:visible="state.deviceHmsDrawerVisible" :device="state.currentDevice" />
 </template>
@@ -77,11 +81,11 @@
 <script lang="ts" setup>
 import { reactive, onMounted, onUnmounted } from 'vue';
 import { Modal } from 'ant-design-vue';
-import { EditOutlined, CheckOutlined, CloseOutlined, DeleteOutlined, FileSearchOutlined, CloudServerOutlined } from '@ant-design/icons-vue';
+import { EditOutlined, CheckOutlined, CloseOutlined, SettingOutlined, DeleteOutlined, FileSearchOutlined, CloudServerOutlined } from '@ant-design/icons-vue';
 import Search from './components/Search.vue';
 import CustomCell from './components/CustomCell.vue';
 import DeviceFirmwareUpgrade from '/@/components/devices/device-upgrade/DeviceFirmwareUpgrade.vue';
-import DeviceLogUploadRecordDrawer from '/@/components/devices/device-log/DeviceLogUploadRecordDrawer.vue';
+import FeedbackDrawer from './components/FeedbackDrawer.vue';
 import DeviceHmsDrawer from '/@/components/devices/device-hms/DeviceHmsDrawer.vue';
 import { getBindingDevices, updateDevice, unbindDevice } from '/@/api/manage';
 import { apis } from '/@/api/custom';
@@ -98,7 +102,7 @@ interface State {
   editableData: {
     [key: string]: any,
   },
-  deviceLogDrawerVisible: boolean,
+  feedbackDrawerVisible: boolean,
   deviceHmsDrawerVisible: boolean,
 };
 
@@ -111,7 +115,7 @@ const state: State = reactive({
   selectedRowKeys: [],
   currentDevice: {},
   editableData: {},
-  deviceLogDrawerVisible: false,
+  feedbackDrawerVisible: false,
   deviceHmsDrawerVisible: false,
 })
 
@@ -257,7 +261,7 @@ const columns = [
     title: '操作',
     dataIndex: 'actions',
     fixed: 'right',
-    width: 120,
+    width: 140,
     slots: { customRender: 'action' },
   },
 ]
@@ -299,9 +303,9 @@ const onClickReset = async (query: any) => {
   await fetchList();
 }
 
-// 点击设备日志
-const onClickDeviceLog = (record: any) => {
-  state.deviceLogDrawerVisible = true;
+// 点击异常反馈
+const onClickFeedback = (record: any) => {
+  state.feedbackDrawerVisible = true;
   state.currentDevice = record;
 }
 

Web/src/pages/page-web/projects/media/detail/components/Search.vue

@@ -2,9 +2,10 @@
   <a-row style="margin-bottom: 20px;" justify="space-between">
     <a-col>
       <div style="display: flex;">
-        <a-upload :action="uploadUrl" method="POST" :headers="getHeaders()" accept=".png,.jpg,.jpeg" :multiple="false"
-          :showUploadList="false" @change="handleChangeUploadFile">
-          <a-button style="margin-right: 10px;" type="primary" @click="onClickDownload">
+        <a-upload :action="uploadUrl" method="POST" :headers="getHeaders()"
+          accept=".png,.jpg,.jpeg,.mp4,.zip,.tif,.tiff,.las" :multiple="false" :showUploadList="false"
+          @change="handleChangeUploadFile">
+          <a-button style="margin-right: 10px;" type="primary">
             上传合成文件
           </a-button>
         </a-upload>