diff --git a/mindinsight/ui/src/components/operator-unit.vue b/mindinsight/ui/src/components/operator-unit.vue
new file mode 100644
index 00000000..48ada991
--- /dev/null
+++ b/mindinsight/ui/src/components/operator-unit.vue
@@ -0,0 +1,1179 @@
+<!--
+Copyright 2021 Huawei Technologies Co., Ltd.All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<template>
+  <div class="cl-profiler-wrap">
+    <div class="cl-profiler-top"
+         :class="{fullScreen:coreFullScreen}"
+         v-if="coreCharts.data.length">
+      <div>
+        <div class="chart-title">{{$t('profiling.chartTitle')}}</div>
+        <el-radio-group class="chart-radio-group"
+                        v-model="coreCharts.type"
+                        @change="coreChartChange"
+                        fill="#00A5A7"
+                        text-color="#FFFFFF"
+                        size="small"
+                        v-if="hasBarChart">
+          <el-radio-button :label="0">
+            {{$t('operator.pie')}}
+          </el-radio-button>
+          <el-radio-button :label="1">
+            {{ $t('operator.bar')}}
+          </el-radio-button>
+        </el-radio-group>
+      </div>
+      <div class="cl-profiler-echarts">
+        <div :id="chartId"
+             class="chart"></div>
+      </div>
+    </div>
+    <div class="cl-profiler-bottom"
+         :class="{fullScreen:coreFullScreen}"
+         v-if="coreCharts.data.length">
+      <img src="../assets/images/full-screen.png"
+           :title="$t('graph.fullScreen')"
+           class="fullScreen"
+           @click="fullScreenControl()">
+      <div>
+        <el-radio-group v-model="coreStatisticType"
+                        @change="coreTableChange"
+                        fill="#00A5A7"
+                        text-color="#FFFFFF"
+                        size="small"
+                        v-if="hasBarChart">
+          <el-radio-button :label="1">
+            {{$t('operator.allOperator')}}
+          </el-radio-button>
+          <el-radio-button :label="0">
+            {{$t('operator.classificationOperator')}}
+          </el-radio-button>
+        </el-radio-group>
+        <div class="cl-search-box">
+          <el-input v-model="searchByTypeInput"
+                    v-if="!coreStatisticType && hasBarChart"
+                    :placeholder="search.all.label"
+                    clearable
+                    @clear="searchOpCoreList()"
+                    @keyup.enter.native="searchOpCoreList()"></el-input>
+          <el-input v-model="searchByNameInput"
+                    v-if="coreStatisticType && hasBarChart"
+                    :placeholder="search.detail.label"
+                    clearable
+                    @clear="searchOpCoreList()"
+                    @keyup.enter.native="searchOpCoreList()"></el-input>
+          <el-input v-model="searchByNameInput"
+                    v-if="!hasBarChart"
+                    :placeholder="searchPlaceholder"
+                    clearable
+                    @clear="searchOpCoreList()"
+                    @keyup.enter.native="searchOpCoreList()"></el-input>
+        </div>
+        <el-select v-if="!hasBarChart"
+                   v-model="searchType"
+                   class="core-search-type"
+                   :placeholder="$t('public.select')"
+                   @change="searchTypeChange()">
+          <el-option v-for="item in coreSearchOptions"
+                     :key="item.value"
+                     :label="item.label"
+                     :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <el-table v-show="!coreStatisticType && opTypeCol && opTypeCol.length"
+                :data="opTypeList"
+                ref="expandTable"
+                @expand-change="expandCoreTypeItem"
+                @sort-change="opTypeSortChange"
+                stripe
+                height="calc(100% - 40px)"
+                width="100%">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <div class="expand-table">
+              <el-table :data="props.row.opDetailList"
+                        stripe
+                        ref="expandCoreChild"
+                        width="100%"
+                        tooltip-effect="light"
+                        @cell-click="showInfoDetail"
+                        @sort-change="(...args)=>{coreDetailSortChange(props.row, ...args)}">
+                <el-table-column v-for="(ele, key) in props.row.opDetailCol"
+                                 :property="ele"
+                                 :key="key"
+                                 :sortable="ele === 'op_info' ? false : 'custom'"
+                                 :min-width="(ele === 'op_info') ? 350 : (ele === 'full_op_name') ? 220 : ''"
+                                 :show-overflow-tooltip="(ele === 'avg_execution_time')">
+                  <template slot="header">
+                    <div class="custom-label"
+                         :title="getHeaderField(ele)">
+                      {{getHeaderField(ele)}}
+                    </div>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <el-pagination :current-page="props.row.opDetailPage.offset + 1"
+                             :page-size="props.row.opDetailPage.limit"
+                             :page-sizes="[10, 20, 50]"
+                             @current-change="(...args)=>{opDetailPageChange(props.row, ...args)}"
+                             @size-change="(...args)=>{opDetailPageSizeChange(props.row, ...args)}"
+                             layout="total, sizes, prev, pager, next, jumper"
+                             :total="props.row.pageTotal">
+              </el-pagination>
+              <div class="clear"></div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column v-for="(item, $index) in opTypeCol"
+                         :property="item"
+                         :key="$index"
+                         sortable>
+          <template slot="header">
+            <div class="custom-label"
+                 :title="getHeaderField(item)">
+              {{getHeaderField(item)}}
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-table v-show="coreStatisticType && opAllTypeList.opDetailCol && opAllTypeList.opDetailCol.length"
+                :data="opAllTypeList.opDetailList"
+                stripe
+                ref="opAllTable"
+                width="100%"
+                height="calc(100% - 80px)"
+                @cell-click="showInfoDetail"
+                @sort-change="(...args)=>{coreDetailSortChange(opAllTypeList, ...args)}"
+                tooltip-effect="light">
+        <el-table-column v-for="(item, $index) in opAllTypeList.opDetailCol"
+                         :property="item"
+                         :key="$index"
+                         :sortable="item === 'op_info' ? false : 'custom'"
+                         :min-width="(item === 'op_info') ? 350 : (item === 'full_op_name') ? 220 : ''"
+                         :show-overflow-tooltip="(item === 'avg_execution_time')">
+          <template slot="header">
+            <div class="custom-label"
+                 :title="getHeaderField(item)">
+              {{getHeaderField(item)}}
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination v-show="coreStatisticType"
+                     v-if="opAllTypeList.opDetailList.length"
+                     :current-page="opAllTypeList.opDetailPage.offset + 1"
+                     :page-size="opAllTypeList.opDetailPage.limit"
+                     :page-sizes="[10, 20, 50]"
+                     @current-change="(...args)=>{opDetailPageChange(opAllTypeList, ...args)}"
+                     @size-change="(...args)=>{opDetailPageSizeChange(opAllTypeList, ...args)}"
+                     layout="total, sizes, prev, pager, next, jumper"
+                     :total="opAllTypeList.pageTotal">
+      </el-pagination>
+    </div>
+    <div class="image-noData"
+         v-if="coreCharts.data.length === 0">
+      <div>
+        <img :src="require('@/assets/images/nodata.png')"
+             alt="" />
+      </div>
+      <p>{{ initOver?$t("public.noData"):$t('public.dataLoading') }}</p>
+    </div>
+    <el-dialog :title="rowName"
+               :visible.sync="detailsDialogVisible"
+               width="50%"
+               :close-on-click-modal="false"
+               class="details-data-list">
+      <el-table :data="detailsDataList"
+                row-key="id"
+                lazy
+                tooltip-effect="light"
+                :load="loadDataListChildren"
+                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+        <el-table-column width="50" />
+        <el-table-column prop="key"
+                         width="180"
+                         label="Key"> </el-table-column>
+        <el-table-column prop="value"
+                         show-overflow-tooltip
+                         label="Value">
+          <template slot-scope="scope">
+            {{ scope.row.value }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import echarts from 'echarts';
+import requestService from '../services/request-service';
+import CommonProperty from '../common/common-property';
+
+export default {
+  props: {
+    chartId: {
+      type: String,
+      default: '',
+    },
+    currentCard: {
+      type: String,
+      default: '',
+    },
+    opType: {
+      type: Object,
+      default: () => {
+        return {
+          all: '',
+          detail: '',
+        };
+      },
+    },
+    opSortCondition: {
+      type: Object,
+      default: () => {
+        return {
+          all: {
+            name: '',
+            type: '',
+          },
+          detail: {
+            name: '',
+            type: '',
+          },
+        };
+      },
+    },
+    headerFilder: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    search: {
+      type: Object,
+      default: () => {
+        return {
+          all: {
+            label: '',
+            type: '',
+          },
+          detail: {
+            label: '',
+            type: '',
+          },
+        };
+      },
+    },
+    chart: {
+      type: Object,
+      default: () => {
+        return {
+          hasPercent: true,
+          value: 1,
+          percent: 3,
+        };
+      },
+    },
+    hasBarChart: {
+      type: Boolean,
+      default: true,
+    },
+    coreSearchType: {
+      type: String,
+      default: '',
+    },
+    coreSearchOptions: {
+      type: Array,
+      default: () => {
+        return [
+          {label: '', value: '', placeHolder: ''},
+          {label: '', value: '', placeHolder: ''},
+        ];
+      },
+    },
+    accuracy: {
+      type: Number,
+      default: 3,
+    },
+  },
+  data() {
+    return {
+      coreCharts: {
+        type: 0,
+        id: this.chartId,
+        chartDom: null,
+        data: [],
+      }, // ai core chart
+      coreStatisticType: this.hasBarChart ? 0 : 1, // ai core table statistic type
+      searchByTypeInput: '', // search by ai core type name
+      searchByNameInput: '', // search by ai core detail name
+      opTypeCol: [], // table headers list of operator type
+      opTypeList: [], // table list of operator type
+      opAllTypeList: {
+        opDetailCol: [],
+        opDetailList: [],
+        pageTotal: 0,
+        opDetailPage: {
+          offset: 0,
+          limit: 10,
+        },
+        op_filter_condition: {},
+        op_sort_condition: {},
+      }, // table data of all operator details
+      rowName: this.$t('dataTraceback.details'), // dialog title
+      detailsDataList: [], // dialog table data
+      detailsDialogVisible: false, // show dialog
+      profile_dir: this.$route.query.dir, // profile directory
+      train_id: this.$route.query.id, // train id
+      op_filter_condition: {}, // operator type filter
+      op_sort_condition: this.opSortCondition.all, // operator type filter
+      initOver: false,
+      objectType: 'object',
+      curActiveRow: {
+        rowItem: null,
+        childProp: null,
+        childOrder: null,
+      },
+      coreFullScreen: false,
+      searchPlaceholder: this.coreSearchOptions[0].placeHolder,
+      searchType: this.coreSearchType,
+    };
+  },
+  destroyed() {
+    // Remove the listener of window size change
+    window.removeEventListener('resize', this.resizeCallback);
+    this.$bus.$off('collapse');
+    if (this.coreCharts.chartDom) {
+      this.coreCharts.chartDom.off('mouseover');
+      this.coreCharts.chartDom.off('mouseout');
+    }
+  },
+  methods: {
+    searchTypeChange() {
+      this.coreSearchOptions.forEach((val) => {
+        if (val.label === this.searchType) {
+          this.searchPlaceholder = val.placeHolder;
+        }
+      });
+      this.searchOpCoreList();
+    },
+    getHeaderField(key) {
+      return this.headerFilder[key] ? this.headerFilder[key] : key;
+    },
+    resizeEchart() {
+      if (this.coreCharts.chartDom) {
+        setTimeout(() => {
+          this.coreCharts.chartDom.resize();
+        }, 300);
+      }
+    },
+    fullScreenControl() {
+      this.coreFullScreen = !this.coreFullScreen;
+      if (this.coreCharts.chartDom && !this.coreFullScreen) {
+        this.$nextTick(() => {
+          this.coreCharts.chartDom.resize();
+        });
+      }
+    },
+    /**
+     * Operators core type sort
+     * @param {Object} sort Sort data
+     */
+    opTypeSortChange(sort) {
+      this.op_sort_condition = {
+        name: sort.prop,
+        type: sort.order,
+      };
+      this.$nextTick(() => {
+        const item = this.$refs['expandCoreChild'];
+        if (item && this.curActiveRow.rowItem) {
+          item.sort(this.curActiveRow.childProp, this.curActiveRow.childOrder);
+        }
+      });
+    },
+    /**
+     * Clear core data
+     */
+    clearCoreData() {
+      this.searchByTypeInput = '';
+      this.searchByNameInput = '';
+      this.op_filter_condition = {};
+      this.op_sort_condition = this.opSortCondition.all;
+      this.opTypeCol = [];
+      this.opTypeList = [];
+      this.opAllTypeList = {
+        opDetailCol: [],
+        opDetailList: [],
+        pageTotal: 0,
+        opDetailPage: {
+          offset: 0,
+          limit: 10,
+        },
+        op_filter_condition: {},
+        op_sort_condition: {},
+      };
+    },
+    /**
+     * Get core type list
+     */
+    getCoreTypeList() {
+      const params = {};
+      params.params = {
+        profile: this.profile_dir,
+        train_id: this.train_id,
+      };
+      params.body = {
+        op_type: this.opType.all,
+        device_id: this.currentCard,
+        filter_condition: this.op_filter_condition,
+        sort_condition: this.op_sort_condition,
+      };
+      requestService
+          .getProfilerOpData(params)
+          .then((res) => {
+            this.initOver = true;
+            this.opTypeList = [];
+            if (res && res.data) {
+              this.opTypeCol = res.data.col_name;
+              if (res.data.object) {
+                res.data.object.forEach((k) => {
+                  const object = {
+                    isExpanded: false,
+                    opDetailList: [],
+                    opDetailCol: [],
+                    opDetailPage: {
+                      offset: 0,
+                      limit: 10,
+                    },
+                    pageTotal: 0,
+                    op_filter_condition: {
+                      op_type: {
+                        in: [k[0]],
+                      },
+                    },
+                    op_sort_condition: {},
+                  };
+                  res.data.col_name.forEach((item, index) => {
+                    object[item] = k[index];
+                  });
+                  this.opTypeList.push(object);
+                });
+                this.$nextTick(() => {
+                  const elementItem = this.$refs['expandTable'];
+                  if (elementItem) {
+                    elementItem.sort(this.op_sort_condition.name, this.op_sort_condition.type);
+                  }
+                });
+                if (!this.coreCharts.device_id || this.coreCharts.device_id !== this.currentCard) {
+                  this.coreCharts.device_id = this.currentCard;
+                  this.coreCharts.data = [];
+                  res.data.object.forEach((k) => {
+                    if (this.coreCharts.data && this.coreCharts.data.length < 19) {
+                      this.coreCharts.data.push({
+                        name: k[0],
+                        value: k[this.chart.value],
+                        percent: k[this.chart.percent],
+                      });
+                    } else {
+                      if (!this.coreCharts.data[19]) {
+                        this.coreCharts.data[19] = {
+                          name: 'Other',
+                          value: 0,
+                          percent: 0,
+                        };
+                      }
+                      this.coreCharts.data[19].value += k[this.chart.value];
+                      this.coreCharts.data[19].percent += k[this.chart.percent];
+                    }
+                  });
+                  this.setOption(this.coreCharts);
+                }
+              }
+            }
+          })
+          .catch(() => {
+            this.opTypeList = [];
+            this.initOver = true;
+          });
+    },
+    /**
+     * Get core detail list
+     * @param {Object} row type row
+     * @param {Boolean} isSort if sort
+     */
+    getCoreDetailList(row, isSort) {
+      const params = {};
+      params.params = {
+        profile: this.profile_dir,
+        train_id: this.train_id,
+      };
+      params.body = {
+        op_type: this.opType.detail,
+        device_id: this.currentCard,
+        filter_condition: row.op_filter_condition,
+        sort_condition: row.op_sort_condition,
+        group_condition: row.opDetailPage,
+      };
+      requestService
+          .getProfilerOpData(params)
+          .then((res) => {
+            if (res && res.data) {
+              this.formatterDetailData(row, res.data);
+              this.$nextTick(() => {
+                let item = null;
+                if (this.coreStatisticType) {
+                  item = this.$refs['opAllTable'];
+                } else {
+                  item = this.$refs['expandCoreChild'];
+                  this.curActiveRow = {
+                    rowItem: row,
+                    childProp: row.op_sort_condition.name,
+                    childOrder: row.op_sort_condition.type,
+                  };
+                }
+                if (item && isSort) {
+                  item.sort(row.op_sort_condition.name, row.op_sort_condition.type);
+                }
+                if (this.$refs.expandTable) {
+                  this.$refs.expandTable.doLayout();
+                }
+              });
+            }
+          })
+          .catch(() => {});
+    },
+    /**
+     * Operator detail list page change
+     * @param {Object} row table cell
+     * @param {Number} pageIndex current page
+     */
+    opDetailPageChange(row, pageIndex) {
+      row.opDetailPage.offset = pageIndex - 1;
+      this.getCoreDetailList(row, false);
+    },
+    /**
+     * Operator detail list page size change
+     * @param {Object} row table cell
+     * @param {Number} pageSize current page size
+     */
+    opDetailPageSizeChange(row, pageSize) {
+      row.opDetailPage.offset = 0;
+      row.opDetailPage.limit = pageSize;
+      this.getCoreDetailList(row, false);
+    },
+    /**
+     * Get core list by search
+     */
+    searchOpCoreList() {
+      if (this.coreStatisticType) {
+        this.opAllTypeList.op_filter_condition = {};
+        if (this.searchByNameInput) {
+          if (!this.hasBarChart) {
+            this.opAllTypeList.op_filter_condition[this.searchType] = {
+              partial_match_str_in: [this.searchByNameInput],
+            };
+          } else {
+            this.opAllTypeList.op_filter_condition[this.search.detail.type] = {
+              partial_match_str_in: [this.searchByNameInput],
+            };
+          }
+        } else {
+          this.opAllTypeList.op_filter_condition = {};
+        }
+        this.opAllTypeList.opDetailPage.offset = 0;
+        this.getCoreDetailList(this.opAllTypeList, false);
+      } else {
+        this.op_filter_condition = {};
+        if (this.searchByTypeInput) {
+          this.op_filter_condition[this.search.all.type] = {
+            partial_match_str_in: [this.searchByTypeInput],
+          };
+        } else {
+          this.op_filter_condition = {};
+        }
+        if (this.curActiveRow.rowItem) {
+          this.curActiveRow = {
+            rowItem: null,
+            childProp: null,
+            childOrder: null,
+          };
+        }
+        this.getCoreTypeList();
+      }
+    },
+    /**
+     * Core detail sort
+     * @param {Object} row table cell
+     * @param {Object} column table cell
+     */
+    coreDetailSortChange(row, column) {
+      row.op_sort_condition = {
+        name: column.prop,
+        type: column.order,
+      };
+      row.opDetailPage.offset = 0;
+      this.getCoreDetailList(row, false);
+    },
+    /**
+     * Format detail data
+     * @param {Object} row table cell
+     * @param {Object} detailsDataList table detail
+     */
+    formatterDetailData(row, detailsDataList) {
+      row.opDetailList = [];
+      row.opDetailCol = detailsDataList.col_name;
+      row.pageTotal = detailsDataList.size;
+      if (detailsDataList.object) {
+        detailsDataList.object.forEach((k) => {
+          const data = {};
+          detailsDataList.col_name.forEach((item, index) => {
+            if (item === 'op_info') {
+              data[item] = JSON.stringify(k[index]);
+            } else {
+              data[item] = k[index];
+            }
+          });
+          row.opDetailList.push(data);
+        });
+      }
+    },
+    /**
+     * Expand core type table
+     * @param {Object} row table cell
+     */
+    expandCoreTypeItem(row) {
+      row.isExpanded = !row.isExpanded;
+      if (row.isExpanded) {
+        if (this.curActiveRow.rowItem) {
+          const item = this.$refs['expandTable'];
+          if (item) {
+            item.toggleRowExpansion(this.curActiveRow.rowItem, false);
+          }
+        }
+        this.curActiveRow = {
+          rowItem: row,
+          childProp: null,
+          childOrder: null,
+        };
+        row.opDetailList = [];
+        row.opDetailCol = [];
+        row.opDetailPage.offset = 0;
+        row.pageTotal = 0;
+        row.op_sort_condition = this.opSortCondition.detail;
+        this.getCoreDetailList(row, true);
+      } else {
+        this.curActiveRow = {
+          rowItem: null,
+          childProp: null,
+          childOrder: null,
+        };
+      }
+    },
+    /**
+     * Core table type change
+     */
+    coreTableChange() {
+      if (this.coreStatisticType && !this.opAllTypeList.opDetailCol.length) {
+        this.opAllTypeList.op_sort_condition = this.opSortCondition.detail;
+        this.getCoreDetailList(this.opAllTypeList, true);
+      }
+    },
+    /**
+     * Operator core chart change
+     */
+    coreChartChange() {
+      this.setOption(this.coreCharts);
+    },
+    /**
+     * Set chart option
+     * @param {Object} chart chart
+     */
+    setOption(chart) {
+      const option = {};
+      const maxLabelLength = 20;
+      const maxTooltipLen = 50;
+
+      if (!chart.type) {
+        option.legend = {
+          data: [],
+          orient: 'vertical',
+          icon: 'circle',
+          formatter: (params) => {
+            let legendStr = '';
+            for (let i = 0; i < chart.data.length; i++) {
+              if (chart.data[i].name === params) {
+                const percent = this.chart.hasPercent ? `${chart.data[i].percent.toFixed(2)}%` : '';
+                const name =
+                  chart.data[i].name.length > 10 ? `${chart.data[i].name.slice(0, 10)}...` : chart.data[i].name;
+                legendStr = `{a|${i + 1}}{b|${name}  ${chart.data[i].value.toFixed(this.accuracy)}}\n{c|${percent}}`;
+              }
+            }
+            return legendStr;
+          },
+          tooltip: {
+            show: true,
+            formatter: (params) => {
+              let name = params.name;
+              name = name.replace(/</g, '< ');
+
+              const breakCount = Math.ceil(name.length / maxTooltipLen);
+              let str = '';
+              for (let i = 0; i < breakCount; i++) {
+                const temp = name.substr(i * maxTooltipLen, maxTooltipLen);
+                str += str ? '<br/>' + temp : temp;
+              }
+              return str;
+            },
+          },
+          itemWidth: 18,
+          itemHeight: 18,
+          padding: [0, 50, 0, 0],
+          top: '5%',
+          left: '45%',
+          textStyle: {
+            padding: [15, 0, 0, 0],
+            rich: {
+              a: {
+                width: 24,
+                align: 'center',
+                padding: [0, 10, 3, -26],
+                color: '#FFF',
+              },
+              b: {
+                padding: [0, 0, 3, 0],
+              },
+              c: {
+                width: '100%',
+                padding: [0, 0, 5, 10],
+                color: '#9EA4B3',
+                fontSize: 12,
+              },
+            },
+          },
+        };
+        option.tooltip = {
+          trigger: 'item',
+          formatter: (params) => {
+            const name = params.data.name.replace(/</g, '< ');
+            const strTemp = `${name} ${params.percent.toFixed(2) + '%'}`;
+
+            const breakCount = Math.ceil(strTemp.length / maxTooltipLen);
+            let str = '';
+            for (let i = 0; i < breakCount; i++) {
+              const temp = strTemp.substr(i * maxTooltipLen, maxTooltipLen);
+              str += str ? '<br/>' + temp : temp;
+            }
+            return str;
+          },
+          confine: true,
+        };
+        option.series = [
+          {
+            type: 'pie',
+            center: ['23%', '60%'],
+            data: chart.data,
+            radius: '50%',
+            label: {
+              position: 'outer',
+              alignTo: 'labelLine',
+              formatter: (params) => {
+                return params.data.name && params.data.name.length > maxLabelLength
+                  ? `${params.data.name.slice(0, maxLabelLength)}...`
+                  : params.data.name;
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: function(params) {
+                  return CommonProperty.pieColorArr[params.dataIndex];
+                },
+              },
+            },
+          },
+        ];
+        chart.data.forEach((item) => {
+          option.legend.data.push(item.name);
+        });
+      } else if (chart.type) {
+        option.color = ['#6C92FA'];
+        option.tooltip = {
+          trigger: 'axis',
+          formatter: (params) => {
+            return `${params[0].axisValue}<br>${params[0].marker}${params[0].value}`;
+          },
+          confine: true,
+        };
+        option.series = [
+          {
+            type: 'bar',
+            barWidth: 30,
+            data: [],
+          },
+        ];
+        option.xAxis = {
+          type: 'category',
+          axisLabel: {
+            interval: 0,
+            rotate: -30,
+          },
+          data: [],
+          triggerEvent: true,
+        };
+        option.grid = {
+          left: 50,
+          top: 20,
+          right: 0,
+          bottom: 50,
+        };
+        option.yAxis = {
+          type: 'value',
+        };
+        chart.data.forEach((item) => {
+          option.xAxis.data.push(item.name);
+          option.series[0].data.push(item.value);
+        });
+      }
+      this.$nextTick(() => {
+        const cpuDom = document.getElementById(chart.id);
+        if (cpuDom) {
+          chart.chartDom = echarts.init(cpuDom, null);
+        } else {
+          if (chart.chartDom) {
+            chart.chartDom.off('mouseover');
+            chart.chartDom.off('mouseout');
+            chart.chartDom.clear();
+          }
+          return;
+        }
+        chart.chartDom.setOption(option, true);
+        if (chart.type) {
+          chart.chartDom.off('mouseover');
+          chart.chartDom.off('mouseout');
+          chart.chartDom.on('mouseover', (params) => {
+            if (params.componentType === 'xAxis') {
+              const offsetX = params.event.offsetX + 10;
+              const offsetY = params.event.offsetY + 10;
+              chart.chartDom.setOption({
+                tooltip: {
+                  formatter: params.value,
+                  alwaysShowContent: true,
+                },
+              });
+              chart.chartDom.dispatchAction({
+                type: 'showTip',
+                seriesIndex: 0,
+                dataIndex: 0,
+                position: [offsetX, offsetY],
+              });
+            }
+          });
+
+          chart.chartDom.on('mouseout', (params) => {
+            if (params.componentType === 'xAxis') {
+              chart.chartDom.setOption({
+                tooltip: {
+                  formatter: '',
+                  alwaysShowContent: false,
+                },
+              });
+            }
+          });
+        }
+        chart.chartDom.resize();
+      }, 10);
+    },
+    /**
+     * Show operator info deteail
+     * @param {Object} cellData cell data
+     * @param {Object} column column
+     */
+    showInfoDetail(cellData, column) {
+      if (column.property !== 'op_info' || !cellData || !cellData.op_info) {
+        return;
+      }
+      this.showDialogData(cellData.op_info, column);
+    },
+    /**
+     * The detailed information is displayed in the dialog box.
+     * @param {String} val
+     * @param {Object} column
+     */
+    showDialogData(val, column) {
+      this.detailsDataList = [];
+      if (typeof val !== 'string' || val === '{}') {
+        return;
+      } else {
+        const isJson = this.isJSON(val);
+        if (!isJson) {
+          return;
+        }
+      }
+      this.$nextTick(() => {
+        this.rowName = `op_info${this.$t('dataTraceback.details')}`;
+        this.detailsDialogVisible = true;
+        this.detailsDataList = this.formateJsonString(val);
+      });
+    },
+    /**
+     * Checks whether the value is a JSON character string.
+     * @param {String} val
+     * @return {Boolean}
+     */
+    isJSON(val) {
+      try {
+        JSON.parse(val);
+        return true;
+      } catch (e) {
+        return false;
+      }
+    },
+    /**
+     * Converts JSON strings.
+     * @param {String} str
+     * @return {Array}
+     */
+    formateJsonString(str) {
+      if (!str) {
+        return [];
+      }
+      const resultArr = [];
+      const dataObj = JSON.parse(str);
+      const keys = Object.keys(dataObj);
+      keys.forEach((key, index) => {
+        const tempData = {
+          id: index + 1,
+          hasChildren: false,
+          key: key,
+          value: '',
+        };
+        if (typeof dataObj[key] === this.objectType && dataObj[key] !== null) {
+          if (!(dataObj[key] instanceof Array)) {
+            tempData.hasChildren = true;
+            tempData.children = [];
+            Object.keys(dataObj[key]).forEach((k, j) => {
+              const item = {};
+              item.key = k;
+              item.value = dataObj[key][k];
+              item.id = `${new Date().getTime()}` + `${this.$store.state.tableId}`;
+              this.$store.commit('increaseTableId');
+              tempData.children.push(item);
+            });
+          }
+          tempData.value = JSON.stringify(dataObj[key]);
+        } else {
+          tempData.value = dataObj[key];
+        }
+        resultArr.push(tempData);
+      });
+      return resultArr;
+    },
+    loadDataListChildren(tree, treeNode, resolve) {
+      setTimeout(() => {
+        resolve(tree.children);
+      });
+    },
+    /**
+     * Window resize
+     */
+    resizeCallback() {
+      if (this.coreCharts.chartDom) {
+        this.coreCharts.chartDom.resize();
+      }
+    },
+  },
+  mounted() {
+    window.addEventListener('resize', this.resizeCallback, false);
+    setTimeout(() => {
+      this.$bus.$on('collapse', this.resizeEchart);
+    }, 500);
+  },
+};
+</script>
+<style>
+.cl-profiler-wrap {
+  height: 100%;
+}
+.cl-search-box {
+  float: right;
+  margin-bottom: 10px;
+  margin-right: 20px;
+}
+.cl-search-box .el-input {
+  width: 300px;
+}
+.core-search-type {
+  float: right;
+  width: 130px;
+  margin-right: 10px;
+}
+.cl-profiler-top {
+  height: 47%;
+}
+.cl-profiler-top .chart-title {
+  float: left;
+  font-weight: bold;
+  height: 32px;
+  font-size: 16px;
+}
+.cl-profiler-top.fullScreen {
+  display: none;
+}
+.cl-profiler-bottom {
+  height: 53%;
+  padding-top: 10px;
+}
+.cl-profiler-bottom .fullScreen {
+  float: right;
+  margin-top: 5px;
+  cursor: pointer;
+}
+.cl-profiler-bottom.fullScreen {
+  height: 100%;
+}
+.cl-profiler-echarts {
+  width: 100%;
+  height: calc(100% - 32px);
+  display: inline-block;
+  position: relative;
+  overflow: auto;
+}
+.cl-profiler-echarts .chart {
+  width: 100%;
+  height: 100%;
+  min-width: 1300px;
+  min-height: 321px;
+  overflow: hidden;
+}
+.chart-radio-group {
+  float: right;
+}
+.el-radio-group .el-radio-button--small .el-radio-button__inner {
+  height: 30px;
+  width: 70px;
+  font-size: 14px;
+  line-height: 10px;
+}
+.cl-profiler-bar {
+  display: inline-block;
+  width: calc(100% - 400px);
+  vertical-align: top;
+  height: 100%;
+  padding: 20px;
+}
+.cl-profiler-table-type {
+  display: inline-block;
+  width: calc(100% - 400px);
+  vertical-align: top;
+  height: 100%;
+}
+.el-pagination {
+  margin: 7px 0;
+  float: right;
+}
+.details-data-list .el-table th {
+  padding: 10px 0;
+  border-top: 1px solid #ebeef5;
+}
+.details-data-list .el-table th .cell {
+  border-left: 1px solid #d9d8dd;
+  height: 14px;
+  line-height: 14px;
+}
+.details-data-list .el-table th:first-child .cell {
+  border-left: none;
+}
+.details-data-list .el-table th:nth-child(2),
+.details-data-list .el-table td:nth-child(2) {
+  max-width: 30%;
+}
+.details-data-list .el-table td {
+  padding: 8px 0;
+}
+.details-data-list .el-table__row--level-0 td:first-child:after {
+  width: 20px;
+  height: 1px;
+  background: #ebeef5;
+  z-index: 11;
+  position: absolute;
+  left: 0;
+  bottom: -1px;
+  content: '';
+  display: block;
+}
+.details-data-list .el-table__row--level-1 td {
+  padding: 4px 0;
+  position: relative;
+}
+.details-data-list .el-table__row--level-1 td:first-child::before {
+  width: 42px;
+  background: #f0fdfd;
+  border-right: 2px #00a5a7 solid;
+  z-index: 10;
+  position: absolute;
+  left: 0;
+  top: -1px;
+  bottom: 0px;
+  content: '';
+  display: block;
+}
+.details-data-list .el-table__row--level-1:first-child td:first-child::before {
+  bottom: 0;
+}
+.details-data-list .el-dialog__title {
+  font-weight: bold;
+}
+.details-data-list .el-dialog__body {
+  max-height: 500px;
+  padding-top: 10px;
+  overflow: auto;
+}
+.details-data-list .el-dialog__body .details-data-title {
+  margin-bottom: 20px;
+}
+.el-table__expanded-cell[class*='cell'] {
+  padding: 0;
+}
+.expand-table {
+  position: relative;
+  padding-left: 44px;
+}
+.expand-table::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background: #f0fdfd;
+  width: 42px;
+  border-right: 2px #00a5a7 solid;
+}
+.el-radio-button:last-child .el-radio-button__inner,
+.el-radio-button:first-child .el-radio-button__inner {
+  border-radius: 0;
+}
+.image-noData {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.image-noData p {
+  font-size: 16px;
+  padding-top: 10px;
+}
+</style>
diff --git a/mindinsight/ui/src/mixins/debugger-mixin.vue b/mindinsight/ui/src/mixins/debugger-mixin.vue
index f0fdeb6e..6392e099 100644
--- a/mindinsight/ui/src/mixins/debugger-mixin.vue
+++ b/mindinsight/ui/src/mixins/debugger-mixin.vue
@@ -1546,8 +1546,8 @@ export default {
     },
     /**
      * Tree linkage with graph  Expand of current node
-     * @param {Obeject} nodes Data of children of current node
-     * @param {Obeject} name  The name of the current node
+     * @param {Object} nodes Data of children of current node
+     * @param {Object} name  The name of the current node
      */
     nodeExpandLinkage(nodes, name) {
       if (nodes.length > this.nodesCountLimit) {
diff --git a/mindinsight/ui/src/views/profiling-gpu/operator.vue b/mindinsight/ui/src/views/profiling-gpu/operator.vue
index e17eed24..83e77cf2 100644
--- a/mindinsight/ui/src/views/profiling-gpu/operator.vue
+++ b/mindinsight/ui/src/views/profiling-gpu/operator.vue
@@ -1,5 +1,5 @@
 <!--
-Copyright 2020 Huawei Technologies Co., Ltd.All Rights Reserved.
+Copyright 2020-2021 Huawei Technologies Co., Ltd.All Rights Reserved.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -20,349 +20,233 @@ limitations under the License.
       <el-tabs v-model="apiType"
                @tab-click="tabChange">
         <el-tab-pane :label="$t('operator.operatorInfo')"
-                     name="operator">
-          <div class="cl-profiler-top"
-               :class="{fullScreen:fullScreen}"
-               v-if="operatorCharts.data.length">
-            <div>
-              <div class="chart-title">{{$t('profiling.chartTitle')}}</div>
-              <el-radio-group class="chart-radio-group"
-                              v-model="operatorCharts.type"
-                              @change="operatorChartChange"
-                              fill="#00A5A7"
-                              text-color="#FFFFFF"
-                              size="small">
-                <el-radio-button :label="0">
-                  {{$t('operator.pie')}}
-                </el-radio-button>
-                <el-radio-button :label="1">
-                  {{ $t('operator.bar')}}
-                </el-radio-button>
-              </el-radio-group>
-            </div>
-            <div class="cl-profiler-echarts">
-              <div id="operator-echarts"></div>
-            </div>
-          </div>
-          <div class="cl-profiler-bottom"
-               :class="{fullScreen:fullScreen}"
-               v-if="operatorCharts.data.length">
-            <img src="../../assets/images/full-screen.png"
-                 :title="$t('graph.fullScreen')"
-                 class="fullScreen"
-                 @click="fullScreenControl(0)">
-            <div>
-              <el-radio-group v-model="statisticType"
-                              @change="operatorTableChange"
-                              fill="#00A5A7"
-                              text-color="#FFFFFF"
-                              size="small">
-                <el-radio-button :label="1">
-                  {{$t('operator.allOperator')}}
-                </el-radio-button>
-                <el-radio-button :label="0">
-                  {{$t('operator.classificationOperator')}}
-                </el-radio-button>
-              </el-radio-group>
-              <div class="cl-search-box">
-                <el-input v-model="searchByTypeInput"
-                          v-if="!statisticType"
-                          :placeholder="$t('operator.searchByType') +
-                            $t('symbols.leftbracket') + $t('public.caseMode') + $t('symbols.rightbracket')"
-                          clearable
-                          @clear="searchOperatorList()"
-                          @keyup.enter.native="searchOperatorList()"></el-input>
-                <el-input v-model="searchByNameInput"
-                          v-if="statisticType"
-                          :placeholder="$t('operator.searchByName') +
-                            $t('symbols.leftbracket') + $t('public.caseMode') + $t('symbols.rightbracket')"
-                          clearable
-                          @clear="searchOperatorList()"
-                          @keyup.enter.native="searchOperatorList()"></el-input>
-              </div>
-            </div>
-            <el-table v-show="!statisticType && opTypeCol && opTypeCol.length"
-                      :data="opTypeList"
-                      ref="expandTable"
-                      @expand-change="expandTypeItem"
-                      @sort-change="opTypeSortChange"
-                      stripe
-                      height="calc(100% - 40px)"
-                      width="100%">
-              <el-table-column type="expand">
-                <template slot-scope="props">
-                  <div class="expand-table">
-                    <el-table :data="props.row.opDetailList"
-                              stripe
-                              ref="expandChild"
-                              width="100%"
-                              tooltip-effect="light"
-                              @sort-change="(...args)=>{operatorDetailSortChange(props.row, ...args)}">
-                      <el-table-column v-for="(ele, key) in props.row.opDetailCol"
-                                       :property="ele"
-                                       :key="key"
-                                       :sortable="ele === 'op_info' ? false : 'custom'"
-                                       :min-width="(ele === 'op_type') ? 100 : (ele === 'op_name') ?
-                                       120 : (ele === 'op_full_name') ? 150 : '' "
-                                       :show-overflow-tooltip="(ele === 'op_full_name'||ele === 'op_name'
-                                       ||ele==='op_type') ? false : true">
-                        <template slot="header">
-                          <div class="custom-label"
-                               :title="getHeaderField(ele)">
-                            {{getHeaderField(ele)}}
-                          </div>
-                        </template>
-                      </el-table-column>
-                    </el-table>
-                    <el-pagination :current-page="props.row.opDetailPage.offset + 1"
-                                   :page-size="props.row.opDetailPage.limit"
-                                   :page-sizes="[10, 20, 50]"
-                                   @current-change="(...args)=>{opDetailPageChange(props.row, ...args)}"
-                                   @size-change="(...args)=>{opDetailPageSizeChange(props.row, ...args)}"
-                                   layout="total, sizes, prev, pager, next, jumper"
-                                   :total="props.row.pageTotal">
-                    </el-pagination>
-                    <div class="clear"></div>
-                  </div>
-                </template>
-              </el-table-column>
-              <el-table-column v-for="(item, $index) in opTypeCol"
-                               :property="item"
-                               :key="$index"
-                               sortable>
-                <template slot="header">
-                  <div class="custom-label"
-                       :title="getHeaderField(item)">
-                    {{getHeaderField(item)}}
-                  </div>
-                </template>
-              </el-table-column>
-            </el-table>
-            <el-table v-show="statisticType && opAllTypeList.opDetailCol && opAllTypeList.opDetailCol.length"
-                      :data="opAllTypeList.opDetailList"
-                      stripe
-                      ref="opAllTable"
-                      width="100%"
-                      height="calc(100% - 80px)"
-                      @sort-change="(...args)=>{operatorDetailSortChange(opAllTypeList, ...args)}"
-                      tooltip-effect="light">
-              <el-table-column v-for="(item, $index) in opAllTypeList.opDetailCol"
-                               :property="item"
-                               :key="$index"
-                               :sortable="item === 'op_info' ? false : 'custom'"
-                               :min-width="(item === 'op_type') ? 100 : (item === 'op_name')
-                               ? 120 : (item === 'op_full_name') ? 150 : '' "
-                               :show-overflow-tooltip="(item === 'op_full_name' || item === 'op_name'
-                               || item === 'op_type') ? false : true">
-                <template slot="header">
-                  <div class="custom-label"
-                       :title="getHeaderField(item)">
-                    {{getHeaderField(item)}}
-                  </div>
-                </template>
-              </el-table-column>
-            </el-table>
-            <el-pagination v-show="statisticType"
-                           v-if="opAllTypeList.opDetailList.length"
-                           :current-page="opAllTypeList.opDetailPage.offset + 1"
-                           :page-size="opAllTypeList.opDetailPage.limit"
-                           :page-sizes="[10, 20, 50]"
-                           @current-change="(...args)=>{opDetailPageChange(opAllTypeList, ...args)}"
-                           @size-change="(...args)=>{opDetailPageSizeChange(opAllTypeList, ...args)}"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="opAllTypeList.pageTotal">
-            </el-pagination>
-          </div>
-          <div class="image-noData"
-               v-if="operatorCharts.data.length === 0">
-            <div>
-              <img :src="require('@/assets/images/nodata.png')"
-                   alt="" />
-            </div>
-            <p>{{ initOver?$t("public.noData"):$t('public.dataLoading') }}</p>
-          </div>
+                     name="op">
+          <operator-unit chartId="op-echarts"
+                         :currentCard="currentCard"
+                         :opType="gpuOpType"
+                         :opSortCondition="gpuOpSortCondition"
+                         :search="gpuOpSearch"
+                         :chart="gpuOpChart"
+                         :accuracy="3"
+                         :headerFilder="headerFilder"
+                         ref="op" />
         </el-tab-pane>
         <el-tab-pane :label="$t('operator.kernelInfo')"
-                     class="core-tab"
-                     name="core">
-          <div class="cl-profiler-top"
-               :class="{fullScreen:fullScreenKernel}"
-               v-if="coreCharts.data.length">
-            <div>
-              <div class="chart-title">{{$t('profiling.chartTitle')}}</div>
-            </div>
-            <div class="cl-profiler-echarts">
-              <div class
-                   id="core-echarts"></div>
-            </div>
-          </div>
-          <div class="cl-profiler-bottom"
-               :class="{fullScreen:fullScreenKernel}"
-               v-if="coreCharts.data.length">
-            <img src="../../assets/images/full-screen.png"
-                 :title="$t('graph.fullScreen')"
-                 class="fullScreen"
-                 @click="fullScreenControl(1)">
-            <div>
-              <div class="cl-search-box">
-                <el-input v-model="searchByCoreInput"
-                          :placeholder="(coreSearchType ?
-                            $t('operator.searchByCoreFullName') :
-                            $t('operator.searchByCoreName')) +
-                            $t('symbols.leftbracket') + $t('public.caseMode') + $t('symbols.rightbracket')"
-                          clearable
-                          @clear="searchCoreList()"
-                          @keyup.enter.native="searchCoreList()"></el-input>
-              </div>
-              <el-select v-model="coreSearchType"
-                         class="core-search-type"
-                         :placeholder="$t('public.select')"
-                         @change="searchCoreList()">
-                <el-option v-for="item in coreSearchOptions"
-                           :key="item.value"
-                           :label="item.label"
-                           :value="item.value">
-                </el-option>
-              </el-select>
-            </div>
-            <el-table v-show="coreList.opDetailCol && coreList.opDetailCol.length"
-                      :data="coreList.opDetailList"
-                      stripe
-                      ref="opCoreTable"
-                      width="100%"
-                      height="calc(100% - 80px)"
-                      tooltip-effect="light"
-                      @sort-change="(...args)=>{coreDetailSortChange(coreList, ...args)}">
-              <el-table-column v-for="(item, $index) in coreList.opDetailCol"
-                               :property="item"
-                               :key="$index"
-                               sortable="custom"
-                               :min-width="(item === 'type') ? 100 : (item === 'name' || item === 'op_full_name')
-                                ? 150 : '' "
-                               :show-overflow-tooltip="(item === 'op_full_name' || item === 'name'
-                               ||item === 'type') ? false : true">
-                <template slot="header">
-                  <div class="custom-label"
-                       :title="getHeaderField(item)">
-                    {{getHeaderField(item)}}
-                  </div>
-                </template>
-              </el-table-column>
-            </el-table>
-            <el-pagination v-if="coreList.opDetailList.length"
-                           :current-page="coreList.opDetailPage.offset + 1"
-                           :page-size="coreList.opDetailPage.limit"
-                           :page-sizes="[10, 20, 50]"
-                           @current-change="opCorePageChange"
-                           @size-change="opCorePageSizeChange"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="coreList.pageTotal">
-            </el-pagination>
-          </div>
-          <div class="image-noData"
-               v-if="coreCharts.data.length === 0">
-            <div>
-              <img :src="require('@/assets/images/nodata.png')"
-                   alt="" />
-            </div>
-            <p>{{initOver?$t("public.noData"):$t('public.dataLoading')}}</p>
-          </div>
+                     class="cpu-tab"
+                     name="cuda">
+          <operator-unit chartId="cuda-echarts"
+                         :currentCard="currentCard"
+                         :opType="gpuCudaType"
+                         :opSortCondition="gpuCudaSortCondition"
+                         :search="gpuCudaSearch"
+                         :chart="gpuCudaChart"
+                         :hasBarChart="false"
+                         :coreSearchType="gpuCudaSearchType"
+                         :coreSearchOptions="gpuCudaSearchOptions"
+                         :accuracy="3"
+                         :headerFilder="headerFilder"
+                         ref="cuda" />
+        </el-tab-pane>
+        <el-tab-pane label="HOST CPU"
+                     name="host">
+          <operator-unit chartId="host-echarts"
+                         :currentCard="currentCard"
+                         :opType="hostType"
+                         :opSortCondition="hostSortCondition"
+                         :search="hostSearch"
+                         :chart="hostChart"
+                         :accuracy="3"
+                         :headerFilder="hostHeaderFilder"
+                         ref="host" />
         </el-tab-pane>
       </el-tabs>
     </div>
   </div>
 </template>
 <script>
