NEZ-2535 fix：operation log Response 过长导致闪烁的问题

2023-02-07 15:53:19 +08:00
parent 45e0867f50
commit 8aa336ed7b
5 changed files with 167 additions and 84 deletions
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -670,3 +670,8 @@ textarea {
 .el-message__content{
  white-space:pre-line
 }
+.response__popper {
+  max-height: 500px;
+  overflow: hidden;
+  overflow-y: auto;
+}
--- a/nezha-fronted/src/components/common/alert/nzTooltip.vue
+++ b/nezha-fronted/src/components/common/alert/nzTooltip.vue
@@ -1,7 +1,11 @@
 <template>
-  <div style="padding:15px" :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" class="alert-label__border" ref="alertLabels"
-       @mouseenter="tooltipHover(true)"
-       @mouseleave="tooltipHover(false)">
+  <div style="padding:15px"
+       :class="calcHeight(that.position,that)"
+       :style="calcPosition(that.position,that)"
+       class="alert-label__border response__popper"
+       ref="alertLabels"
+       @mouseenter="tipHover(true)"
+       @mouseleave="tipHover(false)">
    <slot name="default"/>
  </div>
 </template>
@@ -16,7 +20,11 @@ export default {
    that: {},
    detailList: Boolean,
    alertTableDialog: Boolean,
-    isTopoInfo: Boolean
+    isTopoInfo: Boolean,
+    width: {
+      type: Number,
+      default: 150
+    }
  },
  data () {
    return {
@@ -28,31 +36,62 @@ export default {
  computed: {
    calcPosition () {
      return function (position) {
-        const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
-        const leftOffSetView = this.detailList ? -80 : 10
-        const leftOffSet = this.detailList ? -80 : 10
-        const topOffSet = this.detailList ? 60 : 22
-        const topoOffset = this.isTopoInfo ? 155 : 0
-        if (position.top + this.heightList > clientHeight) {
-          return {
-            left: `${position.left + position.width + leftOffSet - topoOffset}px`,
-            top: `${position.top - this.heightList + topOffSet}px`
+        if (this.$refs.alertLabels) {
+          this.heightList = this.$refs.alertLabels.getBoundingClientRect().height
+          this.boxWidth = this.$refs.alertLabels.getBoundingClientRect().width
+        } else {
+          this.heightList = 0
+          this.boxWidth = 0
+        }
+        const clientHeight =
+          document.body.clientHeight < document.documentElement.clientHeight
+            ? document.body.clientHeight
+            : document.documentElement.clientHeight
+        const clientWidth =
+          document.body.clientWidth < document.documentElement.clientWidth
+            ? document.body.clientWidth
+            : document.documentElement.clientWidth
+        let leftOffSetView = 0
+        let leftOffSet = this.detailList ? -80 : 10
+        let topOffSet = this.detailList ? 60 : 22
+        let topOffSetView = 0
+        let labelPosition = {
+          top: 0,
+          left: 0,
+          right: 0,
+        }
+        if (this.alertTableDialog) {
+          let dialog = document.querySelector(
+            '#dialog-alert-massage .el-dialog'
+          )
+          if (!dialog) {
+            dialog = document.querySelector('#viewGraphDialog .el-dialog')
          }
-        } else if (this.alertTableDialog) {
-          const dialog = document.querySelector('#dialog-alert-massage .el-dialog')
          const dialogHeight = dialog.getBoundingClientRect()
-          if (dialogHeight) {
-            return {
-              left: `${position.left + position.width + 10 - dialogHeight.x}px`,
-              top: `${position.top - dialogHeight.y}px`
+          leftOffSet = leftOffSet - 3 * dialogHeight.x
+          leftOffSetView = dialogHeight.x
+          topOffSet = topOffSet - dialogHeight.y
+          topOffSetView = topOffSet
        }
+        if (position.top > clientHeight / 2) {
+          labelPosition = {
+            left: `${position.left + position.width + leftOffSet}px`,
+            top: this.that.type === 'chartTopology' ? `${position.top - this.heightList - topOffSetView}px` : `${position.top - this.heightList - topOffSetView + position.height / 2}px`
          }
        } else {
-          return {
-            left: `${position.left + position.width + leftOffSet - topoOffset}px`,
-            top: `${position.top}px`
+          labelPosition = {
+            left: `${position.left + position.width + leftOffSet}px`,
+            top: this.that.type === 'chartTopology' ? `${position.top + topOffSet}px` : `${position.top + position.height / 2}px`
          }
        }
+        if (position.left > clientWidth / 2) {
+          delete labelPosition.left
+
+          labelPosition.right =
+            clientWidth - position.left - leftOffSetView + 'px'
+        }
+        labelPosition.width = this.width + 'px'
+        return labelPosition
      }
    },
    calcHeight () {
@@ -69,13 +108,23 @@ export default {
    }
  },
  methods: {
-    tooltipHover (show) {
-      if (show) {
-        clearTimeout(this.that.timeout)
-        this.that.timeout = null
+    tooltipHover (item, flag, e) {
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        this.position.left = position.left
+        this.$set(this.position, 'left', position.left)
+        if (position.top > window.innerHeight / 2) {
+          this.$set(this.position, 'top', position.top - 55)
        } else {
-        this.that.loading = false
+          this.$set(this.position, 'top', position.top + 30)
        }
+        // this.$set(item, 'alertNumtooltipShow', flag)
+        this.alertNumtooltipShow = flag
+      }
+    },
+    tipHover (tipLoading) {
+      this.$emit('tipHover', tipLoading)
    }
  },
  mounted () {
--- a/nezha-fronted/src/components/common/mixin/alertLabelMixin.js
+++ b/nezha-fronted/src/components/common/mixin/alertLabelMixin.js
@@ -62,6 +62,8 @@ export default {
        case 'dc':
        case 'user':
        case 'recordRule':
+        case 'response':
+        case 'params':
          return false
        default: return true
      }
--- a/nezha-fronted/src/components/common/mixin/table.js
+++ b/nezha-fronted/src/components/common/mixin/table.js
@@ -1,8 +1,9 @@
 import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
-import { requestsArr } from '@/http'
+import nzTooltip from '@/components/common/alert/nzTooltip'
 export default {
  components: {
-    alertDaysInfo
+    alertDaysInfo,
+    nzTooltip
  },
  props: {
    tableData: {
--- a/nezha-fronted/src/components/common/table/settings/operationLogTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/operationLogTable.vue
@@ -1,4 +1,5 @@
 <template>
+  <div style="height: 100%">
    <el-table
      id="roleTable"
      ref="dataTable"
@@ -30,7 +31,6 @@
        :sort-orders="['ascending', 'descending']"
        :width="`${item.width}`"
        class="data-column"
-      :show-overflow-tooltip="item.ShowOverflowTooltip"
      >
        <template slot="header">
          <span class="data-column__span">{{item.label}}</span>
@@ -42,6 +42,18 @@
              </span>
          <span v-else-if="item.prop === 'username'">{{formatUsername(scope.row)}}</span>
          <span v-else-if="item.prop === 'createDate'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
+          <span v-else-if="item.prop === 'response'"  @mouseenter="labelHover(scope.row, 'response', true, false, $event)"
+                @mouseleave="labelHover(scope.row, 'response', false, false)">
+          <div class="text-ellipsis" style="width: 100%" >
+            {{scope.row[item.prop]}}
+          </div>
+        </span>
+          <span v-else-if="item.prop === 'params'"  @mouseenter="labelHover(scope.row, 'params', true, false, $event)"
+                @mouseleave="labelHover(scope.row, 'params', false, false)">
+          <div class="text-ellipsis" style="width: 100%" >
+            {{scope.row[item.prop]}}
+          </div>
+        </span>
          <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
          <span v-else>-</span>
        </template>
@@ -56,13 +68,27 @@
        <div v-else>&nbsp;</div>
      </template>
    </el-table>
+    <nzTooltip
+      v-if="alertLabelShow"
+      :id="alertLabelId"
+      :that="alertLabelObj"
+      :width="200"
+      :type="alertLabelType"
+      @tipHover='tipHover'
+    >
+      <div style="word-break: break-all">
+        {{alertLabelObj[alertLabelType]}}
+      </div>
+    </nzTooltip>
+  </div>
 </template>

 <script>
 import table from '@/components/common/mixin/table'
+import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
 export default {
  name: 'operationLog',
-  mixins: [table],
+  mixins: [table, alertLabelMixin],
  props: {
    loading: Boolean
  },
@@ -136,7 +162,7 @@ export default {
          prop: 'params',
          show: false,
          ShowOverflowTooltip: true,
-          minWidth: 80
+          minWidth: 100
        },
        {
          label: this.$t('config.operationlog.response'),