mirror of
https://github.com/tencentmusic/supersonic.git
synced 2026-04-22 06:44:18 +08:00
[improvement][headless-fe] Added view management functionality. (#701)
* [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.
This commit is contained in:
tristanliu
@@ -1,13 +1,15 @@
|
||||
import { message } from 'antd';
|
||||
import { message, Tabs, Button, Space } from 'antd';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { getMetricData, getDimensionList, getDrillDownDimension } from '../service';
|
||||
import { connect, useParams } from 'umi';
|
||||
import { connect, useParams, history } from 'umi';
|
||||
import type { StateType } from '../model';
|
||||
import styles from './style.less';
|
||||
import { ArrowLeftOutlined } from '@ant-design/icons';
|
||||
import MetricTrendSection from '@/pages/SemanticModel/Metric/components/MetricTrendSection';
|
||||
import { ISemantic } from '../data';
|
||||
import DimensionAndMetricRelationModal from '../components/DimensionAndMetricRelationModal';
|
||||
import MetricInfoSider from './MetricInfoSider';
|
||||
import type { TabsProps } from 'antd';
|
||||
|
||||
type Props = Record<string, any>;
|
||||
|
||||
@@ -17,6 +19,9 @@ const MetricDetail: React.FC<Props> = () => {
|
||||
const [metricRelationModalOpenState, setMetricRelationModalOpenState] = useState<boolean>(false);
|
||||
const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
|
||||
const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>([]);
|
||||
const [drillDownDimension, setDrillDownDimension] = useState<ISemantic.IDrillDownDimensionItem[]>(
|
||||
[],
|
||||
);
|
||||
const [relationDimensionOptions, setRelationDimensionOptions] = useState<
|
||||
{ value: string; label: string; modelId: number }[]
|
||||
>([]);
|
||||
@@ -38,6 +43,7 @@ const MetricDetail: React.FC<Props> = () => {
|
||||
const queryDrillDownDimension = async (metricId: number) => {
|
||||
const { code, data, msg } = await getDrillDownDimension(metricId);
|
||||
if (code === 200 && Array.isArray(data)) {
|
||||
setDrillDownDimension(data);
|
||||
const ids = data.map((item) => item.dimensionId);
|
||||
queryDimensionList(ids);
|
||||
return data;
|
||||
@@ -70,15 +76,57 @@ const MetricDetail: React.FC<Props> = () => {
|
||||
return [];
|
||||
};
|
||||
|
||||
const tabItems: TabsProps['items'] = [
|
||||
{
|
||||
key: 'metricTrend',
|
||||
label: '图表',
|
||||
children: (
|
||||
<MetricTrendSection
|
||||
metircData={metircData}
|
||||
relationDimensionOptions={relationDimensionOptions}
|
||||
dimensionList={dimensionList}
|
||||
/>
|
||||
),
|
||||
},
|
||||
// {
|
||||
// key: 'metricCaliberInput',
|
||||
// label: '基础信息',
|
||||
// children: <></>,
|
||||
// },
|
||||
// {
|
||||
// key: 'metricDataRemark',
|
||||
// label: '备注',
|
||||
// children: <></>,
|
||||
// },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.metricDetailWrapper}>
|
||||
<div className={styles.metricDetail}>
|
||||
<div className={styles.tabContainer}>
|
||||
<MetricTrendSection
|
||||
metircData={metircData}
|
||||
relationDimensionOptions={relationDimensionOptions}
|
||||
dimensionList={dimensionList}
|
||||
<Tabs
|
||||
defaultActiveKey="metricTrend"
|
||||
items={tabItems}
|
||||
tabBarExtraContent={{
|
||||
right: (
|
||||
<Button
|
||||
size="middle"
|
||||
type="link"
|
||||
key="backListBtn"
|
||||
onClick={() => {
|
||||
history.push('/metric/market');
|
||||
}}
|
||||
>
|
||||
<Space>
|
||||
<ArrowLeftOutlined />
|
||||
返回列表页
|
||||
</Space>
|
||||
</Button>
|
||||
),
|
||||
}}
|
||||
size="large"
|
||||
className={styles.metricDetailTab}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.siderContainer}>
|
||||
@@ -91,20 +139,20 @@ const MetricDetail: React.FC<Props> = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DimensionAndMetricRelationModal
|
||||
metricItem={metircData}
|
||||
relationsInitialValue={drillDownDimension}
|
||||
open={metricRelationModalOpenState}
|
||||
onCancel={() => {
|
||||
setMetricRelationModalOpenState(false);
|
||||
}}
|
||||
onSubmit={(relations) => {
|
||||
queryMetricData(metricId);
|
||||
queryDrillDownDimension(metricId);
|
||||
setMetricRelationModalOpenState(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<DimensionAndMetricRelationModal
|
||||
metricItem={metircData}
|
||||
relationsInitialValue={metircData?.relateDimension?.drillDownDimensions}
|
||||
open={metricRelationModalOpenState}
|
||||
onCancel={() => {
|
||||
setMetricRelationModalOpenState(false);
|
||||
}}
|
||||
onSubmit={(relations) => {
|
||||
queryMetricData(metricId);
|
||||
queryDrillDownDimension(metricId);
|
||||
setMetricRelationModalOpenState(false);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -21,7 +21,6 @@ import moment from 'moment';
|
||||
import styles from './style.less';
|
||||
import { ISemantic } from '../data';
|
||||
import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
|
||||
import MetricStar from './components/MetricStar';
|
||||
import { ColumnsConfig } from '../components/MetricTableColumnRender';
|
||||
|
||||
type Props = {
|
||||
@@ -161,13 +160,19 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
};
|
||||
|
||||
const columns: ProColumns[] = [
|
||||
// {
|
||||
// dataIndex: 'id',
|
||||
// title: 'ID',
|
||||
// },
|
||||
{
|
||||
dataIndex: 'id',
|
||||
title: 'ID',
|
||||
width: 80,
|
||||
fixed: 'left',
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
dataIndex: 'name',
|
||||
title: '指标',
|
||||
// width: '20%',
|
||||
width: 280,
|
||||
fixed: 'left',
|
||||
render: ColumnsConfig.metricInfo.render,
|
||||
},
|
||||
{
|
||||
@@ -190,16 +195,32 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
return <> {record.modelName}</>;
|
||||
},
|
||||
},
|
||||
{
|
||||
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: 120,
|
||||
width: 180,
|
||||
search: false,
|
||||
render: ColumnsConfig.state.render,
|
||||
},
|
||||
{
|
||||
dataIndex: 'description',
|
||||
title: '描述',
|
||||
dataIndex: 'createdBy',
|
||||
title: '创建人',
|
||||
// width: 150,
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
@@ -214,6 +235,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
title: '操作',
|
||||
dataIndex: 'x',
|
||||
valueType: 'option',
|
||||
width: 180,
|
||||
render: (_, record) => {
|
||||
if (record.hasAdminRes) {
|
||||
return (
|
||||
@@ -334,7 +356,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
metricList={dataSource}
|
||||
disabledEdit={true}
|
||||
onMetricChange={(metricItem: ISemantic.IMetricItem) => {
|
||||
history.push(`/metric/detail/${metricItem.modelId}/${metricItem.bizName}`);
|
||||
history.push(`/metric/detail/${metricItem.id}`);
|
||||
}}
|
||||
onDeleteBtnClick={(metricItem: ISemantic.IMetricItem) => {
|
||||
deleteMetricQuery(metricItem.id);
|
||||
@@ -355,6 +377,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
columns={columns}
|
||||
pagination={pagination}
|
||||
size="large"
|
||||
scroll={{ x: 1500 }}
|
||||
tableAlertRender={() => {
|
||||
return false;
|
||||
}}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Tag, Space, Tooltip } from 'antd';
|
||||
import { Tag, Space, Tooltip, Typography } from 'antd';
|
||||
import React from 'react';
|
||||
import { connect } from 'umi';
|
||||
import type { StateType } from '../model';
|
||||
@@ -11,13 +11,15 @@ import {
|
||||
PartitionOutlined,
|
||||
PlusOutlined,
|
||||
AreaChartOutlined,
|
||||
DeleteOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import styles from './style.less';
|
||||
import { isString } from 'lodash';
|
||||
import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_COLOR } from '../constant';
|
||||
import { ISemantic } from '../data';
|
||||
import MetricStar from './components/MetricStar';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
type Props = {
|
||||
metircData: ISemantic.IMetricItem;
|
||||
domainManger: StateType;
|
||||
@@ -40,7 +42,6 @@ const MetricInfoSider: React.FC<Props> = ({
|
||||
<Space>
|
||||
<MetricStar metricId={metircData?.id} initState={metircData?.isCollect} />
|
||||
{metircData?.name}
|
||||
{metircData?.alias && `[${metircData.alias}]`}
|
||||
{metircData?.hasAdminRes && (
|
||||
<span
|
||||
className={styles.gotoMetricListIcon}
|
||||
@@ -105,6 +106,44 @@ const MetricInfoSider: React.FC<Props> = ({
|
||||
</Space>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{isArrayOfValues(metircData?.tags) && (
|
||||
<div className={styles.item}>
|
||||
<span className={styles.itemLable}>别名: </span>
|
||||
<span className={styles.itemValue}>
|
||||
<Space size={2} wrap>
|
||||
{isString(metircData?.alias) &&
|
||||
metircData?.alias.split(',').map((aliasName: string) => {
|
||||
return (
|
||||
<Tag
|
||||
color="#eee"
|
||||
key={aliasName}
|
||||
style={{
|
||||
borderRadius: 44,
|
||||
maxWidth: 90,
|
||||
minWidth: 40,
|
||||
backgroundColor: 'rgba(18, 31, 67, 0.04)',
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
maxWidth: 80,
|
||||
color: 'rgb(95, 116, 141)',
|
||||
textAlign: 'center',
|
||||
fontSize: 12,
|
||||
}}
|
||||
ellipsis={{ tooltip: aliasName }}
|
||||
>
|
||||
{aliasName}
|
||||
</Text>
|
||||
</Tag>
|
||||
);
|
||||
})}
|
||||
</Space>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={styles.item}>
|
||||
<span className={styles.itemLable}>描述: </span>
|
||||
<span className={styles.itemValue}>{metircData?.description}</span>
|
||||
|
||||
@@ -98,11 +98,11 @@ const MetricFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange
|
||||
</div>
|
||||
</StandardFormRow>
|
||||
<Space size={40}>
|
||||
<StandardFormRow key="showType" title="切换为卡片" block>
|
||||
{/* <StandardFormRow key="showType" title="切换为卡片" block>
|
||||
<FormItem name="showType" valuePropName="checked">
|
||||
<Switch size="small" />
|
||||
</FormItem>
|
||||
</StandardFormRow>
|
||||
</StandardFormRow> */}
|
||||
{/* <StandardFormRow key="onlyShowMe" title="仅显示我的" block>
|
||||
<FormItem name="onlyShowMe" valuePropName="checked">
|
||||
<Switch size="small" />
|
||||
|
||||
@@ -5,15 +5,17 @@ import RemoteSelect, { RemoteSelectImperativeHandle } from '@/components/RemoteS
|
||||
import { queryDimValue } from '@/pages/SemanticModel/service';
|
||||
import { OperatorEnum } from '@/pages/SemanticModel/enum';
|
||||
import { isString } from 'lodash';
|
||||
import { isArrayOfValues } from '@/utils/utils';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
|
||||
type Props = {
|
||||
dimensionOptions: OptionsItem[];
|
||||
dimensionOptions: (OptionsItem & { modelId: number })[];
|
||||
modelId: number;
|
||||
periodDate?: { startDate: string; endDate: string; dateField: string };
|
||||
value?: FormData;
|
||||
onChange?: (value: FormData) => void;
|
||||
afterSolt?: React.ReactNode;
|
||||
};
|
||||
|
||||
export type FormData = {
|
||||
@@ -24,16 +26,15 @@ export type FormData = {
|
||||
|
||||
const MetricTrendDimensionFilter: React.FC<Props> = ({
|
||||
dimensionOptions,
|
||||
modelId,
|
||||
value,
|
||||
periodDate,
|
||||
afterSolt,
|
||||
onChange,
|
||||
}) => {
|
||||
const [form] = Form.useForm();
|
||||
const dimensionValueSearchRef = useRef<RemoteSelectImperativeHandle>();
|
||||
const queryParams = useRef<{ dimensionBizName?: string }>({});
|
||||
const [formData, setFormData] = useState<FormData>({ operator: OperatorEnum.IN } as FormData);
|
||||
|
||||
useEffect(() => {
|
||||
if (!value) {
|
||||
return;
|
||||
@@ -59,7 +60,10 @@ const MetricTrendDimensionFilter: React.FC<Props> = ({
|
||||
return;
|
||||
}
|
||||
const { dimensionBizName } = queryParams.current;
|
||||
const targetOptions = dimensionOptions.find((item) => item.value === dimensionBizName) || {};
|
||||
const targetOptions = dimensionOptions.find((item) => item.value === dimensionBizName);
|
||||
if (!targetOptions) {
|
||||
return;
|
||||
}
|
||||
const { code, data } = await queryDimValue({
|
||||
...queryParams.current,
|
||||
value: searchValue,
|
||||
@@ -95,7 +99,6 @@ const MetricTrendDimensionFilter: React.FC<Props> = ({
|
||||
}}
|
||||
onValuesChange={(value, values) => {
|
||||
const { operator, dimensionValue } = values;
|
||||
|
||||
if (multipleValueOperator.includes(operator) && isString(dimensionValue)) {
|
||||
const tempDimensionValue = [dimensionValue];
|
||||
setFormData({ ...values, dimensionValue: tempDimensionValue });
|
||||
@@ -152,12 +155,14 @@ const MetricTrendDimensionFilter: React.FC<Props> = ({
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
disabled={!(formData.dimensionBizName && isArrayOfValues(formData.dimensionValue))}
|
||||
onClick={() => {
|
||||
const formValues = form.getFieldsValue();
|
||||
onChange?.(formValues);
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
{afterSolt}
|
||||
</Space>
|
||||
</Form>
|
||||
);
|
||||
|
||||
@@ -4,11 +4,12 @@ import MetricTrendDimensionFilter from './MetricTrendDimensionFilter';
|
||||
import type { FormData } from './MetricTrendDimensionFilter';
|
||||
|
||||
type Props = {
|
||||
dimensionOptions: OptionsItem[];
|
||||
dimensionOptions: (OptionsItem & { modelId: number })[];
|
||||
modelId: number;
|
||||
value?: FormData;
|
||||
periodDate?: { startDate: string; endDate: string; dateField: string };
|
||||
onChange?: (value: FormData[]) => void;
|
||||
afterSolt?: React.ReactNode;
|
||||
};
|
||||
|
||||
type DimensionOptionsMapItem = {
|
||||
@@ -20,6 +21,7 @@ const MetricTrendDimensionFilterContainer: React.FC<Props> = ({
|
||||
dimensionOptions,
|
||||
modelId,
|
||||
periodDate,
|
||||
afterSolt,
|
||||
value,
|
||||
onChange,
|
||||
}) => {
|
||||
@@ -56,6 +58,7 @@ const MetricTrendDimensionFilterContainer: React.FC<Props> = ({
|
||||
setFilterData(data);
|
||||
onChange?.(data);
|
||||
}}
|
||||
afterSolt={afterSolt}
|
||||
/>
|
||||
<Space size={8} wrap style={{ marginTop: 10 }}>
|
||||
{filterData.map((item: FormData, index: number) => {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { message, Row, Col, Button, Space, Select, Form, Tooltip } from 'antd';
|
||||
import { queryStruct } from '@/pages/SemanticModel/service';
|
||||
import { DownloadOutlined, PoweroffOutlined, ArrowLeftOutlined } from '@ant-design/icons';
|
||||
import { DownloadOutlined, PoweroffOutlined, SearchOutlined } from '@ant-design/icons';
|
||||
import TrendChart from '@/pages/SemanticModel/Metric/components/MetricTrend';
|
||||
import MetricTrendDimensionFilterContainer from './MetricTrendDimensionFilterContainer';
|
||||
import MDatePicker from '@/components/MDatePicker';
|
||||
@@ -11,7 +11,6 @@ import StandardFormRow from '@/components/StandardFormRow';
|
||||
import MetricTable from './Table';
|
||||
import { ColumnConfig } from '../data';
|
||||
import dayjs from 'dayjs';
|
||||
import { history } from 'umi';
|
||||
import { ISemantic } from '../../data';
|
||||
import { DateFieldMap } from '@/pages/SemanticModel/constant';
|
||||
import ProCard from '@ant-design/pro-card';
|
||||
@@ -119,6 +118,9 @@ const MetricTrendSection: React.FC<Props> = ({
|
||||
setMetricColumnConfig(targetConfig);
|
||||
}
|
||||
setDownloadBtnDisabledState(false);
|
||||
if (dimensionGroup[dimensionGroup.length - 1]) {
|
||||
setGroupByDimensionFieldName(dimensionGroup[dimensionGroup.length - 1]);
|
||||
}
|
||||
} else {
|
||||
if (code === 401 || code === 400) {
|
||||
setAuthMessage(msg);
|
||||
@@ -135,7 +137,7 @@ const MetricTrendSection: React.FC<Props> = ({
|
||||
if (metircData?.id) {
|
||||
getMetricTrendData({ ...queryParams });
|
||||
}
|
||||
}, [metircData, periodDate]);
|
||||
}, [metircData]);
|
||||
|
||||
return (
|
||||
<div className={styles.metricTrendSection}>
|
||||
@@ -186,8 +188,6 @@ const MetricTrendSection: React.FC<Props> = ({
|
||||
onChange={(value) => {
|
||||
const params = { ...queryParams, dimensionGroup: value || [] };
|
||||
setQueryParams(params);
|
||||
getMetricTrendData({ ...params });
|
||||
setGroupByDimensionFieldName(value[value.length - 1]);
|
||||
}}
|
||||
/>
|
||||
</FormItem>
|
||||
@@ -212,8 +212,20 @@ const MetricTrendSection: React.FC<Props> = ({
|
||||
dimensionFilters,
|
||||
};
|
||||
setQueryParams(params);
|
||||
getMetricTrendData({ ...params });
|
||||
}}
|
||||
afterSolt={
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SearchOutlined />}
|
||||
size="middle"
|
||||
loading={metricTrendLoading}
|
||||
onClick={() => {
|
||||
getMetricTrendData({ ...queryParams });
|
||||
}}
|
||||
>
|
||||
查 询
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</FormItem>
|
||||
</StandardFormRow>
|
||||
@@ -221,31 +233,21 @@ const MetricTrendSection: React.FC<Props> = ({
|
||||
</Col>
|
||||
<Col flex="0 1" />
|
||||
</Row>
|
||||
<Button
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 20,
|
||||
right: 20,
|
||||
}}
|
||||
size="middle"
|
||||
type="link"
|
||||
key="backListBtn"
|
||||
onClick={() => {
|
||||
history.push('/metric/market');
|
||||
}}
|
||||
>
|
||||
<Space>
|
||||
<ArrowLeftOutlined />
|
||||
返回列表页
|
||||
</Space>
|
||||
</Button>
|
||||
{/* <div className={styles.btnWrapper}>
|
||||
{/* <Row style={{ paddingLeft: 82, paddingBottom: 8 }}>
|
||||
|
||||
</div> */}
|
||||
</Row> */}
|
||||
</div>
|
||||
{authMessage && <div style={{ color: '#d46b08', marginBottom: 15 }}>{authMessage}</div>}
|
||||
|
||||
<div className={styles.sectionBox}>
|
||||
<ProCard size="small" title="数据趋势">
|
||||
<ProCard
|
||||
size="small"
|
||||
title={
|
||||
<>
|
||||
<span>数据趋势</span>
|
||||
{authMessage && <div style={{ color: '#d46b08' }}>{authMessage}</div>}
|
||||
</>
|
||||
}
|
||||
>
|
||||
<TrendChart
|
||||
data={metricTrendData}
|
||||
isPer={
|
||||
@@ -272,7 +274,7 @@ const MetricTrendSection: React.FC<Props> = ({
|
||||
</ProCard>
|
||||
</div>
|
||||
|
||||
<div className={styles.sectionBox}>
|
||||
<div className={styles.sectionBox} style={{ paddingBottom: 0 }}>
|
||||
<ProCard
|
||||
size="small"
|
||||
title="数据明细"
|
||||
@@ -307,7 +309,7 @@ const MetricTrendSection: React.FC<Props> = ({
|
||||
</Space.Compact>
|
||||
}
|
||||
>
|
||||
<div style={{ minHeight: '528px' }}>
|
||||
<div style={{ minHeight: '450px' }}>
|
||||
<MetricTable
|
||||
loading={metricTrendLoading}
|
||||
columnConfig={tableColumnConfig}
|
||||
|
||||
@@ -2,7 +2,6 @@ import { Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import moment from 'moment';
|
||||
import styles from '../style.less';
|
||||
import { ColumnConfig } from '../data';
|
||||
|
||||
type Props = {
|
||||
@@ -57,16 +56,15 @@ const MetricTable: React.FC<Props> = ({
|
||||
|
||||
return (
|
||||
<div style={{ height: '100%' }}>
|
||||
{Array.isArray(columns) && columns.length > 0 && (
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={dataSource}
|
||||
scroll={{ x: 200, y: 700 }}
|
||||
// pagination={{ defaultPageSize: 20 }}
|
||||
loading={loading}
|
||||
onChange={() => {}}
|
||||
/>
|
||||
)}
|
||||
{/* {Array.isArray(columns) && columns.length > 0 && ( */}
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={dataSource}
|
||||
scroll={{ x: 200, y: 700 }}
|
||||
loading={loading}
|
||||
onChange={() => {}}
|
||||
/>
|
||||
{/* )} */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -121,6 +121,23 @@
|
||||
.metricDetailWrapper {
|
||||
height: calc(100vh - 56px);
|
||||
overflow: scroll;
|
||||
.metricDetailTab {
|
||||
: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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.metricDetail {
|
||||
display: flex;
|
||||
padding: 0px;
|
||||
@@ -158,27 +175,27 @@
|
||||
.siderContainer {
|
||||
background-color: rgb(255, 255, 255);
|
||||
width: 450px;
|
||||
min-height: 100vh;
|
||||
margin: 20px 20px 20px 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.metricTrendSection {
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
Reference in New Issue
Block a user