-import echarts from 'echarts';
-import requestService from '../../services/request-service';
-import CommonProperty from '../../common/common-property';
-
+import operatorUnit from '../../components/operator-unit.vue';
 export default {
+  components: {operatorUnit},
   data() {
     return {
-      apiType: 'operator',
+      apiType: 'op',
       currentCard: '',
-      coreCharts: {
-        type: 0,
-        id: 'core-echarts',
-        chartDom: null,
-        data: [],
-      }, // core chart
-      operatorCharts: {
-        type: 0,
-        id: 'operator-echarts',
-        chartDom: null,
-        data: [],
-      }, // operator chart
-      statisticType: 0, // operator table statistic type
-      searchByTypeInput: '', // search by operator type
-      searchByNameInput: '', // search by operator detail name
-      searchByCoreInput: '', // search by core name
-      opTypeCol: [], // table headers list of operator type
-      opTypeList: [], // table list of operator type
-      coreList: {
-        opDetailCol: [],
-        opDetailList: [],
-        pageTotal: 0,
-        opDetailPage: {
-          offset: 0,
-          limit: 10,
+      gpuOpType: {
+        all: 'gpu_op_type',
+        detail: 'gpu_op_info',
+      },
+      gpuCudaType: {
+        all: 'gpu_cuda_activity',
+        detail: 'gpu_cuda_activity',
+      },
+      hostType: {
+        all: 'cpu_op_type',
+        detail: 'cpu_op_info',
+      },
+      gpuOpSortCondition: {
+        all: {
+          name: 'avg_time',
+          type: 'descending',
+        },
+        detail: {
+          name: 'op_avg_time',
+          type: 'descending',
+        },
+      },
+      gpuCudaSortCondition: {
+        all: {
+          name: 'avg_duration',
+          type: 'descending',
         },
-        op_filter_condition: {},
-        op_sort_condition: {
+        detail: {
           name: 'avg_duration',
           type: 'descending',
         },
-      }, // table data of core
-      opAllTypeList: {
-        opDetailCol: [],
-        opDetailList: [],
-        pageTotal: 0,
-        opDetailPage: {
-          offset: 0,
-          limit: 10,
+      },
+      hostSortCondition: {
+        all: {
+          name: 'total_compute_time',
+          type: 'descending',
+        },
+        detail: {
+          name: 'op_total_time',
+          type: 'descending',
         },
-        op_filter_condition: {},
-        op_sort_condition: {},
-      }, // table data of all operator details
-      profile_dir: '', // profile directory
-      train_id: '', // train id
-      op_filter_condition: {}, // operator type filter
-      op_sort_condition: {
-        name: 'avg_time',
-        type: 'descending',
-      }, // operator type filter
-      initOver: false,
-      objectType: 'object',
-      curActiveRow: {
-        rowItem: null,
-        childProp: null,
-        childOrder: null,
       },
-      fullScreen: false,
-      fullScreenKernel: false,
-      coreSearchOptions: [
+      headerFilder: {
+        total_time: 'total_time (us)',
+        avg_time: `avg_time (${this.$t('profiling.gpuunit')})`,
+        op_total_time: 'op_total_time (us)',
+        op_avg_time: `op_avg_time (${this.$t('profiling.gpuunit')})`,
+        max_duration: 'max_duration (us)',
+        min_duration: 'min_duration (us)',
+        avg_duration: 'avg_duration (us)',
+        total_duration: 'total_duration (us)',
+        proportion: 'total_time_proportion (%)',
+        cuda_activity_cost_time: 'cuda_activity_cost_time (us)',
+        cuda_activity_call_count: `cuda_activity_call_count (${this.$t('profiling.countUnit')})`,
+        type_occurrences: `type_occurrences (${this.$t('profiling.countUnit')})`,
+        op_occurrences: `op_occurrences (${this.$t('profiling.countUnit')})`,
+        occurrences: `occurrences (${this.$t('profiling.countUnit')})`,
+        execution_frequency: `execution_frequency (${this.$t('profiling.countUnit')})`,
+        percent: 'percent (%)',
+        avg_execution_time: `avg_execution_time (${this.$t('profiling.unit')})`,
+        total_compute_time: 'total_compute_time (ms)',
+        compute_time: `compute_time (${this.$t('profiling.unit')})`,
+        total_proportion: 'total_proportion (%)',
+      },
+      hostHeaderFilder: {
+        type_occurrences: `type_occurrences (${this.$t('profiling.countUnit')})`,
+        execution_frequency: `execution_frequency (${this.$t('profiling.countUnit')})`,
+        percent: 'percent (%)',
+        avg_execution_time: `avg_execution_time (${this.$t('profiling.unit')})`,
+        total_compute_time: 'total_compute_time (ms)',
+        compute_time: `compute_time (${this.$t('profiling.unit')})`,
+        total_time_proportion: 'total_time_proportion (%)',
+        op_occurrences: `op_occurrences (${this.$t('profiling.countUnit')})`,
+        op_total_time: 'op_total_time (ms)',
+        avg_time: 'avg_time (ms)',
+        op_avg_time: 'op_avg_time (ms)',
+      },
+      gpuOpSearch: {
+        all: {
+          label:
+            this.$t('operator.searchByType') +
+            this.$t('symbols.leftbracket') +
+            this.$t('public.caseMode') +
+            this.$t('symbols.rightbracket'),
+          type: 'op_type',
+        },
+        detail: {
+          label:
+            this.$t('operator.searchByName') +
+            this.$t('symbols.leftbracket') +
+            this.$t('public.caseMode') +
+            this.$t('symbols.rightbracket'),
+          type: 'op_name',
+        },
+      },
+      gpuCudaSearch: {
+        all: {
+          label:
+            this.$t('operator.searchByType') +
+            this.$t('symbols.leftbracket') +
+            this.$t('public.caseMode') +
+            this.$t('symbols.rightbracket'),
+          type: 'op_type',
+        },
+        detail: {
+          label:
+            this.$t('operator.searchByType') +
+            this.$t('symbols.leftbracket') +
+            this.$t('public.caseMode') +
+            this.$t('symbols.rightbracket'),
+          type: 'op_type',
+        },
+      },
+      hostSearch: {
+        all: {
+          label:
+            this.$t('operator.searchByType') +
+            this.$t('symbols.leftbracket') +
+            this.$t('public.caseMode') +
+            this.$t('symbols.rightbracket'),
+          type: 'op_type',
+        },
+        detail: {
+          label:
+            this.$t('operator.searchByName') +
+            this.$t('symbols.leftbracket') +
+            this.$t('public.caseMode') +
+            this.$t('symbols.rightbracket'),
+          type: 'op_name',
+        },
+      },
+      gpuOpChart: {
+        hasPercent: false,
+        value: 4,
+      },
+      gpuCudaChart: {
+        hasPercent: false,
+        value: 8,
+      },
+      hostChart: {
+        hasPercent: false,
+        value: 4,
+        percent: 5,
+      },
+      gpuCudaSearchType: 'name',
+      gpuCudaSearchOptions: [
         {
-          value: 0,
           label: 'name',
+          value: 'name',
+          placeHolder:
+            this.$t('operator.searchByCoreName') +
+            this.$t('symbols.leftbracket') +
+            this.$t('public.caseMode') +
+            this.$t('symbols.rightbracket'),
         },
         {
-          value: 1,
           label: 'op_full_name',
+          value: 'op_full_name',
+          placeHolder:
+            this.$t('operator.searchByCoreFullName') +
+            this.$t('symbols.leftbracket') +
+            this.$t('public.caseMode') +
+            this.$t('symbols.rightbracket'),
         },
       ],
-      coreSearchType: 0,
     };
   },
   watch: {
     '$parent.curDashboardInfo': {
       handler(newValue, oldValue) {
-        if (newValue.query.dir && newValue.query.id && newValue.curCardNum) {
-          this.profile_dir = newValue.query.dir;
-          this.train_id = newValue.query.id;
+        if (newValue.curCardNum) {
           this.currentCard = newValue.curCardNum;
           this.initOver = false;
-          this.cardChange();
+          this.$nextTick(() => {
+            this.cardChange();
+          });
         }
         if (newValue.initOver) {
           this.initOver = true;
@@ -372,810 +256,34 @@ export default {
       immediate: true,
     },
   },
-  destroyed() {
-    // Remove the listener of window size change
-    window.removeEventListener('resize', this.resizeCallback);
-    this.$bus.$off('collapse');
-
-    if (this.operatorCharts.chartDom) {
-      this.operatorCharts.chartDom.off('mouseover');
-      this.operatorCharts.chartDom.off('mouseout');
-    }
-    if (this.coreCharts.chartDom) {
-      this.coreCharts.chartDom.off('mouseover');
-      this.coreCharts.chartDom.off('mouseout');
-    }
-  },
+  destroyed() {},
   methods: {
-    getHeaderField(key) {
-      const maps = {
-        total_time: 'total_time (us)',
-        avg_time: `avg_time (${this.$t('profiling.gpuunit')})`,
-        op_total_time: 'op_total_time (us)',
-        op_avg_time: `op_avg_time (${this.$t('profiling.gpuunit')})`,
-        max_duration: 'max_duration (us)',
-        min_duration: 'min_duration (us)',
-        avg_duration: 'avg_duration (us)',
-        total_duration: 'total_duration (us)',
-        proportion: 'total_time_proportion (%)',
-        cuda_activity_cost_time: 'cuda_activity_cost_time (us)',
-        cuda_activity_call_count: `cuda_activity_call_count (${this.$t(
-            'profiling.countUnit',
-        )})`,
-        type_occurrences: `type_occurrences (${this.$t(
-            'profiling.countUnit',
-        )})`,
-        op_occurrences: `op_occurrences (${this.$t('profiling.countUnit')})`,
-        occurrences: `occurrences (${this.$t('profiling.countUnit')})`,
-      };
-      return maps[key] ? maps[key] : key;
-    },
-    resizeEchart() {
-      if (this.operatorCharts.chartDom) {
-        setTimeout(() => {
-          this.operatorCharts.chartDom.resize();
-        }, 300);
-      }
-    },
-    fullScreenControl(type) {
-      if (!type) {
-        this.fullScreen = !this.fullScreen;
-        if (this.operatorCharts.chartDom && !this.fullScreen) {
-          this.$nextTick(() => {
-            this.operatorCharts.chartDom.resize();
-          });
-        }
-      } else {
-        this.fullScreenKernel = !this.fullScreenKernel;
-        if (this.coreCharts.chartDom && !this.fullScreenKernel) {
-          this.$nextTick(() => {
-            this.coreCharts.chartDom.resize();
-          });
-        }
-      }
-    },
-    /**
-     * Current device change
-     */
     cardChange() {
-      if (this.apiType === 'operator') {
-        this.statisticType = 0;
-        this.clearOpData();
-        this.getOpTypeList();
-      } else if (this.apiType === 'core') {
-        this.clearCoreData();
-        this.getCoreList(true);
-      }
-    },
-    /**
-     * Operators type sort
-     * @param {Object} sort Sort data
-     */
-    opTypeSortChange(sort) {
-      this.op_sort_condition = {
-        name: sort.prop,
-        type: sort.order,
-      };
-
-      this.$nextTick(() => {
-        const item = this.$refs['expandChild'];
-        if (item && this.curActiveRow.rowItem) {
-          item.sort(this.curActiveRow.childProp, this.curActiveRow.childOrder);
-        }
-      });
-    },
-    /**
-     * Clear core data
-     */
-    clearCoreData() {
-      this.searchByCoreInput = '';
-      this.coreList = {
-        opDetailCol: [],
-        opDetailList: [],
-        pageTotal: 0,
-        opDetailPage: {
-          offset: 0,
-          limit: 10,
-        },
-        op_filter_condition: {},
-        op_sort_condition: {
-          name: 'avg_duration',
-          type: 'descending',
-        },
-      };
-    },
-    /**
-     * Clear operator data
-     */
-    clearOpData() {
-      this.searchByTypeInput = '';
-      this.searchByNameInput = '';
-      this.op_filter_condition = {};
-      this.op_sort_condition = {
-        name: 'avg_time',
-        type: 'descending',
-      };
-      this.opTypeCol = [];
-      this.opTypeList = [];
-      this.opAllTypeList = {
-        opDetailCol: [],
-        opDetailList: [],
-        pageTotal: 0,
-        opDetailPage: {
-          offset: 0,
-          limit: 10,
-        },
-        op_filter_condition: {},
-        op_sort_condition: {},
-      };
-    },
-    /**
-     * Get operator type list
-     */
-    getOpTypeList() {
-      const params = {};
-      params.params = {
-        profile: this.profile_dir,
-        train_id: this.train_id,
-      };
-      params.body = {
-        op_type: 'gpu_op_type',
-        device_id: this.currentCard,
-        filter_condition: this.op_filter_condition,
-        sort_condition: this.op_sort_condition,
-      };
-      requestService
-          .getProfilerOpData(params)
-          .then((res) => {
-            this.initOver = true;
-            this.opTypeList = [];
-            if (res && res.data) {
-              this.opTypeCol = res.data.col_name;
-              if (res.data.object) {
-                res.data.object.forEach((k) => {
-                  const object = {
-                    isExpanded: false,
-                    opDetailList: [],
-                    opDetailCol: [],
-                    opDetailPage: {
-                      offset: 0,
-                      limit: 10,
-                    },
-                    pageTotal: 0,
-                    op_filter_condition: {
-                      op_type: {
-                        in: [k[0]],
-                      },
-                    },
-                    op_sort_condition: {},
-                  };
-                  res.data.col_name.forEach((item, index) => {
-                    object[item] = k[index];
-                  });
-                  this.opTypeList.push(object);
-                });
-                this.$nextTick(() => {
-                  const elementItem = this.$refs['expandTable'];
-                  if (elementItem) {
-                    elementItem.sort(
-                        this.op_sort_condition.name,
-                        this.op_sort_condition.type,
-                    );
-                  }
-                });
-                if (
-                  !this.operatorCharts.device_id ||
-                this.operatorCharts.device_id !== this.currentCard
-                ) {
-                  this.operatorCharts.device_id = this.currentCard;
-                  this.operatorCharts.data = [];
-                  res.data.object.forEach((k) => {
-                    if (
-                      this.operatorCharts.data &&
-                    this.operatorCharts.data.length < 19
-                    ) {
-                      this.operatorCharts.data.push({
-                        name: k[0],
-                        value: k[4],
-                        percent: k[3],
-                      });
-                    } else {
-                      if (!this.operatorCharts.data[19]) {
-                        this.operatorCharts.data[19] = {
-                          name: 'Other',
-                          value: 0,
-                          percent: 0,
-                        };
-                      }
-                      this.operatorCharts.data[19].value += k[4];
-                      this.operatorCharts.data[19].percent += k[3];
-                    }
-                  });
-                  this.setOption(this.operatorCharts);
-                }
-              }
-            }
-          })
-          .catch(() => {
-            this.opTypeList = [];
-            this.initOver = true;
-          });
-    },
-    /**
-     * Get operator detail list
-     * @param {Object} row type row
-     * @param {Boolean} isSort if sort
-     */
-    getOperatorDetailList(row, isSort) {
-      const params = {};
-      params.params = {
-        profile: this.profile_dir,
-        train_id: this.train_id,
-      };
-      params.body = {
-        op_type: 'gpu_op_info',
-        device_id: this.currentCard,
-        filter_condition: row.op_filter_condition,
-        sort_condition: row.op_sort_condition,
-        group_condition: row.opDetailPage,
-      };
-      requestService
-          .getProfilerOpData(params)
-          .then((res) => {
-            if (res && res.data) {
-              this.formatterDetailData(row, res.data);
-              this.$nextTick(() => {
-                let item = null;
-                if (this.statisticType) {
-                  item = this.$refs['opAllTable'];
-                } else {
-                  item = this.$refs['expandChild'];
-                  this.curActiveRow = {
-                    rowItem: row,
-                    childProp: row.op_sort_condition.name,
-                    childOrder: row.op_sort_condition.type,
-                  };
-                }
-                if (item && isSort) {
-                  item.sort(
-                      row.op_sort_condition.name,
-                      row.op_sort_condition.type,
-                  );
-                }
-                this.$refs.expandTable.doLayout();
-              });
-            }
-          })
-          .catch(() => {});
-    },
-    /**
-     * Get core list
-     * @param {Boolean} isSort if sort
-     */
-    getCoreList(isSort) {
-      const params = {};
-      params.params = {
-        profile: this.profile_dir,
-        train_id: this.train_id,
-      };
-      params.body = {
-        op_type: 'gpu_cuda_activity',
-        device_id: this.currentCard,
-        filter_condition: this.coreList.op_filter_condition,
-        sort_condition: this.coreList.op_sort_condition,
-        group_condition: this.coreList.opDetailPage,
-      };
-      requestService
-          .getProfilerOpData(params)
-          .then((res) => {
-            this.initOver = true;
-            if (res && res.data) {
-              if (res.data.object) {
-                if (
-                  !this.coreCharts.device_id ||
-                this.coreCharts.device_id !== this.currentCard
-                ) {
-                  this.coreCharts.device_id = this.currentCard;
-                  this.coreCharts.data = [];
-                  res.data.object.forEach((k) => {
-                    this.coreCharts.data.push({
-                      name: k[0],
-                      op_name: k[2],
-                      value: k[8],
-                    });
-                  });
-                  this.setOption(this.coreCharts);
-                }
-                this.formatterDetailData(this.coreList, res.data);
-                if (isSort) {
-                  this.$nextTick(() => {
-                    const item = this.$refs['opCoreTable'];
-                    if (item) {
-                      item.sort(
-                          this.coreList.op_sort_condition.name,
-                          this.coreList.op_sort_condition.type,
-                      );
-                    }
-                  });
-                }
-              }
-            }
-          })
-          .catch(() => {
-            this.initOver = true;
-          });
-    },
-    /**
-     * Operator detail list page change
-     * @param {Object} row table cell
-     * @param {Number} pageIndex current page
-     */
-    opDetailPageChange(row, pageIndex) {
-      row.opDetailPage.offset = pageIndex - 1;
-      this.getOperatorDetailList(row, false);
-    },
-    /**
-     * Operator detail list page size change
-     * @param {Object} row table cell
-     * @param {Number} pageSize current page
-     */
-    opDetailPageSizeChange(row, pageSize) {
-      row.opDetailPage.offset = 0;
-      row.opDetailPage.limit = pageSize;
-      this.getOperatorDetailList(row, false);
-    },
-    /**
-     * Core list page change
-     * @param {Number} pageIndex current page
-     */
-    opCorePageChange(pageIndex) {
-      this.coreList.opDetailPage.offset = pageIndex - 1;
-      this.getCoreList(false);
-    },
-    /**
-     * Core list page size change
-     * @param {Number} pageSize current page size
-     */
-    opCorePageSizeChange(pageSize) {
-      this.coreList.opDetailPage.offset = 0;
-      this.coreList.opDetailPage.limit = pageSize;
-      this.getCoreList(false);
+      const ref = this.$refs[this.apiType];
+      ref.coreStatisticType = 0;
+      ref.clearCoreData();
+      ref.getCoreTypeList();
     },
-    /**
-     * Get operator list by search
-     */
-    searchOperatorList() {
-      if (this.statisticType) {
-        this.opAllTypeList.op_filter_condition = {};
-        if (this.searchByNameInput) {
-          this.opAllTypeList.op_filter_condition = {
-            op_name: {partial_match_str_in: [this.searchByNameInput]},
-          };
-        } else {
-          this.opAllTypeList.op_filter_condition = {};
-        }
-        this.opAllTypeList.opDetailPage.offset = 0;
-        this.getOperatorDetailList(this.opAllTypeList, false);
-      } else {
-        this.op_filter_condition = {};
-        if (this.searchByTypeInput) {
-          this.op_filter_condition = {
-            op_type: {partial_match_str_in: [this.searchByTypeInput]},
-          };
-        } else {
-          this.op_filter_condition = {};
-        }
-        if (this.curActiveRow.rowItem) {
-          this.curActiveRow = {
-            rowItem: null,
-            childProp: null,
-            childOrder: null,
-          };
-        }
-        this.getOpTypeList();
-      }
-    },
-    /**
-     * Get core list by search
-     */
-    searchCoreList() {
-      this.coreList.op_filter_condition = {};
-      if (this.searchByCoreInput) {
-        if (this.coreSearchType) {
-          this.coreList.op_filter_condition = {
-            op_full_name: {partial_match_str_in: [this.searchByCoreInput]},
-          };
-        } else {
-          this.coreList.op_filter_condition = {
-            name: {partial_match_str_in: [this.searchByCoreInput]},
-          };
+    tabChange() {
+      const ref = this.$refs[this.apiType];
+      if (this.currentCard !== ref.coreCharts.device_id) {
+        ref.getCoreTypeList();
+        if (this.apiType === 'cuda') {
+          ref.coreTableChange();
         }
       } else {
-        this.coreList.op_filter_condition = {};
-      }
-      this.coreList.opDetailPage.offset = 0;
-      this.getCoreList(false);
-    },
-    /**
-     * Operator detail sort
-     * @param {Object} row table cell
-     * @param {Object} column table cell
-     */
-    operatorDetailSortChange(row, column) {
-      row.op_sort_condition = {
-        name: column.prop,
-        type: column.order,
-      };
-      row.opDetailPage.offset = 0;
-      this.getOperatorDetailList(row, false);
-    },
-    /**
-     * Core detail sort
-     * @param {Object} row table cell
-     * @param {Object} column table cell
-     */
-    coreDetailSortChange(row, column) {
-      row.op_sort_condition = {
-        name: column.prop,
-        type: column.order,
-      };
-      row.opDetailPage.offset = 0;
-      this.getCoreList(false);
-    },
-    /**
-     * Format detail data
-     * @param {Object} row table cell
-     * @param {Object} detailsDataList table detail
-     */
-    formatterDetailData(row, detailsDataList) {
-      row.opDetailList = [];
-      row.opDetailCol = detailsDataList.col_name;
-      row.pageTotal = detailsDataList.size;
-      if (detailsDataList.object) {
-        detailsDataList.object.forEach((k) => {
-          const data = {};
-          detailsDataList.col_name.forEach((item, index) => {
-            if (item === 'op_info') {
-              data[item] = JSON.stringify(k[index]);
-            } else {
-              data[item] = k[index];
-            }
-          });
-          row.opDetailList.push(data);
+        this.$nextTick(() => {
+          ref.resizeCallback();
         });
       }
     },
-    /**
-     * Expand operator type table
-     * @param {Object} row table cell
-     */
-    expandTypeItem(row) {
-      row.isExpanded = !row.isExpanded;
-      if (row.isExpanded) {
-        if (this.curActiveRow.rowItem) {
-          const item = this.$refs['expandTable'];
-          if (item) {
-            item.toggleRowExpansion(this.curActiveRow.rowItem, false);
-          }
-        }
-        this.curActiveRow = {
-          rowItem: row,
-          childProp: null,
-          childOrder: null,
-        };
-        row.opDetailList = [];
-        row.opDetailCol = [];
-        row.opDetailPage.offset = 0;
-        row.pageTotal = 0;
-        row.op_sort_condition = {
-          name: 'op_avg_time',
-          type: 'descending',
-        };
-        this.getOperatorDetailList(row, true);
-      } else {
-        this.curActiveRow = {
-          rowItem: null,
-          childProp: null,
-          childOrder: null,
-        };
-      }
-    },
-    /**
-     * Tab change
-     */
-    tabChange() {
-      if (
-        this.apiType === 'core' &&
-        this.coreCharts.device_id !== this.currentCard
-      ) {
-        this.initOver = false;
-        this.clearCoreData();
-        this.getCoreList(true);
-      } else if (
-        this.apiType === 'operator' &&
-        this.operatorCharts.device_id !== this.currentCard
-      ) {
-        this.initOver = false;
-        this.clearOpData();
-        this.getOpTypeList();
-      }
-      this.$nextTick(() => {
-        this.resizeCallback();
-      });
-    },
-    /**
-     * Operator table type change
-     */
-    operatorTableChange() {
-      if (this.statisticType && !this.opAllTypeList.opDetailCol.length) {
-        this.opAllTypeList.op_sort_condition = {
-          name: 'op_avg_time',
-          type: 'descending',
-        };
-        this.getOperatorDetailList(this.opAllTypeList, true);
-      }
-    },
-    /**
-     * Core chart change
-     */
-    coreChartChange() {
-      this.setOption(this.coreCharts);
-    },
-    /**
-     * Operator chart change
-     */
-    operatorChartChange() {
-      this.setOption(this.operatorCharts);
-    },
-    /**
-     * Set chart option
-     * @param {Object} chart chart
-     */
-    setOption(chart) {
-      const option = {};
-      const maxLabelLength = 20;
-      const maxTooltipLen = 50;
-
-      if (!chart.type) {
-        option.legend = {
-          data: [],
-          orient: 'vertical',
-          icon: 'circle',
-          formatter: (params) => {
-            let legendStr = '';
-            for (let i = 0; i < chart.data.length; i++) {
-              if (chart.data[i].name === params) {
-                const name =
-                  chart.data[i].name.length > 10
-                    ? `${chart.data[i].name.slice(0, 10)}...`
-                    : chart.data[i].name;
-                legendStr = `{a|${i + 1}}{b|${name}  ${chart.data[
-                    i
-                ].value.toFixed(3)}}\n{c|}`;
-              }
-            }
-            return legendStr;
-          },
-          tooltip: {
-            show: true,
-            formatter: (params) => {
-              let name = params.name;
-              name = name.replace(/</g, '< ');
-
-              const breakCount = Math.ceil(name.length / maxTooltipLen);
-              let str = '';
-              for (let i = 0; i < breakCount; i++) {
-                const temp = name.substr(i * maxTooltipLen, maxTooltipLen);
-                str += str ? '<br/>' + temp : temp;
-              }
-              return str;
-            },
-          },
-          itemWidth: 18,
-          itemHeight: 18,
-          padding: [0, 50, 0, 0],
-          top: '5%',
-          left: '45%',
-          textStyle: {
-            padding: [15, 0, 0, 0],
-            rich: {
-              a: {
-                width: 24,
-                align: 'center',
-                padding: [0, 10, 3, -26],
-                color: '#FFF',
-              },
-              b: {
-                padding: [0, 0, 3, 0],
-              },
-              c: {
-                width: '100%',
-                padding: [0, 0, 5, 10],
-                color: '#9EA4B3',
-                fontSize: 12,
-              },
-            },
-          },
-        };
-        option.tooltip = {
-          trigger: 'item',
-          formatter: (params) => {
-            const name = params.data.name.replace(/</g, '< ');
-            const strTemp = `${name} ${params.percent.toFixed(2) + '%'}`;
-
-            const breakCount = Math.ceil(strTemp.length / maxTooltipLen);
-            let str = '';
-            for (let i = 0; i < breakCount; i++) {
-              const temp = strTemp.substr(i * maxTooltipLen, maxTooltipLen);
-              str += str ? '<br/>' + temp : temp;
-            }
-            return str;
-          },
-          confine: true,
-        };
-        option.series = [
-          {
-            type: 'pie',
-            center: ['23%', '60%'],
-            data: chart.data,
-            radius: '50%',
-            label: {
-              position: 'outer',
-              alignTo: 'labelLine',
-              formatter: (params) => {
-                return params.data.name &&
-                  params.data.name.length > maxLabelLength
-                  ? `${params.data.name.slice(0, maxLabelLength)}...`
-                  : params.data.name;
-              },
-            },
-            itemStyle: {
-              normal: {
-                color: function(params) {
-                  return CommonProperty.pieColorArr[params.dataIndex];
-                },
-              },
-            },
-          },
-        ];
-        chart.data.forEach((item) => {
-          option.legend.data.push(item.name);
-        });
-      } else if (chart.type) {
-        option.color = ['#6C92FA'];
-        option.tooltip = {
-          trigger: 'axis',
-          formatter: (params) => {
-            return `${params[0].axisValue}<br>${params[0].marker}${params[0].value}`;
-          },
-          confine: true,
-        };
-        option.series = [
-          {
-            type: 'bar',
-            barWidth: 30,
-            data: [],
-          },
-        ];
-        option.xAxis = {
-          type: 'category',
-          axisLabel: {
-            interval: 0,
-            rotate: -30,
-          },
-          data: [],
-          triggerEvent: true,
-        };
-        option.grid = {
-          left: 70,
-          top: 20,
-          right: 0,
-          bottom: 50,
-        };
-        option.yAxis = {
-          type: 'value',
-          axisLabel: {
-            formatter: (value) => {
-              const yValueArr = [];
-              if (value < 1000000) {
-                yValueArr.push(value.toLocaleString());
-              } else {
-                yValueArr.push(value.toExponential());
-              }
-              return yValueArr;
-            },
-          },
-        };
-        chart.data.forEach((item) => {
-          const name = this.apiType === 'core' ? item.op_name : item.name;
-          option.xAxis.data.push(name);
-          option.series[0].data.push(item.value);
-        });
-        if (this.apiType === 'core') {
-          option.xAxis.axisLabel.formatter = (params, dataIndex) => {
-            const xAxisValue = chart.data[dataIndex].op_name;
-            return xAxisValue.replace(/^.+\//g, '');
-          };
-        }
-      }
-      this.$nextTick(() => {
-        const tmpDom = document.getElementById(chart.id);
-        if (tmpDom) {
-          chart.chartDom = echarts.init(tmpDom, null);
-        } else {
-          if (chart.chartDom) {
-            chart.chartDom.off('mouseover');
-            chart.chartDom.off('mouseout');
-            chart.chartDom.clear();
-          }
-          return;
-        }
-        chart.chartDom.setOption(option, true);
-        if (chart.type) {
-          chart.chartDom.off('mouseover');
-          chart.chartDom.off('mouseout');
-          chart.chartDom.on('mouseover', (params) => {
-            if (params.componentType === 'xAxis') {
-              const offsetX = params.event.offsetX + 10;
-              const offsetY = params.event.offsetY + 10;
-              chart.chartDom.setOption({
-                tooltip: {
-                  formatter: params.value,
-                  alwaysShowContent: true,
-                },
-              });
-              chart.chartDom.dispatchAction({
-                type: 'showTip',
-                seriesIndex: 0,
-                dataIndex: 0,
-                position: [offsetX, offsetY],
-              });
-            }
-          });
-
-          chart.chartDom.on('mouseout', (params) => {
-            if (params.componentType === 'xAxis') {
-              chart.chartDom.setOption({
-                tooltip: {
-                  formatter: '',
-                  alwaysShowContent: false,
-                },
-              });
-            }
-          });
-        }
-        chart.chartDom.resize();
-      }, 10);
-    },
-    loadDataListChildren(tree, treeNode, resolve) {
-      setTimeout(() => {
-        resolve(tree.children);
-      });
-    },
-    /**
-     * Window resize
-     */
-    resizeCallback() {
-      if (this.operatorCharts.chartDom && this.apiType === 'operator') {
-        this.operatorCharts.chartDom.resize();
-      }
-      if (this.coreCharts.chartDom && this.apiType === 'core') {
-        this.coreCharts.chartDom.resize();
-      }
-    },
   },
   mounted() {
     if (this.train_id) {
-      document.title = `${decodeURIComponent(this.train_id)}-${this.$t(
-          'profiling.operatorDetail',
-      )}-MindInsight`;
+      document.title = `${decodeURIComponent(this.train_id)}-${this.$t('profiling.operatorDetail')}-MindInsight`;
     } else {
       document.title = `${this.$t('profiling.operatorDetail')}-MindInsight`;
     }
-    window.addEventListener('resize', this.resizeCallback, false);
-    setTimeout(() => {
-      this.$bus.$on('collapse', this.resizeEchart);
-    }, 500);
   },
 };
 </script>
@@ -1225,175 +333,4 @@ export default {
 .operator .cl-profiler .el-tab-pane {
   height: 100%;
 }
-.operator .cl-profiler .cl-search-box {
-  float: right;
-  margin-bottom: 10px;
-  margin-right: 20px;
-}
-.operator .cl-profiler .cl-search-box .el-input {
-  width: 300px;
-}
-.operator .cl-profiler .cl-profiler-top {
-  height: 47%;
-}
-.operator .cl-profiler .cl-profiler-top .chart-title {
-  float: left;
-  font-weight: bold;
-  height: 32px;
-}
-.operator .cl-profiler .cl-profiler-top.fullScreen {
-  display: none;
-}
-.operator .cl-profiler .cl-profiler-bottom {
-  height: 53%;
-  padding-top: 10px;
-}
-.operator .cl-profiler .cl-profiler-bottom .fullScreen {
-  float: right;
-  margin-top: 5px;
-  cursor: pointer;
-}
-.operator .cl-profiler .cl-profiler-bottom.fullScreen {
-  height: 100%;
-}
-.operator .cl-profiler .core-search-type {
-  float: right;
-  width: 130px;
-  margin-right: 10px;
-}
-.operator .cl-profiler .cl-profiler-echarts {
-  width: 100%;
-  height: calc(100% - 32px);
-  display: inline-block;
-  position: relative;
-  overflow: auto;
-}
-.operator .cl-profiler .cl-profiler-echarts #core-echarts,
-.operator .cl-profiler .cl-profiler-echarts #operator-echarts {
-  width: 100%;
-  height: 100%;
-  min-width: 1300px;
-  min-height: 321px;
-  overflow: hidden;
-}
-.operator .cl-profiler .core-tab .cl-profiler-top {
-  height: 47%;
-}
-.operator .cl-profiler .core-tab .cl-profiler-bottom {
-  height: 53%;
-}
-.operator .cl-profiler .core-tab .cl-profiler-echarts {
-  height: calc(100% - 32px);
-}
-.operator .cl-profiler .core-tab .cl-profiler-bottom.fullScreen {
-  height: 100%;
-}
-.operator .cl-profiler .chart-radio-group {
-  float: right;
-}
-.operator .cl-profiler .el-radio-group .el-radio-button--small .el-radio-button__inner {
-  height: 30px;
-  width: 70px;
-  font-size: 14px;
-  line-height: 10px;
-}
-.operator .cl-profiler .cl-profiler-bar {
-  display: inline-block;
-  width: calc(100% - 400px);
-  vertical-align: top;
-  height: 100%;
-  padding: 20px;
-}
-.operator .cl-profiler .cl-profiler-table-type {
-  display: inline-block;
-  width: calc(100% - 400px);
-  vertical-align: top;
-  height: 100%;
-}
-.operator .cl-profiler .el-pagination {
-  margin: 7px 0;
-  float: right;
-}
-.operator .cl-profiler .details-data-list .el-table th {
-  padding: 10px 0;
-  border-top: 1px solid #ebeef5;
-}
-.operator .cl-profiler .details-data-list .el-table th .cell {
-  border-left: 1px solid #d9d8dd;
-  height: 14px;
-  line-height: 14px;
-}
-.operator .cl-profiler .details-data-list .el-table th:first-child .cell {
-  border-left: none;
-}
-.operator .cl-profiler .details-data-list .el-table th:nth-child(2),
-.operator .cl-profiler .details-data-list .el-table td:nth-child(2) {
-  max-width: 30%;
-}
-.operator .cl-profiler .details-data-list .el-table td {
-  padding: 8px 0;
-}
-.operator .cl-profiler .details-data-list .el-table__row--level-0 td:first-child:after {
-  width: 20px;
-  height: 1px;
-  background: #ebeef5;
-  z-index: 11;
-  position: absolute;
-  left: 0;
-  bottom: -1px;
-  content: "";
-  display: block;
-}
-.operator .cl-profiler .details-data-list .el-table__row--level-1 td {
-  padding: 4px 0;
-  position: relative;
-}
-.operator .cl-profiler .details-data-list .el-table__row--level-1 td:first-child::before {
-  width: 42px;
-  background: #f0fdfd;
-  border-right: 2px #00a5a7 solid;
-  z-index: 10;
-  position: absolute;
-  left: 0;
-  top: -1px;
-  bottom: 0px;
-  content: "";
-  display: block;
-}
-.operator .cl-profiler .details-data-list .el-table__row--level-1:first-child td:first-child::before {
-  bottom: 0;
-}
-.operator .cl-profiler .el-table__expanded-cell[class*=cell] {
-  padding: 0;
-}
-.operator .cl-profiler .expand-table {
-  position: relative;
-  padding-left: 44px;
-}
-.operator .cl-profiler .expand-table::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  background: #f0fdfd;
-  width: 42px;
-  border-right: 2px #00a5a7 solid;
-}
-.operator .cl-profiler .el-radio-button:last-child .el-radio-button__inner,
-.operator .cl-profiler .el-radio-button:first-child .el-radio-button__inner {
-  border-radius: 0;
-}
-.operator .cl-profiler .image-noData {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-.operator .cl-profiler .image-noData p {
-  font-size: 16px;
-  padding-top: 10px;
-}
 </style>
diff --git a/mindinsight/ui/src/views/profiling/data-process.vue b/mindinsight/ui/src/views/profiling/data-process.vue
index bc0f41bc..4efa96b1 100644
--- a/mindinsight/ui/src/views/profiling/data-process.vue
+++ b/mindinsight/ui/src/views/profiling/data-process.vue
@@ -1598,7 +1598,7 @@ export default {
 .data-process-wrap .data-process-bottom .queue-step-wrap .chart-content .chart-wrap {
   float: left;
   width: calc(50% - 12px);
-  height: calc(100% - 5px);
+  height: calc(100% - 10px);
   border-radius: 4px;
   overflow-y: auto;
   border: 1px solid #D9D9D9;
diff --git a/mindinsight/ui/src/views/profiling/operator.vue b/mindinsight/ui/src/views/profiling/operator.vue
index a9b36936..9a322b7e 100644
--- a/mindinsight/ui/src/views/profiling/operator.vue
+++ b/mindinsight/ui/src/views/profiling/operator.vue
@@ -1,5 +1,5 @@
 <!--
-Copyright 2020 Huawei Technologies Co., Ltd.All Rights Reserved.
+Copyright 2020-2021 Huawei Technologies Co., Ltd.All Rights Reserved.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -21,449 +21,178 @@ limitations under the License.
                @tab-click="tabChange">
         <el-tab-pane label="AI CORE"
                      name="core">
-          <div class="cl-profiler-top"
-               :class="{fullScreen:coreFullScreen}"
-               v-if="coreCharts.data.length">
-            <div>
-              <div class="chart-title">{{$t('profiling.chartTitle')}}</div>
-              <el-radio-group class="chart-radio-group"
-                              v-model="coreCharts.type"
-                              @change="coreChartChange"
-                              fill="#00A5A7"
-                              text-color="#FFFFFF"
-                              size="small">
-                <el-radio-button :label="0">
-                  {{$t('operator.pie')}}
-                </el-radio-button>
-                <el-radio-button :label="1">
-                  {{ $t('operator.bar')}}
-                </el-radio-button>
-              </el-radio-group>
-            </div>
-            <div class="cl-profiler-echarts">
-              <div id="core-echarts"></div>
-            </div>
-          </div>
-          <div class="cl-profiler-bottom"
-               :class="{fullScreen:coreFullScreen}"
-               v-if="coreCharts.data.length">
-            <img src="../../assets/images/full-screen.png"
-                 :title="$t('graph.fullScreen')"
-                 class="fullScreen"
-                 @click="fullScreenControl()">
-            <div>
-              <el-radio-group v-model="coreStatisticType"
-                              @change="coreTableChange"
-                              fill="#00A5A7"
-                              text-color="#FFFFFF"
-                              size="small">
-                <el-radio-button :label="1">
-                  {{$t('operator.allOperator')}}
-                </el-radio-button>
-                <el-radio-button :label="0">
-                  {{$t('operator.classificationOperator')}}
-                </el-radio-button>
-              </el-radio-group>
-              <div class="cl-search-box">
-                <el-input v-model="searchByTypeInput"
-                          v-if="!coreStatisticType"
-                          :placeholder="$t('operator.searchByType') +
-                            $t('symbols.leftbracket') + $t('public.caseMode') + $t('symbols.rightbracket')"
-                          clearable
-                          @clear="searchOpCoreList()"
-                          @keyup.enter.native="searchOpCoreList()"></el-input>
-                <el-input v-model="searchByNameInput"
-                          v-if="coreStatisticType"
-                          :placeholder="$t('operator.searchByName') +
-                            $t('symbols.leftbracket') + $t('public.caseMode') + $t('symbols.rightbracket')"
-                          clearable
-                          @clear="searchOpCoreList()"
-                          @keyup.enter.native="searchOpCoreList()"></el-input>
-              </div>
-            </div>
-            <el-table v-show="!coreStatisticType && opTypeCol && opTypeCol.length"
-                      :data="opTypeList"
-                      ref="expandTable"
-                      @expand-change="expandCoreTypeItem"
-                      @sort-change="opTypeSortChange"
-                      stripe
-                      height="calc(100% - 40px)"
-                      width="100%">
-              <el-table-column type="expand">
-                <template slot-scope="props">
-                  <div class="expand-table">
-                    <el-table :data="props.row.opDetailList"
-                              stripe
-                              ref="expandCoreChild"
-                              width="100%"
-                              tooltip-effect="light"
-                              @cell-click="showInfoDetail"
-                              @sort-change="(...args)=>{coreDetailSortChange(props.row, ...args)}">
-                      <el-table-column v-for="(ele, key) in props.row.opDetailCol"
-                                       :property="ele"
-                                       :key="key"
-                                       :sortable="ele === 'op_info' ? false : 'custom'"
-                                       :min-width="(ele === 'op_info') ? 350 : (ele === 'full_op_name') ? 220 : ''"
-                                       :show-overflow-tooltip="(ele === 'avg_execution_time')">
-                        <template slot="header">
-                          <div class="custom-label"
-                               :title="getHeaderField(ele)">
-                            {{getHeaderField(ele)}}
-                          </div>
-                        </template>
-                      </el-table-column>
-                    </el-table>
-                    <el-pagination :current-page="props.row.opDetailPage.offset + 1"
-                                   :page-size="props.row.opDetailPage.limit"
-                                   :page-sizes="[10, 20, 50]"
-                                   @current-change="(...args)=>{opDetailPageChange(props.row, ...args)}"
-                                   @size-change="(...args)=>{opDetailPageSizeChange(props.row, ...args)}"
-                                   layout="total, sizes, prev, pager, next, jumper"
-                                   :total="props.row.pageTotal">
-                    </el-pagination>
-                    <div class="clear"></div>
-                  </div>
-                </template>
-              </el-table-column>
-              <el-table-column v-for="(item, $index) in opTypeCol"
-                               :property="item"
-                               :key="$index"
-                               sortable>
-                <template slot="header">
-                  <div class="custom-label"
-                       :title="getHeaderField(item)">
-                    {{getHeaderField(item)}}
-                  </div>
-                </template>
-              </el-table-column>
-            </el-table>
-            <el-table v-show="coreStatisticType && opAllTypeList.opDetailCol && opAllTypeList.opDetailCol.length"
-                      :data="opAllTypeList.opDetailList"
-                      stripe
-                      ref="opAllTable"
-                      width="100%"
-                      height="calc(100% - 80px)"
-                      @cell-click="showInfoDetail"
-                      @sort-change="(...args)=>{coreDetailSortChange(opAllTypeList, ...args)}"
-                      tooltip-effect="light">
-              <el-table-column v-for="(item, $index) in opAllTypeList.opDetailCol"
-                               :property="item"
-                               :key="$index"
-                               :sortable="item === 'op_info' ? false : 'custom'"
-                               :min-width="(item === 'op_info') ? 350 : (item === 'full_op_name') ? 220 : ''"
-                               :show-overflow-tooltip="(item === 'avg_execution_time')">
-                <template slot="header">
-                  <div class="custom-label"
-                       :title="getHeaderField(item)">
-                    {{getHeaderField(item)}}
-                  </div>
-                </template>
-              </el-table-column>
-            </el-table>
-            <el-pagination v-show="coreStatisticType"
-                           v-if="opAllTypeList.opDetailList.length"
-                           :current-page="opAllTypeList.opDetailPage.offset + 1"
-                           :page-size="opAllTypeList.opDetailPage.limit"
-                           :page-sizes="[10, 20, 50]"
-                           @current-change="(...args)=>{opDetailPageChange(opAllTypeList, ...args)}"
-                           @size-change="(...args)=>{opDetailPageSizeChange(opAllTypeList, ...args)}"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="opAllTypeList.pageTotal">
-            </el-pagination>
-          </div>
-          <div class="image-noData"
-               v-if="coreCharts.data.length === 0">
-            <div>
-              <img :src="require('@/assets/images/nodata.png')"
-                   alt="" />
-            </div>
-            <p>{{ initOver?$t("public.noData"):$t('public.dataLoading') }}</p>
-          </div>
+          <operator-unit chartId="core-echarts"
+                         :currentCard="currentCard"
+                         :opType="coreOpType"
+                         :opSortCondition="coreOpSortCondition"
+                         :search="coreSearch"
+                         :accuracy="6"
+                         :headerFilder="headerFilder"
+                         ref="core" />
         </el-tab-pane>
         <el-tab-pane label="AI CPU"
                      class="cpu-tab"
                      name="cpu">
-           <div class="cl-profiler-top"
-               :class="{fullScreen:cpuFullScreen}"
-               v-if="cpuCharts.data.length">
-            <div>
-              <div class="chart-title">{{$t('profiling.chartTitle')}}</div>
-              <el-radio-group class="chart-radio-group"
-                              v-model="cpuCharts.type"
-                              @change="cpuChartChange"
-                              fill="#00A5A7"
-                              text-color="#FFFFFF"
-                              size="small">
-                <el-radio-button :label="0">
-                  {{$t('operator.pie')}}
-                </el-radio-button>
-                <el-radio-button :label="1">
-                  {{ $t('operator.bar')}}
-                </el-radio-button>
-              </el-radio-group>
-            </div>
-            <div class="cl-profiler-echarts">
-              <div id="cpu-echarts"></div>
-            </div>
-          </div>
-
-          <div class="cl-profiler-bottom"
-               :class="{fullScreen:cpuFullScreen}"
-               v-if="cpuCharts.data.length">
-            <img src="../../assets/images/full-screen.png"
-                 :title="$t('graph.fullScreen')"
-                 class="fullScreen"
-                 @click="fullScreenControl()">
-            <div>
-              <el-radio-group v-model="cpuStatisticType"
-                              @change="cpuTableChange"
-                              fill="#00A5A7"
-                              text-color="#FFFFFF"
-                              size="small">
-                <el-radio-button :label="1">
-                  {{$t('operator.allOperator')}}
-                </el-radio-button>
-                <el-radio-button :label="0">
-                  {{$t('operator.classificationOperator')}}
-                </el-radio-button>
-              </el-radio-group>
-              <div class="cl-search-box">
-                <el-input v-model="searchByCpuTypeInput"
-                          v-if="!cpuStatisticType"
-                          :placeholder="$t('operator.searchByType') +
-                            $t('symbols.leftbracket') + $t('public.caseMode') + $t('symbols.rightbracket')"
-                          clearable
-                          @clear="searchOpCpuList()"
-                          @keyup.enter.native="searchOpCpuList()"></el-input>
-                <el-input v-model="searchAllByCpuTypeInput"
-                          v-if="cpuStatisticType"
-                          :placeholder="$t('operator.searchByType') +
-                            $t('symbols.leftbracket') + $t('public.caseMode') + $t('symbols.rightbracket')"
-                          clearable
-                          @clear="searchOpCpuList()"
-                          @keyup.enter.native="searchOpCpuList()"></el-input>
-              </div>
-            </div>
-            <el-table v-show="!cpuStatisticType && opCpuTypeCol && opCpuTypeCol.length"
-                      :data="opCpuTypeList"
-                      ref="expandCpuTable"
-                      @expand-change="expandCpuTypeItem"
-                      @sort-change="opCpuTypeSortChange"
-                      stripe
-                      height="calc(100% - 40px)"
-                      width="100%">
-              <el-table-column type="expand">
-                <template slot-scope="props">
-                  <div class="expand-table">
-                    <el-table :data="props.row.opDetailList"
-                              stripe
-                              ref="expandCpuChild"
-                              width="100%"
-                              tooltip-effect="light"
-                              @sort-change="(...args)=>{cpuDetailSortChange(props.row, ...args)}">
-                      <el-table-column v-for="(ele, key) in props.row.opDetailCol"
-                                       :property="ele"
-                                       :key="key"
-                                       sortable="custom"
-                                       show-overflow-tooltip>
-                        <template slot="header">
-                          <div class="custom-label"
-                               :title="getHeaderField(ele)">
-                            {{getHeaderField(ele)}}
-                          </div>
-                        </template>
-                      </el-table-column>
-                    </el-table>
-                    <el-pagination :current-page="props.row.opDetailPage.offset + 1"
-                                   :page-size="props.row.opDetailPage.limit"
-                                   :page-sizes="[10, 20, 50]"
-                                   @current-change="(...args)=>{opCpuDetailPageChange(props.row, ...args)}"
-                                   @size-change="(...args)=>{opCpuDetailPageSizeChange(props.row, ...args)}"
-                                   layout="total, sizes, prev, pager, next, jumper"
-                                   :total="props.row.pageTotal">
-                    </el-pagination>
-                    <div class="clear"></div>
-                  </div>
-                </template>
-              </el-table-column>
-              <el-table-column v-for="(item, $index) in opTypeCol"
-                               :property="item"
-                               :key="$index"
-                               sortable>
-                <template slot="header">
-                  <div class="custom-label"
-                       :title="getHeaderField(item)">
-                    {{getHeaderField(item)}}
-                  </div>
-                </template>
-              </el-table-column>
-            </el-table>
-            <el-table v-show="cpuStatisticType && opCpuAllTypeList.opDetailCol && opCpuAllTypeList.opDetailCol.length"
-                      :data="opCpuAllTypeList.opDetailList"
-                      stripe
-                      ref="opCpuAllTable"
-                      width="100%"
-                      height="calc(100% - 80px)"
-                      tooltip-effect="light"
-                      @sort-change="(...args)=>{cpuDetailSortChange(opCpuAllTypeList, ...args)}">
-              <el-table-column v-for="(item, $index) in opCpuAllTypeList.opDetailCol"
-                               :property="item"
-                               :key="$index"
-                               sortable="custom"
-                               show-overflow-tooltip>
-                <template slot="header">
-                  <div class="custom-label"
-                       :title="getHeaderField(item)">
-                    {{getHeaderField(item)}}
-                  </div>
-                </template>
-              </el-table-column>
-            </el-table>
-            <el-pagination v-show="cpuStatisticType"
-                           v-if="opCpuAllTypeList.opDetailList.length"
-                           :current-page="opCpuAllTypeList.opDetailPage.offset + 1"
-                           :page-size="opCpuAllTypeList.opDetailPage.limit"
-                           :page-sizes="[10, 20, 50]"
-                           @current-change="(...args)=>{opCpuDetailPageChange(opCpuAllTypeList, ...args)}"
-                           @size-change="(...args)=>{opCpuDetailPageSizeChange(opCpuAllTypeList, ...args)}"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="opCpuAllTypeList.pageTotal">
-            </el-pagination>
-          </div>
-          <div class="image-noData"
-               v-if="cpuCharts.data.length === 0">
-            <div>
-              <img :src="require('@/assets/images/nodata.png')"
-                   alt="" />
-            </div>
-            <p>{{initOver?$t("public.noData"):$t('public.dataLoading')}}</p>
-          </div>
+          <operator-unit chartId="cpu-echarts"
+                         :currentCard="currentCard"
+                         :opType="cpuOpType"
+                         :opSortCondition="cpuOpSortCondition"
+                         :search="cpuSearch"
+                         :accuracy="6"
+                         :headerFilder="headerFilder"
+                         ref="cpu" />
+        </el-tab-pane>
+        <el-tab-pane label="HOST CPU"
+                     class="cpu-tab"
+                     name="host">
+          <operator-unit chartId="host-echarts"
+                         :currentCard="currentCard"
+                         :opType="hostType"
+                         :opSortCondition="hostSortCondition"
+                         :search="hostSearch"
+                         :accuracy="6"
+                         :headerFilder="headerFilder"
+                         :chart="hostChart"
+                         ref="host" />
         </el-tab-pane>
       </el-tabs>
-      <el-dialog :title="rowName"
-                 :visible.sync="detailsDialogVisible"
-                 width="50%"
-                 :close-on-click-modal="false"
-                 class="details-data-list">
-        <el-table :data="detailsDataList"
-                  row-key="id"
-                  lazy
-                  tooltip-effect="light"
-                  :load="loadDataListChildren"
-                  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
-          <el-table-column width="50" />
-          <el-table-column prop="key"
-                           width="180"
-                           label="Key"> </el-table-column>
-          <el-table-column prop="value"
-                           show-overflow-tooltip
-                           label="Value">
-            <template slot-scope="scope">
-              {{ scope.row.value }}
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-dialog>
     </div>
   </div>
 </template>
 <script>
-import echarts from 'echarts';
-import requestService from '../../services/request-service';
-import CommonProperty from '../../common/common-property';
-
+import operatorUnit from '../../components/operator-unit.vue';
 export default {
+  components: {operatorUnit},
   data() {
     return {
       apiType: 'core',
       currentCard: '',
-      cpuCharts: {
-        type: 0,
-        id: 'cpu-echarts',
-        chartDom: null,
-        data: [],
-      }, // ai cpu chart
-      coreCharts: {
-        type: 0,
-        id: 'core-echarts',
-        chartDom: null,
-        data: [],
-      }, // ai core chart
-      coreStatisticType: 0, // ai core table statistic type
-      cpuStatisticType: 0, // ai cpu table statistic type
-      searchByTypeInput: '', // search by ai core type name
-      searchByNameInput: '', // search by ai core detail name
-      searchByCpuTypeInput: '', // search by ai cpu type
-      searchAllByCpuTypeInput: '', // search by ai cpu type in all list
-      opTypeCol: [], // table headers list of operator type
-      opTypeList: [], // table list of operator type
-      opCpuTypeCol: [], // table headers list of operator type
-      opCpuTypeList: [], // table list of operator type
-      opCpuAllTypeList: {
-        opDetailCol: [],
-        opDetailList: [],
-        pageTotal: 0,
-        opDetailPage: {
-          offset: 0,
-          limit: 10,
+      coreOpType: {
+        all: 'aicore_type',
+        detail: 'aicore_detail',
+      },
+      cpuOpType: {
+        all: 'aicpu_type',
+        detail: 'aicpu_detail',
+      },
+      hostType: {
+        all: 'cpu_op_type',
+        detail: 'cpu_op_info',
+      },
+      coreOpSortCondition: {
+        all: {
+          name: 'execution_time',
+          type: 'descending',
+        },
+        detail: {
+          name: 'avg_execution_time',
+          type: 'descending',
+        },
+      },
+      cpuOpSortCondition: {
+        all: {
+          name: 'execution_time',
+          type: 'descending',
         },
-        op_filter_condition: {},
-        op_sort_condition: {
+        detail: {
           name: 'total_time',
           type: 'descending',
         },
-      }, // table data of operator cpu
-      opAllTypeList: {
-        opDetailCol: [],
-        opDetailList: [],
-        pageTotal: 0,
-        opDetailPage: {
-          offset: 0,
-          limit: 10,
+      },
+      hostSortCondition: {
+        all: {
+          name: 'total_compute_time',
+          type: 'descending',
+        },
+        detail: {
+          name: 'op_total_time',
+          type: 'descending',
         },
-        op_filter_condition: {},
-        op_sort_condition: {},
-      }, // table data of all operator details
-      rowName: this.$t('dataTraceback.details'), // dialog title
-      detailsDataList: [], // dialog table data
-      detailsDialogVisible: false, // show dialog
-      profile_dir: '', // profile directory
-      train_id: '', // train id
-      op_filter_condition: {}, // operator type filter
-      op_sort_condition: {
-        name: 'execution_time',
-        type: 'descending',
-      }, // operator type filter
-      op_cpu_filter_condition: {},
-      op_cpu_sort_condition: {
-        name: 'execution_time',
-        type: 'descending',
-      }, // operator cpu type filter
-      initOver: false,
-      objectType: 'object',
-      curActiveRow: {
-        rowItem: null,
-        childProp: null,
-        childOrder: null,
       },
-      curCpuActiveRow: {
-        rowItem: null,
-        childProp: null,
-        childOrder: null,
+      headerFilder: {
+        execution_time: `execution_time (${this.$t('profiling.unit')})`,
+        avg_execution_time: `avg_execution_time (${this.$t('profiling.unit')})`,
+        execution_frequency: `execution_frequency (${this.$t('profiling.countUnit')})`,
+        percent: 'percent (%)',
+        total_time: 'total_time (ms)',
+        dispatch_time: 'dispatch_time (ms)',
+        total_compute_time: 'total_compute_time (ms)',
+        compute_time: `compute_time (${this.$t('profiling.unit')})`,
+        total_time_proportion: 'total_time_proportion (%)',
+        op_total_time: 'op_total_time (ms)',
+        avg_time: 'avg_time (ms)',
+        op_avg_time: 'op_avg_time (ms)',
+      },
+      coreSearch: {
+        all: {
+          label:
+            this.$t('operator.searchByType') +
+            this.$t('symbols.leftbracket') +
+            this.$t('public.caseMode') +
+            this.$t('symbols.rightbracket'),
+          type: 'op_type',
+        },
+        detail: {
+          label:
+            this.$t('operator.searchByName') +
+            this.$t('symbols.leftbracket') +
+            this.$t('public.caseMode') +
+            this.$t('symbols.rightbracket'),
+          type: 'op_name',
+        },
+      },
+      cpuSearch: {
+        all: {
+          label:
+            this.$t('operator.searchByType') +
+            this.$t('symbols.leftbracket') +
+            this.$t('public.caseMode') +
+            this.$t('symbols.rightbracket'),
+          type: 'op_type',
+        },
+        detail: {
+          label:
+            this.$t('operator.searchByType') +
+            this.$t('symbols.leftbracket') +
+            this.$t('public.caseMode') +
+            this.$t('symbols.rightbracket'),
+          type: 'op_type',
+        },
+      },
+      hostSearch: {
+        all: {
+          label:
+            this.$t('operator.searchByType') +
+            this.$t('symbols.leftbracket') +
+            this.$t('public.caseMode') +
+            this.$t('symbols.rightbracket'),
+          type: 'op_type',
+        },
+        detail: {
+          label:
+            this.$t('operator.searchByName') +
+            this.$t('symbols.leftbracket') +
+            this.$t('public.caseMode') +
+            this.$t('symbols.rightbracket'),
+          type: 'op_name',
+        },
+      },
+      hostChart: {
+        hasPercent: true,
+        value: 4,
+        percent: 5,
       },
-      coreFullScreen: false,
-      cpuFullScreen: false,
     };
   },
   watch: {
     '$parent.curDashboardInfo': {
       handler(newValue, oldValue) {
-        if (newValue.query.dir && newValue.query.id && newValue.curCardNum) {
-          this.profile_dir = newValue.query.dir;
-          this.train_id = newValue.query.id;
+        if (newValue.curCardNum) {
           this.currentCard = newValue.curCardNum;
           this.initOver = false;
-          this.cardChange();
+          this.$nextTick(() => {
+            this.cardChange();
+          });
         }
         if (newValue.initOver) {
           this.initOver = true;
@@ -473,1033 +202,40 @@ export default {
       immediate: true,
     },
   },
-  destroyed() {
-    // Remove the listener of window size change
-    window.removeEventListener('resize', this.resizeCallback);
-    this.$bus.$off('collapse');
-
-    if (this.cpuCharts.chartDom) {
-      this.cpuCharts.chartDom.off('mouseover');
-      this.cpuCharts.chartDom.off('mouseout');
-    }
-    if (this.coreCharts.chartDom) {
-      this.coreCharts.chartDom.off('mouseover');
-      this.coreCharts.chartDom.off('mouseout');
-    }
-  },
+  destroyed() {},
   methods: {
-    getHeaderField(key) {
-      const maps = {
-        execution_time: `execution_time (${this.$t('profiling.unit')})`,
-        avg_execution_time: `avg_execution_time (${this.$t('profiling.unit')})`,
-        execution_frequency: `execution_frequency (${this.$t(
-            'profiling.countUnit',
-        )})`,
-        percent: 'percent (%)',
-        total_time: 'total_time (ms)',
-        dispatch_time: 'dispatch_time (ms)',
-      };
-      return maps[key] ? maps[key] : key;
-    },
-    resizeEchart() {
-      if (this.coreCharts.chartDom) {
-        setTimeout(() => {
-          this.coreCharts.chartDom.resize();
-        }, 300);
-      }
-    },
-    fullScreenControl() {
-      if (this.apiType === 'core') {
-        this.coreFullScreen = !this.coreFullScreen;
-        if (this.coreCharts.chartDom && !this.coreFullScreen) {
-          this.$nextTick(() => {
-            this.coreCharts.chartDom.resize();
-          });
-        }
-      } else {
-        this.cpuFullScreen = !this.cpuFullScreen;
-        if (this.cpuCharts.chartDom && !this.cpuFullScreen) {
-          this.$nextTick(() => {
-            this.cpuCharts.chartDom.resize();
-          });
-        }
-      }
-    },
-    /**
-     * Current device change
-     */
     cardChange() {
-      if (this.apiType === 'core') {
-        this.coreStatisticType = 0;
-        this.clearCoreData();
-        this.getCoreTypeList();
-      } else if (this.apiType === 'cpu') {
-        this.cpuStatisticType = 0;
-        this.clearCpuData();
-        this.getCpuTypeList();
-      }
-    },
-    /**
-     * Operators core type sort
-     * @param {Object} sort Sort data
-     */
-    opTypeSortChange(sort) {
-      this.op_sort_condition = {
-        name: sort.prop,
-        type: sort.order,
-      };
-      this.$nextTick(() => {
-        const item = this.$refs['expandCoreChild'];
-        if (item && this.curActiveRow.rowItem) {
-          item.sort(this.curActiveRow.childProp, this.curActiveRow.childOrder);
-        }
-      });
-    },
-    /**
-     * Operators cpu type sort
-     * @param {Object} sort Sort data
-     */
-    opCpuTypeSortChange(sort) {
-      this.op_cpu_sort_condition = {
-        name: sort.prop,
-        type: sort.order,
-      };
-      this.$nextTick(() => {
-        const item = this.$refs['expandCpuChild'];
-        if (item && this.curCpuActiveRow.rowItem) {
-          item.sort(
-              this.curCpuActiveRow.childProp,
-              this.curCpuActiveRow.childOrder,
-          );
-        }
-      });
-    },
-    /**
-     * Clear cpu data
-     */
-    clearCpuData() {
-      this.searchByCpuTypeInput = '';
-      this.searchAllByCpuTypeInput = '';
-      this.op_cpu_filter_condition = {};
-      this.op_cpu_sort_condition = {
-        name: 'execution_time',
-        type: 'descending',
-      };
-      this.opCpuTypeCol = [];
-      this.opCpuTypeList = [];
-      this.opCpuAllTypeList = {
-        opDetailCol: [],
-        opDetailList: [],
-        pageTotal: 0,
-        opDetailPage: {
-          offset: 0,
-          limit: 10,
-        },
-        op_filter_condition: {},
-        op_sort_condition: {},
-      };
-    },
-    /**
-     * Clear core data
-     */
-    clearCoreData() {
-      this.searchByTypeInput = '';
-      this.searchByNameInput = '';
-      this.op_filter_condition = {};
-      this.op_sort_condition = {
-        name: 'execution_time',
-        type: 'descending',
-      };
-      this.opTypeCol = [];
-      this.opTypeList = [];
-      this.opAllTypeList = {
-        opDetailCol: [],
-        opDetailList: [],
-        pageTotal: 0,
-        opDetailPage: {
-          offset: 0,
-          limit: 10,
-        },
-        op_filter_condition: {},
-        op_sort_condition: {},
-      };
-    },
-    /**
-     * Get core type list
-     */
-    getCoreTypeList() {
-      const params = {};
-      params.params = {
-        profile: this.profile_dir,
-        train_id: this.train_id,
-      };
-      params.body = {
-        op_type: 'aicore_type',
-        device_id: this.currentCard,
-        filter_condition: this.op_filter_condition,
-        sort_condition: this.op_sort_condition,
-      };
-      requestService
-          .getProfilerOpData(params)
-          .then((res) => {
-            this.initOver = true;
-            this.opTypeList = [];
-            if (res && res.data) {
-              this.opTypeCol = res.data.col_name;
-              if (res.data.object) {
-                res.data.object.forEach((k) => {
-                  const object = {
-                    isExpanded: false,
-                    opDetailList: [],
-                    opDetailCol: [],
-                    opDetailPage: {
-                      offset: 0,
-                      limit: 10,
-                    },
-                    pageTotal: 0,
-                    op_filter_condition: {
-                      op_type: {
-                        in: [k[0]],
-                      },
-                    },
-                    op_sort_condition: {},
-                  };
-                  res.data.col_name.forEach((item, index) => {
-                    object[item] = k[index];
-                  });
-                  this.opTypeList.push(object);
-                });
-                this.$nextTick(() => {
-                  const elementItem = this.$refs['expandTable'];
-                  if (elementItem) {
-                    elementItem.sort(
-                        this.op_sort_condition.name,
-                        this.op_sort_condition.type,
-                    );
-                  }
-                });
-                if (
-                  !this.coreCharts.device_id ||
-                this.coreCharts.device_id !== this.currentCard
-                ) {
-                  this.coreCharts.device_id = this.currentCard;
-                  this.coreCharts.data = [];
-                  res.data.object.forEach((k) => {
-                    if (
-                      this.coreCharts.data &&
-                    this.coreCharts.data.length < 19
-                    ) {
-                      this.coreCharts.data.push({
-                        name: k[0],
-                        value: k[1],
-                        percent: k[3],
-                      });
-                    } else {
-                      if (!this.coreCharts.data[19]) {
-                        this.coreCharts.data[19] = {
-                          name: 'Other',
-                          value: 0,
-                          percent: 0,
-                        };
-                      }
-                      this.coreCharts.data[19].value += k[1];
-                      this.coreCharts.data[19].percent += k[3];
-                    }
-                  });
-                  this.setOption(this.coreCharts);
-                }
-              }
-            }
-          })
-          .catch(() => {
-            this.opTypeList = [];
-            this.initOver = true;
-          });
-    },
-    /**
-     * Get core detail list
-     * @param {Object} row type row
-     * @param {Boolean} isSort if sort
-     */
-    getCoreDetailList(row, isSort) {
-      const params = {};
-      params.params = {
-        profile: this.profile_dir,
-        train_id: this.train_id,
-      };
-      params.body = {
-        op_type: 'aicore_detail',
-        device_id: this.currentCard,
-        filter_condition: row.op_filter_condition,
-        sort_condition: row.op_sort_condition,
-        group_condition: row.opDetailPage,
-      };
-      requestService
-          .getProfilerOpData(params)
-          .then((res) => {
-            if (res && res.data) {
-              this.formatterDetailData(row, res.data);
-              this.$nextTick(() => {
-                let item = null;
-                if (this.coreStatisticType) {
-                  item = this.$refs['opAllTable'];
-                } else {
-                  item = this.$refs['expandCoreChild'];
-                  this.curActiveRow = {
-                    rowItem: row,
-                    childProp: row.op_sort_condition.name,
-                    childOrder: row.op_sort_condition.type,
-                  };
-                }
-                if (item && isSort) {
-                  item.sort(
-                      row.op_sort_condition.name,
-                      row.op_sort_condition.type,
-                  );
-                }
-                this.$refs.expandTable.doLayout();
-              });
-            }
-          })
-          .catch(() => {});
-    },
-    /**
-     * Get cpu type list
-     */
-    getCpuTypeList() {
-      const params = {};
-      params.params = {
-        profile: this.profile_dir,
-        train_id: this.train_id,
-      };
-      params.body = {
-        op_type: 'aicpu_type',
-        device_id: this.currentCard,
-        filter_condition: this.op_cpu_filter_condition,
-        sort_condition: this.op_cpu_sort_condition,
-      };
-      requestService
-          .getProfilerOpData(params)
-          .then((res) => {
-            this.initOver = true;
-            this.opCpuTypeList = [];
-            if (res && res.data) {
-              this.opCpuTypeCol = res.data.col_name;
-              if (res.data.object) {
-                res.data.object.forEach((k) => {
-                  const object = {
-                    isExpanded: false,
-                    opDetailList: [],
-                    opDetailCol: [],
-                    opDetailPage: {
-                      offset: 0,
-                      limit: 10,
-                    },
-                    pageTotal: 0,
-                    op_filter_condition: {
-                      op_type: {
-                        in: [k[0]],
-                      },
-                    },
-                    op_sort_condition: {},
-                  };
-                  res.data.col_name.forEach((item, index) => {
-                    object[item] = k[index];
-                  });
-                  this.opCpuTypeList.push(object);
-                });
-                this.$nextTick(() => {
-                  const elementItem = this.$refs['expandCpuTable'];
-                  if (elementItem) {
-                    elementItem.sort(
-                        this.op_sort_condition.name,
-                        this.op_sort_condition.type,
-                    );
-                  }
-                });
-                if (
-                  !this.cpuCharts.device_id ||
-                this.cpuCharts.device_id !== this.currentCard
-                ) {
-                  this.cpuCharts.device_id = this.currentCard;
-                  this.cpuCharts.data = [];
-                  res.data.object.forEach((k) => {
-                    if (this.cpuCharts.data && this.cpuCharts.data.length < 19) {
-                      this.cpuCharts.data.push({
-                        name: k[0],
-                        value: k[1],
-                        percent: k[3],
-                      });
-                    } else {
-                      if (!this.cpuCharts.data[19]) {
-                        this.cpuCharts.data[19] = {
-                          name: 'Other',
-                          value: 0,
-                          percent: 0,
-                        };
-                      }
-                      this.cpuCharts.data[19].value += k[1];
-                      this.cpuCharts.data[19].percent += k[3];
-                    }
-                  });
-                  this.setOption(this.cpuCharts);
-                }
-              }
-            }
-          })
-          .catch(() => {
-            this.opTypeList = [];
-            this.initOver = true;
-          });
-    },
-    /**
-     * Get cpu list
-     * @param {Object} row type row
-     * @param {Boolean} isSort if sort
-     */
-    getCpuDetailList(row, isSort) {
-      const params = {};
-      params.params = {
-        profile: this.profile_dir,
-        train_id: this.train_id,
-      };
-      params.body = {
-        op_type: 'aicpu_detail',
-        device_id: this.currentCard,
-        filter_condition: row.op_filter_condition,
-        sort_condition: row.op_sort_condition,
-        group_condition: row.opDetailPage,
-      };
-      requestService
-          .getProfilerOpData(params)
-          .then((res) => {
-            if (res && res.data) {
-              this.formatterDetailData(row, res.data);
-              this.$nextTick(() => {
-                let item = null;
-                if (this.cpuStatisticType) {
-                  item = this.$refs['opCpuAllTable'];
-                } else {
-                  item = this.$refs['expandCpuChild'];
-                  this.curCpuActiveRow = {
-                    rowItem: row,
-                    childProp: row.op_sort_condition.name,
-                    childOrder: row.op_sort_condition.type,
-                  };
-                }
-                if (item && isSort) {
-                  item.sort(
-                      row.op_sort_condition.name,
-                      row.op_sort_condition.type,
-                  );
-                }
-                this.$refs.expandCpuTable.doLayout();
-              });
-            }
-          })
-          .catch(() => {});
-    },
-    /**
-     * Operator detail list page change
-     * @param {Object} row table cell
-     * @param {Number} pageIndex current page
-     */
-    opDetailPageChange(row, pageIndex) {
-      row.opDetailPage.offset = pageIndex - 1;
-      this.getCoreDetailList(row, false);
-    },
-    /**
-     * Operator detail list page size change
-     * @param {Object} row table cell
-     * @param {Number} pageSize current page size
-     */
-    opDetailPageSizeChange(row, pageSize) {
-      row.opDetailPage.offset = 0;
-      row.opDetailPage.limit = pageSize;
-      this.getCoreDetailList(row, false);
-    },
-    /**
-     * Cpu list page change
-     * @param {Object} row table cell
-     * @param {Number} pageIndex current page
-     */
-    opCpuDetailPageChange(row, pageIndex) {
-      row.opDetailPage.offset = pageIndex - 1;
-      this.getCpuDetailList(row, false);
-    },
-    /**
-     * Cpu list page size change
-     * @param {Object} row table cell
-     * @param {Number} pageSize current page size
-     */
-    opCpuDetailPageSizeChange(row, pageSize) {
-      row.opDetailPage.offset = 0;
-      row.opDetailPage.limit = pageSize;
-      this.getCpuDetailList(row, false);
-    },
-    /**
-     * Get core list by search
-     */
-    searchOpCoreList() {
-      if (this.coreStatisticType) {
-        this.opAllTypeList.op_filter_condition = {};
-        if (this.searchByNameInput) {
-          this.opAllTypeList.op_filter_condition = {
-            op_name: {partial_match_str_in: [this.searchByNameInput]},
-          };
-        } else {
-          this.opAllTypeList.op_filter_condition = {};
-        }
-        this.opAllTypeList.opDetailPage.offset = 0;
-        this.getCoreDetailList(this.opAllTypeList, false);
-      } else {
-        this.op_filter_condition = {};
-        if (this.searchByTypeInput) {
-          this.op_filter_condition = {
-            op_type: {partial_match_str_in: [this.searchByTypeInput]},
-          };
-        } else {
-          this.op_filter_condition = {};
-        }
-        if (this.curActiveRow.rowItem) {
-          this.curActiveRow = {
-            rowItem: null,
-            childProp: null,
-            childOrder: null,
-          };
-        }
-        this.getCoreTypeList();
-      }
-    },
-    /**
-     * Get cpu list by search
-     */
-    searchOpCpuList() {
-      if (this.cpuStatisticType) {
-        this.opCpuAllTypeList.op_filter_condition = {};
-        if (this.searchAllByCpuTypeInput) {
-          this.opCpuAllTypeList.op_filter_condition = {
-            op_type: {partial_match_str_in: [this.searchAllByCpuTypeInput]},
-          };
-        } else {
-          this.opCpuAllTypeList.op_filter_condition = {};
-        }
-        this.opCpuAllTypeList.opDetailPage.offset = 0;
-        this.getCpuDetailList(this.opCpuAllTypeList, false);
-      } else {
-        this.op_cpu_filter_condition = {};
-        if (this.searchByCpuTypeInput) {
-          this.op_cpu_filter_condition = {
-            op_type: {partial_match_str_in: [this.searchByCpuTypeInput]},
-          };
-        } else {
-          this.op_cpu_filter_condition = {};
-        }
-        if (this.curCpuActiveRow.rowItem) {
-          this.curCpuActiveRow = {
-            rowItem: null,
-            childProp: null,
-            childOrder: null,
-          };
-        }
-        this.getCpuTypeList();
-      }
-    },
-    /**
-     * Core detail sort
-     * @param {Object} row table cell
-     * @param {Object} column table cell
-     */
-    coreDetailSortChange(row, column) {
-      row.op_sort_condition = {
-        name: column.prop,
-        type: column.order,
-      };
-      row.opDetailPage.offset = 0;
-      this.getCoreDetailList(row, false);
-    },
-    /**
-     * Cpu detail sort
-     * @param {Object} row table cell
-     * @param {Object} column table cell
-     */
-    cpuDetailSortChange(row, column) {
-      row.op_sort_condition = {
-        name: column.prop,
-        type: column.order,
-      };
-      row.opDetailPage.offset = 0;
-      this.getCpuDetailList(row, false);
-    },
-    /**
-     * Format detail data
-     * @param {Object} row table cell
-     * @param {Object} detailsDataList table detail
-     */
-    formatterDetailData(row, detailsDataList) {
-      row.opDetailList = [];
-      row.opDetailCol = detailsDataList.col_name;
-      row.pageTotal = detailsDataList.size;
-      if (detailsDataList.object) {
-        detailsDataList.object.forEach((k) => {
-          const data = {};
-          detailsDataList.col_name.forEach((item, index) => {
-            if (item === 'op_info') {
-              data[item] = JSON.stringify(k[index]);
-            } else {
-              data[item] = k[index];
-            }
-          });
-          row.opDetailList.push(data);
-        });
-      }
-    },
-    /**
-     * Expand core type table
-     * @param {Object} row table cell
-     */
-    expandCoreTypeItem(row) {
-      row.isExpanded = !row.isExpanded;
-      if (row.isExpanded) {
-        if (this.curActiveRow.rowItem) {
-          const item = this.$refs['expandTable'];
-          if (item) {
-            item.toggleRowExpansion(this.curActiveRow.rowItem, false);
-          }
-        }
-        this.curActiveRow = {
-          rowItem: row,
-          childProp: null,
-          childOrder: null,
-        };
-        row.opDetailList = [];
-        row.opDetailCol = [];
-        row.opDetailPage.offset = 0;
-        row.pageTotal = 0;
-        row.op_sort_condition = {
-          name: 'avg_execution_time',
-          type: 'descending',
-        };
-        this.getCoreDetailList(row, true);
-      } else {
-        this.curActiveRow = {
-          rowItem: null,
-          childProp: null,
-          childOrder: null,
-        };
-      }
-    },
-    /**
-     * Expand cpu type table
-     * @param {Object} row table cell
-     */
-    expandCpuTypeItem(row) {
-      row.isExpanded = !row.isExpanded;
-      if (row.isExpanded) {
-        if (this.curCpuActiveRow.rowItem) {
-          const item = this.$refs['expandCpuTable'];
-          if (item) {
-            item.toggleRowExpansion(this.curCpuActiveRow.rowItem, false);
-          }
-        }
-        this.curCpuActiveRow = {
-          rowItem: row,
-          childProp: null,
-          childOrder: null,
-        };
-        row.opDetailList = [];
-        row.opDetailCol = [];
-        row.opDetailPage.offset = 0;
-        row.pageTotal = 0;
-        row.op_sort_condition = {
-          name: 'total_time',
-          type: 'descending',
-        };
-        this.getCpuDetailList(row, true);
+      const ref = this.$refs[this.apiType];
+      ref.clearCoreData();
+      if (this.apiType !== 'cuda') {
+        ref.coreStatisticType = 0;
       } else {
-        this.curCpuActiveRow = {
-          rowItem: null,
-          childProp: null,
-          childOrder: null,
-        };
+        ref.coreTableChange();
       }
+      ref.getCoreTypeList();
     },
-    /**
-     * Tab change
-     */
     tabChange() {
-      if (
-        this.apiType === 'cpu' &&
-        this.cpuCharts.device_id !== this.currentCard
-      ) {
-        this.initOver = false;
-        this.clearCpuData();
-        this.getCpuTypeList();
-      } else if (
-        this.apiType === 'core' &&
-        this.coreCharts.device_id !== this.currentCard
-      ) {
-        this.initOver = false;
-        this.clearCoreData();
-        this.getCoreTypeList();
-      }
-      this.$nextTick(() => {
-        this.resizeCallback();
-      });
-    },
-    /**
-     * Core table type change
-     */
-    coreTableChange() {
-      if (this.coreStatisticType && !this.opAllTypeList.opDetailCol.length) {
-        this.opAllTypeList.op_sort_condition = {
-          name: 'avg_execution_time',
-          type: 'descending',
-        };
-        this.getCoreDetailList(this.opAllTypeList, true);
-      }
-    },
-    /**
-     * Cpu table type change
-     */
-    cpuTableChange() {
-      if (this.cpuStatisticType && !this.opCpuAllTypeList.opDetailCol.length) {
-        this.opCpuAllTypeList.op_sort_condition = {
-          name: 'total_time',
-          type: 'descending',
-        };
-        this.getCpuDetailList(this.opCpuAllTypeList, true);
-      }
-    },
-    /**
-     * Operator cpu chart change
-     */
-    cpuChartChange() {
-      this.setOption(this.cpuCharts);
-    },
-    /**
-     * Operator core chart change
-     */
-    coreChartChange() {
-      this.setOption(this.coreCharts);
-    },
-    /**
-     * Set chart option
-     * @param {Object} chart chart
-     */
-    setOption(chart) {
-      const option = {};
-      const maxLabelLength = 20;
-      const maxTooltipLen = 50;
-
-      if (!chart.type) {
-        option.legend = {
-          data: [],
-          orient: 'vertical',
-          icon: 'circle',
-          formatter: (params) => {
-            let legendStr = '';
-            for (let i = 0; i < chart.data.length; i++) {
-              if (chart.data[i].name === params) {
-                const name =
-                  chart.data[i].name.length > 10
-                    ? `${chart.data[i].name.slice(0, 10)}...`
-                    : chart.data[i].name;
-                legendStr = `{a|${i + 1}}{b|${name}  ${chart.data[
-                    i
-                ].value.toFixed(6)}}\n{c|${chart.data[i].percent.toFixed(2)}%}`;
-              }
-            }
-            return legendStr;
-          },
-          tooltip: {
-            show: true,
-            formatter: (params) => {
-              let name = params.name;
-              name = name.replace(/</g, '< ');
-
-              const breakCount = Math.ceil(name.length / maxTooltipLen);
-              let str = '';
-              for (let i = 0; i < breakCount; i++) {
-                const temp = name.substr(i * maxTooltipLen, maxTooltipLen);
-                str += str ? '<br/>' + temp : temp;
-              }
-              return str;
-            },
-          },
-          itemWidth: 18,
-          itemHeight: 18,
-          padding: [0, 50, 0, 0],
-          top: '5%',
-          left: '45%',
-          textStyle: {
-            padding: [15, 0, 0, 0],
-            rich: {
-              a: {
-                width: 24,
-                align: 'center',
-                padding: [0, 10, 3, -26],
-                color: '#FFF',
-              },
-              b: {
-                padding: [0, 0, 3, 0],
-              },
-              c: {
-                width: '100%',
-                padding: [0, 0, 5, 10],
-                color: '#9EA4B3',
-                fontSize: 12,
-              },
-            },
-          },
-        };
-        option.tooltip = {
-          trigger: 'item',
-          formatter: (params) => {
-            const name = params.data.name.replace(/</g, '< ');
-            const strTemp = `${name} ${params.percent.toFixed(2) + '%'}`;
-
-            const breakCount = Math.ceil(strTemp.length / maxTooltipLen);
-            let str = '';
-            for (let i = 0; i < breakCount; i++) {
-              const temp = strTemp.substr(i * maxTooltipLen, maxTooltipLen);
-              str += str ? '<br/>' + temp : temp;
-            }
-            return str;
-          },
-          confine: true,
-        };
-        option.series = [
-          {
-            type: 'pie',
-            center: ['23%', '60%'],
-            data: chart.data,
-            radius: '50%',
-            label: {
-              position: 'outer',
-              alignTo: 'labelLine',
-              formatter: (params) => {
-                return params.data.name &&
-                  params.data.name.length > maxLabelLength
-                  ? `${params.data.name.slice(0, maxLabelLength)}...`
-                  : params.data.name;
-              },
-            },
-            itemStyle: {
-              normal: {
-                color: function(params) {
-                  return CommonProperty.pieColorArr[params.dataIndex];
-                },
-              },
-            },
-          },
-        ];
-        chart.data.forEach((item) => {
-          option.legend.data.push(item.name);
-        });
-      } else if (chart.type) {
-        option.color = ['#6C92FA'];
-        option.tooltip = {
-          trigger: 'axis',
-          formatter: (params) => {
-            return `${params[0].axisValue}<br>${params[0].marker}${params[0].value}`;
-          },
-          confine: true,
-        };
-        option.series = [
-          {
-            type: 'bar',
-            barWidth: 30,
-            data: [],
-          },
-        ];
-        option.xAxis = {
-          type: 'category',
-          axisLabel: {
-            interval: 0,
-            rotate: -30,
-          },
-          data: [],
-          triggerEvent: true,
-        };
-        option.grid = {
-          left: 50,
-          top: 20,
-          right: 0,
-          bottom: 50,
-        };
-        option.yAxis = {
-          type: 'value',
-        };
-        chart.data.forEach((item) => {
-          option.xAxis.data.push(item.name);
-          option.series[0].data.push(item.value);
-        });
-      }
-      this.$nextTick(() => {
-        const cpuDom = document.getElementById(chart.id);
-        if (cpuDom) {
-          chart.chartDom = echarts.init(cpuDom, null);
-        } else {
-          if (chart.chartDom) {
-            chart.chartDom.off('mouseover');
-            chart.chartDom.off('mouseout');
-            chart.chartDom.clear();
-          }
-          return;
-        }
-        chart.chartDom.setOption(option, true);
-        if (chart.type) {
-          chart.chartDom.off('mouseover');
-          chart.chartDom.off('mouseout');
-          chart.chartDom.on('mouseover', (params) => {
-            if (params.componentType === 'xAxis') {
-              const offsetX = params.event.offsetX + 10;
-              const offsetY = params.event.offsetY + 10;
-              chart.chartDom.setOption({
-                tooltip: {
-                  formatter: params.value,
-                  alwaysShowContent: true,
-                },
-              });
-              chart.chartDom.dispatchAction({
-                type: 'showTip',
-                seriesIndex: 0,
-                dataIndex: 0,
-                position: [offsetX, offsetY],
-              });
-            }
-          });
-
-          chart.chartDom.on('mouseout', (params) => {
-            if (params.componentType === 'xAxis') {
-              chart.chartDom.setOption({
-                tooltip: {
-                  formatter: '',
-                  alwaysShowContent: false,
-                },
-              });
-            }
-          });
+      const ref = this.$refs[this.apiType];
+      if (this.currentCard !== ref.coreCharts.device_id) {
+        ref.getCoreTypeList();
+        if (this.apiType === 'cuda') {
+          setTimeout(() => {
+            ref.coreTableChange();
+          }, 100);
         }
-        chart.chartDom.resize();
-      }, 10);
-    },
-    /**
-     * Show operator info deteail
-     * @param {Object} cellData cell data
-     * @param {Object} column column
-     */
-    showInfoDetail(cellData, column) {
-      if (column.property !== 'op_info' || !cellData || !cellData.op_info) {
-        return;
-      }
-      this.showDialogData(cellData.op_info, column);
-    },
-    /**
-     * The detailed information is displayed in the dialog box.
-     * @param {String} val
-     * @param {Object} column
-     */
-    showDialogData(val, column) {
-      this.detailsDataList = [];
-      if (typeof val !== 'string' || val === '{}') {
-        return;
       } else {
-        const isJson = this.isJSON(val);
-        if (!isJson) {
-          return;
-        }
-      }
-      this.$nextTick(() => {
-        this.rowName = `op_info${this.$t('dataTraceback.details')}`;
-        this.detailsDialogVisible = true;
-        this.detailsDataList = this.formateJsonString(val);
-      });
-    },
-    /**
-     * Checks whether the value is a JSON character string.
-     * @param {String} val
-     * @return {Boolean}
-     */
-    isJSON(val) {
-      try {
-        JSON.parse(val);
-        return true;
-      } catch (e) {
-        return false;
-      }
-    },
-    /**
-     * Converts JSON strings.
-     * @param {String} str
-     * @return {Array}
-     */
-    formateJsonString(str) {
-      if (!str) {
-        return [];
-      }
-      const resultArr = [];
-      const dataObj = JSON.parse(str);
-      const keys = Object.keys(dataObj);
-      keys.forEach((key, index) => {
-        const tempData = {
-          id: index + 1,
-          hasChildren: false,
-          key: key,
-          value: '',
-        };
-        if (typeof dataObj[key] === this.objectType && dataObj[key] !== null) {
-          if (!(dataObj[key] instanceof Array)) {
-            tempData.hasChildren = true;
-            tempData.children = [];
-            Object.keys(dataObj[key]).forEach((k, j) => {
-              const item = {};
-              item.key = k;
-              item.value = dataObj[key][k];
-              item.id =
-                `${new Date().getTime()}` + `${this.$store.state.tableId}`;
-              this.$store.commit('increaseTableId');
-              tempData.children.push(item);
-            });
-          }
-          tempData.value = JSON.stringify(dataObj[key]);
-        } else {
-          tempData.value = dataObj[key];
-        }
-        resultArr.push(tempData);
-      });
-      return resultArr;
-    },
-    loadDataListChildren(tree, treeNode, resolve) {
-      setTimeout(() => {
-        resolve(tree.children);
-      });
-    },
-    /**
-     * Window resize
-     */
-    resizeCallback() {
-      if (this.coreCharts.chartDom && this.apiType === 'core') {
-        this.coreCharts.chartDom.resize();
-      }
-      if (this.cpuCharts.chartDom && this.apiType === 'cpu') {
-        this.cpuCharts.chartDom.resize();
+        this.$nextTick(() => {
+          ref.resizeCallback();
+        });
       }
     },
   },
   mounted() {
     if (this.train_id) {
-      document.title = `${decodeURIComponent(this.train_id)}-${this.$t(
-          'profiling.operatorDetail',
-      )}-MindInsight`;
+      document.title = `${decodeURIComponent(this.train_id)}-${this.$t('profiling.operatorDetail')}-MindInsight`;
     } else {
       document.title = `${this.$t('profiling.operatorDetail')}-MindInsight`;
     }
-    window.addEventListener('resize', this.resizeCallback, false);
-    setTimeout(() => {
-      this.$bus.$on('collapse', this.resizeEchart);
-    }, 500);
   },
 };
 </script>
@@ -1549,169 +285,4 @@ export default {
 .operator .cl-profiler .el-tab-pane {
   height: 100%;
 }
-.operator .cl-profiler .cl-search-box {
-  float: right;
-  margin-bottom: 10px;
-  margin-right: 20px;
-}
-.operator .cl-profiler .cl-search-box .el-input {
-  width: 300px;
-}
-.operator .cl-profiler .cl-profiler-top {
-  height: 47%;
-}
-.operator .cl-profiler .cl-profiler-top .chart-title {
-  float: left;
-  font-weight: bold;
-  height: 32px;
-}
-.operator .cl-profiler .cl-profiler-top.fullScreen {
-  display: none;
-}
-.operator .cl-profiler .cl-profiler-bottom {
-  height: 53%;
-  padding-top: 10px;
-}
-.operator .cl-profiler .cl-profiler-bottom .fullScreen {
-  float: right;
-  margin-top: 5px;
-  cursor: pointer;
-}
-.operator .cl-profiler .cl-profiler-bottom.fullScreen {
-  height: 100%;
-}
-.operator .cl-profiler .cl-profiler-echarts {
-  width: 100%;
-  height: calc(100% - 32px);
-  display: inline-block;
-  position: relative;
-  overflow: auto;
-}
-.operator .cl-profiler .cl-profiler-echarts #cpu-echarts,
-.operator .cl-profiler .cl-profiler-echarts #core-echarts {
-  width: 100%;
-  height: 100%;
-  min-width: 1300px;
-  min-height: 321px;
-  overflow: hidden;
-}
-.operator .cl-profiler .chart-radio-group {
-  float: right;
-}
-.operator .cl-profiler .el-radio-group .el-radio-button--small .el-radio-button__inner {
-  height: 30px;
-  width: 70px;
-  font-size: 14px;
-  line-height: 10px;
-}
-.operator .cl-profiler .cl-profiler-bar {
-  display: inline-block;
-  width: calc(100% - 400px);
-  vertical-align: top;
-  height: 100%;
-  padding: 20px;
-}
-.operator .cl-profiler .cl-profiler-table-type {
-  display: inline-block;
-  width: calc(100% - 400px);
-  vertical-align: top;
-  height: 100%;
-}
-.operator .cl-profiler .el-pagination {
-  margin: 7px 0;
-  float: right;
-}
-.operator .cl-profiler .details-data-list .el-table th {
-  padding: 10px 0;
-  border-top: 1px solid #ebeef5;
-}
-.operator .cl-profiler .details-data-list .el-table th .cell {
-  border-left: 1px solid #d9d8dd;
-  height: 14px;
-  line-height: 14px;
-}
-.operator .cl-profiler .details-data-list .el-table th:first-child .cell {
-  border-left: none;
-}
-.operator .cl-profiler .details-data-list .el-table th:nth-child(2),
-.operator .cl-profiler .details-data-list .el-table td:nth-child(2) {
-  max-width: 30%;
-}
-.operator .cl-profiler .details-data-list .el-table td {
-  padding: 8px 0;
-}
-.operator .cl-profiler .details-data-list .el-table__row--level-0 td:first-child:after {
-  width: 20px;
-  height: 1px;
-  background: #ebeef5;
-  z-index: 11;
-  position: absolute;
-  left: 0;
-  bottom: -1px;
-  content: "";
-  display: block;
-}
-.operator .cl-profiler .details-data-list .el-table__row--level-1 td {
-  padding: 4px 0;
-  position: relative;
-}
-.operator .cl-profiler .details-data-list .el-table__row--level-1 td:first-child::before {
-  width: 42px;
-  background: #f0fdfd;
-  border-right: 2px #00a5a7 solid;
-  z-index: 10;
-  position: absolute;
-  left: 0;
-  top: -1px;
-  bottom: 0px;
-  content: "";
-  display: block;
-}
-.operator .cl-profiler .details-data-list .el-table__row--level-1:first-child td:first-child::before {
-  bottom: 0;
-}
-.operator .cl-profiler .details-data-list .el-dialog__title {
-  font-weight: bold;
-}
-.operator .cl-profiler .details-data-list .el-dialog__body {
-  max-height: 500px;
-  padding-top: 10px;
-  overflow: auto;
-}
-.operator .cl-profiler .details-data-list .el-dialog__body .details-data-title {
-  margin-bottom: 20px;
-}
-.operator .cl-profiler .el-table__expanded-cell[class*=cell] {
-  padding: 0;
-}
-.operator .cl-profiler .expand-table {
-  position: relative;
-  padding-left: 44px;
-}
-.operator .cl-profiler .expand-table::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  background: #f0fdfd;
-  width: 42px;
-  border-right: 2px #00a5a7 solid;
-}
-.operator .cl-profiler .el-radio-button:last-child .el-radio-button__inner,
-.operator .cl-profiler .el-radio-button:first-child .el-radio-button__inner {
-  border-radius: 0;
-}
-.operator .cl-profiler .image-noData {
-  width: 100%;
-  height: 450px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-.operator .cl-profiler .image-noData p {
-  font-size: 16px;
-  padding-top: 10px;
-}
 </style>
diff --git a/mindinsight/ui/src/views/train-manage/graph.vue b/mindinsight/ui/src/views/train-manage/graph.vue
index 569b933f..5cd06225 100644
--- a/mindinsight/ui/src/views/train-manage/graph.vue
+++ b/mindinsight/ui/src/views/train-manage/graph.vue
@@ -648,8 +648,8 @@ export default {
   methods: {
     /**
      * Tree linkage with graph  Expand of current node
-     * @param {Obeject} nodes Data of children of current node
-     * @param {Obeject} name  The name of the current node
+     * @param {Object} nodes Data of children of current node
+     * @param {Object} name  The name of the current node
      */
     nodeExpandLinkage(nodes, name) {
       const curNodeData = nodes.map((val) => {