le5le-topology智能绘图引擎——学习笔记

Posted 2021-06-28 十九万里

上一节介绍了le5le-topology智能绘图引擎的用处优点和安装
le5le-topology智能绘图引擎——学习笔记（一）
这节主要来写如何使用le5le-topology智能绘图引擎来进行绘图
知识点：

定制导航菜单
设置用户登录
定制图标库工具栏

1.定制导航菜单

[说明]个人免费版不能定制菜单；企业版没有限制

总结:在此阶段 主要是导入topology组件进行相关的配置
包括 topology-vue
topology.css
以及对应的组件这部分只需要按需去修改即可
javascript部分代码：

<template>
  <div class="home">
    <!-- 使用topology组件 -->
    <topology
      :configs="topologyConfigs"
      :materials="materials"
      :user="user"
      :data="data"
      @event="onEvent"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

// 导入topology-vue组件
import topology from 'topology-vue';
// 需要导入topology-vue.css
import 'topology-vue/topology-vue.css';

import {
  defalutMaterials,
  iconMenus,
  userMenus,
} from './data';

Vue.use(topology);

@Component({})
export default class Home extends Vue {
  topologyConfigs = {
    license: {
      key: 'le5le',
      value: 'value',
    },
    logo: {
      img: 'http://topology.le5le.com/assets/img/favicon.ico',
      url: 'http://topology.le5le.com',
      target: '_blank',
    },
    menus: iconMenus,
    loginUrl: 'https://account.le5le.com',
    signupUrl: 'https://account.le5le.com',
    userMenus: userMenus,
    dataOptionsFn: (pen: any, key: string, value: string) => {
      // pen - 当前画笔对象
      // key - 表单输入左侧的属性名
      // value - 仅下拉搜索时有效，当前输入文本
      console.log('dataOptionsFn', pen, key, value);
      // ************
      // 根据实际业务场景 + 参数返回数组对象。
      // Do sth.
      // ************
      return [
        {
          label: '选项1',
          value: 1,
        },
        {
          label: '选项2',
          value: 2,
        },
        {
          label: '选项3',
          value: 3,
        },
      ];
    },
  };

  user: any = {
    username: 'le5le',
  };

  materials = {
    system: defalutMaterials,
    uploadUrl: '/api/file',
    uploadHeaders: {
      Authorization: 'your token',
    },
    uploadParams: {
      mydata: 1,
    },
  };

  data: any = {};

  created() {
    const data = (window as any).topologyData;
    // 预览页返回，存在缓存数据
    if (data) {
      this.data = { data: Object.assign({}, data) };
      setTimeout(() => {
        (window as any).topologyData = null;
      }, 200);
    } else {
    }
  }

  onEvent(e: { name: string; params: any }) {
    switch (e.name) {
      case 'logout':
        // 退出登录
        this.user = null;
        // Do sth.
        break;

      case 'openMaterialGroup':
        // 展开/折叠图标工具栏分组
        console.log('openMaterialGroup', e.params);
        // Do sth.
        break;

      case 'addMaterial':
        // 添加“我的组件”
        // Do sth. For example:
        this.$router.push({
          path: '/',
          query: { component: '1' },
        });
        break;

      case 'editMaterial':
        // 编辑“我的组件”
        // Do sth. For example:
        this.$router.push({
          path: '/',
          query: { id: e.params.id, component: '1' },
        });
        break;

      case 'open':
        // 导航菜单configs.menus里面定义的action
        // 比如这里表示打开文件
        break;
      case 'save':
        // 导航菜单configs.menus里面定义的action
        // 比如这里表示保存文件
        break;
      case 'addImageUrl':
        // 在“我的图片”里面添加了一张新图片
        // this.addImageUrl(e.params);
        break;
      case 'deleteImage':
        // 在“我的图片”里面删除了一张图片
        // this.deleteImage(e.params);
        break;
      case 'preview':
        // 点击工具栏“预览”

        // 保存当前编辑数据，方便预览时直接打开
        (window as any).topologyData = (window as any).topology.data;
        this.$router.push({
          path: '/preview',
          query: { id: 'xxx', r: '1' },
        });
        break;

      // ...
      // ...
    }
  }
}
</script>
<style lang="scss">
.home {
  height: 100vh;
}
</style>

