eta_front/src/components/antvVueComponents/tooltipCom.vue

<template>
  <div class="container" ref="container" @mouseover="nodeMouseEnter" @mouseout="nodeMouseOut"
  @click="nodeClick">
    <el-tooltip :content="currentLang==='en'?(data.RuleTitleEn||data.RuleTitle):data.RuleTitle" placement="top" ref="antvTooltip"
    class="container-input">
      <span ref="containerText">{{currentLang==='en'?(data.EdbNameEn||data.EdbName):data.EdbName}}</span> 
    </el-tooltip>
    <i :class="data.fold?'el-icon-circle-plus':'el-icon-remove'" v-if="!data.isLeaf"
    class="fold-icon" @click="flodApi" v-show="show"></i>
    <img src="~@/assets/img/icons/edb-stopping.png" class="stop-mark" v-if="data.isStop==1" />
  </div>
</template>

<script>

export default {
  name:"toolTipCom",
  inject: ["getGraph", "getNode"],
  data() {
    return {
      node:{},
      data:{
        fold:false,
        routeQuery:{}
      },
      graph:{},
      show:false
    };
  },
  props:{
    params:{
      type:Object,
      default:()=>{
        return {
          stopNodeClick:false
        }
      }
    }
  },
  mounted() {
    this.initNode()
  },
  computed: {
    currentLang() {
      return this.$store.state.lang
    }
  },
  methods: {
    initNode(){
      this.node = this.getNode();
      this.graph= this.getGraph()
      this.node.data = this.node.data?{...this.data,...this.node.data}:this.data
      this.data = this.node.data

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

    },
    initStyle(style){
      // !important 是有的节点 :hover不变色
      if(style){
        // 背景色
        if(style.backgroundColor && style.backgroundColor.indexOf("!important")!=-1){
          let value = style.backgroundColor.split("!")[0]
          this.$refs.containerText.style.setProperty('background-color',value,'important')
        }else{
          this.$refs.container.style.backgroundColor = style.backgroundColor?style.backgroundColor:
                                                        this.data.isRoot?'#0052d9': "#f2f6fa"
        }
        // 字体颜色
        if(style.color && style.color.indexOf("!important")!=-1){
          let value = style.color.split("!")[0]
          this.$refs.containerText.style.setProperty('color',value,'important')
        }else{
          this.$refs.container.style.color = style.color?style.color:
                                              this.data.isRoot?'#ffffff': "#000000"
        }
        this.$refs.containerText.style.color = style.color
      }
    },
    flodApi(event){
      event.stopPropagation()
      const succ = this.graph.getSuccessors(this.node)
      if (succ) {
        succ.forEach((node,index) => {
          node.setVisible(this.data.fold)
          if(this.data.fold){
            node.toBack()
            requestAnimationFrame(()=>{
              let edge = this.graph.getIncomingEdges(node) || []
              edge[0].toBack()
            })
          }
          node.data.fold=!this.data.fold
        })
      }
      this.data.fold=!this.data.fold
    },
    nodeMouseEnter(){
      this.show=true
    },
    nodeMouseOut(){
      this.show=false
    },
    nodeClick(){
      if(this.params.stopNodeClick) return 
      //EdbInfoType 1:跳预测指标详情 0:跳指标库详情
      const { ClassifyId, UniqueCode, EdbInfoId, EdbInfoType } = this.data.routeQuery
      let { href } =
      this.$router.resolve({ path: EdbInfoType === 1 ? '/predictEdb' : '/database', query: { code: UniqueCode, id:
      EdbInfoId, classifyId: ClassifyId } });
      window.open(href, '_blank');
    }
  },
};
</script>
<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%);
  }
  .stop-mark{
    height: 48px;
    width: 48px;
    position: absolute;
    right: -1px;
    top: 0;
    pointer-events: none;
  }
}
</style>