diff --git a/cmdb-ui/src/modules/cmdb/api/history.js b/cmdb-ui/src/modules/cmdb/api/history.js
index 7de88a7..aeff68a 100644
--- a/cmdb-ui/src/modules/cmdb/api/history.js
+++ b/cmdb-ui/src/modules/cmdb/api/history.js
@@ -1,89 +1,92 @@
-import { axios } from '@/utils/request'
-
-export function getCIHistory(ciId) {
-  return axios({
-    url: `/v0.1/history/ci/${ciId}`,
-    method: 'GET'
-  })
-}
-
-export function getCIHistoryTable(params) {
-  return axios({
-    url: `/v0.1/history/records/attribute`,
-    method: 'GET',
-    params: params
-  })
-}
-
-export function getRelationTable(params) {
-  return axios({
-    url: `/v0.1/history/records/relation`,
-    method: 'GET',
-    params: params
-  })
-}
-
-export function getCITypesTable(params) {
-  return axios({
-    url: `/v0.1/history/ci_types`,
-    method: 'GET',
-    params: params
-  })
-}
-
-export function getUsers(params) {
-  return axios({
-    url: `/v1/acl/users/employee`,
-    method: 'GET',
-    params: params
-  })
-}
-
-export function getCiTriggers(params) {
-  return axios({
-    url: `/v0.1/history/ci_triggers`,
-    method: 'GET',
-    params: params
-  })
-}
-
-export function getCiTriggersByCiId(ci_id, params) {
-  return axios({
-    url: `/v0.1/history/ci_triggers/${ci_id}`,
-    method: 'GET',
-    params
-  })
-}
-
-export function getCiRelatedTickets(params) {
-  return axios({
-    url: `/itsm/v1/process_ticket/get_tickets_by`,
-    method: 'POST',
-    data: params,
-    isShowMessage: false
-  })
-}
-
-export function judgeItsmInstalled() {
-  return axios({
-    url: `/itsm/v1/process_ticket/itsm_existed`,
-    method: 'GET',
-    isShowMessage: false
-  })
-}
-
-export function getCIsBaseline(params) {
-  return axios({
-    url: `/v0.1/ci/baseline`,
-    method: 'GET',
-    params
-  })
-}
-
-export function CIBaselineRollback(ciId, params) {
-  return axios({
-    url: `/v0.1/ci/${ciId}/baseline/rollback`,
-    method: 'POST',
-    data: params
-  })
-}
+import { axios } from '@/utils/request'
+
+export function getCIHistory(ciId) {
+  return axios({
+    url: `/v0.1/history/ci/${ciId}`,
+    method: 'GET'
+  })
+}
+
+export function getCIHistoryTable(params) {
+  return axios({
+    url: `/v0.1/history/records/attribute`,
+    method: 'GET',
+    params: params,
+    timeout: 30 * 1000
+  })
+}
+
+export function getRelationTable(params) {
+  return axios({
+    url: `/v0.1/history/records/relation`,
+    method: 'GET',
+    params: params,
+    timeout: 30 * 1000
+  })
+}
+
+export function getCITypesTable(params) {
+  return axios({
+    url: `/v0.1/history/ci_types`,
+    method: 'GET',
+    params: params,
+    timeout: 30 * 1000
+  })
+}
+
+export function getUsers(params) {
+  return axios({
+    url: `/v1/acl/users/employee`,
+    method: 'GET',
+    params: params
+  })
+}
+
+export function getCiTriggers(params) {
+  return axios({
+    url: `/v0.1/history/ci_triggers`,
+    method: 'GET',
+    params: params
+  })
+}
+
+export function getCiTriggersByCiId(ci_id, params) {
+  return axios({
+    url: `/v0.1/history/ci_triggers/${ci_id}`,
+    method: 'GET',
+    params
+  })
+}
+
+export function getCiRelatedTickets(params) {
+  return axios({
+    url: `/itsm/v1/process_ticket/get_tickets_by`,
+    method: 'POST',
+    data: params,
+    isShowMessage: false
+  })
+}
+
+export function judgeItsmInstalled() {
+  return axios({
+    url: `/itsm/v1/process_ticket/itsm_existed`,
+    method: 'GET',
+    isShowMessage: false
+  })
+}
+
+export function getCIsBaseline(params) {
+  return axios({
+    url: `/v0.1/ci/baseline`,
+    method: 'GET',
+    params
+  })
+}
+
+export function CIBaselineRollback(ciId, params) {
+  return axios({
+    url: `/v0.1/ci/${ciId}/baseline/rollback`,
+    method: 'POST',
+    data: params
+  })
+}
diff --git a/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailTab.vue b/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailTab.vue
index ffc3362..7511f1b 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailTab.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailTab.vue
@@ -1,449 +1,463 @@
-<template>
-  <div :style="{ height: '100%' }">
-    <a-tabs v-if="hasPermission" class="ci-detail-tab" v-model="activeTabKey" @change="changeTab">
-      <a @click="shareCi" slot="tabBarExtraContent" :style="{ marginRight: '24px' }">
-        <a-icon type="share-alt" />
-        {{ $t('cmdb.ci.share') }}
-      </a>
-      <a-tab-pane key="tab_1">
-        <span slot="tab"><a-icon type="book" />{{ $t('cmdb.attribute') }}</span>
-        <div class="ci-detail-attr">
-          <el-descriptions
-            :title="group.name || $t('other')"
-            :key="group.name"
-            v-for="group in attributeGroups"
-            border
-            :column="3"
-          >
-            <el-descriptions-item
-              :label="`${attr.alias || attr.name}`"
-              :key="attr.name"
-              v-for="attr in group.attributes"
-            >
-              <ci-detail-attr-content :ci="ci" :attr="attr" @refresh="refresh" @updateCIByself="updateCIByself" />
-            </el-descriptions-item>
-          </el-descriptions>
-        </div>
-      </a-tab-pane>
-      <a-tab-pane key="tab_2">
-        <span slot="tab"><a-icon type="branches" />{{ $t('cmdb.relation') }}</span>
-        <div :style="{ height: '100%', padding: '24px', overflow: 'auto' }">
-          <ci-detail-relation ref="ciDetailRelation" :ciId="ciId" :typeId="typeId" :ci="ci" />
-        </div>
-      </a-tab-pane>
-      <a-tab-pane key="tab_3">
-        <span slot="tab"><a-icon type="clock-circle" />{{ $t('cmdb.ci.history') }}</span>
-        <div :style="{ padding: '24px', height: '100%' }">
-          <a-space :style="{ 'margin-bottom': '10px', display: 'flex' }">
-            <a-button type="primary" class="ops-button-ghost" ghost @click="handleRollbackCI()">
-              <ops-icon type="shishizhuangtai" />{{ $t('cmdb.ci.rollback') }}
-            </a-button>
-          </a-space>
-          <ci-rollback-form ref="ciRollbackForm" :ciIds="[ciId]" @getCIHistory="getCIHistory" />
-          <vxe-table
-            ref="xTable"
-            show-overflow
-            show-header-overflow
-            :data="ciHistory"
-            size="small"
-            :height="tableHeight"
-            highlight-hover-row
-            :span-method="mergeRowMethod"
-            :scroll-y="{ enabled: false, gt: 20 }"
-            :scroll-x="{ enabled: false, gt: 0 }"
-            border
-            resizable
-            class="ops-unstripe-table"
-          >
-            <template #empty>
-              <a-empty :image-style="{ height: '100px' }" :style="{ paddingTop: '10%' }">
-                <img slot="image" :src="require('@/assets/data_empty.png')" />
-                <span slot="description"> {{ $t('noData') }} </span>
-              </a-empty>
-            </template>
-            <vxe-table-column sortable field="created_at" :title="$t('created_at')"></vxe-table-column>
-            <vxe-table-column
-              field="username"
-              :title="$t('user')"
-              :filters="[]"
-              :filter-method="filterUsernameMethod"
-            ></vxe-table-column>
-            <vxe-table-column
-              field="operate_type"
-              :filters="[
-                { value: 0, label: $t('new') },
-                { value: 1, label: $t('delete') },
-                { value: 2, label: $t('update') },
-              ]"
-              :filter-method="filterOperateMethod"
-              :title="$t('operation')"
-            >
-              <template #default="{ row }">
-                {{ operateTypeMap[row.operate_type] }}
-              </template>
-            </vxe-table-column>
-            <vxe-table-column
-              field="attr_alias"
-              :title="$t('cmdb.attribute')"
-              :filters="[]"
-              :filter-method="filterAttrMethod"
-            ></vxe-table-column>
-            <vxe-table-column field="old" :title="$t('cmdb.history.old')">
-              <template #default="{ row }">
-                <span v-if="row.value_type === '6'">{{ JSON.parse(row.old) }}</span>
-                <span v-else>{{ row.old }}</span>
-              </template>
-            </vxe-table-column>
-            <vxe-table-column field="new" :title="$t('cmdb.history.new')">
-              <template #default="{ row }">
-                <span v-if="row.value_type === '6'">{{ JSON.parse(row.new) }}</span>
-                <span v-else>{{ row.new }}</span>
-              </template>
-            </vxe-table-column>
-          </vxe-table>
-        </div>
-      </a-tab-pane>
-      <a-tab-pane key="tab_4">
-        <span slot="tab"><ops-icon type="itsm_auto_trigger" />{{ $t('cmdb.history.triggerHistory') }}</span>
-        <div :style="{ padding: '24px', height: '100%' }">
-          <TriggerTable :ci_id="ci._id" />
-        </div>
-      </a-tab-pane>
-      <a-tab-pane key="tab_5">
-        <span slot="tab"><ops-icon type="itsm-association" />{{ $t('cmdb.ci.relITSM') }}</span>
-        <div :style="{ padding: '24px', height: '100%' }">
-          <RelatedItsmTable ref="relatedITSMTable" :ci_id="ci._id" :ciHistory="ciHistory" :itsmInstalled="itsmInstalled" :attrList="attrList" />
-        </div>
-      </a-tab-pane>
-    </a-tabs>
-    <a-empty
-      v-else
-      :image-style="{
-        height: '100px',
-      }"
-      :style="{ paddingTop: '20%' }"
-    >
-      <img slot="image" :src="require('@/assets/data_empty.png')" />
-      <span slot="description"> {{ $t('cmdb.ci.noPermission') }} </span>
-    </a-empty>
-  </div>
-</template>
-
-<script>
-import _ from 'lodash'
-import { Descriptions, DescriptionsItem } from 'element-ui'
-import { getCITypeGroupById, getCITypes } from '@/modules/cmdb/api/CIType'
-import { getCIHistory, judgeItsmInstalled } from '@/modules/cmdb/api/history'
-import { getCIById } from '@/modules/cmdb/api/ci'
-import CiDetailAttrContent from './ciDetailAttrContent.vue'
-import CiDetailRelation from './ciDetailRelation.vue'
-import TriggerTable from '../../operation_history/modules/triggerTable.vue'
-import RelatedItsmTable from './ciDetailRelatedItsmTable.vue'
-import CiRollbackForm from './ciRollbackForm.vue'
-export default {
-  name: 'CiDetailTab',
-  components: {
-    ElDescriptions: Descriptions,
-    ElDescriptionsItem: DescriptionsItem,
-    CiDetailAttrContent,
-    CiDetailRelation,
-    TriggerTable,
-    RelatedItsmTable,
-    CiRollbackForm,
-  },
-  props: {
-    typeId: {
-      type: Number,
-      required: true,
-    },
-    treeViewsLevels: {
-      type: Array,
-      default: () => [],
-    },
-    attributeHistoryTableHeight: {
-      type: Number,
-      default: null
-    }
-  },
-  data() {
-    return {
-      ci: {},
-      item: [],
-      attributeGroups: [],
-      activeTabKey: 'tab_1',
-      rowSpanMap: {},
-      ciHistory: [],
-      ciId: null,
-      ci_types: [],
-      hasPermission: true,
-      itsmInstalled: true,
-      tableHeight: this.attributeHistoryTableHeight || (this.$store.state.windowHeight - 120),
-    }
-  },
-  computed: {
-    windowHeight() {
-      return this.$store.state.windowHeight
-    },
-    operateTypeMap() {
-      return {
-        0: this.$t('new'),
-        1: this.$t('delete'),
-        2: this.$t('update'),
-      }
-    },
-  },
-  provide() {
-    return {
-      ci_types: () => {
-        return this.ci_types
-      },
-    }
-  },
-  inject: {
-    reload: {
-      from: 'reload',
-      default: null,
-    },
-    handleSearch: {
-      from: 'handleSearch',
-      default: null,
-    },
-    attrList: {
-      from: 'attrList',
-      default: () => [],
-    },
-  },
-  methods: {
-    async create(ciId, activeTabKey = 'tab_1', ciDetailRelationKey = '1') {
-      this.activeTabKey = activeTabKey
-      if (activeTabKey === 'tab_2') {
-        this.$nextTick(() => {
-          this.$refs.ciDetailRelation.activeKey = ciDetailRelationKey
-        })
-      }
-      this.ciId = ciId
-      await this.getCI()
-      await this.judgeItsmInstalled()
-      if (this.hasPermission) {
-        this.getAttributes()
-        this.getCIHistory()
-        getCITypes().then((res) => {
-          this.ci_types = res.ci_types
-        })
-      }
-    },
-    getAttributes() {
-      getCITypeGroupById(this.typeId, { need_other: 1 })
-        .then((res) => {
-          this.attributeGroups = res
-        })
-        .catch((e) => {})
-    },
-    async getCI() {
-      await getCIById(this.ciId)
-        .then((res) => {
-          if (res.result.length) {
-            this.ci = res.result[0]
-          } else {
-            this.hasPermission = false
-          }
-        })
-        .catch((e) => {
-          if (e.response.status === 404) {
-            this.itsmInstalled = false
-          }
-        })
-    },
-    async judgeItsmInstalled() {
-      await judgeItsmInstalled().catch((e) => {
-        this.itsmInstalled = false
-      })
-    },
-
-    getCIHistory() {
-      getCIHistory(this.ciId)
-        .then((res) => {
-          this.ciHistory = res
-
-          const rowSpanMap = {}
-          let startIndex = 0
-          let startCount = 1
-          res.forEach((item, index) => {
-            if (index === 0) {
-              return
-            }
-            if (res[index].record_id === res[startIndex].record_id) {
-              startCount += 1
-              rowSpanMap[index] = 0
-              if (index === res.length - 1) {
-                rowSpanMap[startIndex] = startCount
-              }
-            } else {
-              rowSpanMap[startIndex] = startCount
-              startIndex = index
-              startCount = 1
-              if (index === res.length - 1) {
-                rowSpanMap[index] = 1
-              }
-            }
-          })
-          this.rowSpanMap = rowSpanMap
-        })
-        .catch((e) => {
-          console.log(e)
-        })
-    },
-    changeTab(key) {
-      this.activeTabKey = key
-      if (key === 'tab_3') {
-        this.$nextTick(() => {
-          const $table = this.$refs.xTable
-          if ($table) {
-            const usernameColumn = $table.getColumnByField('username')
-            const attrColumn = $table.getColumnByField('attr_alias')
-            if (usernameColumn) {
-              const usernameList = [...new Set(this.ciHistory.map((item) => item.username))]
-              $table.setFilter(
-                usernameColumn,
-                usernameList.map((item) => {
-                  return {
-                    value: item,
-                    label: item,
-                  }
-                })
-              )
-            }
-            if (attrColumn) {
-              $table.setFilter(
-                attrColumn,
-                this.attrList().map((attr) => {
-                  return { value: attr.alias || attr.name, label: attr.alias || attr.name }
-                })
-              )
-            }
-          }
-        })
-      }
-    },
-    filterUsernameMethod({ value, row, column }) {
-      return row.username === value
-    },
-    filterOperateMethod({ value, row, column }) {
-      return Number(row.operate_type) === Number(value)
-    },
-    filterAttrMethod({ value, row, column }) {
-      return row.attr_alias === value
-    },
-    refresh(editAttrName) {
-      this.getCI()
-      const _find = this.treeViewsLevels.find((level) => level.name === editAttrName)
-      // 修改的字段为树形视图订阅的字段 则全部reload
-      setTimeout(() => {
-        if (_find) {
-          if (this.reload) {
-            this.reload()
-          }
-        } else {
-          if (this.handleSearch) {
-            this.handleSearch()
-          }
-        }
-      }, 500)
-    },
-    mergeRowMethod({ row, _rowIndex, column, visibleData }) {
-      const fields = ['created_at', 'username']
-      const cellValue1 = row['created_at']
-      const cellValue2 = row['username']
-      if (cellValue1 && cellValue2 && fields.includes(column.property)) {
-        const prevRow = visibleData[_rowIndex - 1]
-        let nextRow = visibleData[_rowIndex + 1]
-        if (prevRow && prevRow['created_at'] === cellValue1 && prevRow['username'] === cellValue2) {
-          return { rowspan: 0, colspan: 0 }
-        } else {
-          let countRowspan = 1
-          while (nextRow && nextRow['created_at'] === cellValue1 && nextRow['username'] === cellValue2) {
-            nextRow = visibleData[++countRowspan + _rowIndex]
-          }
-          if (countRowspan > 1) {
-            return { rowspan: countRowspan, colspan: 1 }
-          }
-        }
-      }
-    },
-    updateCIByself(params, editAttrName) {
-      const _ci = { ..._.cloneDeep(this.ci), ...params }
-      this.ci = _ci
-      const _find = this.treeViewsLevels.find((level) => level.name === editAttrName)
-      // 修改的字段为树形视图订阅的字段 则全部reload
-      setTimeout(() => {
-        if (_find) {
-          if (this.reload) {
-            this.reload()
-          }
-        } else {
-          if (this.handleSearch) {
-            this.handleSearch()
-          }
-        }
-      }, 500)
-    },
-    shareCi() {
-      const text = `${document.location.host}/cmdb/cidetail/${this.typeId}/${this.ciId}`
-      this.$copyText(text)
-        .then(() => {
-          this.$message.success(this.$t('copySuccess'))
-        })
-        .catch(() => {
-          this.$message.error(this.$t('cmdb.ci.copyFailed'))
-        })
-    },
-    handleRollbackCI() {
-      this.$nextTick(() => {
-        this.$refs.ciRollbackForm.onOpen()
-      })
-    },
-  },
-}
-</script>
-
-<style lang="less">
-.ci-detail-tab {
-  height: 100%;
-  .ant-tabs-content {
-    height: calc(100% - 45px);
-    .ant-tabs-tabpane {
-      height: 100%;
-    }
-  }
-  .ant-tabs-bar {
-    margin: 0;
-  }
-  .ant-tabs-extra-content {
-    line-height: 44px;
-  }
-  .ci-detail-attr {
-    height: 100%;
-    overflow: auto;
-    padding: 24px;
-    .el-descriptions-item__content {
-      cursor: default;
-      &:hover a {
-        opacity: 1 !important;
-      }
-    }
-    .el-descriptions:first-child > .el-descriptions__header {
-      margin-top: 0;
-    }
-    .el-descriptions__header {
-      margin-bottom: 5px;
-      margin-top: 20px;
-    }
-    .ant-form-item {
-      margin-bottom: 0;
-    }
-    .ant-form-item-control {
-      line-height: 19px;
-    }
-  }
-}
-</style>
+<template>
+  <div :style="{ height: '100%' }">
+    <a-tabs v-if="hasPermission" class="ci-detail-tab" v-model="activeTabKey" @change="changeTab">
+      <a @click="shareCi" slot="tabBarExtraContent" :style="{ marginRight: '24px' }">
+        <a-icon type="share-alt" />
+        {{ $t('cmdb.ci.share') }}
+      </a>
+      <a-tab-pane key="tab_1">
+        <span slot="tab"><a-icon type="book" />{{ $t('cmdb.attribute') }}</span>
+        <div class="ci-detail-attr">
+          <el-descriptions
+            :title="group.name || $t('other')"
+            :key="group.name"
+            v-for="group in attributeGroups"
+            border
+            :column="3"
+          >
+            <el-descriptions-item
+              :label="`${attr.alias || attr.name}`"
+              :key="attr.name"
+              v-for="attr in group.attributes"
+            >
+              <ci-detail-attr-content :ci="ci" :attr="attr" @refresh="refresh" @updateCIByself="updateCIByself" />
+            </el-descriptions-item>
+          </el-descriptions>
+        </div>
+      </a-tab-pane>
+      <a-tab-pane key="tab_2">
+        <span slot="tab"><a-icon type="branches" />{{ $t('cmdb.relation') }}</span>
+        <div :style="{ height: '100%', padding: '24px', overflow: 'auto' }">
+          <ci-detail-relation ref="ciDetailRelation" :ciId="ciId" :typeId="typeId" :ci="ci" />
+        </div>
+      </a-tab-pane>
+      <a-tab-pane key="tab_3">
+        <span slot="tab"><a-icon type="clock-circle" />{{ $t('cmdb.ci.history') }}</span>
+        <div :style="{ padding: '24px', height: '100%' }">
+          <a-space :style="{ 'margin-bottom': '10px', display: 'flex' }">
+            <a-button type="primary" class="ops-button-ghost" ghost @click="handleRollbackCI()">
+              <ops-icon type="shishizhuangtai" />{{ $t('cmdb.ci.rollback') }}
+            </a-button>
+            <a-button type="primary" class="ops-button-ghost" ghost @click="handleExport">
+              <ops-icon type="veops-export" />{{ $t('export') }}
+            </a-button>
+          </a-space>
+          <ci-rollback-form ref="ciRollbackForm" :ciIds="[ciId]" @getCIHistory="getCIHistory" />
+          <vxe-table
+            ref="xTable"
+            show-overflow
+            show-header-overflow
+            :data="ciHistory"
+            size="small"
+            :height="tableHeight"
+            highlight-hover-row
+            :span-method="mergeRowMethod"
+            :scroll-y="{ enabled: false, gt: 20 }"
+            :scroll-x="{ enabled: false, gt: 0 }"
+            border
+            resizable
+            class="ops-unstripe-table"
+          >
+            <template #empty>
+              <a-empty :image-style="{ height: '100px' }" :style="{ paddingTop: '10%' }">
+                <img slot="image" :src="require('@/assets/data_empty.png')" />
+                <span slot="description"> {{ $t('noData') }} </span>
+              </a-empty>
+            </template>
+            <vxe-table-column sortable field="created_at" :title="$t('created_at')"></vxe-table-column>
+            <vxe-table-column
+              field="username"
+              :title="$t('user')"
+              :filters="[]"
+              :filter-method="filterUsernameMethod"
+            ></vxe-table-column>
+            <vxe-table-column
+              field="operate_type"
+              :filters="[
+                { value: 0, label: $t('new') },
+                { value: 1, label: $t('delete') },
+                { value: 2, label: $t('update') },
+              ]"
+              :filter-method="filterOperateMethod"
+              :title="$t('operation')"
+            >
+              <template #default="{ row }">
+                {{ operateTypeMap[row.operate_type] }}
+              </template>
+            </vxe-table-column>
+            <vxe-table-column
+              field="attr_alias"
+              :title="$t('cmdb.attribute')"
+              :filters="[]"
+              :filter-method="filterAttrMethod"
+            ></vxe-table-column>
+            <vxe-table-column :cell-type="'string'" field="old" :title="$t('cmdb.history.old')">
+              <template #default="{ row }">
+                <span v-if="row.value_type === '6'">{{ JSON.parse(row.old) }}</span>
+                <span v-else>{{ row.old }}</span>
+              </template>
+            </vxe-table-column>
+            <vxe-table-column :cell-type="'string'" field="new" :title="$t('cmdb.history.new')">
+              <template #default="{ row }">
+                <span v-if="row.value_type === '6'">{{ JSON.parse(row.new) }}</span>
+                <span v-else>{{ row.new }}</span>
+              </template>
+            </vxe-table-column>
+          </vxe-table>
+        </div>
+      </a-tab-pane>
+      <a-tab-pane key="tab_4">
+        <span slot="tab"><ops-icon type="itsm_auto_trigger" />{{ $t('cmdb.history.triggerHistory') }}</span>
+        <div :style="{ padding: '24px', height: '100%' }">
+          <TriggerTable :ci_id="ci._id" />
+        </div>
+      </a-tab-pane>
+      <a-tab-pane key="tab_5">
+        <span slot="tab"><ops-icon type="itsm-association" />{{ $t('cmdb.ci.relITSM') }}</span>
+        <div :style="{ padding: '24px', height: '100%' }">
+          <RelatedItsmTable ref="relatedITSMTable" :ci_id="ci._id" :ciHistory="ciHistory" :itsmInstalled="itsmInstalled" :attrList="attrList" />
+        </div>
+      </a-tab-pane>
+    </a-tabs>
+    <a-empty
+      v-else
+      :image-style="{
+        height: '100px',
+      }"
+      :style="{ paddingTop: '20%' }"
+    >
+      <img slot="image" :src="require('@/assets/data_empty.png')" />
+      <span slot="description"> {{ $t('cmdb.ci.noPermission') }} </span>
+    </a-empty>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { Descriptions, DescriptionsItem } from 'element-ui'
+import { getCITypeGroupById, getCITypes } from '@/modules/cmdb/api/CIType'
+import { getCIHistory, judgeItsmInstalled } from '@/modules/cmdb/api/history'
+import { getCIById } from '@/modules/cmdb/api/ci'
+import CiDetailAttrContent from './ciDetailAttrContent.vue'
+import CiDetailRelation from './ciDetailRelation.vue'
+import TriggerTable from '../../operation_history/modules/triggerTable.vue'
+import RelatedItsmTable from './ciDetailRelatedItsmTable.vue'
+import CiRollbackForm from './ciRollbackForm.vue'
+export default {
+  name: 'CiDetailTab',
+  components: {
+    ElDescriptions: Descriptions,
+    ElDescriptionsItem: DescriptionsItem,
+    CiDetailAttrContent,
+    CiDetailRelation,
+    TriggerTable,
+    RelatedItsmTable,
+    CiRollbackForm,
+  },
+  props: {
+    typeId: {
+      type: Number,
+      required: true,
+    },
+    treeViewsLevels: {
+      type: Array,
+      default: () => [],
+    },
+    attributeHistoryTableHeight: {
+      type: Number,
+      default: null
+    }
+  },
+  data() {
+    return {
+      ci: {},
+      item: [],
+      attributeGroups: [],
+      activeTabKey: 'tab_1',
+      rowSpanMap: {},
+      ciHistory: [],
+      ciId: null,
+      ci_types: [],
+      hasPermission: true,
+      itsmInstalled: true,
+      tableHeight: this.attributeHistoryTableHeight || (this.$store.state.windowHeight - 120),
+    }
+  },
+  computed: {
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+    operateTypeMap() {
+      return {
+        0: this.$t('new'),
+        1: this.$t('delete'),
+        2: this.$t('update'),
+      }
+    },
+  },
+  provide() {
+    return {
+      ci_types: () => {
+        return this.ci_types
+      },
+    }
+  },
+  inject: {
+    reload: {
+      from: 'reload',
+      default: null,
+    },
+    handleSearch: {
+      from: 'handleSearch',
+      default: null,
+    },
+    attrList: {
+      from: 'attrList',
+      default: () => [],
+    },
+  },
+  methods: {
+    async create(ciId, activeTabKey = 'tab_1', ciDetailRelationKey = '1') {
+      this.activeTabKey = activeTabKey
+      if (activeTabKey === 'tab_2') {
+        this.$nextTick(() => {
+          this.$refs.ciDetailRelation.activeKey = ciDetailRelationKey
+        })
+      }
+      this.ciId = ciId
+      await this.getCI()
+      await this.judgeItsmInstalled()
+      if (this.hasPermission) {
+        this.getAttributes()
+        this.getCIHistory()
+        getCITypes().then((res) => {
+          this.ci_types = res.ci_types
+        })
+      }
+    },
+    getAttributes() {
+      getCITypeGroupById(this.typeId, { need_other: 1 })
+        .then((res) => {
+          this.attributeGroups = res
+        })
+        .catch((e) => {})
+    },
+    async getCI() {
+      await getCIById(this.ciId)
+        .then((res) => {
+          if (res.result.length) {
+            this.ci = res.result[0]
+          } else {
+            this.hasPermission = false
+          }
+        })
+        .catch((e) => {
+          if (e.response.status === 404) {
+            this.itsmInstalled = false
+          }
+        })
+    },
+    async judgeItsmInstalled() {
+      await judgeItsmInstalled().catch((e) => {
+        this.itsmInstalled = false
+      })
+    },
+
+    getCIHistory() {
+      getCIHistory(this.ciId)
+        .then((res) => {
+          this.ciHistory = res
+
+          const rowSpanMap = {}
+          let startIndex = 0
+          let startCount = 1
+          res.forEach((item, index) => {
+            if (index === 0) {
+              return
+            }
+            if (res[index].record_id === res[startIndex].record_id) {
+              startCount += 1
+              rowSpanMap[index] = 0
+              if (index === res.length - 1) {
+                rowSpanMap[startIndex] = startCount
+              }
+            } else {
+              rowSpanMap[startIndex] = startCount
+              startIndex = index
+              startCount = 1
+              if (index === res.length - 1) {
+                rowSpanMap[index] = 1
+              }
+            }
+          })
+          this.rowSpanMap = rowSpanMap
+        })
+        .catch((e) => {
+          console.log(e)
+        })
+    },
+    changeTab(key) {
+      this.activeTabKey = key
+      if (key === 'tab_3') {
+        this.$nextTick(() => {
+          const $table = this.$refs.xTable
+          if ($table) {
+            const usernameColumn = $table.getColumnByField('username')
+            const attrColumn = $table.getColumnByField('attr_alias')
+            if (usernameColumn) {
+              const usernameList = [...new Set(this.ciHistory.map((item) => item.username))]
+              $table.setFilter(
+                usernameColumn,
+                usernameList.map((item) => {
+                  return {
+                    value: item,
+                    label: item,
+                  }
+                })
+              )
+            }
+            if (attrColumn) {
+              $table.setFilter(
+                attrColumn,
+                this.attrList().map((attr) => {
+                  return { value: attr.alias || attr.name, label: attr.alias || attr.name }
+                })
+              )
+            }
+          }
+        })
+      }
+    },
+    filterUsernameMethod({ value, row, column }) {
+      return row.username === value
+    },
+    filterOperateMethod({ value, row, column }) {
+      return Number(row.operate_type) === Number(value)
+    },
+    filterAttrMethod({ value, row, column }) {
+      return row.attr_alias === value
+    },
+    refresh(editAttrName) {
+      this.getCI()
+      const _find = this.treeViewsLevels.find((level) => level.name === editAttrName)
+      // 修改的字段为树形视图订阅的字段 则全部reload
+      setTimeout(() => {
+        if (_find) {
+          if (this.reload) {
+            this.reload()
+          }
+        } else {
+          if (this.handleSearch) {
+            this.handleSearch()
+          }
+        }
+      }, 500)
+    },
+    mergeRowMethod({ row, _rowIndex, column, visibleData }) {
+      const fields = ['created_at', 'username']
+      const cellValue1 = row['created_at']
+      const cellValue2 = row['username']
+      if (cellValue1 && cellValue2 && fields.includes(column.property)) {
+        const prevRow = visibleData[_rowIndex - 1]
+        let nextRow = visibleData[_rowIndex + 1]
+        if (prevRow && prevRow['created_at'] === cellValue1 && prevRow['username'] === cellValue2) {
+          return { rowspan: 0, colspan: 0 }
+        } else {
+          let countRowspan = 1
+          while (nextRow && nextRow['created_at'] === cellValue1 && nextRow['username'] === cellValue2) {
+            nextRow = visibleData[++countRowspan + _rowIndex]
+          }
+          if (countRowspan > 1) {
+            return { rowspan: countRowspan, colspan: 1 }
+          }
+        }
+      }
+    },
+    updateCIByself(params, editAttrName) {
+      const _ci = { ..._.cloneDeep(this.ci), ...params }
+      this.ci = _ci
+      const _find = this.treeViewsLevels.find((level) => level.name === editAttrName)
+      // 修改的字段为树形视图订阅的字段 则全部reload
+      setTimeout(() => {
+        if (_find) {
+          if (this.reload) {
+            this.reload()
+          }
+        } else {
+          if (this.handleSearch) {
+            this.handleSearch()
+          }
+        }
+      }, 500)
+    },
+    shareCi() {
+      const text = `${document.location.host}/cmdb/cidetail/${this.typeId}/${this.ciId}`
+      this.$copyText(text)
+        .then(() => {
+          this.$message.success(this.$t('copySuccess'))
+        })
+        .catch(() => {
+          this.$message.error(this.$t('cmdb.ci.copyFailed'))
+        })
+    },
+    handleRollbackCI() {
+      this.$nextTick(() => {
+        this.$refs.ciRollbackForm.onOpen()
+      })
+    },
+    async handleExport() {
+      this.$refs.xTable.exportData({
+        filename: this.$t('cmdb.ci.history'),
+        sheetName: 'Sheet1',
+        type: 'xlsx',
+        types: ['xlsx', 'csv', 'html', 'xml', 'txt'],
+        data: this.ciHistory,
+        isMerge: true,
+        isColgroup: true,
+      })
+    }
+  },
+}
+</script>
+
+<style lang="less">
+.ci-detail-tab {
+  height: 100%;
+  .ant-tabs-content {
+    height: calc(100% - 45px);
+    .ant-tabs-tabpane {
+      height: 100%;
+    }
+  }
+  .ant-tabs-bar {
+    margin: 0;
+  }
+  .ant-tabs-extra-content {
+    line-height: 44px;
+  }
+  .ci-detail-attr {
+    height: 100%;
+    overflow: auto;
+    padding: 24px;
+    .el-descriptions-item__content {
+      cursor: default;
+      &:hover a {
+        opacity: 1 !important;
+      }
+    }
+    .el-descriptions:first-child > .el-descriptions__header {
+      margin-top: 0;
+    }
+    .el-descriptions__header {
+      margin-bottom: 5px;
+      margin-top: 20px;
+    }
+    .ant-form-item {
+      margin-bottom: 0;
+    }
+    .ant-form-item-control {
+      line-height: 19px;
+    }
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/ciTable.vue b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/ciTable.vue
index 8178e27..fc73711 100644
--- a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/ciTable.vue
+++ b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/ciTable.vue
@@ -7,6 +7,7 @@
       @search="handleSearch"
       @searchFormReset="searchFormReset"
       @searchFormChange="searchFormChange"
+      @export="handleExport"
     ></search-form>
     <vxe-table
       ref="xTable"
@@ -86,13 +87,13 @@
         </template>
       </vxe-column>
       <vxe-column field="attr_alias" :title="$t('cmdb.history.attribute')"></vxe-column>
-      <vxe-column field="old" :title="$t('cmdb.history.old')"></vxe-column>
-      <vxe-column field="new" :title="$t('cmdb.history.new')"></vxe-column>
+      <vxe-column :cell-type="'string'" field="old" :title="$t('cmdb.history.old')"></vxe-column>
+      <vxe-column :cell-type="'string'" field="new" :title="$t('cmdb.history.new')"></vxe-column>
     </vxe-table>
     <pager
       :current-page.sync="queryParams.page"
       :page-size.sync="queryParams.page_size"
-      :page-sizes="[50, 100, 200]"
+      :page-sizes="[50, 100, 200, 500]"
       :total="total"
       :isLoading="loading"
       @change="onChange"
@@ -391,6 +392,37 @@ export default {
     filterOption(input, option) {
       return option.componentOptions.children[0].text.indexOf(input) >= 0
     },
+
+    async handleExport(params) {
+      const hide = this.$message.loading(this.$t('loading'), 0)
+      const res = await getCIHistoryTable({
+        ...params,
+        page: this.queryParams.page,
+        page_size: this.queryParams.page_size,
+      })
+      hide()
+      const data = []
+      res.records.forEach((item) => {
+        item[0].type_id = this.handleTypeId(item[0].type_id)
+        item[1].forEach((subItem) => {
+          subItem.operate_type = this.handleOperateType(subItem.operate_type)
+          subItem.new = subItem.new || ''
+          subItem.old = subItem.old || ''
+          const tempObj = Object.assign(subItem, item[0])
+          data.push(tempObj)
+        })
+      })
+
+      this.$refs.xTable.exportData({
+        filename: this.$t('cmdb.history.ciChange'),
+        sheetName: 'Sheet1',
+        type: 'xlsx',
+        types: ['xlsx', 'csv', 'html', 'xml', 'txt'],
+        isMerge: true,
+        isColgroup: true,
+        data,
+      })
+    }
   },
 }
 </script>
diff --git a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/relation.vue b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/relation.vue
index 540b074..d7fb859 100644
--- a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/relation.vue
+++ b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/relation.vue
@@ -5,6 +5,7 @@
       @expandChange="handleExpandChange"
       @search="handleSearch"
       @searchFormReset="searchFormReset"
+      @export="handleExport"
     ></search-form>
     <vxe-table
       ref="xTable"
@@ -122,7 +123,7 @@
     <pager
       :current-page.sync="queryParams.page"
       :page-size.sync="queryParams.page_size"
-      :page-sizes="[50, 100, 200]"
+      :page-sizes="[50, 100, 200, 500]"
       :total="total"
       :isLoading="loading"
       @change="onChange"
@@ -379,6 +380,58 @@ export default {
     filterOption(input, option) {
       return option.componentOptions.children[0].text.indexOf(input) >= 0
     },
+
+    async handleExport(params) {
+      const hide = this.$message.loading(this.$t('loading'), 0)
+      const res = await getRelationTable({
+        ...params,
+        page: this.queryParams.page,
+        page_size: this.queryParams.page_size,
+      })
+      hide()
+      const data = []
+      res.records.forEach((item) => {
+        item[1].forEach((subItem) => {
+          subItem.operate_type = this.handleOperateType(subItem.operate_type)
+          subItem.relation_type_id = this.handleRelationType(subItem.relation_type_id)
+          subItem.first = res.cis[String(subItem.first_ci_id)]
+          subItem.second = res.cis[String(subItem.second_ci_id)]
+
+          const tempObj = Object.assign(subItem, item[0])
+
+          tempObj.changeDescription = this.getExportChangeDescription(tempObj)
+
+          data.push(tempObj)
+        })
+      })
+
+      this.$refs.xTable.exportData({
+        filename: this.$t('cmdb.history.relationChange'),
+        sheetName: 'Sheet1',
+        type: 'xlsx',
+        types: ['xlsx', 'csv', 'html', 'xml', 'txt'],
+        isMerge: true,
+        isColgroup: true,
+        data,
+      })
+    },
+
+    getExportChangeDescription(item) {
+      const first = item.first ? `${item.first.ci_type_alias}${item.first.unique_alias && item.first[item.first.unique] ? `（${item.first.unique_alias}：${item.first[item.first.unique]}）` : ''}` : ''
+      const second = item.second ? `${item.second.ci_type_alias}${item.second.unique_alias && item.second[item.second.unique] ? `（${item.second.unique_alias}：${item.second[item.second.unique]}）` : ''}` : ''
+      let center = ''
+      if (item.changeDescription === this.$t('cmdb.history.noUpdate')) {
+        center = item.relation_type_id
+      } else if (item.operate_type.includes(this.$t('update'))) {
+        center = item.changeArr.join(';')
+      } else if (item.operate_type.includes(this.$t('new'))) {
+        center = item.relation_type_id
+      } else if (item.operate_type.includes(this.$t('delete'))) {
+        center = item.relation_type_id
+      }
+
+      return `${first || ''} => ${center || ''} => ${second || ''}`
+    }
   },
 }
 </script>
