交互式和非交互式_管理和发布您的交互式组织结构图

交互式和非交互式

vueOrgChart (vueOrgChart)

Organization chart Static website (no webserver required) to generate an interactive organisation chart (c) Michael Hoogkamer.

组织结构图静态网站(不需要Web服务器)以生成交互式组织结构图(c)Michael Hoogkamer。

Manage and publish your interactive organization chart (orgchart), free and no webserver required.

免费管理和发布您的交互式组织结构图(orgchart)，无需网络服务器。

View demo 查看演示 Download Source 下载源

用作静态网站 (Use as static website)

You can use it as-is as a static website: no install, no webserver needed!

您可以按原样使用它作为静态网站：无需安装，不需要网络服务器！

1. Copy content of \docs folder to any location, like a folder on your computer, AWS S3 bucket or webserver

   将\ docs文件夹的内容复制到任何位置，例如计算机，AWS S3存储桶或Web服务器上的文件夹

2. Open index.html in the browser. When you use Internet Explorer it will not work if you placed the files on a folder (Chrome does work). S3 or webserverer will work for both browsers

   在浏览器中打开index.html。 当您使用Internet Explorer时，如果将文件放在文件夹中(Chrome可以使用)，它将无法使用。 S3或Webserverer均可在两种浏览器上使用

配置 (Configure)

var CONFIG = {
  title: {
    color: '#05668d',
    text: 'Interactive organization chart'
  },
  photoUrl: {
    prefix: 'photos/',
    suffix: '.png'
  },
  linkUrl: {
    prefix: 'photos/',
    suffix: '.png'
  },
  startView: {
    photos: true,
    names: true,
    columnview: true,
    staffColumnview: false
  },
  enableScreenCapture: true,
  levelColors: ['#0c058d', '#05668d', '#8d6e05', '#8d2305', '#cfb303']
}
           

The config file is in /config.js or if you want to build yourself in /static/config.js

配置文件位于/config.js中，或者如果您想在/static/config.js中进行构建

• You can set the header color and title, and the colors of each level in the orgchart

  您可以设置标题颜色和标题以及orgchart中每个级别的颜色

• The position where to get the photo's For these locations it is fetched from "prefix" + photo + "suffix". So if you have photo P0001, it will be fetched from "photos/P0001.png". If you have an api or other locations which delivers photo's based on the photo field you can change that here.

  获取照片位置的位置对于这些位置，它是从“前缀” +照片+“后缀”中获取的。 因此，如果您有照片P0001，将从“照片/P0001.png”中获取。 如果您有api或其他位置，可以根据照片字段提供照片，则可以在此处进行更改。

• The linkUrl It will open a new tab to navigate to that page when clicked in the sidescreen on a person. In this example it will just fetch the photo in a new tab, but if you have an api which shows a user profile page you can enter the location here. startView sets the inital options (the user can change them in the menu bar)

  linkUrl在人的侧屏中单击时，它将打开一个新选项卡以导航到该页面。 在此示例中，它将仅在新选项卡中获取照片，但是如果您有显示用户个人资料页面的api，则可以在此处输入位置。 startView设置初始选项(用户可以在菜单栏中更改它们)

• Enable screen capture This shows the icon to make an image of the graph to save. This does not work when you are on a local folder, so disable this option then

  启用屏幕捕获这将显示图标以保存要保存的图形图像。 当您在本地文件夹上时，此功能不起作用，因此请禁用此选项

网站使用手册 (User manual for website)

• Options > Column view:

  选项>列视图：

  Shows underlying departments in a column, giving a compact overview. You can also prevent this for staff departments

  在列中显示基础部门，以提供简洁的概述。 您也可以防止人事部门这样做

• Options > Show manager photo/Show manager name

  选项>显示经理照片/显示经理姓名

  Show/hide the photos and/or names in the graph

  显示/隐藏图中的照片和/或名称

常问问题 (FAQ)

• How can I change/edit the graph? Type _edit in the searchbar to swith to editmode. Now you can edit the graph in the application or update via excel

  如何更改/编辑图形？ 在搜索栏键入_edit到开关等以编辑模式。 现在您可以在应用程序中编辑图形或通过excel更新

