eta_forum_admin_front/src/components/EdbSourceToolTip.vue

<script setup>
import { inject, nextTick, onMounted, ref } from 'vue'
import { Node } from '@antv/x6'

const getNode = inject('getNode')
const getGraph = inject('getGraph')

const data = ref({
  fold: false,
  routeQuery: {}
})
const show = ref(false)
let node = {}, graph = {};

function initNode() {
  node = getNode();
  graph = getGraph()
  node.data = node.data ? { ...data.value, ...node.data } : data.value
  data.value = node.data

  let { style } = data.value
  initStyle(style)
}

const container = ref(null)
const antvTooltip = ref(null)
const containerText = ref(null)
function initStyle(style) {
  // !important 是有的节点 :hover不变色
  if (style) {
    // 背景色
    if (style.backgroundColor && style.backgroundColor.indexOf("!important") != -1) {
      let value = style.backgroundColor.split("!")[0]
      containerText.value.style.setProperty('background-color', value, 'important')
    } else {
      container.value.style.backgroundColor = style.backgroundColor ? style.backgroundColor :
        data.value.isRoot ? '#0052d9' : "#f2f6fa"
    }
    // 字体颜色
    if (style.color && style.color.indexOf("!important") != -1) {
      let value = style.color.split("!")[0]
      containerText.value.style.setProperty('color', value, 'important')
    } else {
      container.value.style.color = style.color ? style.color :
        data.value.isRoot ? '#ffffff' : "#000000"
    }
    nextTick(()=>{
        containerText.value.style.color = style.color
    })
    
  }
}

function flodApi(event) {
  const succ = graph.getSuccessors(node)
  if (succ) {
    succ.forEach((node, index) => {
      node.setVisible(data.value.fold)
      if (data.value.fold) {
        node.toBack()
        requestAnimationFrame(() => {
          let edge = graph.getIncomingEdges(node) || []
          edge[0].toBack()
        })
      }
      node.data.fold = !data.value.fold
    })
  }
  data.value.fold = !data.value.fold
}

function nodeMouseEnter() {
  show.value = true
}
function nodeMouseOut() {
  show.value = false
}

onMounted(() => {
  initNode()
})




</script>

<template>
  <div
    class="container"
    ref="container"
    @mouseover="nodeMouseEnter"
    @mouseout="nodeMouseOut"
  >
    <t-tooltip
      class="container-input"
      ref="antvTooltip"
    >
      <span ref="containerText">{{ data.EdbName }}</span>
      <template #content>
        <div class="edb-tooltips-content-box" v-html="data.RuleTitle"></div>
      </template>
    </t-tooltip>
    <t-icon
      :name="data.fold ? 'add-circle' : 'minus-circle'"
      v-if="!data.isLeaf"
      @click="flodApi"
      v-show="show"
      class="fold-icon"
    />
  </div>
</template>

<style lang="scss">
.edb-tooltips-content-box{
  div{
    padding-bottom: 5px;
  }
}
</style>
<style lang="scss" scoped>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background-color: #0052d9;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  display: flex;
  cursor: pointer;
  position: relative;
  border-radius: 4px;
  .container-input {
    text-align: center;
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    word-break: break-all;
  }
  //   &:hover {
  //     background-color: #ecf5ff;
  //     .container-input {
  //       color: #0052d9 !important;
  //       text-decoration: underline;
  //     }
  //   }
  .fold-icon {
    position: absolute;
    font-size: 24px;
    color: #666666;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>