refactor: 整理页面的目录结构
This commit is contained in:
yangsy
333
src/pages/log/call-log-page.vue
Normal file
333
src/pages/log/call-log-page.vue
Normal file
@@ -0,0 +1,333 @@
|
||||
<script lang="ts">
|
||||
const callLogTypeOptions: SelectOption[] = [
|
||||
{ label: '视频点播', value: 10001 },
|
||||
{ label: '视频回放', value: 10002 },
|
||||
// { label: '停止视频回放', value: 10003 },
|
||||
// { label: '回放暂停', value: 10004 },
|
||||
// { label: '回放恢复', value: 10005 },
|
||||
// { label: '回放倍速播放', value: 10006 },
|
||||
// { label: '回放拖动播放', value: 10007 },
|
||||
{ label: '云台指令', value: 10008 },
|
||||
{ label: '查询录像', value: 10009 },
|
||||
{ label: '下载录像', value: 10010 },
|
||||
// { label: '停止下载录像', value: 10011 },
|
||||
{ label: '获取预置位', value: 10012 },
|
||||
{ label: '获取设备信息', value: 10013 },
|
||||
{ label: '获取设备状态', value: 10014 },
|
||||
{ label: '设置解码器分屏数量', value: 20001 },
|
||||
{ label: '设置解码器rtsp流', value: 20002 },
|
||||
{ label: '移除解码器rtsp流', value: 20003 },
|
||||
// { label: '启动非报警时序', value: 30001 },
|
||||
// { label: '停止非报警时序', value: 30002 },
|
||||
// { label: '暂停非报警时序', value: 30003 },
|
||||
// { label: '调用组切', value: 30004 },
|
||||
// { label: '启动报警时序', value: 40001 },
|
||||
// { label: '停止报警时序', value: 40002 },
|
||||
// { label: '分页查询报警', value: 50001 },
|
||||
// { label: '确认报警', value: 50002 },
|
||||
// { label: '删除报警', value: 50004 },
|
||||
{ label: '目录查询', value: 60001 },
|
||||
];
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { exportCallLogApi, pageCallLogApi, type NdmCallLog, type NdmCallLogResultVO, type PageQueryExtra, type Station } from '@/apis';
|
||||
import { useStationStore } from '@/stores';
|
||||
import { downloadByData, parseErrorFeedback } from '@/utils';
|
||||
import { useMutation } from '@tanstack/vue-query';
|
||||
import { isCancel } from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
import {
|
||||
NButton,
|
||||
NDataTable,
|
||||
NDatePicker,
|
||||
NFlex,
|
||||
NForm,
|
||||
NFormItemGi,
|
||||
NGrid,
|
||||
NGridItem,
|
||||
NSelect,
|
||||
NTag,
|
||||
type DataTableColumns,
|
||||
type DataTableRowData,
|
||||
type PaginationProps,
|
||||
type SelectOption,
|
||||
} from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { h, onBeforeUnmount } from 'vue';
|
||||
import { computed, reactive, ref, watch, watchEffect } from 'vue';
|
||||
|
||||
interface SearchFields extends PageQueryExtra<NdmCallLog> {
|
||||
stationCode?: Station['code'];
|
||||
logType_in: number[];
|
||||
createdTime: [string, string];
|
||||
}
|
||||
|
||||
const stationStore = useStationStore();
|
||||
const { stations, onlineStations } = storeToRefs(stationStore);
|
||||
|
||||
const stationSelectOptions = computed(() => {
|
||||
return stations.value.map<SelectOption>((station) => ({
|
||||
label: station.name,
|
||||
value: station.code,
|
||||
disabled: !station.online,
|
||||
}));
|
||||
});
|
||||
|
||||
const searchFields = ref<SearchFields>({
|
||||
logType_in: [],
|
||||
createdTime: [dayjs().startOf('date').subtract(1, 'week').format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf('date').format('YYYY-MM-DD HH:mm:ss')],
|
||||
});
|
||||
const resetSearchFields = () => {
|
||||
searchFields.value = {
|
||||
stationCode: onlineStations.value.at(0)?.code,
|
||||
logType_in: [],
|
||||
createdTime: [dayjs().startOf('date').subtract(1, 'week').format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf('date').format('YYYY-MM-DD HH:mm:ss')],
|
||||
};
|
||||
};
|
||||
const getExtraFields = (): PageQueryExtra<NdmCallLog> => {
|
||||
const createdTime_precisest = searchFields.value.createdTime[0];
|
||||
const createdTime_preciseed = searchFields.value.createdTime[1];
|
||||
const sourceGbId_like = searchFields.value.sourceGbId_like;
|
||||
const targetGbId_like = searchFields.value.targetGbId_like;
|
||||
const method_like = searchFields.value.method_like;
|
||||
const messageType_like = searchFields.value.messageType_like;
|
||||
const cmdType_like = searchFields.value.cmdType_like;
|
||||
const logType_in = searchFields.value.logType_in;
|
||||
return {
|
||||
createdTime_precisest,
|
||||
createdTime_preciseed,
|
||||
sourceGbId_like,
|
||||
targetGbId_like,
|
||||
method_like,
|
||||
messageType_like,
|
||||
cmdType_like,
|
||||
logType_in,
|
||||
};
|
||||
};
|
||||
|
||||
const searchFieldsChanged = ref(false);
|
||||
watch(searchFields, () => {
|
||||
searchFieldsChanged.value = true;
|
||||
});
|
||||
|
||||
const tableColumns: DataTableColumns<NdmCallLogResultVO> = [
|
||||
{ title: '时间', key: 'createdTime' },
|
||||
{
|
||||
title: '日志类型',
|
||||
key: 'logType',
|
||||
render: (rowData) => {
|
||||
const option = callLogTypeOptions.find((option) => option.value === rowData.logType);
|
||||
return `${option?.label ?? ''}`;
|
||||
},
|
||||
},
|
||||
{ title: '调用者国标码', key: 'sourceGbId' },
|
||||
{ title: '用户所属类别', key: 'sourceType' },
|
||||
{ title: '被调用设备国标码', key: 'targetGbId' },
|
||||
{ title: '被调用设备名称', key: 'targetName' },
|
||||
{ title: '调用方法', key: 'method' },
|
||||
{ title: '消息类型', key: 'messageType' },
|
||||
{ title: '操作类型', key: 'cmdType' },
|
||||
];
|
||||
|
||||
const tableData = ref<DataTableRowData[]>([]);
|
||||
|
||||
const DEFAULT_PAGE_SIZE = 10;
|
||||
const pagination = reactive<PaginationProps>({
|
||||
showSizePicker: true,
|
||||
page: 1,
|
||||
pageSize: DEFAULT_PAGE_SIZE,
|
||||
pageSizes: [5, 10, 20, 50, 80, 100],
|
||||
itemCount: 0,
|
||||
prefix: ({ itemCount }) => {
|
||||
return h('div', {}, { default: () => `共${itemCount}条` });
|
||||
},
|
||||
onUpdatePage: (page: number) => {
|
||||
pagination.page = page;
|
||||
getTableData();
|
||||
},
|
||||
onUpdatePageSize: (pageSize: number) => {
|
||||
pagination.pageSize = pageSize;
|
||||
pagination.page = 1;
|
||||
getTableData();
|
||||
},
|
||||
});
|
||||
|
||||
const abortController = ref(new AbortController());
|
||||
|
||||
const { mutate: getTableData, isPending: tableLoading } = useMutation({
|
||||
mutationFn: async () => {
|
||||
abortController.value.abort();
|
||||
abortController.value = new AbortController();
|
||||
|
||||
if (!searchFields.value.stationCode) throw Error('请选择车站');
|
||||
|
||||
const stationCode = searchFields.value.stationCode;
|
||||
const signal = abortController.value.signal;
|
||||
|
||||
const res = await pageCallLogApi(
|
||||
{
|
||||
model: {},
|
||||
extra: getExtraFields(),
|
||||
current: pagination.page ?? 1,
|
||||
size: pagination.pageSize ?? DEFAULT_PAGE_SIZE,
|
||||
order: 'descending',
|
||||
sort: 'id',
|
||||
},
|
||||
{
|
||||
stationCode,
|
||||
signal,
|
||||
},
|
||||
);
|
||||
return res;
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
const { records, size, total } = res;
|
||||
pagination.pageSize = parseInt(size);
|
||||
pagination.itemCount = parseInt(total);
|
||||
tableData.value = records;
|
||||
},
|
||||
onError: (error) => {
|
||||
if (isCancel(error)) return;
|
||||
console.error(error);
|
||||
const errorFeedback = parseErrorFeedback(error);
|
||||
window.$message.error(errorFeedback);
|
||||
},
|
||||
});
|
||||
|
||||
const onClickReset = () => {
|
||||
resetSearchFields();
|
||||
pagination.page = 1;
|
||||
pagination.pageSize = DEFAULT_PAGE_SIZE;
|
||||
pagination.itemCount = 0;
|
||||
getTableData();
|
||||
};
|
||||
const onClickQuery = () => {
|
||||
if (searchFieldsChanged.value) {
|
||||
pagination.page = 1;
|
||||
pagination.pageSize = DEFAULT_PAGE_SIZE;
|
||||
searchFieldsChanged.value = false;
|
||||
}
|
||||
getTableData();
|
||||
};
|
||||
|
||||
const { mutate: exportTableData, isPending: exporting } = useMutation({
|
||||
mutationFn: async () => {
|
||||
abortController.value.abort();
|
||||
abortController.value = new AbortController();
|
||||
|
||||
if (!searchFields.value.stationCode) throw Error('请选择车站');
|
||||
|
||||
const stationCode = searchFields.value.stationCode;
|
||||
const signal = abortController.value.signal;
|
||||
|
||||
const data = await exportCallLogApi(
|
||||
{
|
||||
model: {},
|
||||
extra: getExtraFields(),
|
||||
current: pagination.page ?? 1,
|
||||
size: pagination.pageSize ?? 10,
|
||||
order: 'descending',
|
||||
sort: 'id',
|
||||
},
|
||||
{
|
||||
stationCode,
|
||||
signal,
|
||||
},
|
||||
);
|
||||
return data;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
const time = dayjs().format('YYYY-MM-DD_HH-mm-ss');
|
||||
downloadByData(data, `上级调用日志_${time}.xlsx`);
|
||||
},
|
||||
onError: (error) => {
|
||||
if (isCancel(error)) return;
|
||||
console.error(error);
|
||||
const errorFeedback = parseErrorFeedback(error);
|
||||
window.$message.error(errorFeedback);
|
||||
},
|
||||
});
|
||||
|
||||
// 进入页面时选择首个在线的车站
|
||||
// 当页面刷新时，车站列表还没有加载完成，defaultStation不存在，if条件为false，
|
||||
// 等待车站列表加载完成后，defaultStation会更新，if条件为true，会更新选择的车站并加载日志记录。
|
||||
// 当从其他页面跳转过来时，车站列表已经存在，defaultStation存在，if条件为true，会更新选择的车站并加载日志记录。
|
||||
// 由于if条件是and逻辑，所以即使defaultStation因车站状态变化而更新，由于已经选择了车站，所以if条件为false。
|
||||
const defaultStation = computed(() => onlineStations.value.at(0));
|
||||
watchEffect(() => {
|
||||
if (defaultStation.value?.code && !searchFields.value.stationCode) {
|
||||
searchFields.value.stationCode = defaultStation.value.code;
|
||||
}
|
||||
});
|
||||
// 当选中的车站第一次有值时，主动获取数据
|
||||
watch(
|
||||
() => searchFields.value.stationCode,
|
||||
(newCode, oldCode) => {
|
||||
if (oldCode === undefined && !!newCode) {
|
||||
getTableData();
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
abortController.value.abort();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NFlex vertical :size="0" style="height: 100%">
|
||||
<!-- 查询面板 -->
|
||||
<NForm style="flex: 0 0 auto; padding: 8px">
|
||||
<NGrid cols="3" :x-gap="24">
|
||||
<NFormItemGi span="1" label="车站" label-placement="left">
|
||||
<NSelect
|
||||
v-model:value="searchFields.stationCode"
|
||||
:options="stationSelectOptions"
|
||||
:render-label="
|
||||
(option: SelectOption) => {
|
||||
return [
|
||||
h(NTag, { type: option.disabled ? 'error' : 'success', size: 'tiny' }, { default: () => (option.disabled ? '离线' : '在线') }),
|
||||
h('span', {}, { default: () => `${option.label}` }),
|
||||
];
|
||||
}
|
||||
"
|
||||
:multiple="false"
|
||||
clearable
|
||||
/>
|
||||
</NFormItemGi>
|
||||
<NFormItemGi :span="1" label="日志类型" label-placement="left">
|
||||
<NSelect v-model:value="searchFields.logType_in" :options="callLogTypeOptions" multiple clearable />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi span="1" label="时间" label-placement="left">
|
||||
<NDatePicker v-model:formatted-value="searchFields.createdTime" type="datetimerange" />
|
||||
</NFormItemGi>
|
||||
</NGrid>
|
||||
<!-- 操作按钮 -->
|
||||
<NGrid :cols="1">
|
||||
<NGridItem>
|
||||
<NFlex>
|
||||
<NButton @click="onClickReset">重置</NButton>
|
||||
<NButton type="primary" :loading="tableLoading" @click="onClickQuery">查询</NButton>
|
||||
</NFlex>
|
||||
</NGridItem>
|
||||
</NGrid>
|
||||
</NForm>
|
||||
|
||||
<!-- 数据表格工具栏 -->
|
||||
<NFlex align="center" style="padding: 8px; flex: 0 0 auto">
|
||||
<div style="font-size: medium">上级调用日志</div>
|
||||
<NFlex style="margin-left: auto">
|
||||
<NButton type="primary" :loading="exporting" @click="() => exportTableData()">导出</NButton>
|
||||
</NFlex>
|
||||
</NFlex>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<NDataTable remote :columns="tableColumns" :data="tableData" :pagination="pagination" :loading="tableLoading" :single-line="false" flex-height style="height: 100%; padding: 8px; flex: 1 1 auto" />
|
||||
</NFlex>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
315
src/pages/log/vimp-log-page.vue
Normal file
315
src/pages/log/vimp-log-page.vue
Normal file
@@ -0,0 +1,315 @@
|
||||
<script lang="ts">
|
||||
const vimpLogTypeOptions: SelectOption[] = [
|
||||
{ label: '视频点播', value: 10001 },
|
||||
{ label: '视频回放', value: 10002 },
|
||||
// { label: '停止视频回放', value: 10003 },
|
||||
// { label: '回放暂停', value: 10004 },
|
||||
// { label: '回放恢复', value: 10005 },
|
||||
// { label: '回放倍速播放', value: 10006 },
|
||||
// { label: '回放拖动播放', value: 10007 },
|
||||
{ label: '云台指令', value: 10008 },
|
||||
{ label: '根据国标码查录像', value: 10009 },
|
||||
{ label: '下载录像', value: 10010 },
|
||||
{ label: '停止下载录像', value: 10011 },
|
||||
{ label: '获取预置位列表', value: 10012 },
|
||||
{ label: '设置本平台分屏数量', value: 20001 },
|
||||
{ label: '设置本平台monitor播放的摄像机rtsp流', value: 20002 },
|
||||
{ label: '停止本平台monitor播放的摄像机rtsp流', value: 20003 },
|
||||
{ label: '启动非报警时序', value: 30001 },
|
||||
{ label: '停止非报警时序', value: 30002 },
|
||||
{ label: '暂停非报警时序', value: 30003 },
|
||||
{ label: '调用组切', value: 30004 },
|
||||
{ label: '启动报警时序', value: 40001 },
|
||||
{ label: '停止报警时序', value: 40002 },
|
||||
{ label: '分页查询报警', value: 50001 },
|
||||
{ label: '确认报警', value: 50002 },
|
||||
{ label: '删除报警', value: 50004 },
|
||||
];
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { exportVimpLogApi, pageVimpLogApi, type NdmVimpLog, type NdmVimpLogResultVO, type PageQueryExtra, type Station } from '@/apis';
|
||||
import { useStationStore } from '@/stores';
|
||||
import { downloadByData, parseErrorFeedback } from '@/utils';
|
||||
import { useMutation } from '@tanstack/vue-query';
|
||||
import { isCancel } from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
import {
|
||||
NButton,
|
||||
NDataTable,
|
||||
NDatePicker,
|
||||
NFlex,
|
||||
NForm,
|
||||
NFormItemGi,
|
||||
NGrid,
|
||||
NGridItem,
|
||||
NSelect,
|
||||
NTag,
|
||||
type DataTableColumns,
|
||||
type DataTableRowData,
|
||||
type PaginationProps,
|
||||
type SelectOption,
|
||||
} from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { computed, h, onBeforeUnmount, reactive, ref, watch, watchEffect } from 'vue';
|
||||
|
||||
interface SearchFields extends PageQueryExtra<NdmVimpLog> {
|
||||
stationCode?: Station['code'];
|
||||
logType_in: number[];
|
||||
createdTime: [string, string];
|
||||
}
|
||||
|
||||
const stationStore = useStationStore();
|
||||
const { stations, onlineStations } = storeToRefs(stationStore);
|
||||
|
||||
const stationSelectOptions = computed(() => {
|
||||
return stations.value.map<SelectOption>((station) => ({
|
||||
label: station.name,
|
||||
value: station.code,
|
||||
disabled: !station.online,
|
||||
}));
|
||||
});
|
||||
|
||||
const searchFields = ref<SearchFields>({
|
||||
logType_in: [],
|
||||
createdTime: [dayjs().startOf('date').subtract(1, 'week').format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf('date').format('YYYY-MM-DD HH:mm:ss')] as [string, string],
|
||||
});
|
||||
const resetSearchFields = () => {
|
||||
searchFields.value = {
|
||||
stationCode: onlineStations.value.at(0)?.code,
|
||||
logType_in: [],
|
||||
createdTime: [dayjs().startOf('date').subtract(1, 'week').format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf('date').format('YYYY-MM-DD HH:mm:ss')] as [string, string],
|
||||
};
|
||||
};
|
||||
const getExtraFields = (): PageQueryExtra<NdmVimpLog> => {
|
||||
const createdTime_precisest = searchFields.value.createdTime[0];
|
||||
const createdTime_preciseed = searchFields.value.createdTime[1];
|
||||
const logType_in = (searchFields.value.logType_in ?? []).length > 0 ? [...searchFields.value.logType_in] : undefined;
|
||||
return {
|
||||
createdTime_precisest,
|
||||
createdTime_preciseed,
|
||||
logType_in,
|
||||
};
|
||||
};
|
||||
|
||||
const searchFieldsChanged = ref(false);
|
||||
watch(searchFields, () => {
|
||||
searchFieldsChanged.value = true;
|
||||
});
|
||||
|
||||
const tableColumns: DataTableColumns<NdmVimpLogResultVO> = [
|
||||
{ title: '时间', key: 'createdTime' },
|
||||
{
|
||||
title: '操作类型',
|
||||
key: 'logType',
|
||||
render: (rowData) => {
|
||||
const option = vimpLogTypeOptions.find((option) => option.value === rowData.logType);
|
||||
return `${option?.label ?? ''}`;
|
||||
},
|
||||
},
|
||||
{ title: '请求IP', key: 'requestIp' },
|
||||
{ title: '耗时(ms)', key: 'consumedTime' },
|
||||
{ title: '被调用设备', key: 'targetCode' },
|
||||
];
|
||||
|
||||
const tableData = ref<DataTableRowData[]>([]);
|
||||
|
||||
const DEFAULT_PAGE_SIZE = 10;
|
||||
const pagination = reactive<PaginationProps>({
|
||||
showSizePicker: true,
|
||||
page: 1,
|
||||
pageSize: DEFAULT_PAGE_SIZE,
|
||||
pageSizes: [5, 10, 20, 50, 80, 100],
|
||||
itemCount: 0,
|
||||
prefix: ({ itemCount }) => {
|
||||
return h('div', {}, { default: () => `共${itemCount}条` });
|
||||
},
|
||||
onUpdatePage: (page: number) => {
|
||||
pagination.page = page;
|
||||
getTableData();
|
||||
},
|
||||
onUpdatePageSize: (pageSize: number) => {
|
||||
pagination.pageSize = pageSize;
|
||||
pagination.page = 1;
|
||||
getTableData();
|
||||
},
|
||||
});
|
||||
|
||||
const abortController = ref(new AbortController());
|
||||
|
||||
const { mutate: getTableData, isPending: tableLoading } = useMutation({
|
||||
mutationFn: async () => {
|
||||
abortController.value.abort();
|
||||
abortController.value = new AbortController();
|
||||
|
||||
if (!searchFields.value.stationCode) throw Error('请选择车站');
|
||||
|
||||
const stationCode = searchFields.value.stationCode;
|
||||
const signal = abortController.value.signal;
|
||||
|
||||
const res = await pageVimpLogApi(
|
||||
{
|
||||
model: {},
|
||||
extra: getExtraFields(),
|
||||
current: pagination.page ?? 1,
|
||||
size: pagination.pageSize ?? DEFAULT_PAGE_SIZE,
|
||||
order: 'descending',
|
||||
sort: 'id',
|
||||
},
|
||||
{
|
||||
stationCode,
|
||||
signal,
|
||||
},
|
||||
);
|
||||
return res;
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
const { records, size, total } = res;
|
||||
pagination.pageSize = parseInt(size);
|
||||
pagination.itemCount = parseInt(total);
|
||||
tableData.value = records;
|
||||
},
|
||||
onError: (error) => {
|
||||
if (isCancel(error)) return;
|
||||
console.error(error);
|
||||
const errorFeedback = parseErrorFeedback(error);
|
||||
window.$message.error(errorFeedback);
|
||||
},
|
||||
});
|
||||
|
||||
const onClickReset = () => {
|
||||
resetSearchFields();
|
||||
pagination.page = 1;
|
||||
pagination.pageSize = DEFAULT_PAGE_SIZE;
|
||||
pagination.itemCount = 0;
|
||||
getTableData();
|
||||
};
|
||||
const onClickQuery = () => {
|
||||
if (searchFieldsChanged.value) {
|
||||
pagination.page = 1;
|
||||
pagination.pageSize = DEFAULT_PAGE_SIZE;
|
||||
searchFieldsChanged.value = false;
|
||||
}
|
||||
getTableData();
|
||||
};
|
||||
|
||||
const { mutate: exportTableData, isPending: exporting } = useMutation({
|
||||
mutationFn: async () => {
|
||||
abortController.value.abort();
|
||||
abortController.value = new AbortController();
|
||||
|
||||
if (!searchFields.value.stationCode) throw Error('请选择车站');
|
||||
|
||||
const stationCode = searchFields.value.stationCode;
|
||||
const signal = abortController.value.signal;
|
||||
|
||||
const data = await exportVimpLogApi(
|
||||
{
|
||||
model: {},
|
||||
extra: getExtraFields(),
|
||||
current: pagination.page ?? 1,
|
||||
size: pagination.pageSize ?? 10,
|
||||
order: 'descending',
|
||||
sort: 'id',
|
||||
},
|
||||
{
|
||||
stationCode,
|
||||
signal,
|
||||
},
|
||||
);
|
||||
return data;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
const time = dayjs().format('YYYY-MM-DD_HH-mm-ss');
|
||||
downloadByData(data, `视频操作日志_${time}.xlsx`);
|
||||
},
|
||||
onError: (error) => {
|
||||
if (isCancel(error)) return;
|
||||
console.error(error);
|
||||
const errorFeedback = parseErrorFeedback(error);
|
||||
window.$message.error(errorFeedback);
|
||||
},
|
||||
});
|
||||
|
||||
// 进入页面时选择首个在线的车站
|
||||
// 当页面刷新时，车站列表还没有加载完成，defaultStation不存在，if条件为false，
|
||||
// 等待车站列表加载完成后，defaultStation会更新，if条件为true，会更新选择的车站并加载日志记录。
|
||||
// 当从其他页面跳转过来时，车站列表已经存在，defaultStation存在，if条件为true，会更新选择的车站并加载日志记录。
|
||||
// 由于if条件是and逻辑，所以即使defaultStation因车站状态变化而更新，由于已经选择了车站，所以if条件为false。
|
||||
const defaultStation = computed(() => onlineStations.value.at(0));
|
||||
watchEffect(() => {
|
||||
if (defaultStation.value?.code && !searchFields.value.stationCode) {
|
||||
searchFields.value.stationCode = defaultStation.value.code;
|
||||
}
|
||||
});
|
||||
// 当选中的车站第一次有值时，主动获取数据
|
||||
watch(
|
||||
() => searchFields.value.stationCode,
|
||||
(newCode, oldCode) => {
|
||||
if (oldCode === undefined && !!newCode) {
|
||||
getTableData();
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
abortController.value.abort();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NFlex vertical :size="0" style="height: 100%">
|
||||
<!-- 查询面板 -->
|
||||
<NForm style="flex: 0 0 auto; padding: 8px">
|
||||
<NGrid cols="3" :x-gap="24">
|
||||
<NFormItemGi span="1" label="车站" label-placement="left">
|
||||
<NSelect
|
||||
v-model:value="searchFields.stationCode"
|
||||
:options="stationSelectOptions"
|
||||
:render-label="
|
||||
(option: SelectOption) => {
|
||||
return [
|
||||
h(NTag, { type: option.disabled ? 'error' : 'success', size: 'tiny' }, { default: () => (option.disabled ? '离线' : '在线') }),
|
||||
h('span', {}, { default: () => `${option.label}` }),
|
||||
];
|
||||
}
|
||||
"
|
||||
:multiple="false"
|
||||
clearable
|
||||
/>
|
||||
</NFormItemGi>
|
||||
<NFormItemGi :span="1" label="日志类型" label-placement="left">
|
||||
<NSelect v-model:value="searchFields.logType_in" :options="vimpLogTypeOptions" multiple clearable />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi span="1" label="时间" label-placement="left">
|
||||
<NDatePicker v-model:formatted-value="searchFields.createdTime" type="datetimerange" />
|
||||
</NFormItemGi>
|
||||
</NGrid>
|
||||
<!-- 操作按钮 -->
|
||||
<NGrid :cols="1">
|
||||
<NGridItem>
|
||||
<NFlex>
|
||||
<NButton @click="onClickReset">重置</NButton>
|
||||
<NButton type="primary" :loading="tableLoading" @click="onClickQuery">查询</NButton>
|
||||
</NFlex>
|
||||
</NGridItem>
|
||||
</NGrid>
|
||||
</NForm>
|
||||
|
||||
<!-- 数据表格工具栏 -->
|
||||
<NFlex align="center" style="padding: 8px; flex: 0 0 auto">
|
||||
<div style="font-size: medium">视频平台日志</div>
|
||||
<NFlex style="margin-left: auto">
|
||||
<NButton type="primary" :loading="exporting" @click="() => exportTableData()">导出</NButton>
|
||||
</NFlex>
|
||||
</NFlex>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<NDataTable remote :columns="tableColumns" :data="tableData" :pagination="pagination" :loading="tableLoading" :single-line="false" flex-height style="height: 100%; padding: 8px; flex: 1 1 auto" />
|
||||
</NFlex>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
Reference in New Issue
Block a user