系统图组件

安装

pnpm install system-graph

引入

import SystemGraph from "system-graph";

Props

| 参数 | 说明 | 类型 |默认值 | | :---: | :---: | :---: |:---: | | groupCode | 集团编码 | string |- | | baseUrl | 基础接口 | string |- | | systemId | 系统图ID | string |- |

Events

| 名称 | 说明 | | :---: | :---: | | getErrInfo | 接收错误信息 | | handleMouseEnter | 鼠标移入设备事件 | | handleMouseLeave | 鼠标移出设备事件 |

Slots

| 名称 | 说明 | | :---: | :---: | | loading | 加载中 | | nodata | 无数据 |

使用示例

 <systemGraph
    :baseUrl="md.baseUrl"
    :systemId="md.systemId"
    @getErrInfo="getErrInfo"
  > 
     <!-- loading插槽 -->
    <template #loading>加载中</template>
    <!-- 无数据插槽 -->
    <template #nodata>无数据</template>
  </systemGraph>
<script setup>
import { reactive } from "vue";
import systemGraph from "./components/systemGraph.vue";
const md = reactive({
  // 接口
  baseUrl: "https://qa-tyxk.meosedge.com",
  // 系统图ID
  systemId: "1813418071224819713",
});
//接收错误信息
const getErrInfo = (message) => {
  window.alert(message);
};
</script>

自定义插入DOM

// js
const handleMouseEnter = (event, item) => {
  console.log("鼠标进入", event, item);
  const targetElement = event.target;
  if (!targetElement.hasAttribute("has-added")) {
    targetElement.setAttribute("has-added", "true");
    const newDom = document.createElement("ul");
    newDom.setAttribute("class", "add-dom");
    newDom.innerHTML = `<li>这个是追加的DOM元素</li>`;
    targetElement.appendChild(newDom);
  }
};

// css
.system-graph-svg foreignObject:hover .add-dom {
  display: block;
}
.add-dom {
  display: none;
  position: absolute;
  top: -50px;
  background-color: #fff;
  z-index: 9999;
  width: max-content;
  max-width: 500px;
}