mirror of
https://github.com/tencentmusic/supersonic.git
synced 2026-04-25 00:54:21 +08:00
[improvement][headless-fe] Added the ability to export metrics and dimensions to a specific target. (#801)
* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab. [improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions. [improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager. * [improvement][semantic-fe] Add time granularity setting in the data source configuration. * [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility * [improvement][semantic-fe] Modification of data source creation prompt wording" * [improvement][semantic-fe] metric market experience optimization * [improvement][semantic-fe] enhance the analysis of metric trends * [improvement][semantic-fe] optimize the presentation of metric trend permissions * [improvement][semantic-fe] add metric trend download functionality * [improvement][semantic-fe] fix the dimension initialization issue in metric correlation * [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source. * [improvement][semantic-fe] Optimizing pagination logic and some CSS styles * [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum" * [improvement][semantic-fe] Fixing the default value setting for the indicator list * [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models * [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API * [improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators * [improvement][semantic-fe] Optimizing the logic for setting dimension values and editing data sources, and adding system settings functionality * [improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component. * [improvement][semantic-fe] Adding the ability to filter dimensions based on whether they are tags or not. * [improvement][semantic-fe] Adding the ability to edit relationships between models in the canvas. * [improvement][semantic-fe] Updating the datePicker component to use dayjs instead. * [improvement][semantic-fe] Fixing the issue with passing the model ID for dimensions in the indicator market. * [improvement][semantic-fe] Fixing the abnormal state of the popup when creating a model. * [improvement][semantic-fe] Adding permission logic for bulk operations in the indicator market. * [improvement][semantic-fe] Adding the ability to download and transpose data. * [improvement][semantic-fe] Fixing the initialization issue with the date selection component in the indicator details page when switching time granularity. * [improvement][semantic-fe] Fixing the logic error in the dimension value setting. * [improvement][semantic-fe] Fixing the synchronization issue with the question and answer settings information. * [improvement][semantic-fe] Optimizing the canvas functionality for better performance and user experience. * [improvement][semantic-fe] Optimizing the update process for drawing model relationship edges in the canvas. * [improvement][semantic-fe] Changing the line type for canvas connections. * [improvement][semantic-fe] Replacing the initialization variable from "semantic" to "headless". * [improvement][semantic-fe] Fixing the missing migration issue for default drill-down dimension configuration in model editing. Additionally, optimizing the data retrieval method for initializing fields in the model. * [improvement][semantic-fe] Updating the logic for the fieldName. * [improvement][semantic-fe] Adjusting the position of the metrics tab. * [improvement][semantic-fe] Changing the 字段名称 to 英文名称. * [improvement][semantic-fe] Fix metric measurement deletion. * [improvement][semantic-fe] UI optimization for metric details page. * [improvement][semantic-fe] UI optimization for metric details page. * [improvement][semantic-fe] UI adjustment for metric details page. * [improvement][semantic-fe] The granularity field in the time type of model editing now supports setting it as empty. * [improvement][semantic-fe] Added field type and metric type to the metric creation options. * [improvement][semantic-fe] The organization structure selection feature has been added to the permission management. * [improvement][semantic-fe] Improved user experience for the metric list. * [improvement][semantic-fe] fix update the metric list. * [improvement][headless-fe] Added view management functionality. * [improvement][headless-fe] The view management functionality has been added. This feature allows users to create, edit, and manage different views within the system. * [improvement][headless-fe] Added model editing side effect detection. * [improvement][headless-fe] Fixed the logic error in view editing. * [improvement][headless-fe] Fixed the issue with initializing dimension associations in metric settings. * [improvement][headless-fe] Added the ability to hide the Q&A settings entry point. * [improvement][headless-fe] Fixed the issue with selecting search results in metric field creation. * [improvement][headless-fe] Added search functionality to the field list in model editing. * [improvement][headless-fe] fix the field list in model editing * [improvement][headless-fe] Restructured the data for the dimension value settings interface. * [improvement][headless-fe] Added dynamic variable functionality to model creation based on SQL scripts. * [improvement][headless-fe] Added support for passing dynamic variables as parameters in the executeSql function. * [improvement][headless-fe] Resolved the issue where users were unable to select all options for dimensions, metrics, and fields in the metric generation process. * [improvement][headless-fe] Replaced the term "view" with "dataset" * [improvement][headless-fe] Added the ability to export metrics and dimensions to a specific target.
This commit is contained in:
tristanliu
@@ -0,0 +1,151 @@
|
||||
import { message, Tabs, Button, Space } from 'antd';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { getTagData } from '../service';
|
||||
import { connect, useParams, history } from 'umi';
|
||||
import type { StateType } from '../model';
|
||||
import styles from './style.less';
|
||||
import { ArrowLeftOutlined } from '@ant-design/icons';
|
||||
import TagTrendSection from './components/TagTrendSection';
|
||||
import { ISemantic } from '../data';
|
||||
import TagInfoSider from './components/TagInfoSider';
|
||||
import { getDimensionList, queryMetric } from '../service';
|
||||
import type { TabsProps } from 'antd';
|
||||
|
||||
type Props = Record<string, any>;
|
||||
|
||||
const TagDetail: React.FC<Props> = () => {
|
||||
const params: any = useParams();
|
||||
const tagId = params.tagId;
|
||||
const [tagData, setTagData] = useState<ISemantic.IMetricItem>();
|
||||
const [dimensionMap, setDimensionMap] = useState<Record<string, ISemantic.IDimensionItem>>({});
|
||||
|
||||
const [metricMap, setMetricMap] = useState<Record<string, ISemantic.IMetricItem>>({});
|
||||
|
||||
const [relationDimensionOptions, setRelationDimensionOptions] = useState<
|
||||
{ value: string; label: string; modelId: number }[]
|
||||
>([]);
|
||||
|
||||
useEffect(() => {
|
||||
queryTagData(tagId);
|
||||
}, [tagId]);
|
||||
|
||||
const queryTagData = async (tagId: number) => {
|
||||
const { code, data, msg } = await getTagData(tagId);
|
||||
if (code === 200) {
|
||||
queryDimensionList(data.modelId);
|
||||
queryMetricList(data.modelId);
|
||||
setTagData({ ...data });
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
const tabItems: TabsProps['items'] = [
|
||||
{
|
||||
key: 'trend',
|
||||
label: '图表',
|
||||
children: (
|
||||
// <></>
|
||||
<TagTrendSection
|
||||
tagData={tagData}
|
||||
relationDimensionOptions={relationDimensionOptions}
|
||||
dimensionList={[]}
|
||||
/>
|
||||
),
|
||||
},
|
||||
// {
|
||||
// key: 'metricCaliberInput',
|
||||
// label: '基础信息',
|
||||
// children: <></>,
|
||||
// },
|
||||
// {
|
||||
// key: 'metricDataRemark',
|
||||
// label: '备注',
|
||||
// children: <></>,
|
||||
// },
|
||||
];
|
||||
|
||||
const queryDimensionList = async (modelId: number) => {
|
||||
const { code, data, msg } = await getDimensionList({ modelId });
|
||||
if (code === 200 && Array.isArray(data?.list)) {
|
||||
const { list } = data;
|
||||
setDimensionMap(
|
||||
list.reduce(
|
||||
(infoMap: Record<string, ISemantic.IDimensionItem>, item: ISemantic.IDimensionItem) => {
|
||||
infoMap[`${item.id}`] = item;
|
||||
return infoMap;
|
||||
},
|
||||
{},
|
||||
),
|
||||
);
|
||||
} else {
|
||||
message.error(msg);
|
||||
}
|
||||
};
|
||||
|
||||
const queryMetricList = async (modelId: number) => {
|
||||
const { code, data, msg } = await queryMetric({
|
||||
modelId: modelId,
|
||||
});
|
||||
const { list } = data || {};
|
||||
if (code === 200) {
|
||||
setMetricMap(
|
||||
list.reduce(
|
||||
(infoMap: Record<string, ISemantic.IMetricItem>, item: ISemantic.IMetricItem) => {
|
||||
infoMap[`${item.id}`] = item;
|
||||
return infoMap;
|
||||
},
|
||||
{},
|
||||
),
|
||||
);
|
||||
} else {
|
||||
message.error(msg);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.tagDetailWrapper}>
|
||||
<div className={styles.tagDetail}>
|
||||
<div className={styles.tabContainer}>
|
||||
<Tabs
|
||||
defaultActiveKey="trend"
|
||||
items={tabItems}
|
||||
tabBarExtraContent={{
|
||||
right: (
|
||||
<Button
|
||||
size="middle"
|
||||
type="link"
|
||||
key="backListBtn"
|
||||
onClick={() => {
|
||||
history.push('/tag/market');
|
||||
}}
|
||||
>
|
||||
<Space>
|
||||
<ArrowLeftOutlined />
|
||||
返回列表页
|
||||
</Space>
|
||||
</Button>
|
||||
),
|
||||
}}
|
||||
size="large"
|
||||
className={styles.tagDetailTab}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.siderContainer}>
|
||||
<TagInfoSider
|
||||
dimensionMap={dimensionMap}
|
||||
metricMap={metricMap}
|
||||
// relationDimensionOptions={relationDimensionOptions}
|
||||
tagData={tagData}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect(({ domainManger }: { domainManger: StateType }) => ({
|
||||
domainManger,
|
||||
}))(TagDetail);
|
||||
@@ -0,0 +1,375 @@
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-table';
|
||||
import ProTable from '@ant-design/pro-table';
|
||||
import { message, Space, Popconfirm } from 'antd';
|
||||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import type { Dispatch } from 'umi';
|
||||
import { connect, useModel } from 'umi';
|
||||
import type { StateType } from '../model';
|
||||
import { SENSITIVE_LEVEL_ENUM } from '../constant';
|
||||
import { getTagList, deleteTag, batchUpdateTagStatus } from '../service';
|
||||
import TagFilter from './components/TagFilter';
|
||||
import TagInfoCreateForm from './components/TagInfoCreateForm';
|
||||
import { SemanticNodeType, StatusEnum } from '../enum';
|
||||
import moment from 'moment';
|
||||
import styles from './style.less';
|
||||
import { ISemantic } from '../data';
|
||||
import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
|
||||
import { ColumnsConfig } from '../components/TableColumnRender';
|
||||
|
||||
type Props = {
|
||||
dispatch: Dispatch;
|
||||
domainManger: StateType;
|
||||
};
|
||||
|
||||
type QueryMetricListParams = {
|
||||
id?: string;
|
||||
name?: string;
|
||||
bizName?: string;
|
||||
sensitiveLevel?: string;
|
||||
type?: string;
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
const { initialState = {} } = useModel('@@initialState');
|
||||
|
||||
const { currentUser = {} } = initialState as any;
|
||||
const { selectDomainId, selectModelId: modelId } = domainManger;
|
||||
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
|
||||
const defaultPagination = {
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
};
|
||||
const [pagination, setPagination] = useState(defaultPagination);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [dataSource, setDataSource] = useState<ISemantic.ITagItem[]>([]);
|
||||
const [tagItem, setTagItem] = useState<ISemantic.ITagItem>();
|
||||
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
||||
const [filterParams, setFilterParams] = useState<Record<string, any>>({
|
||||
showType: localStorage.getItem('metricMarketShowType') === '1' ? true : false,
|
||||
});
|
||||
|
||||
const [downloadLoading, setDownloadLoading] = useState<boolean>(false);
|
||||
|
||||
const [hasAllPermission, setHasAllPermission] = useState<boolean>(true);
|
||||
|
||||
const actionRef = useRef<ActionType>();
|
||||
|
||||
useEffect(() => {
|
||||
queryTagList(filterParams);
|
||||
}, []);
|
||||
|
||||
const queryBatchUpdateStatus = async (ids: React.Key[], status: StatusEnum) => {
|
||||
if (Array.isArray(ids) && ids.length === 0) {
|
||||
return;
|
||||
}
|
||||
const { code, msg } = await batchUpdateTagStatus({
|
||||
ids,
|
||||
status,
|
||||
});
|
||||
if (code === 200) {
|
||||
queryTagList(filterParams);
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
const queryTagList = async (params: QueryMetricListParams = {}, disabledLoading = false) => {
|
||||
if (!disabledLoading) {
|
||||
setLoading(true);
|
||||
}
|
||||
const { code, data, msg } = await getTagList({
|
||||
...pagination,
|
||||
...params,
|
||||
createdBy: params.onlyShowMe ? currentUser.name : null,
|
||||
pageSize: params.showType ? 100 : params.pageSize || pagination.pageSize,
|
||||
});
|
||||
setLoading(false);
|
||||
const { list, pageSize, pageNum, total } = data || {};
|
||||
let resData: any = {};
|
||||
if (code === 200) {
|
||||
if (!params.showType) {
|
||||
setPagination({
|
||||
...pagination,
|
||||
pageSize: Math.min(pageSize, 100),
|
||||
current: pageNum,
|
||||
total,
|
||||
});
|
||||
}
|
||||
|
||||
setDataSource(list);
|
||||
resData = {
|
||||
data: list || [],
|
||||
success: true,
|
||||
};
|
||||
} else {
|
||||
message.error(msg);
|
||||
setDataSource([]);
|
||||
resData = {
|
||||
data: [],
|
||||
total: 0,
|
||||
success: false,
|
||||
};
|
||||
}
|
||||
return resData;
|
||||
};
|
||||
|
||||
const deleteMetricQuery = async (id: number) => {
|
||||
const { code, msg } = await deleteTag(id);
|
||||
if (code === 200) {
|
||||
setTagItem(undefined);
|
||||
queryTagList(filterParams);
|
||||
} else {
|
||||
message.error(msg);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMetricEdit = (tagItem: ISemantic.ITagItem) => {
|
||||
setTagItem(tagItem);
|
||||
setCreateModalVisible(true);
|
||||
};
|
||||
|
||||
const columnsConfig = ColumnsConfig({
|
||||
indicatorInfo: {
|
||||
url: '/tag/detail/',
|
||||
starType: 'tag',
|
||||
},
|
||||
});
|
||||
|
||||
const columns: ProColumns[] = [
|
||||
{
|
||||
dataIndex: 'id',
|
||||
title: 'ID',
|
||||
width: 80,
|
||||
fixed: 'left',
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
dataIndex: 'name',
|
||||
title: '标签',
|
||||
width: 280,
|
||||
fixed: 'left',
|
||||
render: columnsConfig.indicatorInfo.render,
|
||||
},
|
||||
{
|
||||
dataIndex: 'sensitiveLevel',
|
||||
title: '敏感度',
|
||||
width: 150,
|
||||
valueEnum: SENSITIVE_LEVEL_ENUM,
|
||||
render: columnsConfig.sensitiveLevel.render,
|
||||
},
|
||||
|
||||
{
|
||||
dataIndex: 'description',
|
||||
title: '描述',
|
||||
search: false,
|
||||
width: 300,
|
||||
render: columnsConfig.description.render,
|
||||
},
|
||||
{
|
||||
dataIndex: 'status',
|
||||
title: '状态',
|
||||
width: 180,
|
||||
search: false,
|
||||
render: columnsConfig.state.render,
|
||||
},
|
||||
{
|
||||
dataIndex: 'createdBy',
|
||||
title: '创建人',
|
||||
// width: 150,
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
dataIndex: 'updatedAt',
|
||||
title: '更新时间',
|
||||
search: false,
|
||||
render: (value: any) => {
|
||||
return value && value !== '-' ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '-';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'x',
|
||||
valueType: 'option',
|
||||
width: 180,
|
||||
render: (_, record) => {
|
||||
if (record.hasAdminRes) {
|
||||
return (
|
||||
<Space>
|
||||
<a
|
||||
key="metricEditBtn"
|
||||
onClick={() => {
|
||||
handleMetricEdit(record);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
|
||||
<Popconfirm
|
||||
title="确认删除？"
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
onConfirm={async () => {
|
||||
deleteMetricQuery(record.id);
|
||||
}}
|
||||
>
|
||||
<a
|
||||
key="metricDeleteBtn"
|
||||
onClick={() => {
|
||||
setTagItem(record);
|
||||
}}
|
||||
>
|
||||
删除
|
||||
</a>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
);
|
||||
} else {
|
||||
return <></>;
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const handleFilterChange = async (filterParams: {
|
||||
key: string;
|
||||
sensitiveLevel: string[];
|
||||
showFilter: string[];
|
||||
type: string;
|
||||
}) => {
|
||||
const { sensitiveLevel, type, showFilter } = filterParams;
|
||||
const params: QueryMetricListParams = { ...filterParams };
|
||||
const sensitiveLevelValue = sensitiveLevel?.[0];
|
||||
const showFilterValue = showFilter?.[0];
|
||||
const typeValue = type?.[0];
|
||||
showFilterValue ? (params[showFilterValue] = true) : null;
|
||||
params.sensitiveLevel = sensitiveLevelValue;
|
||||
params.type = typeValue;
|
||||
setFilterParams(params);
|
||||
await queryTagList(
|
||||
{
|
||||
...params,
|
||||
...defaultPagination,
|
||||
},
|
||||
filterParams.key ? false : true,
|
||||
);
|
||||
};
|
||||
|
||||
const rowSelection = {
|
||||
onChange: (selectedRowKeys: React.Key[]) => {
|
||||
const permissionList: boolean[] = [];
|
||||
selectedRowKeys.forEach((id: React.Key) => {
|
||||
const target = dataSource.find((item) => {
|
||||
return item.id === id;
|
||||
});
|
||||
if (target) {
|
||||
permissionList.push(target.hasAdminRes);
|
||||
}
|
||||
});
|
||||
if (permissionList.includes(false)) {
|
||||
setHasAllPermission(false);
|
||||
} else {
|
||||
setHasAllPermission(true);
|
||||
}
|
||||
setSelectedRowKeys(selectedRowKeys);
|
||||
},
|
||||
// getCheckboxProps: (record: ISemantic.ITagItem) => ({
|
||||
// disabled: !record.hasAdminRes,
|
||||
// }),
|
||||
};
|
||||
|
||||
const onMenuClick = (key: string) => {
|
||||
switch (key) {
|
||||
case 'batchStart':
|
||||
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.ONLINE);
|
||||
break;
|
||||
case 'batchStop':
|
||||
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.OFFLINE);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.TagFilterWrapper}>
|
||||
<TagFilter
|
||||
initFilterValues={filterParams}
|
||||
onFiltersChange={(_, values) => {
|
||||
if (_.showType !== undefined) {
|
||||
setLoading(true);
|
||||
setDataSource([]);
|
||||
}
|
||||
handleFilterChange(values);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<>
|
||||
<ProTable
|
||||
className={`${styles.tagTable}`}
|
||||
actionRef={actionRef}
|
||||
rowKey="id"
|
||||
search={false}
|
||||
dataSource={dataSource}
|
||||
columns={columns}
|
||||
pagination={pagination}
|
||||
size="large"
|
||||
scroll={{ x: 1500 }}
|
||||
tableAlertRender={() => {
|
||||
return false;
|
||||
}}
|
||||
sticky={{ offsetHeader: 0 }}
|
||||
rowSelection={{
|
||||
type: 'checkbox',
|
||||
...rowSelection,
|
||||
}}
|
||||
toolBarRender={() => [
|
||||
<BatchCtrlDropDownButton
|
||||
key="ctrlBtnList"
|
||||
downloadLoading={downloadLoading}
|
||||
onDeleteConfirm={() => {
|
||||
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
|
||||
}}
|
||||
hiddenList={['batchDownload']}
|
||||
disabledList={hasAllPermission ? [] : ['batchStart', 'batchStop', 'batchDelete']}
|
||||
onMenuClick={onMenuClick}
|
||||
/>,
|
||||
]}
|
||||
loading={loading}
|
||||
onChange={(data: any) => {
|
||||
const { current, pageSize, total } = data;
|
||||
const pagin = {
|
||||
current,
|
||||
pageSize,
|
||||
total,
|
||||
};
|
||||
setPagination(pagin);
|
||||
queryTagList({ ...pagin, ...filterParams });
|
||||
}}
|
||||
options={{ reload: false, density: false, fullScreen: false }}
|
||||
/>
|
||||
</>
|
||||
|
||||
{createModalVisible && (
|
||||
<TagInfoCreateForm
|
||||
domainId={selectDomainId}
|
||||
modelId={Number(modelId)}
|
||||
createModalVisible={createModalVisible}
|
||||
tagItem={tagItem}
|
||||
onSubmit={() => {
|
||||
setCreateModalVisible(false);
|
||||
queryTagList({ ...filterParams, ...defaultPagination });
|
||||
}}
|
||||
onCancel={() => {
|
||||
setCreateModalVisible(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default connect(({ domainManger }: { domainManger: StateType }) => ({
|
||||
domainManger,
|
||||
}))(ClassMetricTable);
|
||||
@@ -0,0 +1,349 @@
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-table';
|
||||
import ProTable from '@ant-design/pro-table';
|
||||
import { message, Button, Space, Popconfirm, Input, Select } from 'antd';
|
||||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import type { Dispatch } from 'umi';
|
||||
import { StatusEnum } from '../../enum';
|
||||
import { connect } from 'umi';
|
||||
import type { StateType } from '../../model';
|
||||
import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS } from '../../constant';
|
||||
import { getTagList, deleteTag, batchUpdateTagStatus } from '../../service';
|
||||
import TagInfoCreateForm from './TagInfoCreateForm';
|
||||
import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
|
||||
import TableHeaderFilter from '../../components/TableHeaderFilter';
|
||||
import moment from 'moment';
|
||||
import styles from '../style.less';
|
||||
import { ISemantic } from '../../data';
|
||||
import { ColumnsConfig } from '../../components/TableColumnRender';
|
||||
|
||||
type Props = {
|
||||
dispatch: Dispatch;
|
||||
domainManger: StateType;
|
||||
};
|
||||
|
||||
const ClassTagTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
const { selectModelId: modelId, selectDomainId } = domainManger;
|
||||
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
|
||||
const [tagItem, setTagItem] = useState<ISemantic.ITagItem>();
|
||||
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
||||
const [tableData, setTableData] = useState<ISemantic.ITagItem[]>([]);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const defaultPagination = {
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
};
|
||||
const [pagination, setPagination] = useState(defaultPagination);
|
||||
|
||||
const [filterParams, setFilterParams] = useState<Record<string, any>>({});
|
||||
|
||||
const actionRef = useRef<ActionType>();
|
||||
|
||||
const queryBatchUpdateStatus = async (ids: React.Key[], status: StatusEnum) => {
|
||||
if (Array.isArray(ids) && ids.length === 0) {
|
||||
return;
|
||||
}
|
||||
const { code, msg } = await batchUpdateTagStatus({
|
||||
ids,
|
||||
status,
|
||||
});
|
||||
if (code === 200) {
|
||||
queryTagList({ ...filterParams, ...defaultPagination });
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
queryTagList({ ...filterParams, ...defaultPagination });
|
||||
}, [filterParams]);
|
||||
|
||||
const queryTagList = async (params: any) => {
|
||||
setLoading(true);
|
||||
const { code, data, msg } = await getTagList({
|
||||
...pagination,
|
||||
...params,
|
||||
modelIds: [modelId],
|
||||
});
|
||||
setLoading(false);
|
||||
const { list, pageSize, pageNum, total } = data || {};
|
||||
if (code === 200) {
|
||||
setPagination({
|
||||
...pagination,
|
||||
pageSize: Math.min(pageSize, 100),
|
||||
current: pageNum,
|
||||
total,
|
||||
});
|
||||
setTableData(list);
|
||||
} else {
|
||||
message.error(msg);
|
||||
setTableData([]);
|
||||
}
|
||||
};
|
||||
|
||||
const columnsConfig = ColumnsConfig();
|
||||
|
||||
const columns: ProColumns[] = [
|
||||
{
|
||||
dataIndex: 'id',
|
||||
title: 'ID',
|
||||
width: 80,
|
||||
fixed: 'left',
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
dataIndex: 'name',
|
||||
title: '标签',
|
||||
width: 280,
|
||||
fixed: 'left',
|
||||
// width: '30%',
|
||||
search: false,
|
||||
render: columnsConfig.indicatorInfo.render,
|
||||
},
|
||||
{
|
||||
dataIndex: 'key',
|
||||
title: '标签搜索',
|
||||
hideInTable: true,
|
||||
},
|
||||
{
|
||||
dataIndex: 'sensitiveLevel',
|
||||
title: '敏感度',
|
||||
width: 160,
|
||||
valueEnum: SENSITIVE_LEVEL_ENUM,
|
||||
render: columnsConfig.sensitiveLevel.render,
|
||||
},
|
||||
|
||||
{
|
||||
dataIndex: 'description',
|
||||
title: '描述',
|
||||
width: 300,
|
||||
search: false,
|
||||
render: columnsConfig.description.render,
|
||||
},
|
||||
{
|
||||
dataIndex: 'status',
|
||||
title: '状态',
|
||||
width: 160,
|
||||
search: false,
|
||||
render: columnsConfig.state.render,
|
||||
},
|
||||
{
|
||||
dataIndex: 'createdBy',
|
||||
title: '创建人',
|
||||
width: 150,
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
dataIndex: 'updatedAt',
|
||||
title: '更新时间',
|
||||
width: 180,
|
||||
search: false,
|
||||
render: (value: any) => {
|
||||
return value && value !== '-' ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '-';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'x',
|
||||
valueType: 'option',
|
||||
width: 150,
|
||||
render: (_, record) => {
|
||||
return (
|
||||
<Space className={styles.ctrlBtnContainer}>
|
||||
<Button
|
||||
type="link"
|
||||
key="metricEditBtn"
|
||||
onClick={() => {
|
||||
setTagItem(record);
|
||||
setCreateModalVisible(true);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
{record.status === StatusEnum.ONLINE ? (
|
||||
<Button
|
||||
type="link"
|
||||
key="editStatusOfflineBtn"
|
||||
onClick={() => {
|
||||
queryBatchUpdateStatus([record.id], StatusEnum.OFFLINE);
|
||||
}}
|
||||
>
|
||||
停用
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
type="link"
|
||||
key="editStatusOnlineBtn"
|
||||
onClick={() => {
|
||||
queryBatchUpdateStatus([record.id], StatusEnum.ONLINE);
|
||||
}}
|
||||
>
|
||||
启用
|
||||
</Button>
|
||||
)}
|
||||
<Popconfirm
|
||||
title="确认删除？"
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
onConfirm={async () => {
|
||||
const { code, msg } = await deleteTag(record.id);
|
||||
if (code === 200) {
|
||||
setTagItem(undefined);
|
||||
queryTagList({ ...filterParams, ...defaultPagination });
|
||||
} else {
|
||||
message.error(msg);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type="link"
|
||||
key="metricDeleteBtn"
|
||||
onClick={() => {
|
||||
setTagItem(record);
|
||||
}}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const rowSelection = {
|
||||
onChange: (selectedRowKeys: React.Key[]) => {
|
||||
setSelectedRowKeys(selectedRowKeys);
|
||||
},
|
||||
};
|
||||
|
||||
const onMenuClick = (key: string) => {
|
||||
switch (key) {
|
||||
case 'batchStart':
|
||||
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.ONLINE);
|
||||
break;
|
||||
case 'batchStop':
|
||||
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.OFFLINE);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProTable
|
||||
className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft} ${styles.disabledSearchTable} `}
|
||||
actionRef={actionRef}
|
||||
headerTitle={
|
||||
<TableHeaderFilter
|
||||
components={[
|
||||
{
|
||||
label: '标签搜索',
|
||||
component: (
|
||||
<Input.Search
|
||||
style={{ width: 280 }}
|
||||
placeholder="请输入ID/标签名称/英文名称"
|
||||
onSearch={(value) => {
|
||||
setFilterParams((preState) => {
|
||||
return {
|
||||
...preState,
|
||||
key: value,
|
||||
};
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: '敏感度',
|
||||
component: (
|
||||
<Select
|
||||
style={{ width: 140 }}
|
||||
options={SENSITIVE_LEVEL_OPTIONS}
|
||||
placeholder="请选择敏感度"
|
||||
allowClear
|
||||
onChange={(value) => {
|
||||
setFilterParams((preState) => {
|
||||
return {
|
||||
...preState,
|
||||
sensitiveLevel: value,
|
||||
};
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
search={false}
|
||||
rowSelection={{
|
||||
type: 'checkbox',
|
||||
...rowSelection,
|
||||
}}
|
||||
columns={columns}
|
||||
params={{ modelId }}
|
||||
dataSource={tableData}
|
||||
pagination={pagination}
|
||||
tableAlertRender={() => {
|
||||
return false;
|
||||
}}
|
||||
onChange={(data: any) => {
|
||||
const { current, pageSize, total } = data;
|
||||
const currentPagin = {
|
||||
current,
|
||||
pageSize,
|
||||
total,
|
||||
};
|
||||
setPagination(currentPagin);
|
||||
queryTagList({ ...filterParams, ...currentPagin });
|
||||
}}
|
||||
scroll={{ x: 1500 }}
|
||||
sticky={{ offsetHeader: 0 }}
|
||||
size="large"
|
||||
options={{ reload: false, density: false, fullScreen: false }}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="create"
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setTagItem(undefined);
|
||||
setCreateModalVisible(true);
|
||||
}}
|
||||
>
|
||||
创建标签
|
||||
</Button>,
|
||||
<BatchCtrlDropDownButton
|
||||
key="ctrlBtnList"
|
||||
onDeleteConfirm={() => {
|
||||
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
|
||||
}}
|
||||
onMenuClick={onMenuClick}
|
||||
hiddenList={['batchDownload']}
|
||||
/>,
|
||||
]}
|
||||
/>
|
||||
{createModalVisible && (
|
||||
<TagInfoCreateForm
|
||||
domainId={selectDomainId}
|
||||
modelId={Number(modelId)}
|
||||
createModalVisible={createModalVisible}
|
||||
tagItem={tagItem}
|
||||
onSubmit={() => {
|
||||
setCreateModalVisible(false);
|
||||
queryTagList({ ...filterParams, ...defaultPagination });
|
||||
}}
|
||||
onCancel={() => {
|
||||
setCreateModalVisible(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default connect(({ domainManger }: { domainManger: StateType }) => ({
|
||||
domainManger,
|
||||
}))(ClassTagTable);
|
||||
@@ -0,0 +1,28 @@
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import moment from 'moment';
|
||||
|
||||
type Props = {
|
||||
columnConfig?: ColumnConfig[];
|
||||
dataSource: any;
|
||||
loading?: boolean;
|
||||
};
|
||||
|
||||
const TagTable: React.FC<Props> = ({ columnConfig, dataSource, loading = false }) => {
|
||||
return (
|
||||
<div style={{ height: '100%' }}>
|
||||
{/* {Array.isArray(columns) && columns.length > 0 && ( */}
|
||||
<Table
|
||||
columns={columnConfig}
|
||||
dataSource={dataSource}
|
||||
scroll={{ x: 200, y: 700 }}
|
||||
loading={loading}
|
||||
onChange={() => {}}
|
||||
/>
|
||||
{/* )} */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TagTable;
|
||||
@@ -0,0 +1,138 @@
|
||||
import { Form, Input, Space, Row, Col, Switch } from 'antd';
|
||||
import StandardFormRow from '@/components/StandardFormRow';
|
||||
import TagSelect from '@/components/TagSelect';
|
||||
import React, { useEffect } from 'react';
|
||||
import { SENSITIVE_LEVEL_OPTIONS } from '../../constant';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import DomainTreeSelect from '../../components/DomainTreeSelect';
|
||||
import styles from '../style.less';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
|
||||
type Props = {
|
||||
initFilterValues?: any;
|
||||
onFiltersChange: (_: any, values: any) => void;
|
||||
};
|
||||
|
||||
const TagFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange }) => {
|
||||
const [form] = Form.useForm();
|
||||
|
||||
useEffect(() => {
|
||||
form.setFieldsValue({
|
||||
...initFilterValues,
|
||||
});
|
||||
}, [form]);
|
||||
|
||||
const handleValuesChange = (value: any, values: any) => {
|
||||
localStorage.setItem('metricMarketShowType', !!values.showType ? '1' : '0');
|
||||
onFiltersChange(value, values);
|
||||
};
|
||||
|
||||
const onSearch = (value: any) => {
|
||||
onFiltersChange(value, form.getFieldsValue());
|
||||
};
|
||||
|
||||
const filterList = [
|
||||
{
|
||||
title: '展示类型',
|
||||
key: 'showFilter',
|
||||
options: [
|
||||
{
|
||||
label: '我创建的',
|
||||
value: 'onlyShowMe',
|
||||
},
|
||||
{
|
||||
label: '我收藏的',
|
||||
value: 'hasCollect',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '敏感度',
|
||||
key: 'sensitiveLevel',
|
||||
options: SENSITIVE_LEVEL_OPTIONS,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Form
|
||||
layout="inline"
|
||||
form={form}
|
||||
colon={false}
|
||||
onValuesChange={(value, values) => {
|
||||
if (value.key) {
|
||||
return;
|
||||
}
|
||||
handleValuesChange(value, values);
|
||||
}}
|
||||
>
|
||||
<StandardFormRow key="search" block>
|
||||
<div className={styles.searchBox}>
|
||||
<Row>
|
||||
<Col flex="100px">
|
||||
<span
|
||||
style={{
|
||||
fontSize: '18px',
|
||||
fontWeight: 'bold',
|
||||
position: 'relative',
|
||||
top: '12px',
|
||||
}}
|
||||
>
|
||||
标签搜索
|
||||
</span>
|
||||
</Col>
|
||||
<Col flex="auto">
|
||||
<FormItem name="key" noStyle>
|
||||
<div className={styles.searchInput}>
|
||||
<Input.Search
|
||||
placeholder="请输入需要查询标签的ID、标签名称、英文名称"
|
||||
enterButton={<SearchOutlined style={{ marginTop: 5 }} />}
|
||||
onSearch={(value) => {
|
||||
onSearch(value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</StandardFormRow>
|
||||
<Space size={40}>
|
||||
{/* <StandardFormRow key="showType" title="切换为卡片" block>
|
||||
<FormItem name="showType" valuePropName="checked">
|
||||
<Switch size="small" />
|
||||
</FormItem>
|
||||
</StandardFormRow> */}
|
||||
{/* <StandardFormRow key="onlyShowMe" title="仅显示我的" block>
|
||||
<FormItem name="onlyShowMe" valuePropName="checked">
|
||||
<Switch size="small" />
|
||||
</FormItem>
|
||||
</StandardFormRow> */}
|
||||
|
||||
{filterList.map((item) => {
|
||||
const { title, key, options } = item;
|
||||
return (
|
||||
<StandardFormRow key={key} title={title} block>
|
||||
<FormItem name={key}>
|
||||
<TagSelect reverseCheckAll single>
|
||||
{options.map((item: any) => (
|
||||
<TagSelect.Option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</TagSelect.Option>
|
||||
))}
|
||||
</TagSelect>
|
||||
</FormItem>
|
||||
</StandardFormRow>
|
||||
);
|
||||
})}
|
||||
<StandardFormRow key="domainIds" title="所属主题域" block>
|
||||
<FormItem name="domainIds">
|
||||
<DomainTreeSelect />
|
||||
</FormItem>
|
||||
</StandardFormRow>
|
||||
</Space>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default TagFilter;
|
||||
@@ -0,0 +1,565 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Form, Button, Modal, Steps, Input, Select, Radio, message, Tag } from 'antd';
|
||||
|
||||
import { SENSITIVE_LEVEL_OPTIONS, TAG_DEFINE_TYPE } from '../../constant';
|
||||
import { formLayout } from '@/components/FormHelper/utils';
|
||||
import styles from '../../components/style.less';
|
||||
import { getModelDetail } from '../../service';
|
||||
import { isArrayOfValues } from '@/utils/utils';
|
||||
import MetricFieldFormTable from '../../components/MetricFieldFormTable';
|
||||
import TagDimensionFormTable from '../../components/TagDimensionFormTable';
|
||||
import MetricMetricFormTable from '../../components/MetricMetricFormTable';
|
||||
import TableTitleTooltips from '../../components/TableTitleTooltips';
|
||||
import { createTag, updateTag, getDimensionList, queryMetric } from '../../service';
|
||||
import { ISemantic } from '../../data';
|
||||
|
||||
export type CreateFormProps = {
|
||||
datasourceId?: number;
|
||||
domainId: number;
|
||||
modelId: number;
|
||||
createModalVisible: boolean;
|
||||
tagItem?: ISemantic.ITagItem;
|
||||
onCancel?: () => void;
|
||||
onSubmit?: (values: any) => void;
|
||||
};
|
||||
|
||||
const { Step } = Steps;
|
||||
const FormItem = Form.Item;
|
||||
const { TextArea } = Input;
|
||||
const { Option } = Select;
|
||||
|
||||
const TagInfoCreateForm: React.FC<CreateFormProps> = ({
|
||||
modelId,
|
||||
onCancel,
|
||||
createModalVisible,
|
||||
tagItem,
|
||||
onSubmit,
|
||||
}) => {
|
||||
const isEdit = !!tagItem?.id;
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
const formValRef = useRef({} as any);
|
||||
const [form] = Form.useForm();
|
||||
const updateFormVal = (val: any) => {
|
||||
const formVal = {
|
||||
...formValRef.current,
|
||||
...val,
|
||||
};
|
||||
formValRef.current = formVal;
|
||||
};
|
||||
|
||||
const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>([]);
|
||||
|
||||
const [metricList, setMetricList] = useState<ISemantic.IMetricItem[]>([]);
|
||||
const [metricMap, setMetricMap] = useState<Record<string, ISemantic.IMetricItem>>({});
|
||||
|
||||
const [exprTypeParamsState, setExprTypeParamsState] = useState<{
|
||||
[TAG_DEFINE_TYPE.DIMENSION]: ISemantic.ITagDefineParams;
|
||||
[TAG_DEFINE_TYPE.METRIC]: ISemantic.ITagDefineParams;
|
||||
[TAG_DEFINE_TYPE.FIELD]: ISemantic.ITagDefineParams;
|
||||
}>({
|
||||
[TAG_DEFINE_TYPE.DIMENSION]: {
|
||||
dependencies: [],
|
||||
expr: '',
|
||||
},
|
||||
[TAG_DEFINE_TYPE.METRIC]: {
|
||||
dependencies: [],
|
||||
expr: '',
|
||||
},
|
||||
[TAG_DEFINE_TYPE.FIELD]: {
|
||||
dependencies: [],
|
||||
expr: '',
|
||||
},
|
||||
} as any);
|
||||
|
||||
const [defineType, setDefineType] = useState<TAG_DEFINE_TYPE>(TAG_DEFINE_TYPE.DIMENSION);
|
||||
|
||||
const [fieldList, setFieldList] = useState<ISemantic.IFieldTypeParamsItem[]>([]);
|
||||
|
||||
const forward = () => setCurrentStep(currentStep + 1);
|
||||
const backward = () => setCurrentStep(currentStep - 1);
|
||||
|
||||
const queryModelDetail = async () => {
|
||||
const { code, data } = await getModelDetail({ modelId: modelId || tagItem?.modelId });
|
||||
if (code === 200) {
|
||||
if (Array.isArray(data?.modelDetail?.fields)) {
|
||||
if (Array.isArray(tagItem?.tagDefineParams?.dependencies)) {
|
||||
const fieldList = data.modelDetail.fields.map((item: ISemantic.IFieldTypeParamsItem) => {
|
||||
const { fieldName } = item;
|
||||
if (tagItem?.tagDefineParams?.dependencies.includes(fieldName)) {
|
||||
return {
|
||||
...item,
|
||||
orderNumber: 9999,
|
||||
};
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
orderNumber: 0,
|
||||
};
|
||||
});
|
||||
|
||||
const sortList = fieldList.sort(
|
||||
(
|
||||
a: ISemantic.IFieldTypeParamsItem & { orderNumber: number },
|
||||
b: ISemantic.IFieldTypeParamsItem & { orderNumber: number },
|
||||
) => b.orderNumber - a.orderNumber,
|
||||
);
|
||||
setFieldList(sortList);
|
||||
} else {
|
||||
setFieldList(data.modelDetail.fields);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
queryModelDetail();
|
||||
queryDimensionList(modelId);
|
||||
queryMetricList(modelId);
|
||||
}, [modelId]);
|
||||
|
||||
const handleNext = async () => {
|
||||
const fieldsValue = await form.validateFields();
|
||||
const submitForm = {
|
||||
...formValRef.current,
|
||||
...fieldsValue,
|
||||
tagDefineType: defineType,
|
||||
tagDefineParams: exprTypeParamsState[defineType],
|
||||
};
|
||||
updateFormVal(submitForm);
|
||||
if (currentStep < 1) {
|
||||
forward();
|
||||
} else {
|
||||
await saveTag(submitForm);
|
||||
}
|
||||
};
|
||||
|
||||
const initData = () => {
|
||||
if (!tagItem) {
|
||||
return;
|
||||
}
|
||||
const { id, name, bizName, description, sensitiveLevel, tagDefineType, tagDefineParams } =
|
||||
tagItem;
|
||||
|
||||
const initValue = {
|
||||
id,
|
||||
name,
|
||||
bizName,
|
||||
sensitiveLevel,
|
||||
description,
|
||||
tagDefineType,
|
||||
tagDefineParams,
|
||||
};
|
||||
const editInitFormVal = {
|
||||
...formValRef.current,
|
||||
...initValue,
|
||||
};
|
||||
const { dependencies, expr } = tagDefineParams || {};
|
||||
setExprTypeParamsState({
|
||||
...exprTypeParamsState,
|
||||
[tagDefineType]: {
|
||||
dependencies: dependencies || [],
|
||||
expr: expr || '',
|
||||
},
|
||||
});
|
||||
updateFormVal(editInitFormVal);
|
||||
form.setFieldsValue(initValue);
|
||||
if (tagDefineType) {
|
||||
setDefineType(tagDefineType);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit) {
|
||||
initData();
|
||||
}
|
||||
}, [tagItem]);
|
||||
|
||||
const isEmptyConditions = (
|
||||
tagDefineType: TAG_DEFINE_TYPE,
|
||||
metricDefineParams: ISemantic.ITagDefineParams,
|
||||
) => {
|
||||
const { dependencies, expr } = metricDefineParams || {};
|
||||
if (!expr) {
|
||||
message.error('请输入度量表达式');
|
||||
return true;
|
||||
}
|
||||
if (tagDefineType === TAG_DEFINE_TYPE.DIMENSION) {
|
||||
if (!(Array.isArray(dependencies) && dependencies.length > 0)) {
|
||||
message.error('请添加一个维度');
|
||||
return true;
|
||||
}
|
||||
}
|
||||
if (tagDefineType === TAG_DEFINE_TYPE.FIELD) {
|
||||
if (!(Array.isArray(dependencies) && dependencies.length > 0)) {
|
||||
message.error('请添加一个字段');
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const saveTag = async (fieldsValue: any) => {
|
||||
const queryParams = {
|
||||
modelId: isEdit ? tagItem.modelId : modelId,
|
||||
...fieldsValue,
|
||||
};
|
||||
if (isEmptyConditions(defineType, queryParams.tagDefineParams)) {
|
||||
return;
|
||||
}
|
||||
let saveTagQuery = createTag;
|
||||
if (queryParams.id) {
|
||||
saveTagQuery = updateTag;
|
||||
}
|
||||
const { code, msg } = await saveTagQuery(queryParams);
|
||||
if (code === 200) {
|
||||
message.success('编辑标签成功');
|
||||
onSubmit?.(queryParams);
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
const queryDimensionList = async (modelId: number) => {
|
||||
const { code, data, msg } = await getDimensionList({ modelId: modelId || tagItem?.modelId });
|
||||
if (code === 200 && Array.isArray(data?.list)) {
|
||||
const { list } = data;
|
||||
if (isArrayOfValues(tagItem?.tagDefineParams?.dependencies)) {
|
||||
const fieldList = list.map((item: ISemantic.IDimensionItem) => {
|
||||
const { id } = item;
|
||||
if (tagItem.tagDefineParams.dependencies.includes(id)) {
|
||||
return {
|
||||
...item,
|
||||
orderNumber: 9999,
|
||||
};
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
orderNumber: 0,
|
||||
};
|
||||
});
|
||||
|
||||
const sortList = fieldList.sort(
|
||||
(
|
||||
a: ISemantic.IDimensionItem & { orderNumber: number },
|
||||
b: ISemantic.IDimensionItem & { orderNumber: number },
|
||||
) => b.orderNumber - a.orderNumber,
|
||||
);
|
||||
setDimensionList(sortList);
|
||||
} else {
|
||||
setDimensionList(list);
|
||||
}
|
||||
} else {
|
||||
message.error(msg);
|
||||
}
|
||||
};
|
||||
|
||||
const queryMetricList = async (modelId: number) => {
|
||||
const { code, data, msg } = await queryMetric({
|
||||
modelId: modelId || tagItem?.modelId,
|
||||
});
|
||||
const { list } = data || {};
|
||||
if (code === 200) {
|
||||
if (isArrayOfValues(tagItem?.tagDefineParams?.dependencies)) {
|
||||
const fieldList = list.map((item: ISemantic.IMetricItem) => {
|
||||
const { id } = item;
|
||||
if (tagItem.tagDefineParams.dependencies.includes(id)) {
|
||||
return {
|
||||
...item,
|
||||
orderNumber: 9999,
|
||||
};
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
orderNumber: 0,
|
||||
};
|
||||
});
|
||||
|
||||
const sortList = fieldList.sort(
|
||||
(
|
||||
a: ISemantic.IMetricItem & { orderNumber: number },
|
||||
b: ISemantic.IMetricItem & { orderNumber: number },
|
||||
) => b.orderNumber - a.orderNumber,
|
||||
);
|
||||
setMetricList(sortList);
|
||||
} else {
|
||||
setMetricList(list);
|
||||
}
|
||||
|
||||
setMetricMap(
|
||||
list.reduce(
|
||||
(infoMap: Record<string, ISemantic.IMetricItem>, item: ISemantic.IMetricItem) => {
|
||||
infoMap[`${item.id}`] = item;
|
||||
return infoMap;
|
||||
},
|
||||
{},
|
||||
),
|
||||
);
|
||||
} else {
|
||||
message.error(msg);
|
||||
setMetricList([]);
|
||||
}
|
||||
};
|
||||
|
||||
const renderContent = () => {
|
||||
if (currentStep === 1) {
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
padding: '0 0 20px 24px',
|
||||
// borderBottom: '1px solid #eee',
|
||||
}}
|
||||
>
|
||||
<Radio.Group
|
||||
buttonStyle="solid"
|
||||
value={defineType}
|
||||
onChange={(e) => {
|
||||
setDefineType(e.target.value);
|
||||
}}
|
||||
>
|
||||
<Radio.Button value={TAG_DEFINE_TYPE.DIMENSION}>按维度</Radio.Button>
|
||||
<Radio.Button value={TAG_DEFINE_TYPE.METRIC}>按指标</Radio.Button>
|
||||
<Radio.Button value={TAG_DEFINE_TYPE.FIELD}>按字段</Radio.Button>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
|
||||
{defineType === TAG_DEFINE_TYPE.DIMENSION && (
|
||||
<>
|
||||
<p className={styles.desc}>
|
||||
基于
|
||||
<Tag color="#2499ef14" className={styles.markerTag}>
|
||||
维度
|
||||
</Tag>
|
||||
来生成新的标签
|
||||
</p>
|
||||
|
||||
<TagDimensionFormTable
|
||||
typeParams={exprTypeParamsState[TAG_DEFINE_TYPE.DIMENSION]}
|
||||
dimensionList={dimensionList}
|
||||
onFieldChange={(dimension: ISemantic.IDimensionTypeParamsItem[]) => {
|
||||
setExprTypeParamsState((prevState) => {
|
||||
return {
|
||||
...prevState,
|
||||
[TAG_DEFINE_TYPE.DIMENSION]: {
|
||||
...prevState[TAG_DEFINE_TYPE.DIMENSION],
|
||||
dependencies: dimension.map((item) => item.id),
|
||||
},
|
||||
};
|
||||
});
|
||||
}}
|
||||
onSqlChange={(expr: string) => {
|
||||
setExprTypeParamsState((prevState) => {
|
||||
return {
|
||||
...prevState,
|
||||
[TAG_DEFINE_TYPE.DIMENSION]: {
|
||||
...prevState[TAG_DEFINE_TYPE.DIMENSION],
|
||||
expr,
|
||||
},
|
||||
};
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{defineType === TAG_DEFINE_TYPE.METRIC && (
|
||||
<>
|
||||
<p className={styles.desc}>
|
||||
基于
|
||||
<Tag color="#2499ef14" className={styles.markerTag}>
|
||||
指标
|
||||
</Tag>
|
||||
来生成新的标签
|
||||
</p>
|
||||
|
||||
<MetricMetricFormTable
|
||||
typeParams={{
|
||||
...exprTypeParamsState[TAG_DEFINE_TYPE.METRIC],
|
||||
metrics: exprTypeParamsState[TAG_DEFINE_TYPE.METRIC].dependencies.map((id) => {
|
||||
return { id: Number(id), bizName: metricMap[id]?.bizName || '' };
|
||||
}),
|
||||
}}
|
||||
metricList={metricList}
|
||||
onFieldChange={(metrics: ISemantic.IMetricTypeParamsItem[]) => {
|
||||
setExprTypeParamsState((prevState) => {
|
||||
return {
|
||||
...prevState,
|
||||
[TAG_DEFINE_TYPE.METRIC]: {
|
||||
...prevState[TAG_DEFINE_TYPE.METRIC],
|
||||
dependencies: metrics.map((item) => item.id),
|
||||
},
|
||||
};
|
||||
});
|
||||
}}
|
||||
onSqlChange={(expr: string) => {
|
||||
setExprTypeParamsState((prevState) => {
|
||||
return {
|
||||
...prevState,
|
||||
[TAG_DEFINE_TYPE.METRIC]: {
|
||||
...prevState[TAG_DEFINE_TYPE.METRIC],
|
||||
expr,
|
||||
},
|
||||
};
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{defineType === TAG_DEFINE_TYPE.FIELD && (
|
||||
<>
|
||||
<MetricFieldFormTable
|
||||
typeParams={{
|
||||
...exprTypeParamsState[TAG_DEFINE_TYPE.FIELD],
|
||||
fields: exprTypeParamsState[TAG_DEFINE_TYPE.FIELD].dependencies.map(
|
||||
(fieldName) => {
|
||||
return { fieldName: `${fieldName}` };
|
||||
},
|
||||
),
|
||||
}}
|
||||
fieldList={fieldList}
|
||||
onFieldChange={(fields: ISemantic.IFieldTypeParamsItem[]) => {
|
||||
setExprTypeParamsState((prevState) => {
|
||||
return {
|
||||
...prevState,
|
||||
[TAG_DEFINE_TYPE.FIELD]: {
|
||||
...prevState[TAG_DEFINE_TYPE.FIELD],
|
||||
dependencies: fields.map((item) => item.fieldName),
|
||||
},
|
||||
};
|
||||
});
|
||||
}}
|
||||
onSqlChange={(expr: string) => {
|
||||
setExprTypeParamsState((prevState) => {
|
||||
return {
|
||||
...prevState,
|
||||
[TAG_DEFINE_TYPE.FIELD]: {
|
||||
...prevState[TAG_DEFINE_TYPE.FIELD],
|
||||
expr,
|
||||
},
|
||||
};
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<FormItem hidden={true} name="id" label="ID">
|
||||
<Input placeholder="id" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="name"
|
||||
label="标签名称"
|
||||
rules={[{ required: true, message: '请输入标签名称' }]}
|
||||
>
|
||||
<Input placeholder="名称不可重复" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="bizName"
|
||||
label="英文名称"
|
||||
rules={[{ required: true, message: '请输入英文名称' }]}
|
||||
>
|
||||
<Input placeholder="名称不可重复" disabled={isEdit} />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="sensitiveLevel"
|
||||
label="敏感度"
|
||||
rules={[{ required: true, message: '请选择敏感度' }]}
|
||||
>
|
||||
<Select placeholder="请选择敏感度">
|
||||
{SENSITIVE_LEVEL_OPTIONS.map((item) => (
|
||||
<Option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="description"
|
||||
label={
|
||||
<TableTitleTooltips
|
||||
title="业务口径"
|
||||
overlayInnerStyle={{ width: 600 }}
|
||||
tooltips={
|
||||
<>
|
||||
<p>
|
||||
在录入标签时，请务必详细填写标签口径。口径描述对于理解标签的含义、计算方法和使用场景至关重要。一个清晰、准确的口径描述可以帮助其他用户更好地理解和使用该标签，避免因为误解而导致错误的数据分析和决策。在填写口径时，建议包括以下信息：
|
||||
</p>
|
||||
<p>1. 标签的计算方法：详细说明标签是如何计算的，包括涉及的公式、计算步骤等。</p>
|
||||
<p>2. 数据来源：描述标签所依赖的数据来源，包括数据表、字段等信息。</p>
|
||||
<p>3. 使用场景：说明该标签适用于哪些业务场景，以及如何在这些场景中使用该标签。</p>
|
||||
<p>4. 任何其他相关信息：例如数据更新频率、数据质量要求等。</p>
|
||||
<p>
|
||||
请确保口径描述清晰、简洁且易于理解，以便其他用户能够快速掌握标签的核心要点。
|
||||
</p>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
rules={[{ required: true, message: '请输入业务口径' }]}
|
||||
>
|
||||
<TextArea placeholder="请输入业务口径" />
|
||||
</FormItem>
|
||||
</>
|
||||
);
|
||||
};
|
||||
const renderFooter = () => {
|
||||
if (currentStep === 1) {
|
||||
return (
|
||||
<>
|
||||
<Button style={{ float: 'left' }} onClick={backward}>
|
||||
上一步
|
||||
</Button>
|
||||
<Button onClick={onCancel}>取消</Button>
|
||||
<Button type="primary" onClick={handleNext}>
|
||||
完成
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Button onClick={onCancel}>取消</Button>
|
||||
<Button type="primary" onClick={handleNext}>
|
||||
下一步
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<Modal
|
||||
forceRender
|
||||
width={800}
|
||||
style={{ top: 48 }}
|
||||
// styles={{ padding: '32px 40px 48px' }}
|
||||
destroyOnClose
|
||||
title={`${isEdit ? '编辑' : '新建'}标签`}
|
||||
maskClosable={false}
|
||||
open={createModalVisible}
|
||||
footer={renderFooter()}
|
||||
onCancel={onCancel}
|
||||
>
|
||||
<>
|
||||
<Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
|
||||
<Step title="基本信息" />
|
||||
<Step title="表达式" />
|
||||
</Steps>
|
||||
<Form
|
||||
{...formLayout}
|
||||
form={form}
|
||||
initialValues={{
|
||||
...formValRef.current,
|
||||
}}
|
||||
className={styles.form}
|
||||
>
|
||||
{renderContent()}
|
||||
</Form>
|
||||
</>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default TagInfoCreateForm;
|
||||
@@ -0,0 +1,258 @@
|
||||
import { Tag, Space, Tooltip, Typography } from 'antd';
|
||||
import React, { ReactNode } from 'react';
|
||||
import { connect } from 'umi';
|
||||
import type { StateType } from '../../model';
|
||||
import dayjs from 'dayjs';
|
||||
import {
|
||||
ExportOutlined,
|
||||
SolutionOutlined,
|
||||
ContainerOutlined,
|
||||
PartitionOutlined,
|
||||
AreaChartOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import styles from '../style.less';
|
||||
import {
|
||||
SENSITIVE_LEVEL_ENUM,
|
||||
SENSITIVE_LEVEL_COLOR,
|
||||
TAG_DEFINE_TYPE,
|
||||
TagDefineTypeMap,
|
||||
} from '../../constant';
|
||||
|
||||
import { ISemantic } from '../../data';
|
||||
import IndicatorStar from '../../components/IndicatorStar';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
type Props = {
|
||||
tagData: ISemantic.ITagItem;
|
||||
domainManger: StateType;
|
||||
onNodeChange: (params?: { eventName?: string }) => void;
|
||||
onEditBtnClick?: (tagData: any) => void;
|
||||
onDimensionRelationBtnClick?: () => void;
|
||||
dimensionMap: Record<string, ISemantic.IDimensionItem>;
|
||||
metricMap: Record<string, ISemantic.IMetricItem>;
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
const TagInfoSider: React.FC<Props> = ({ tagData, dimensionMap, metricMap }) => {
|
||||
const tagDefineDependenciesRender = () => {
|
||||
if (!tagData) {
|
||||
return <></>;
|
||||
}
|
||||
const { tagDefineType, tagDefineParams } = tagData;
|
||||
const { dependencies } = tagDefineParams;
|
||||
if (!Array.isArray(dependencies)) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
if (tagDefineType === TAG_DEFINE_TYPE.DIMENSION) {
|
||||
return dependencies.reduce((nodes: ReactNode[], id) => {
|
||||
const target = dimensionMap[id];
|
||||
if (target) {
|
||||
nodes.push(
|
||||
<Tag color="blue" key={id}>
|
||||
{target.name}
|
||||
</Tag>,
|
||||
);
|
||||
}
|
||||
return nodes;
|
||||
}, []);
|
||||
}
|
||||
|
||||
if (tagDefineType === TAG_DEFINE_TYPE.METRIC) {
|
||||
return dependencies.reduce((nodes: ReactNode[], id) => {
|
||||
const target = metricMap[id];
|
||||
if (target) {
|
||||
nodes.push(
|
||||
<Tag color="blue" key={id}>
|
||||
{target.name}
|
||||
</Tag>,
|
||||
);
|
||||
}
|
||||
return nodes;
|
||||
}, []);
|
||||
}
|
||||
|
||||
if (tagDefineType === TAG_DEFINE_TYPE.FIELD) {
|
||||
return dependencies.map((fieldName) => (
|
||||
<Tag color="blue" key={fieldName}>
|
||||
{fieldName}
|
||||
</Tag>
|
||||
));
|
||||
}
|
||||
return <></>;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.metricInfoSider}>
|
||||
<div className={styles.title}>
|
||||
<div className={styles.name}>
|
||||
<Space>
|
||||
<IndicatorStar indicatorId={tagData?.id} initState={tagData?.isCollect} />
|
||||
{tagData?.name}
|
||||
{tagData?.hasAdminRes && (
|
||||
<span
|
||||
className={styles.gotoMetricListIcon}
|
||||
onClick={() => {
|
||||
window.open(`/webapp/model/${tagData.domainId}/${tagData.modelId}/`);
|
||||
}}
|
||||
>
|
||||
<Tooltip title="前往所属模型指标列表">
|
||||
<ExportOutlined />
|
||||
</Tooltip>
|
||||
</span>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
{tagData?.bizName && <div className={styles.bizName}>{tagData.bizName}</div>}
|
||||
</div>
|
||||
|
||||
<div className={styles.sectionContainer}>
|
||||
<hr className={styles.hr} />
|
||||
<div className={styles.section}>
|
||||
<div className={styles.sectionTitleBox}>
|
||||
<span className={styles.sectionTitle}>
|
||||
<Space>
|
||||
<ContainerOutlined />
|
||||
基本信息
|
||||
</Space>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.item}>
|
||||
<span className={styles.itemLable}>敏感度: </span>
|
||||
<span className={styles.itemValue}>
|
||||
{tagData?.sensitiveLevel !== undefined && (
|
||||
<span>
|
||||
<Tag color={SENSITIVE_LEVEL_COLOR[tagData.sensitiveLevel]}>
|
||||
{SENSITIVE_LEVEL_ENUM[tagData.sensitiveLevel]}
|
||||
</Tag>
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.item}>
|
||||
<span className={styles.itemLable}>所属模型: </span>
|
||||
<span className={styles.itemValue}>
|
||||
<Space>
|
||||
<Tag icon={<PartitionOutlined />} color="#3b5999">
|
||||
{tagData?.modelName || '模型名为空'}
|
||||
</Tag>
|
||||
{tagData?.hasAdminRes && (
|
||||
<span
|
||||
className={styles.gotoMetricListIcon}
|
||||
onClick={() => {
|
||||
window.open(`/webapp/model/${tagData.domainId}/0/overview`);
|
||||
}}
|
||||
>
|
||||
<Tooltip title="前往模型设置页">
|
||||
<ExportOutlined />
|
||||
</Tooltip>
|
||||
</span>
|
||||
)}
|
||||
</Space>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.item}>
|
||||
<span className={styles.itemLable}>描述: </span>
|
||||
<span className={styles.itemValue}>{tagData?.description}</span>
|
||||
</div>
|
||||
</div>
|
||||
<hr className={styles.hr} />
|
||||
<div className={styles.section}>
|
||||
<div className={styles.sectionTitleBox}>
|
||||
<span className={styles.sectionTitle}>
|
||||
<Space>
|
||||
<SolutionOutlined />
|
||||
创建信息
|
||||
</Space>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.item}>
|
||||
<span className={styles.itemLable}>创建人: </span>
|
||||
<span className={styles.itemValue}>{tagData?.createdBy}</span>
|
||||
</div>
|
||||
<div className={styles.item}>
|
||||
<span className={styles.itemLable}>创建时间: </span>
|
||||
<span className={styles.itemValue}>
|
||||
{tagData?.createdAt ? dayjs(tagData?.createdAt).format('YYYY-MM-DD HH:mm:ss') : ''}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.item}>
|
||||
<span className={styles.itemLable}>更新时间: </span>
|
||||
<span className={styles.itemValue}>
|
||||
{tagData?.createdAt ? dayjs(tagData?.updatedAt).format('YYYY-MM-DD HH:mm:ss') : ''}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<hr className={styles.hr} />
|
||||
|
||||
<div className={styles.section}>
|
||||
<div className={styles.sectionTitleBox}>
|
||||
<span className={styles.sectionTitle}>
|
||||
<Space>
|
||||
<AreaChartOutlined />
|
||||
应用信息
|
||||
</Space>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.item}>
|
||||
<span className={styles.itemLable}>创建来源:</span>
|
||||
<span className={styles.itemValue}>
|
||||
<span style={{ color: '#3182ce' }}>
|
||||
{TagDefineTypeMap[TAG_DEFINE_TYPE[tagData?.tagDefineType]]}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.item}>
|
||||
<span className={styles.itemValue}>
|
||||
<Space size={2} wrap>
|
||||
{tagDefineDependenciesRender()}
|
||||
</Space>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <div className={styles.ctrlBox}>
|
||||
<ul className={styles.ctrlList}>
|
||||
<Tooltip title="配置下钻维度后，将可以在指标卡中进行下钻">
|
||||
<li
|
||||
style={{ display: 'block' }}
|
||||
onClick={() => {
|
||||
onDimensionRelationBtnClick?.();
|
||||
}}
|
||||
>
|
||||
<Space style={{ width: '100%' }}>
|
||||
<div className={styles.subTitle}>下钻维度</div>
|
||||
<span className={styles.ctrlItemIcon}>
|
||||
<PlusOutlined />
|
||||
</span>
|
||||
</Space>
|
||||
{isArrayOfValues(relationDimensionOptions) && (
|
||||
<div style={{ marginLeft: 0, marginTop: 20 }}>
|
||||
<Space size={5} wrap>
|
||||
{relationDimensionOptions.map((item) => (
|
||||
<Tag color="blue" key={item.value} style={{ marginRight: 0 }}>
|
||||
{item.label}
|
||||
</Tag>
|
||||
))}
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
</Tooltip>
|
||||
</ul>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect(({ domainManger }: { domainManger: StateType }) => ({
|
||||
domainManger,
|
||||
}))(TagInfoSider);
|
||||
@@ -0,0 +1,97 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
import { getTagValueDistribution } from '@/pages/SemanticModel/service';
|
||||
|
||||
import TagTable from './Table';
|
||||
|
||||
import { ISemantic } from '../../data';
|
||||
|
||||
import ProCard from '@ant-design/pro-card';
|
||||
import { TagGraph } from 'supersonic-insights-flow-components';
|
||||
import styles from '../style.less';
|
||||
|
||||
const { TagValueBar } = TagGraph;
|
||||
|
||||
type Props = {
|
||||
relationDimensionOptions: { value: string; label: string; modelId: number }[];
|
||||
dimensionList: ISemantic.IDimensionItem[];
|
||||
tagData?: ISemantic.ITagItem;
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
const TagTrendSection: React.FC<Props> = ({ tagData }) => {
|
||||
const [tagTrendLoading, setTagTrendLoading] = useState<boolean>(false);
|
||||
|
||||
const [barData, setBarData] = useState<any[]>([]);
|
||||
const [tableColumnConfig, setTableColumnConfig] = useState<ColumnConfig[]>([]);
|
||||
|
||||
const queryTagValueDistribution = async (params: any) => {
|
||||
setTagTrendLoading(true);
|
||||
const { data, code } = await getTagValueDistribution({
|
||||
itemId: params.id,
|
||||
});
|
||||
setTagTrendLoading(false);
|
||||
if (code === 200 && Array.isArray(data?.valueDistributionList)) {
|
||||
const { valueDistributionList, name } = data;
|
||||
const distributionOptions = valueDistributionList.map((item) => {
|
||||
const { valueMap, valueCount } = item;
|
||||
return {
|
||||
type: valueMap,
|
||||
value: valueCount,
|
||||
};
|
||||
});
|
||||
const columns = [
|
||||
{
|
||||
dataIndex: 'type',
|
||||
title: name,
|
||||
},
|
||||
{
|
||||
dataIndex: 'value',
|
||||
title: '标签值',
|
||||
},
|
||||
];
|
||||
setTableColumnConfig(columns);
|
||||
setBarData(distributionOptions);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (tagData?.id) {
|
||||
queryTagValueDistribution({
|
||||
...tagData,
|
||||
});
|
||||
}
|
||||
}, [tagData]);
|
||||
|
||||
return (
|
||||
<div className={styles.metricTrendSection}>
|
||||
<div className={styles.sectionBox}>
|
||||
<ProCard
|
||||
size="small"
|
||||
title={
|
||||
<>
|
||||
<span>数据趋势</span>
|
||||
{/* {authMessage && <div style={{ color: '#d46b08' }}>{authMessage}</div>} */}
|
||||
</>
|
||||
}
|
||||
>
|
||||
<TagValueBar height={400} data={barData} />
|
||||
</ProCard>
|
||||
</div>
|
||||
|
||||
<div className={styles.sectionBox} style={{ paddingBottom: 0 }}>
|
||||
<ProCard size="small" title="数据明细" collapsible>
|
||||
<div style={{ minHeight: '450px' }}>
|
||||
<TagTable
|
||||
loading={tagTrendLoading}
|
||||
columnConfig={tableColumnConfig}
|
||||
dataSource={barData}
|
||||
/>
|
||||
</div>
|
||||
</ProCard>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TagTrendSection;
|
||||
0
webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/data.d.ts
vendored
Normal file
0
webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/data.d.ts
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
import React from 'react';
|
||||
|
||||
const market: React.FC = ({ children }) => {
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
export default market;
|
||||
@@ -0,0 +1,340 @@
|
||||
.TagFilterWrapper {
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
padding-bottom: 5px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.tagTable {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.searchBox {
|
||||
// margin-bottom: 12px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
width: 540px;
|
||||
margin: 0 auto;
|
||||
.searchInput {
|
||||
width: 100%;
|
||||
border: 1px solid rgba(35, 104, 184, 0.6);
|
||||
border-radius: 10px;
|
||||
}
|
||||
:global {
|
||||
|
||||
.ant-select-auto-complete {
|
||||
width: 100%;
|
||||
}
|
||||
.ant-input {
|
||||
height: 50px;
|
||||
padding: 0 15px;
|
||||
color: #515a6e;
|
||||
font-size: 14px;
|
||||
line-height: 50px;
|
||||
background: hsla(0, 0%, 100%, 0.2);
|
||||
border: none;
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
caret-color: #296df3;
|
||||
|
||||
&:focus {
|
||||
border-right-width: 0 !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input-group-addon {
|
||||
left: 0 !important;
|
||||
padding: 0;
|
||||
background: hsla(0, 0%, 100%, 0.2);
|
||||
border: none;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
.ant-btn {
|
||||
width: 72px;
|
||||
height: 50px;
|
||||
margin: 0;
|
||||
color: rgba(35, 104, 184, 0.6);
|
||||
font-size: 16px;
|
||||
background-color: transparent;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
box-shadow: none !important;
|
||||
|
||||
&::after {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.anticon {
|
||||
font-size: 28px;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.tagDetailWrapper {
|
||||
height: calc(100vh - 56px);
|
||||
overflow: scroll;
|
||||
.tagDetailTab {
|
||||
:global {
|
||||
.ant-tabs-nav {
|
||||
background-color: rgb(255, 255, 255);
|
||||
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||
margin: 10px 20px 0 20px;
|
||||
padding: 0 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.ant-tabs-tab {
|
||||
padding: 12px 0;
|
||||
color: #344767;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.tagDetail {
|
||||
display: flex;
|
||||
padding: 0px;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
.tabContainer {
|
||||
background-color: rgb(240, 242, 245);
|
||||
width: calc(100vw - 450px);
|
||||
}
|
||||
.metricInfoContent {
|
||||
padding:25px;
|
||||
.title {
|
||||
margin-bottom: 12px;
|
||||
font-size: 16px;
|
||||
color: #0e73ff;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
&::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: -10px;
|
||||
top: 10px;
|
||||
height: 14px;
|
||||
width: 3px;
|
||||
font-size: 0;
|
||||
background: #0e73ff;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #0e73ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.siderContainer {
|
||||
background-color: rgb(255, 255, 255);
|
||||
width: 450px;
|
||||
min-height: calc(100vh - 78px);
|
||||
margin: 10px 20px 20px 0;
|
||||
border-radius: 6px;
|
||||
box-shadow: rgba(0, 0, 0, 0.08) 6px 0px 16px 0px, rgba(0, 0, 0, 0.12) 3px 0px 6px -4px, rgba(0, 0, 0, 0.05) 9px 0px 28px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sectionBox {
|
||||
margin: 20px;
|
||||
padding: 10px;
|
||||
box-shadow: #888888 0px 0px 1px, rgba(29, 41, 57, 0.08) 0px 1px 3px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||
border-radius: 6px;
|
||||
background-image: none;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.metricInfoSider{
|
||||
padding: 24px;
|
||||
color: #344767;
|
||||
.gotoMetricListIcon {
|
||||
color: #3182ce;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #5493ff;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
.name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.bizName {
|
||||
margin: 5px 0 0 25px;
|
||||
color: #7b809a;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.9;
|
||||
margin-top: 8px;
|
||||
display: block;
|
||||
color: #7b809a;
|
||||
}
|
||||
.subTitle {
|
||||
margin: 0px;
|
||||
font-size: 14px;
|
||||
line-height: 1.25;
|
||||
letter-spacing: 0.03333em;
|
||||
opacity: 1;
|
||||
text-transform: uppercase;
|
||||
vertical-align: unset;
|
||||
text-decoration: none;
|
||||
color: rgb(123, 128, 154);
|
||||
font-weight: 700;
|
||||
}
|
||||
.sectionContainer{
|
||||
// transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||
border-radius: 6px;
|
||||
// box-shadow: #888888 0px 0px 1px, rgba(29, 41, 57, 0.08) 0px 1px 3px;
|
||||
background-image: none;
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
.section {
|
||||
padding: 16px;
|
||||
line-height: 1.25;
|
||||
opacity: 1;
|
||||
background: transparent;
|
||||
color: rgb(52, 71, 103);
|
||||
box-shadow: none;
|
||||
.sectionTitleBox {
|
||||
padding: 8px 0;
|
||||
opacity: 1;
|
||||
background: transparent;
|
||||
color: rgb(52, 71, 103);
|
||||
box-shadow: none;
|
||||
.sectionTitle {
|
||||
margin: 0px;
|
||||
font-size: 16px;
|
||||
line-height: 1.625;
|
||||
letter-spacing: 0.0075em;
|
||||
opacity: 1;
|
||||
text-transform: capitalize;
|
||||
vertical-align: unset;
|
||||
text-decoration: none;
|
||||
color: rgb(52, 71, 103);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
padding-right: 16px;
|
||||
opacity: 1;
|
||||
background: transparent;
|
||||
color: rgb(52, 71, 103);
|
||||
box-shadow: none;
|
||||
.itemLable {
|
||||
margin: 0px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 0.02857em;
|
||||
opacity: 1;
|
||||
text-transform: capitalize;
|
||||
vertical-align: unset;
|
||||
text-decoration: none;
|
||||
color: #344767;
|
||||
margin-right: 10px;
|
||||
min-width: fit-content;
|
||||
font-weight: 700;
|
||||
}
|
||||
.itemValue{
|
||||
margin: 0px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 0.02857em;
|
||||
opacity: 1;
|
||||
text-transform: none;
|
||||
vertical-align: unset;
|
||||
text-decoration: none;
|
||||
color: #7b809a;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hr {
|
||||
margin: 0px;
|
||||
flex-shrink: 0;
|
||||
// border-width: 0px 0px thin;
|
||||
border-style: solid;
|
||||
border-color: rgb(242, 244, 247);
|
||||
}
|
||||
.ctrlBox{
|
||||
.ctrlList{
|
||||
list-style: none;
|
||||
margin: 0px;
|
||||
padding: 8px 0px;
|
||||
position: relative;
|
||||
background-color: rgb(249, 250, 251);
|
||||
li {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background-color: transparent;
|
||||
outline: 0px;
|
||||
border: 0px;
|
||||
margin: 4px;
|
||||
border-radius: 0px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
appearance: none;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
-webkit-box-flex: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-box-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
min-width: 0px;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
padding: 4px 16px;
|
||||
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: rgba(16, 24, 40, 0.04);
|
||||
color: #3182ce;
|
||||
}
|
||||
}
|
||||
.ctrlItemIcon {
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
margin-right: 5px;
|
||||
min-width: unset;
|
||||
}
|
||||
.styles.ctrlItemLable {
|
||||
margin: 0px;
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user