vue部分代码：

<template>
  <div class="home">
    <!-- 使用topology组件 -->
    <topology :configs="topologyConfigs" :user="user" />
  </div>
</template>

<script>
import Vue from 'vue';
// 导入topology-vue组件
import topology from "topology-vue";
Vue.use(topology);
// 需要导入topology-vue.css
import "topology-vue/topology-vue.css";

export default {
  name: "Home",
  data: function () {
    return {
      topologyConfigs: {
        logo: {
          img: "http://topology.le5le.com/assets/img/favicon.ico",
          url: "http://topology.le5le.com",
          target: "_blank",
        },
        menus: {
          // back: {
          //   icon: "t-icon t-angle-left",
          // },
          // login: true,
          left: [
            {
              name: "文件(自定义菜单1)",
              children: [
                { name: "新建文件", keyboard: "Ctrl+N", action: "open" },
                { name: "打开文件", keyboard: "Ctrl+O", action: "loadNew" },
                { name: "导入文件", keyboard: "Ctrl+I", action: "load" },
                {},
                { name: "保存", keyboard: "Ctrl+S", action: "save" },
                { name: "另存为", keyboard: "Ctrl+Shift+I", action: "saveAs" },
                { name: "下载JSON文件", action: "downloadJson" },
                { name: "下载zip打包文件", action: "downloadZip" },
                {},
                { name: "导出为html", action: "downloadHtml" },
                {},
                { name: "下载为PNG", action: "downloadPng" },
                { name: "下载为SVG", action: "downloadSvg" },
              ],
            },
            {
              name: "编辑(自定义菜单2)",
              children: [
                { name: "撤销", keyboard: "Ctrl+Z", action: "undo" },
                { name: "恢复  ", keyboard: "Ctrl+Shift+Z", action: "redo" },
                {},
                { name: "剪切  ", keyboard: "Ctrl+X", action: "cut" },
                { name: "复制  ", keyboard: "Ctrl+C", action: "copy" },
                { name: "粘贴  ", keyboard: "Ctrl+V", action: "paste" },
              ],
            },
            {
              name: "我的菜单3",
              router: "/page",
            },
          ],
          // middle: [],
        },
        loginUrl: "https://account.le5le.com",
        signupUrl: "https://account.le5le.com",
        userMenus: [
          { name: "个人中心", router: "/user/home" },
          {},
          {
            name: "账号设置",
            url: "https://account.le5le.com/user/profile",
            target: "_blank",
          },
          {},
          { name: "退出", action: "logout" },
        ],
      },
    };
  },
};
</script>
<style lang="scss">
.home {
  height: 100vh;
}
</style>

vue部分的重点在于一些数据和方法的调用

2、设置用户登录

【前提】先设置congfigs.menus.login=true (默认值)
1动态绑定显示用户已登录

2、设置用户菜单
这里使用的是topologyConfig和userMenus两个数组数据

3. 退出登录
根据实际情况，配置用户菜单configs.userMenus中的菜单响应方式即可。
A. 可以跳转到vue路由处理;
参考菜单属性router配置：

B. 跳转新页面处理；
参考菜单属性url配置：

C. 通过发消息通知处理
参考菜单属性action配置，同时设置event事件函数：

<template>
  <div class="home">
    <!-- 使用topology组件 -->
    <topology :configs="topologyConfigs" :user="user" @event="onEvent" />
  </div>
</template>

<script>
// 导入topology-vue组件
import topology from "topology-vue";
// 需要导入topology-vue.css
import "topology-vue/topology-vue.css";

