ctsi-topology v1.1.3

ctsi-topology

基于mxGraph的拓扑图，目前只有展示功能，编辑功能后续会更新。

Project setup

yarn install
npm install

Compiles and hot-reloads for development

yarn run serve
npm run serve

Compiles and minifies for production

yarn run build
npm run build

使用

npm install ctsi-topology

示例

效果图

代码

1.引入（main.js）

import Vue from 'vue';
import CtsiTopology from 'ctsi-topology'; // 整体引入包
import 'ctsi-topology/dist/ctsi-topology.css'; // 引入组件样式
import App from './App.vue';

Vue.use(CtsiTopology);

new Vue({
  el: '#app',
  render: h => h(App)
});

2.使用（example.vue）

<template>
  <div class="example">
    <ctsi-topology
      :data="data"
      :connect-line="connectLines"
      node-key="instId"
      :props="defaultProps"
      @node-click="topologyClick"></ctsi-topology>
  </div>
</template>

<script>
const nodeDetailConfig = {
  title: '设备信息',
  config: [
    { label: '序列号', value: 'sn' },
    { label: '名称', value: 'name' },
    { label: '资产编号', value: 'identifier' },
    { label: '机房', value: 'roomName' },
    { label: '机柜', value: 'cabinetName' },
    { label: '容占', value: 'startU' },
    { label: '设备类型', value: 'classify' }
  ]
};
const nodeChildDetailConfig = {
  title: '端口信息',
  config: [
    { label: '端口名称', value: 'name' },
    { label: '端口带宽', value: 'bandWidth' },
    { label: '端口类型', value: 'type' },
    { label: 'MAC/WWN', value: 'macOrWwn' },
    { label: 'IP', value: 'ip' },
    { label: 'VLAN', value: 'vlan' }
  ]
};
export default {
  name: 'Example',
  data() {
    return {
      defaultProps: {
        label: 'sn',
        detailConfig: 'detailModal',
        buildInName: 'ports',
        buildInKey: 'id'
      },
      data: [
        [{
          instId: 2933,
          sn: "交换机-02",
          iconClass: 'icon-title-switch',
          ports: [{
            bandWidth: "万兆口",
            id: 3385,
            macOrWwn: "",
            name: "交换机-02/0",
            type: "光口",
            iconClass: 'icon-title-port',
            detailModal: {
              title: '端口信息111',
              config: [
                { label: '端口名称', value: 'name' },
                { label: '端口带宽', value: 'bandWidth' },
                { label: '端口类型', value: 'type' },
                { label: 'MAC/WWN', value: 'macOrWwn' }
              ]
            }
          }, {
            bandWidth: "万兆口",
            id: 3386,
            name: "交换机-02/1",
            type: "光口",
            iconClass: 'icon-title-port'
          }, {
            bandWidth: "万兆口",
            id: 3387,
            name: "交换机-02/2",
            type: "光口",
            iconClass: 'icon-title-port'
          }, {
            bandWidth: "万兆口",
            id: 3388,
            name: "交换机-02/3",
            type: "光口",
            iconClass: 'icon-title-port'
          }, {
            bandWidth: "万兆口",
            id: 3389,
            name: "交换机-02/4",
            type: "光口",
            iconClass: 'icon-title-port'
          }]
        }],
        [{
          instId: 2941,
          sn: "服务器-02",
          iconClass: 'icon-title-server',
          ports: [{
            bandWidth: "万兆口",
            id: 2936,
            name: "服务器-02/0",
            type: "光口",
            iconClass: 'icon-title-port'
          }]
        }, {
          instId: 2925,
          sn: "服务器-01",
          iconClass: 'icon-title-server',
          ports: [{
            bandWidth: "万兆口",
            id: 2915,
            name: "服务器-01/1",
            type: "光口",
            iconClass: 'icon-title-port',
            detailModal: nodeChildDetailConfig
          }, {
            bandWidth: "万兆口",
            id: 2915,
            name: "服务器-01/2",
            type: "光口",
            iconClass: 'icon-title-port'
          }, {
            bandWidth: "万兆口",
            id: 2915,
            name: "服务器-01/3",
            type: "光口",
            iconClass: 'icon-title-port'
          }, {
            bandWidth: "万兆口",
            id: 2915,
            name: "服务器-01/4",
            type: "光口",
            iconClass: 'icon-title-port'
          }]
        }],
        [{
          instId: 2934,
          name: "分布式存储-01",
          ports: [{
            bandWidth: "万兆口",
            id: 3116,
            name: "分布式存储-01/1",
            type: "光口",
            iconClass: 'icon-title-port'
          }],
          children: [{
            instId: 3154,
            ports: [],
            sn: "服务器-03",
            iconClass: 'icon-title-server'
          }, {
            instId: 3155,
            sn: "服务器-04",
            iconClass: 'icon-title-server',
            ports: [{
              bandWidth: "万兆口",
              id: 3115,
              name: "服务器-04/1",
              type: "光口",
              iconClass: 'icon-title-port'
            }]
          }, {
            instId: 3156,
            ports: [],
            sn: "服务器-05",
            iconClass: 'icon-title-server'
          }]
         }, {
          instId: 3467,
          ports: [],
          sn: "防火墙-01",
          iconClass: 'icon-title-firewall',
          detailModal: nodeDetailConfig
        }]
      ],
      connectLines: [
        { local: 2933, opposite: 2941 },
        { local: 2933, opposite: 2925 },
        { local: 2933, opposite: 3467 },
        { local: 3385, opposite: 2915 },
        {
          local: 3388,
          opposite: 3115,
          style: 'color=#c5c5c5;emphColor=#1296db;dotted=true;arrow=false'
        }
      ] // 连线
    }
  },
  methods: {
    topologyClick(node) {
      alert(node.instId);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

帮助信息

属性

connect-line

connect-line-style

props

detailConfig

事件