From 1d88269e49abc554a78b310a9b2abc4da4abe3f3 Mon Sep 17 00:00:00 2001
From: xlc <2933458919@qq.com>
Date: Wed, 24 Jul 2024 18:40:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E3=80=90=E4=B8=93=E9=A1=B9=E3=80=91APM?=
 =?UTF-8?q?=20=E5=BA=94=E7=94=A8=E6=8B=93=E6=89=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/details-side.scss              |  68 +++++++++++
 .../components/details-side.tsx               | 110 ++++++++++++++++++
 2 files changed, 178 insertions(+)

diff --git a/bkmonitor/webpack/src/monitor-ui/chart-plugins/plugins/apm-time-series/components/details-side.scss b/bkmonitor/webpack/src/monitor-ui/chart-plugins/plugins/apm-time-series/components/details-side.scss
index fb7d207ef..ddba31ca9 100644
--- a/bkmonitor/webpack/src/monitor-ui/chart-plugins/plugins/apm-time-series/components/details-side.scss
+++ b/bkmonitor/webpack/src/monitor-ui/chart-plugins/plugins/apm-time-series/components/details-side.scss
@@ -41,4 +41,72 @@ $header-height: 52px;
       }
     }
   }
+
+  .content-wrap {
+    padding: 28px 40px;
+
+    .content-header-wrap {
+      display: flex;
+      align-items: center;
+
+      .left-wrap {
+        display: flex;
+        align-items: center;
+
+        .theme-select-wrap {
+          min-width: 112px;
+          margin-right: 12px;
+        }
+
+        .compare-time-wrap {
+          display: flex;
+          align-items: center;
+          height: 32px;
+          padding: 0 12px;
+          margin-right: 12px;
+          margin-left: 16px;
+          background: #F5F6F9;
+          border-radius: 2px;
+
+          .compare-time-item {
+            display: flex;
+            align-items: center;
+
+            .point {
+              width: 10px;
+              height: 10px;
+              margin-right: 4px;
+            }
+
+            .time-text {
+              white-space: nowrap;
+            }
+          }
+
+          .split-line {
+            width: 1px;
+            height: 20px;
+            margin: 0 16px;
+            background: #EAEBF0;
+          }
+        }
+
+        .compare-switcher {
+          display: flex;
+          align-items: center;
+          margin-left: 16px;
+
+          .switcher-text {
+            margin-left: 9px;
+          }
+        }
+      }
+
+      .right-wrap {
+        flex: 1;
+        max-width: 240px;
+        margin: 0 0 0 auto;
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/bkmonitor/webpack/src/monitor-ui/chart-plugins/plugins/apm-time-series/components/details-side.tsx b/bkmonitor/webpack/src/monitor-ui/chart-plugins/plugins/apm-time-series/components/details-side.tsx
index 2d466bdba..95335aeba 100644
--- a/bkmonitor/webpack/src/monitor-ui/chart-plugins/plugins/apm-time-series/components/details-side.tsx
+++ b/bkmonitor/webpack/src/monitor-ui/chart-plugins/plugins/apm-time-series/components/details-side.tsx
@@ -40,8 +40,40 @@ interface IProps {
 export default class DetailsSide extends tsc<IProps> {
   @Prop({ type: Boolean, default: false }) show: boolean;
 
+  /* 时间 */
   timeRange: TimeRangeType = ['now-1d', 'now'];
   timezone: string = getDefaultTimezone();
+  /*  */
+  selectOptions = [
+    { id: 'avg', name: '平均响应耗时' },
+    { id: 'error', name: '总错误数' },
+  ];
+  selected = 'avg';
+
+  typeOptions = [
+    { id: 'initiative', name: '主调' },
+    { id: 'passive', name: '被调' },
+  ];
+  curType = 'initiative';
+
+  compareTimeInfo = [
+    {
+      id: 'refer',
+      name: window.i18n.t('参照时间'),
+      time: '2024.1.1 00:00',
+      color: '#FF9C01',
+    },
+    {
+      id: 'compare',
+      name: window.i18n.t('对比时间'),
+      time: '2024.1.1 00:00',
+      color: '#7B29FF',
+    },
+  ];
+
+  isCompare = false;
+
+  searchValue = '';
 
   handleClose() {
     this.$emit('close');
@@ -56,6 +88,12 @@ export default class DetailsSide extends tsc<IProps> {
     this.timezone = timezone;
   }
 
+  handleTypeChange(id: string) {
+    this.curType = id;
+  }
+
+  handleSearch() {}
+
   render() {
     return (
       <bk-sideslider
@@ -80,6 +118,78 @@ export default class DetailsSide extends tsc<IProps> {
             />
           </div>
         </div>
+        <div
+          class='content-wrap'
+          slot='content'
+        >
+          <div class='content-header-wrap'>
+            <div class='left-wrap'>
+              <bk-select
+                class='theme-select-wrap'
+                v-model={this.selected}
+                clearable={false}
+              >
+                {this.selectOptions.map(item => (
+                  <bk-option
+                    id={item.id}
+                    key={item.id}
+                    name={item.name}
+                  />
+                ))}
+              </bk-select>
+              <div class='bk-button-group'>
+                {this.typeOptions.map(item => (
+                  <bk-button
+                    key={item.id}
+                    class={this.curType === item.id ? 'is-selected' : ''}
+                    onClick={() => this.handleTypeChange(item.id)}
+                  >
+                    {item.name}
+                  </bk-button>
+                ))}
+              </div>
+              <div class='compare-switcher'>
+                <bk-switcher
+                  v-model={this.isCompare}
+                  theme='primary'
+                />
+                <span class='switcher-text'>{this.$t('对比')}</span>
+              </div>
+              {this.isCompare && (
+                <div class='compare-time-wrap'>
+                  {this.compareTimeInfo.map((item, index) => [
+                    index ? (
+                      <div
+                        key={`${item.id}${index}`}
+                        class='split-line'
+                      />
+                    ) : undefined,
+                    <div
+                      key={item.id}
+                      class='compare-time-item'
+                    >
+                      <span
+                        style={{ backgroundColor: item.color }}
+                        class='point'
+                      />
+                      <span class='time-text'>{`${item.name}: ${item.time}`}</span>
+                    </div>,
+                  ])}
+                </div>
+              )}
+            </div>
+            <div class='right-wrap'>
+              <bk-input
+                v-model={this.searchValue}
+                placeholder={this.$t('搜索服务名称')}
+                right-icon='bk-icon icon-search'
+                clearable
+                onChange={this.handleSearch}
+                onRightIconClick={this.handleSearch}
+              />
+            </div>
+          </div>
+        </div>
       </bk-sideslider>
     );
   }