• How does editing work in the application?

  编辑在应用程序中如何工作？

  • Left-click on a department and edit the name, description of type staff in the left screen. To change the manager, press the pencil and search for the right person. You can also add a new person, by filling in a name and id. First unselect the current manager then, if the department already has a manager

    左键单击一个部门，然后在左侧屏幕中编辑人员的名称和描述。 要更换经理，请按铅笔并搜索合适的人。 您还可以通过填写姓名和ID来添加新人员。 首先取消选择当前经理，然后(如果部门已经有经理)

  • Add people the same way (use the people tab in the left screen). You can also provide the role the person has in the department

    以相同的方式添加人员(使用左侧屏幕中的人员标签)。 您还可以提供人员在部门中所扮演的角色

  • Right-click on a department in the chart to add a department below

    右键单击图表中的部门以在下面添加部门

  • With right-click you can also move a department: select Cut, then click on another department and right-click and select paste. Do not paste a parent under one of its children (this check has to be build)

    右键单击，您还可以移动一个部门：选择“剪切”，然后单击另一个部门，然后右键单击并选择“粘贴”。 请勿将父项粘贴到其子项之一下(必须进行此检查)

• How does editing work in excel? Select File > Export excel. It contains:

  如何在Excel中进行编辑？ 选择“ 文件”>“导出excel” 。 它包含了：

  • chart: id, name, description, parent, indicator for staff department, and id of the manager (from the people tab)

    图表：ID，名称，描述，父母，员工部门的指示器以及经理的ID(从“人员”选项卡中)

  • people: id, name, link to photo (see also config.js above), and main role/function of the person

    人员：ID，姓名，照片链接(另请参见上面的config.js)以及人员的主要角色/功能

  • assignment: department id (from chart tab), person id (from people tabl) and role. These are the people working for the department. (manager is assigned in the chart tab) People can be assigned to multiple departments, or even more times to 1 department (with different role for example)

    分配：部门ID(来自图表选项卡)，人员ID(来自人员选项卡)和角色。 这些是为部门工作的人。 (在“图表”选项卡中分配了经理)可以将人员分配给多个部门，甚至可以多次分配给1个部门(例如，角色不同)

  When done, select File > Import excel

  完成后，选择“ 文件”>“导入excel”

• How do I save the changes for others to see? Everything happens at client side, so changes are only available for you. And if you refresh the page the changes will be gone. To make the changes persistent you must select File > Generate inputfile to create a javascript file which contains the data. This file (data.js) you then must place in the root folder this application is at, replacing the already existing file data.js

  如何保存更改以供其他人查看？ 一切都发生在客户端，因此更改仅适用于您。 如果刷新页面，更改将消失。 要使更改持久化，必须选择“ 文件”>“生成输入文件”以创建一个包含数据的javascript文件。 然后，您必须将此文件(data.js)放置在此应用程序所在的根文件夹中，以替换已经存在的文件data.js

• Who can edit the graph? Anyone can edit, but as stated above, it will be only available for that person. To make the data available for others, you need write access to the folder this application is at, so you can overwrite the data.js file

  谁可以编辑图表？ 任何人都可以编辑，但是如上所述，它仅适用于该人。 为了使数据可供其他人使用，您需要对该应用程序所在的文件夹具有写访问权，因此您可以覆盖data.js文件

• How do I change the order of the departments under a parent? This is not directly supported. There are 2 possibilities however. First switch to editmode. 1) export to excel, then change the order in the sheet, and then read the excel in again 2) cut the department, and paste it under the same parent again. It will be placed last.

  如何更改家长下属部门的顺序？ 不直接支持。 但是，有两种可能性。 首先切换到编辑模式。 1)导出到excel，然后更改工作表中的顺序，然后再次阅读excel。2)剪切部门，然后再次将其粘贴到同一父项下。 它将被放置在最后。

• Why does running from a local folder not work in Internet Exporer? I do not know, it has something to do with routing. I could use some help with that :) It does work in Chrome however, and running from a webserver or S3 bucket works for both browsers

  为什么从本地文件夹运行在Internet Exporer中不起作用？ 我不知道，这与路由有关。 我可以为此提供一些帮助:)但是它确实可以在Chrome浏览器中运行，并且可以从网络服务器或S3存储桶运行两种浏览器

构建设置 (Build Setup)

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm start

# generate static project
$ npm run generate
static output will be place in \dist folder, copy this to any location
           

翻译自: https://vuejsexamples.com/manage-and-publish-your-interactive-organization-chart/

交互式和非交互式