diff --git a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/searchForm.vue b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/searchForm.vue
index 66d80c5..4afd340 100644
--- a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/searchForm.vue
+++ b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/searchForm.vue
@@ -27,7 +27,7 @@
               <a-select-option
                 :value="Object.values(choice)[0]"
                 v-for="(choice, index) in attr.choice_value"
-                :key="'Search_' + attr.name + index"
+                :key="'Search_' + attr.name + Object.values(choice)[0] + index"
               >
                 {{ Object.keys(choice)[0] }}
               </a-select-option>
@@ -42,7 +42,7 @@
                 hideDisabledOptions: true,
                 defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
               }"
-              v-else-if="valueTypeMap[attr.value_type] == 'date' || valueTypeMap[attr.value_type] == 'datetime'"
+              v-else-if="attr.value_type === '3'"
             />
             <a-input v-model="queryParams[attr.name]" style="width: 100%" allowClear v-else />
           </a-form-item>
@@ -85,7 +85,7 @@
                 @change="onChange"
                 format="YYYY-MM-DD HH:mm"
                 :placeholder="[$t('cmdb.history.startTime'), $t('cmdb.history.endTime')]"
-                v-else-if="valueTypeMap[item.value_type] == 'date' || valueTypeMap[item.value_type] == 'datetime'"
+                v-else-if="attr.value_type === '3'"
                 :show-time="{
                   hideDisabledOptions: true,
                   defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
