[improvement][headless-fe] Optimized the tag setting system. (#868)

* [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. * [improvement][headless-fe] Enhanced dataset creation to support the tag mode. * [improvement][headless-fe] Added tag value setting. * [improvement][headless-fe] Optimized the tag setting system. * [improvement][headless-fe] Optimized the tag setting system.
2026-04-22 23:05:51 +08:00 · 2024-03-29 14:33:35 +08:00
parent 8cdd0b001a
commit 1ab88360ac
31 changed files with 1364 additions and 301 deletions
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx
@@ -7,6 +7,7 @@ import styles from './style.less';
 import { ArrowLeftOutlined } from '@ant-design/icons';
 import MetricTrendSection from '@/pages/SemanticModel/Metric/components/MetricTrendSection';
 import { ISemantic } from '../data';
+import MetricBasicInfo from './components/MetricBasicInfo';
 import DimensionAndMetricRelationModal from '../components/DimensionAndMetricRelationModal';
 import MetricInfoSider from './MetricInfoSider';
 import type { TabsProps } from 'antd';
@@ -77,9 +78,14 @@ const MetricDetail: React.FC<Props> = () => {
  };

  const tabItems: TabsProps['items'] = [
+    {
+      key: 'metricCaliberInput',
+      label: '基础信息',
+      children: <MetricBasicInfo metircData={metircData} onQueryMetricData={queryMetricData} />,
+    },
    {
      key: 'metricTrend',
-      label: '图表',
+      label: '指标探索',
      children: (
        <MetricTrendSection
          metircData={metircData}
@@ -88,11 +94,7 @@ const MetricDetail: React.FC<Props> = () => {
        />
      ),
    },
-    // {
-    //   key: 'metricCaliberInput',
-    //   label: '基础信息',
-    //   children: <></>,
-    // },
+
    // {
    //   key: 'metricDataRemark',
    //   label: '备注',
@@ -106,7 +108,7 @@ const MetricDetail: React.FC<Props> = () => {
        <div className={styles.metricDetail}>
          <div className={styles.tabContainer}>
            <Tabs
-              defaultActiveKey="metricTrend"
+              defaultActiveKey="metricCaliberInput"
              items={tabItems}
              tabBarExtraContent={{
                right: (
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx
@@ -11,6 +11,8 @@ import {
  deleteMetric,
  batchUpdateMetricStatus,
  batchDownloadMetric,
+  batchMetricPublish,
+  batchMetricUnPublish,
 } from '../service';
 import MetricFilter from './components/MetricFilter';
 import MetricInfoCreateForm from '../components/MetricInfoCreateForm';
@@ -92,6 +94,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
      ...params,
      createdBy: params.onlyShowMe ? currentUser.name : null,
      pageSize: params.showType ? 100 : params.pageSize || pagination.pageSize,
+      isPublish: 1,
    });
    setLoading(false);
    const { list, pageSize, pageNum, total } = data || {};
@@ -159,6 +162,21 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
    setCreateModalVisible(true);
  };

+  const queryBatchUpdatePublish = async (ids: React.Key[], status: boolean) => {
+    if (Array.isArray(ids) && ids.length === 0) {
+      return;
+    }
+    const queryPublish = status ? batchMetricPublish : batchMetricUnPublish;
+    const { code, msg } = await queryPublish({
+      ids,
+    });
+    if (code === 200) {
+      queryMetricList(filterParams);
+      return;
+    }
+    message.error(msg);
+  };
+
  const columnsConfig = ColumnsConfig();

  const columns: ProColumns[] = [
@@ -204,6 +222,22 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
      valueEnum: SENSITIVE_LEVEL_ENUM,
      render: columnsConfig.sensitiveLevel.render,
    },
+    {
+      dataIndex: 'isPublish',
+      title: '是否发布',
+      width: 100,
+      search: false,
+      render: (isPublish) => {
+        switch (isPublish) {
+          case 0:
+            return '否';
+          case 1:
+            return <span style={{ color: '#1677ff' }}>是</span>;
+          default:
+            return <Tag color="default">未知</Tag>;
+        }
+      },
+    },

    {
      dataIndex: 'description',
@@ -250,6 +284,25 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
              >
                编辑
              </a>
+              {record.isPublish ? (
+                <a
+                  key="metricUnPublishBtn"
+                  onClick={() => {
+                    queryBatchUpdatePublish([record.id], false);
+                  }}
+                >
+                  下架
+                </a>
+              ) : (
+                <a
+                  key="metricPublishBtn"
+                  onClick={() => {
+                    queryBatchUpdatePublish([record.id], true);
+                  }}
+                >
+                  发布
+                </a>
+              )}

              <Popconfirm
                title="确认删除？"
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/MetricInfoSider.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/MetricInfoSider.tsx
@@ -62,14 +62,14 @@ const MetricInfoSider: React.FC<Props> = ({
      <div className={styles.sectionContainer}>
        <hr className={styles.hr} />
        <div className={styles.section}>
-          <div className={styles.sectionTitleBox}>
+          {/* <div className={styles.sectionTitleBox}>
            <span className={styles.sectionTitle}>
              <Space>
                <ContainerOutlined />
                基本信息
              </Space>
            </span>
-          </div>
+          </div> */}

          <div className={styles.item}>
            <span className={styles.itemLable}>敏感度: </span>
@@ -193,12 +193,12 @@ const MetricInfoSider: React.FC<Props> = ({
            </span>
          </div>

-          {isArrayOfValues(metircData?.tags) && (
+          {isArrayOfValues(metircData?.classifications) && (
            <div className={styles.item}>
-              <span className={styles.itemLable}>标签: </span>
+              <span className={styles.itemLable}>分类: </span>
              <span className={styles.itemValue}>
                <Space size={2} wrap>
-                  {metircData?.tags.map((tag) => (
+                  {metircData?.classifications.map((tag) => (
                    <Tag color="blue" key={tag}>
                      {tag}
                    </Tag>
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricBasicInfo.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricBasicInfo.tsx
@@ -0,0 +1,207 @@
+import React, { useState, useEffect } from 'react';
+import { Divider, Flex, Tag, Input, Table } from 'antd';
+import { METRIC_DEFINE_TYPE } from '../../constant';
+import styles from '../style.less';
+import { ISemantic } from '../../data';
+
+const { TextArea } = Input;
+type Props = {
+  metircData?: ISemantic.IMetricItem;
+};
+
+const MetricBasicInformation: React.FC<Props> = ({ metircData }) => {
+  const [defineData, setDefineData] = useState<{
+    name: string;
+    listName: string;
+    expr: string;
+    list: any[];
+    columns: any[];
+  }>();
+
+  const metricColumns = [
+    {
+      dataIndex: 'name',
+      title: '指标名称',
+    },
+    {
+      dataIndex: 'bizName',
+      title: '英文名称',
+    },
+  ];
+
+  const fieldColumns = [
+    {
+      dataIndex: 'fieldName',
+      title: '字段名称',
+    },
+    {
+      dataIndex: 'dataType',
+      title: '字段类型',
+    },
+  ];
+
+  const measureColumns = [
+    {
+      dataIndex: 'bizName',
+      title: '度量名称',
+      tooltip: '由模型名称_字段名称拼接而来',
+    },
+    {
+      dataIndex: 'constraint',
+      title: '限定条件',
+      width: 250,
+      tooltip:
+        '该限定条件用于在计算指标时限定口径，作用于度量，所用于过滤的维度必须在创建模型的时候被标记为日期或者维度，不需要加where关键字。比如：维度A="值1" and 维度B="值2"',
+      render: (_: any, record: any) => {
+        const { constraint } = record;
+        return <TextArea readOnly value={constraint} />;
+      },
+    },
+    {
+      dataIndex: 'agg',
+      title: '聚合函数',
+      width: 80,
+    },
+  ];
+
+  useEffect(() => {
+    if (!metircData) {
+      return;
+    }
+    const {
+      metricDefineType,
+      metricDefineByFieldParams,
+      metricDefineByMeasureParams,
+      metricDefineByMetricParams,
+    } = metircData;
+    switch (metricDefineType) {
+      case METRIC_DEFINE_TYPE.FIELD:
+        setDefineData({
+          name: '按字段',
+          listName: '字段列表',
+          expr: metricDefineByFieldParams.expr,
+          list: metricDefineByFieldParams.fields,
+          columns: fieldColumns,
+        });
+        break;
+      case METRIC_DEFINE_TYPE.MEASURE:
+        setDefineData({
+          name: '按度量',
+          listName: '度量列表',
+          expr: metricDefineByMeasureParams.expr,
+          list: metricDefineByMeasureParams.measures,
+          columns: measureColumns,
+        });
+        break;
+      case METRIC_DEFINE_TYPE.METRIC:
+        setDefineData({
+          name: '按指标',
+          listName: '指标列表',
+          expr: metricDefineByMetricParams.expr,
+          list: metricDefineByMetricParams.metrics,
+          columns: metricColumns,
+        });
+        break;
+      default:
+        break;
+    }
+  }, [metircData]);
+
+  return (
+    <div className={styles.sectionBox} style={{ padding: '10px 20px' }}>
+      <div className={styles.metricBasicInfo}>
+        <Flex justify="space-between" align="center">
+          <p className={styles.caliberSubTitle}>指标信息</p>
+        </Flex>
+        <Flex wrap="wrap">
+          <div>
+            <span className={styles.label}>指标ID：</span>
+            {metircData?.id}
+          </div>
+          <div>
+            <span className={styles.label}>中文名：</span>
+            {metircData?.name}
+          </div>
+        </Flex>
+        <Flex wrap="wrap">
+          <div>
+            <span className={styles.label}>英文名：</span>
+            {metircData?.bizName}
+          </div>
+        </Flex>
+        <Flex wrap="wrap">
+          <div>
+            <span className={styles.label}>别名：</span>
+            {metircData?.alias &&
+              metircData.alias.split(',').map((alias) => (
+                <Tag color="blue" key={alias}>
+                  {alias}
+                </Tag>
+              ))}
+          </div>
+        </Flex>
+        <Flex wrap="wrap">
+          <div>
+            <span className={styles.label}>分类：</span>
+            {Array.isArray(metircData?.classifications) &&
+              metircData.classifications.map((className) => (
+                <Tag color="blue" key={className}>
+                  {className}
+                </Tag>
+              ))}
+          </div>
+        </Flex>
+        <Divider />
+        <Flex justify="space-between" align="center">
+          <p className={styles.caliberSubTitle}>模型信息</p>
+        </Flex>
+
+        <Flex wrap="wrap">
+          <div>
+            <span className={styles.label}>模型名：</span>
+            {metircData?.modelName}
+          </div>
+          <div>
+            <span className={styles.label}>模型ID：</span> {metircData?.modelId}
+          </div>
+        </Flex>
+
+        <Flex wrap="wrap">
+          <div>
+            <span className={styles.label}>模型英文名：</span>
+            {metircData?.modelBizName}
+          </div>
+        </Flex>
+
+        <Divider />
+
+        <Flex justify="space-between" align="center">
+          <p className={styles.caliberSubTitle}>定义信息</p>
+        </Flex>
+        <Flex wrap="wrap">
+          <div>
+            <span className={styles.label}>定义类型：</span>
+            {defineData?.name}
+          </div>
+          <div>
+            <span className={styles.label}>表达式：</span>
+            {defineData?.expr}
+          </div>
+        </Flex>
+
+        <div className={styles.label} style={{ marginBottom: 10 }}>
+          {defineData?.listName}：
+        </div>
+        <Table
+          className={styles.defineDataTable}
+          columns={defineData?.columns}
+          dataSource={defineData?.list}
+          size="small"
+          pagination={false}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MetricBasicInformation;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricFilter.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricFilter.tsx
@@ -108,7 +108,11 @@ const MetricFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange
            <Switch size="small" />
          </FormItem>
        </StandardFormRow> */}
-
+        <StandardFormRow key="domainIds" title="主题域" block>
+          <FormItem name="domainIds">
+            <DomainTreeSelect />
+          </FormItem>
+        </StandardFormRow>
        {filterList.map((item) => {
          const { title, key, options } = item;
          return (
@@ -125,11 +129,6 @@ const MetricFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange
            </StandardFormRow>
          );
        })}
-        <StandardFormRow key="domainIds" title="所属主题域" block>
-          <FormItem name="domainIds">
-            <DomainTreeSelect />
-          </FormItem>
-        </StandardFormRow>
      </Space>
    </Form>
  );
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricRemark.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricRemark.tsx
@@ -0,0 +1,187 @@
+import { message, Select, Tag } from 'antd';
+import React, { useState } from 'react';
+import CommonEditTable from '../../components/CommonEditTable';
+import { ISemantic } from '../../data';
+import {
+  queryRemarks,
+  deleteMetricDataRemark,
+  insertOrUpdateMetircDataRemark,
+} from '../../service';
+import styles from '../style.less';
+
+type Props = {
+  metricId: number;
+};
+
+const remarkColumns = [
+  {
+    title: '开始时间',
+    dataIndex: 'startTime',
+    valueType: 'dateTime',
+    search: false,
+    width: 180,
+  },
+  {
+    title: '结束时间',
+    dataIndex: 'endTime',
+    valueType: 'dateTime',
+    search: false,
+    width: 180,
+  },
+  {
+    title: '产品',
+    dataIndex: 'product',
+    width: 150,
+    tooltip: '',
+    renderFormItem: () => {
+      return (
+        <Select
+          mode="tags"
+          maxTagCount={1}
+          style={{ width: '100%' }}
+          placeholder="请选择产品类型"
+          options={[
+            {
+              label: 'TME整体',
+              value: 'TME整体',
+            },
+            {
+              label: 'QQ音乐',
+              value: 'QQ音乐',
+            },
+            {
+              label: '酷狗音乐',
+              value: '酷狗音乐',
+            },
+            {
+              label: '酷我音乐',
+              value: '酷我音乐',
+            },
+          ]}
+        />
+      );
+    },
+    render: (_: any, row: any) => {
+      return Array.isArray(row?.product) ? (
+        row?.product.map((item: any) => <Tag key={item}>{item}</Tag>)
+      ) : (
+        <Tag key={row.product}>{row.product}</Tag>
+      );
+    },
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    width: 200,
+    tooltip: '',
+    search: false,
+    fieldProps: {
+      placeholder: '请填写备注',
+    },
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+          whitespace: true,
+          message: '此项是必填项',
+        },
+      ],
+    },
+  },
+];
+
+const MetricRemark: React.FC<Props> = ({ metricId }) => {
+  const [remarkData, setRemarkData] = useState<ISemantic.IMetricRemarkItem[]>([]);
+  const [remarkPagination, setRemarkPagination] = useState({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+  });
+
+  const queryRemarkData = async () => {
+    const { code, data, msg } = await queryRemarks({
+      current: remarkPagination.current,
+      size: remarkPagination.pageSize,
+      metricId,
+    });
+    const { records, size, current, total } = data || {};
+    let resData: any = {};
+
+    if (code == 200) {
+      setRemarkPagination({
+        pageSize: size,
+        current,
+        total,
+      });
+
+      const list = records.map((item: any) => {
+        return {
+          ...item,
+          editRowId: (Math.random() * 1000000).toFixed(0),
+        };
+      });
+      setRemarkData(list);
+      resData = {
+        data: list || [],
+        success: true,
+      };
+    } else {
+      message.error(msg);
+      resData = {
+        data: [],
+        total: 0,
+        success: false,
+      };
+    }
+    return resData;
+  };
+
+  const handleMetricDataDelete = async (id: string) => {
+    const { code, msg } = await deleteMetricDataRemark(id);
+    if (code !== 200) {
+      message.error(msg);
+    }
+  };
+
+  const handleMetricRemarksSubmit = async (data: any) => {
+    const { code, msg } = await insertOrUpdateMetircDataRemark({
+      ...data,
+      product: Array.isArray(data.product) ? data.product.join() : data.product,
+      metricId,
+    });
+    if (code !== 200) {
+      message.error(msg);
+    }
+  };
+
+  return (
+    <div className={styles.sectionBox} style={{ padding: '20px' }}>
+      <div className={styles.table}>
+        <CommonEditTable
+          position="top"
+          search={false}
+          request={queryRemarkData}
+          tableDataSource={remarkData}
+          columnList={remarkColumns}
+          onDataSourceChange={(tableData) => { }}
+          pagination={{
+            ...remarkPagination,
+            onChange: (page: number) => {
+              setRemarkPagination({ ...remarkPagination, current: page });
+            },
+          }}
+          onDelete={(data: any) => {
+            handleMetricDataDelete(data.id);
+          }}
+          editable={{
+            onSave: async (rowKey: string, data: any) => {
+              handleMetricRemarksSubmit(data);
+            },
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MetricRemark;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendSection.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendSection.tsx
@@ -43,10 +43,12 @@ const MetricTrendSection: React.FC<Props> = ({
    startDate: string;
    endDate: string;
    dateField: string;
+    period: DateRangeType;
  }>({
    startDate: dayjs().subtract(6, 'days').format('YYYY-MM-DD'),
    endDate: dayjs().format('YYYY-MM-DD'),
    dateField: DateFieldMap[DateRangeType.DAY],
+    period: DateRangeType.DAY,
  });
  const [rowNumber, setRowNumber] = useState<number>(5);

@@ -66,31 +68,24 @@ const MetricTrendSection: React.FC<Props> = ({
    if (!metircData) {
      return;
    }
-    const { modelId, bizName, name } = metircData;
+    const { bizName, id, domainId, name } = metircData;
    indicatorFields.current = [{ name, column: bizName }];

-    const dimensionFiltersBizNameList = dimensionFilters.map((item) => {
-      return item.bizName;
-    });
-
-    const bizNameList = Array.from(new Set([...dimensionFiltersBizNameList, ...dimensionGroup]));
-
-    const modelIds = dimensionList.reduce(
+    const dimensionIds = dimensionList.reduce(
      (idList: number[], item: ISemantic.IDimensionItem) => {
-        if (bizNameList.includes(item.bizName)) {
-          idList.push(item.modelId);
+        if (dimensionGroup.includes(item.bizName)) {
+          idList.push(item.id);
        }
        return idList;
      },
-      [modelId],
+      [],
    );
-
    const res = await queryStruct({
-      // modelId,
-      modelIds: Array.from(new Set(modelIds)),
-      bizName,
-      groups: dimensionGroup,
-      dimensionFilters,
+      domainId,
+      metricIds: [id],
+      dimensionIds,
+      filters: dimensionFilters,
+      period: periodDate.period,
      dateField: periodDate.dateField,
      startDate: periodDate.startDate,
      endDate: periodDate.endDate,
@@ -162,13 +157,16 @@ const MetricTrendSection: React.FC<Props> = ({
                      const [startDate, endDate] = value;
                      const { dateSettingType, dynamicParams, staticParams } = config;
                      let dateField = DateFieldMap[DateRangeType.DAY];
+                      let period = DateRangeType.DAY;
                      if (DateSettingType.DYNAMIC === dateSettingType) {
                        dateField = DateFieldMap[dynamicParams.dateRangeType];
+                        period = dynamicParams.dateRangeType;
                      }
                      if (DateSettingType.STATIC === dateSettingType) {
                        dateField = DateFieldMap[staticParams.dateRangeType];
+                        period = staticParams.dateRangeType;
                      }
-                      setPeriodDate({ startDate, endDate, dateField });
+                      setPeriodDate({ startDate, endDate, dateField, period });
                    }}
                    disabledAdvanceSetting={true}
                  />
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less
@@ -10,13 +10,62 @@
    margin: 20px;
 }

+.table {
+    overflow: auto;
+}
+  
+.metricBasicInfo {
+    .label {
+        font-size: 14px;
+        color: rgb(95, 116, 141);
+    }
+    div {
+        min-width: 300px;
+        font-size: 15px;
+        margin-bottom: 10px;
+        color:  rgb(18, 31, 67);
+    }
+}
+  
+.caliberTitle {
+    font-weight: 500;
+    font-size: 16px;
+    margin-bottom: 20px;
+    color: rgb(18, 31, 67);
+}

+.caliberSubTitle {
+    font-weight: 500;
+    font-size: 14px;
+    color: rgb(33, 43, 54);
+}
+
+.defineDataTable{
+    width: 600px;
+    background-color: rgb(255, 255, 255);
+    color: rgb(67, 71, 75);
+    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    border-radius: 6px;
+    box-shadow: rgba(114, 117, 120, 0.14) 0px 9px 16px, rgba(179, 181, 183, 0.38) 0px 0px 2px;
+    overflow: hidden;
+    :global {
+        .ant-table-thead {
+            font-size: 13px;
+        }
+    }
+}
+  
+.caliberDesc {
+    font-size: 14px;
+    color: #bdbdbd;
+}
+  

 .searchBox {
    // margin-bottom: 12px;
    background: #fff;
    border-radius: 10px;
-    width: 540px;
+    width: 740px;
    margin: 0 auto;
    .searchInput {
        width: 100%;