|
|
@@ -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>
|
李富豪