@@ -101,6 +101,9 @@
           <a-button type="primary" html-type="submit" @click="handleSearch">
             {{ $t('query') }}
           </a-button>
+          <a-button :style="{ marginLeft: '8px' }" @click="handleExport">
+            {{ $t('export') }}
+          </a-button>
           <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
             {{ $t('reset') }}
           </a-button>
@@ -155,6 +158,13 @@ export default {
       this.$emit('search', this.queryParams)
     },
 
+    handleExport() {
+      const queryParams = {
+        ...this.queryParams
+      }
+      this.$emit('export', queryParams)
+    },
+
     handleReset() {
       this.queryParams = {
         page: 1,
diff --git a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/typeTable.vue b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/typeTable.vue
index 09f01f0..486b0a0 100644
--- a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/typeTable.vue
+++ b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/typeTable.vue
@@ -5,6 +5,7 @@
       @expandChange="handleExpandChange"
       @search="handleSearch"
       @searchFormReset="searchFormReset"
+      @export="handleExport"
     ></search-form>
     <vxe-table
       ref="xTable"
@@ -121,7 +122,7 @@ export default {
       relationTypeList: null,
       typeList: null,
       userList: [],
-      pageSizeOptions: ['50', '100', '200'],
+      pageSizeOptions: ['50', '100', '200', '500'],
       isExpand: false,
       current: 1,
       pageSize: 50,
@@ -508,6 +509,36 @@ export default {
     filterOption(input, option) {
       return option.componentOptions.children[0].text.indexOf(input) >= 0
     },
+
+    async handleExport(params) {
+      const hide = this.$message.loading(this.$t('loading'), 0)
+      const res = await getCITypesTable({
+        ...params,
+        page: this.queryParams.page,
+        page_size: this.queryParams.page_size,
+      })
+      hide()
+
+      res.result.forEach((item) => {
+        this.handleChangeDescription(item, item.operate_type)
+        item.operate_type = this.handleOperateType(item.operate_type)
+        item.type_id = this.handleTypeId(item.type_id)
+        item.uid = this.handleUID(item.uid)
+        if (item.operate_type.includes(this.$t('update'))) {
+          item.changeDescription = item.changeArr.join(';')
+        }
+      })
+
+      this.$refs.xTable.exportData({
+        filename: this.$t('cmdb.history.ciTypeChange'),
+        sheetName: 'Sheet1',
+        type: 'xlsx',
+        types: ['xlsx', 'csv', 'html', 'xml', 'txt'],
+        isMerge: true,
+        isColgroup: true,
+        data: res.result,
+      })
+    },
   },
 }
 </script>