|
@@ -0,0 +1,136 @@
|
|
|
+<template>
|
|
|
+ <BasicTable ref="historyTable" @register="register" :data-source="data">
|
|
|
+ <template #bodyCell="{ column, record }">
|
|
|
+ <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">
|
|
|
+ {{ record.warnFlag == '0' ? '正常' : '报警' }}
|
|
|
+ </a-tag>
|
|
|
+ <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">
|
|
|
+ {{ record.netStatus == '0' ? '断开' : '连接' }}
|
|
|
+ </a-tag>
|
|
|
+ </template>
|
|
|
+ <template #form-submitBefore>
|
|
|
+ <a-button type="primary" preIcon="ant-design:search-outlined" @click="search">查询</a-button>
|
|
|
+ </template>
|
|
|
+ </BasicTable>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+ import { onMounted, ref, shallowRef } from 'vue';
|
|
|
+ import { BasicColumn, BasicTableProps, PaginationProps, FormProps, FormSchema, BasicTable } from '/@/components/Table';
|
|
|
+ import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
|
|
|
+ import { defaultFormProps, defaultPaginationProps, getDefaultSchemas, defaultTableProps } from './history.data';
|
|
|
+ import { getDeviceList, list } from './history.api';
|
|
|
+ import { useListPage } from '/@/hooks/system/useListPage';
|
|
|
+
|
|
|
+ const props = withDefaults(
|
|
|
+ defineProps<{
|
|
|
+ /** 表格项配置,默认由deviceCode获取且联动dictCode,可以覆写,覆写后将不支持联动,参考BaiscTable */
|
|
|
+ columns?: BasicColumn[];
|
|
|
+ /** 表格操作项配置,默认为空,可以覆写 */
|
|
|
+ actionColumns?: BasicColumn;
|
|
|
+ /** 查询表单项配置,默认联动dictCode,可以覆写,覆写后将不支持联动,提供formProps时此项无效,参考BaiscTable */
|
|
|
+ schemas?: FormSchema[];
|
|
|
+ /** 表格分页配置,可以覆写,参考BaiscTable */
|
|
|
+ pagination?: PaginationProps;
|
|
|
+ /** 设备编码,该编码用于从字段/点表配置中读出表头,示例:forcFan */
|
|
|
+ deviceCode: string;
|
|
|
+ /** 字典编码,该编码用于从字典配置中读出设备项,示例:forcFan_dict */
|
|
|
+ dictCode: string;
|
|
|
+ /** 表格配置,参考BaiscTable,该值会与默认的配置进行浅合并,这里提供的任何配置都是优先的 */
|
|
|
+ tableProps?: BasicTableProps;
|
|
|
+ /** 查询表单配置,参考BaiscTable */
|
|
|
+ formProps?: FormProps;
|
|
|
+ }>(),
|
|
|
+ {
|
|
|
+ deviceCode: '',
|
|
|
+ dictCode: '',
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ // 初始化表格,将默认配置与props提供的配置合并
|
|
|
+ const defaultSchemas = getDefaultSchemas(props.dictCode);
|
|
|
+ const defaultColumns = getTableHeaderColumns(props.deviceCode.concat('_history'));
|
|
|
+
|
|
|
+ const { tableContext } = useListPage({
|
|
|
+ tableProps: {
|
|
|
+ ...defaultTableProps,
|
|
|
+ columns: props.columns || defaultColumns,
|
|
|
+ actionColumn: props.actionColumns,
|
|
|
+ showActionColumn: Boolean(props.actionColumns),
|
|
|
+ formConfig: props.formProps || {
|
|
|
+ ...defaultFormProps,
|
|
|
+ schemas: props.schemas || defaultSchemas,
|
|
|
+ },
|
|
|
+ pagination: props.pagination || defaultPaginationProps,
|
|
|
+ ...props.tableProps,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const [register, { getForm, setLoading, setColumns, getPaginationRef, setPagination }] = tableContext;
|
|
|
+
|
|
|
+ // 表格数据相关
|
|
|
+ const data = shallowRef([]);
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ async function search() {
|
|
|
+ const form = getForm();
|
|
|
+ await form.validate();
|
|
|
+ await fetchData(form.getFieldsValue());
|
|
|
+ }
|
|
|
+
|
|
|
+ // 分站类型,不同的分站类型对应不同的方式获取历史数据
|
|
|
+ const deviceInfo = ref({});
|
|
|
+
|
|
|
+ // 获取设备列表信息,初始化一些信息
|
|
|
+ async function fetchDevice() {
|
|
|
+ const results = await getDeviceList({ devicetype: props.deviceCode, pageSize: 10000 });
|
|
|
+
|
|
|
+ const id = results[0].id || results[0].deviceID;
|
|
|
+ deviceInfo.value = results[0];
|
|
|
+ await getForm().setFieldsValue({ gdeviceid: id });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 核心,获取表格的数据
|
|
|
+ function fetchData(formData: Record<string, unknown>) {
|
|
|
+ setLoading(true);
|
|
|
+
|
|
|
+ const pagination = getPaginationRef() as PaginationProps;
|
|
|
+ list(
|
|
|
+ props.deviceCode,
|
|
|
+ deviceInfo,
|
|
|
+ {
|
|
|
+ ...formData,
|
|
|
+ pageNo: pagination.current,
|
|
|
+ pageSize: pagination.pageSize,
|
|
|
+ column: 'createTime',
|
|
|
+ strtype: props.deviceCode + '*',
|
|
|
+ isEmployee: props.deviceCode.startsWith('vehicle') ? false : true,
|
|
|
+ },
|
|
|
+ pagination
|
|
|
+ )
|
|
|
+ .then(({ records, total, current }) => {
|
|
|
+ // 表格的列需要默认情况下需要和设备列表联动
|
|
|
+ defaultColumns.forEach((col) => {
|
|
|
+ col.dataIndex = `${formData.deviceid}${col.dataIndex}`;
|
|
|
+ });
|
|
|
+ setColumns(defaultColumns);
|
|
|
+
|
|
|
+ setPagination({
|
|
|
+ current,
|
|
|
+ total,
|
|
|
+ });
|
|
|
+ data.value = records;
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ setLoading(false);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ fetchDevice();
|
|
|
+ search();
|
|
|
+ });
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+ @import '/@/design/vent/color.less';
|
|
|
+</style>
|