互動式和非互動式_管理和釋出您的互動式組織結構圖

互動式和非互動式

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/

互動式和非互動式