export default {
  name: "Home",
  components: {
    topology,
  },
  data: function () {
    return {
      topologyConfigs: {
        logo: {
          img: "http://topology.le5le.com/assets/img/favicon.ico",
          url: "http://topology.le5le.com",
          target: "_blank",
        },
        menus: {
          // back: {
          //   icon: "t-icon t-angle-left",
          // },
          // login: true,
          left: [
            {
              name: "文件(自定义菜单1)",
              children: [
                { name: "新建文件", keyboard: "Ctrl+N", action: "open1" },
                { name: "打开文件", keyboard: "Ctrl+O", action: "loadNew" },
                { name: "导入文件", keyboard: "Ctrl+I", action: "load" },
                {},
                { name: "保存", keyboard: "Ctrl+S", action: "save" },
                { name: "另存为", keyboard: "Ctrl+Shift+I", action: "saveAs" },
                { name: "下载JSON文件", action: "downloadJson" },
                { name: "下载zip打包文件", action: "downloadZip" },
                {},
                { name: "导出为HTML", action: "downloadHtml" },
                {},
                { name: "下载为PNG", action: "downloadPng" },
                { name: "下载为SVG", action: "downloadSvg" },
              ],
            },
            {
              name: "编辑(自定义菜单2)",
              children: [
                { name: "撤销", keyboard: "Ctrl+Z", action: "undo" },
                { name: "恢复  ", keyboard: "Ctrl+Shift+Z", action: "redo" },
                {},
                { name: "剪切  ", keyboard: "Ctrl+X", action: "cut" },
                { name: "复制  ", keyboard: "Ctrl+C", action: "copy" },
                { name: "粘贴  ", keyboard: "Ctrl+V", action: "paste" },
              ],
            },
            {
              name: "我的菜单3",
              router: "/page",
            },
          ],
          // middle: [],
        },
        loginUrl: "https://account.le5le.com",
        signupUrl: "https://account.le5le.com",
        userMenus: [
          { name: "个人中心", router: "/user/home" },
          {},
          {
            name: "账号设置",
            url: "https://account.le5le.com/user/profile",
            target: "_blank",
          },
          {},
          { name: "退出", action: "logout" },
        ],
      },
      user: {
        username: "le5le",
      },
    };
  },
  methods: {
    onEvent(e) {
      switch (e.name) {
        case "logout":
          this.user = null;
          // Do sth.
          break;
        // ...
        // ...
      }
    },
  },
};
</script>
<style lang="scss">
.home {
  height: 100vh;
}
</style>

还是老样子，导入对应的包，然后修改对应的配置

3、定制图标库工具栏

这个功能也是只有企业用户才能实现的

配置API中的configs.materialTabs

export const defalutMaterialTabs = [
  {
    name: '图纸',
    component: 'MaterialTopology'
  },
  {
    name: '系统组件',  // 显示名称
    component: 'MaterialSystem', // vue动态组件名称
    active: true  // 是否是活动标签
  },
  {
    name: '我创建的',
    component: 'MaterialUser'
  }
];

1. 图纸
   2
   通过文件夹形式展示用户绘画的图纸。配置API中的material.topology。

点击图纸触发event事件：

2. 系统组件
“系统组件”指公用组件，所有人都可以访问。
参考API配置materials.system属性即可。


配置一些图片的信息和属性
1.1 添加阿里字体图形库
【仅企业授权】支持把阿里字体作为图形库加载到工具栏。
使用方法：在materials.system中添加iconUrl类型的数据即可。例如：

defalutMaterials = [
  {
      iconUrl: '//at.alicdn.com/t/font_xxxxx.css', // 替换成真实的地址
      show: true,
      list: [],  // 此处留空数组就好，会自动填充
  }
  ...
]

1.2 加载企业组件js库
1）把企业js组件库放到public

）index.html中加载

3）加载到左边工具栏

4.我出创建的组件（自定义组件）

“我创建的”指用户在线编辑的组件或上传

以上是关于le5le-topology智能绘图引擎——学习笔记的主要内容，如果未能解决你的问题，请参考以下文章

le5le-topology智能绘图引擎——学习笔记

Topology智能绘图引擎学习笔记——Topology的安装

Topology智能绘图引擎源码分析——项目结构目录梳理

Topology可视化绘图引擎

乐吾乐le5le-Topology为智慧水务可视化赋能

乐吾乐le5le-Topology为智慧水务可视化赋能