fix: 验收问题55-60修复 (#4139)

# Reviewed, transaction id: 25410
TencentBlueKing · Nov 29, 2024 · 1c6797d · 1c6797d
1 parent 444f80c
commit 1c6797d
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 26 deletions.
diff --git a/bklog/web/src/language/lang/en/content.ts b/bklog/web/src/language/lang/en/content.ts
@@ -985,4 +985,9 @@ export default {
   同名视图替换: 'Replace the same name view',
   '此操作会覆盖当前SQL，请谨慎操作':'This operation will overwrite the current SQL, please operate with caution:',
   SQL查询: 'SQL Query',
+  '至少需要一个指标，一个维度': 'At least one metric, one dimension',
+  '至少需要一个指标，一个维度/时间维度': 'At least one metric, one dimension/time dimension',
+  图表查询配置已变更: 'Chart query configuration has changed',
+  请重新发起查询: 'Please initiate a query again',
+  我知道了: 'I know',
 };
diff --git a/...g/web/src/views/retrieve-v2/search-result-panel/graph-analysis/chart/chart-config-def.tsx b/...g/web/src/views/retrieve-v2/search-result-panel/graph-analysis/chart/chart-config-def.tsx
@@ -125,7 +125,7 @@ export const lineOrBarOptions = {
   },
   tooltip: {
     show: true,
-    trigger: 'axis',
+    trigger: 'item',
     axisPointer: {
       type: 'line',
       label: {
@@ -179,8 +179,8 @@ export const lineOrBarOptions = {
     axisLabel: {
       fontSize: 12,
       color: '#979BA5',
-      showMinLabel: false,
-      showMaxLabel: false,
+      showMinLabel: true,
+      showMaxLabel: true,
       align: 'left',
     },
     splitLine: {

diff --git a/bklog/web/src/views/retrieve-v2/search-result-panel/graph-analysis/chart/index.tsx b/bklog/web/src/views/retrieve-v2/search-result-panel/graph-analysis/chart/index.tsx
@@ -98,8 +98,28 @@ export default defineComponent({
         }
       },
     );
+    watch(() => formatListData.value?.total_records, (newTotal) => {
+      pagination.value.count = newTotal;
+    });
+    const tableData = computed(() => {
+      const list = formatListData.value?.list ?? [];
+      const start = (pagination.value.current - 1) * pagination.value.limit;
+      const end = start + pagination.value.limit;
+      return list.slice(start, end);
+    });
+    const pagination = ref({ 
+      current: 1,
+      count: formatListData.value?.total_records,
+      limit: 20
+    })
 
-    const tableData = computed(() => formatListData.value?.list ?? []);
+    const handlePageChange = (newPage) => {
+      pagination.value.current = newPage;
+    }
+    const handlePageLimitChange = (limit) => {
+      pagination.value.current = 1;
+      pagination.value.limit = limit;
+    }
     const columns = computed(() => {
       if (props.chartOptions.category === 'table') {
         return (props.chartOptions.data?.select_fields_order ?? []).filter(
@@ -116,7 +136,12 @@ export default defineComponent({
     const rendChildNode = () => {
       if (showTable.value && tableData.value.length) {
         return (
-          <bk-table data={tableData.value}>
+          <bk-table 
+            data={tableData.value}   
+            pagination={pagination.value} 
+            on-page-change={handlePageChange}
+            on-page-limit-change={handlePageLimitChange}
+            >
             {columns.value.map(col => (
               <bk-table-column
                 key={col}

diff --git a/...g/web/src/views/retrieve-v2/search-result-panel/graph-analysis/chart/use-chart-render.tsx b/...g/web/src/views/retrieve-v2/search-result-panel/graph-analysis/chart/use-chart-render.tsx
@@ -225,10 +225,12 @@ export default ({ target, type }: { target: Ref<any>; type: string }) => {
   const getTooltipFormatter = () => {
     return {
       formatter: params => {
+        console.log(params);
+
         const args = Array.isArray(params) ? params : [params];
-        const label = new Set(args.map(p => p.axisValueLabel));
+        const label = new Set(args.map(p => p.name));
         const content = `<div>${label ? `<span>${[...label].join(',')}</span></br>` : ''}${args
-          .map(({ value, name }) => `<span>${value[2] ?? name}: ${abbreviateNumber(value[1])}</span>`)
+          .map(({ value, seriesName }) => `<span>${value[2] ?? seriesName}: ${abbreviateNumber(value[1])}</span>`)
           .join('</br>')}</div>`;
         return content;
       },

diff --git a/bklog/web/src/views/retrieve-v2/search-result-panel/graph-analysis/index.scss b/bklog/web/src/views/retrieve-v2/search-result-panel/graph-analysis/index.scss
@@ -90,7 +90,7 @@
 
     .body-left {
       width: calc(100% - 360px);
-      overflow: auto;
+      overflow: hidden;
       background: #f5f7fa;
       border-right: solid 1px #dcdee5;
 
@@ -171,6 +171,7 @@
         padding: 12px 16px;
         margin: 16px 0;
         margin-bottom: 0;
+        overflow-y: auto;
         background: #ffffff;
         border-radius: 2px;
         box-shadow:
@@ -231,10 +232,17 @@
           z-index: 10;
           width: var(--exception-width);
           height: var(--exception-height);
-          padding-top: 120px;
+          padding-top: 60px;
           background-color: #ffffff80;
           backdrop-filter: blur(6px);
 
+          .bk-exception-img {
+            height: 60%;
+            img{
+              height: 100%;
+              max-height: 200px;
+            }
+          }
           .bk-exception-title {
             max-height: 72px;
             padding: 0 40px;
@@ -254,7 +262,7 @@
           }
 
           .bk-exception-footer {
-            margin-top: 8px;
+            margin: 8px 0;
           }
         }
       }
@@ -350,6 +358,10 @@
 
   .basic-info-row {
     margin-bottom: 20px;
+    .title{
+      font-size: 12px;
+      color: #63656e;
+    }
   }
 
   .field-setting-row {

diff --git a/bklog/web/src/views/retrieve-v2/search-result-panel/graph-analysis/index.tsx b/bklog/web/src/views/retrieve-v2/search-result-panel/graph-analysis/index.tsx
@@ -91,7 +91,6 @@ export default class GraphAnalysisIndex extends tsc<IProps> {
   graphCategoryList = [GraphCategory.TABLE, GraphCategory.LINE, GraphCategory.BAR, GraphCategory.PIE];
 
   basicInfoTitle = {
-    show: false,
     title: '',
   };
 
@@ -296,20 +295,12 @@ export default class GraphAnalysisIndex extends tsc<IProps> {
   renderBasicInfo() {
     return [
       <div class='basic-info-row'>
-        <bk-checkbox
-          v-model={this.basicInfoTitle.show}
-          false-value={false}
-          true-value={true}
-        >
-          {this.$t('标题')}
-        </bk-checkbox>
-        {this.basicInfoTitle.show && (
+        <div class='title'> {this.$t('标题')}</div>
           <bk-input
             style='margin-top: 8px;'
             v-model={this.basicInfoTitle.title}
             placeholder={this.$t('请输入标题')}
           ></bk-input>
-        )}
       </div>,
     ];
   }
@@ -416,7 +407,7 @@ export default class GraphAnalysisIndex extends tsc<IProps> {
 
   getChartConfigValidate() {
     let showException = false;
-    const message = '请完成指标、维度配置';
+    const message = this.activeGraphCategory === GraphCategory.PIE? this.$t('至少需要一个指标，一个维度') : this.$t('至少需要一个指标，一个维度/时间维度');
     const showQuery = false;
     if (this.activeGraphCategory === GraphCategory.PIE) {
       showException = !(this.xFields.length && this.yFields.length);
@@ -436,7 +427,7 @@ export default class GraphAnalysisIndex extends tsc<IProps> {
     }
 
     if (this.isSqlValueChanged) {
-      return { showException: true, message: '图表查询配置已变更', showQuery: true };
+      return { showException: true, message: this.$t('图表查询配置已变更'), showQuery: true };
     }
 
     return this.getChartConfigValidate();
@@ -454,7 +445,7 @@ export default class GraphAnalysisIndex extends tsc<IProps> {
           <div class='bk-exception-title'>{message}</div>
           {showQuery
             ? [
-                <div class='bk-exception-description'>请重新发起查询</div>,
+                <div class='bk-exception-description'>{this.$t('请重新发起查询')}</div>,
                 <div class='bk-exception-footer'>
                   <bk-button
                     class='mr10'
@@ -463,7 +454,7 @@ export default class GraphAnalysisIndex extends tsc<IProps> {
                     type='submit'
                     onClick={this.handleEditorSearchClick}
                   >
-                    查询
+                   {this.$t('查询')}
                   </bk-button>
                   <bk-button
                     class='mr10'
@@ -472,7 +463,7 @@ export default class GraphAnalysisIndex extends tsc<IProps> {
                       this.isSqlValueChanged = false;
                     }}
                   >
-                    我知道了
+                   {this.$t('我知道了')} 
                   </bk-button>
                 </div>,
               ]
@@ -584,7 +575,7 @@ export default class GraphAnalysisIndex extends tsc<IProps> {
               class='graph-canvas-options'
             >
               <div class='canvas-head'>
-                {this.basicInfoTitle.show ? <span class='title'>{this.basicInfoTitle.title}</span> : ''}
+                {this.basicInfoTitle.title ? <span class='title'>{this.basicInfoTitle.title}</span> : ''}
                 <span class='icons'>
                   <span
                     class={{ active: this.chartActiveType !== GraphCategory.TABLE }}