截圖_20210314_115821.png

專案簡介

此專案為一個醫療軟體開發公司發案

目前他們開發的某個診所系統希望加入一個牙醫標示系統dental-chart

由於業主希望能將dental-chart這個功能完全的分離成獨立元件

因此這個專案需要用Web Component建立dental-chart

透過JS的原生event與外部溝通

Web component可依照指定的資料格式render出dental-chart

並且可以提供篩選乳齒恆齒、自動調整大小、標示牙齒治療情況等功能

主要使用技術

Vue.js

主要採用Vue建立Web Component

Vue CLI已經將Web Component打包機制做的很方便

用Vue也可以讓架構比較好維護

HTML SVG

透過HTML原生的SVG Path元件

可以很容易畫出牙齒這種不規則的圖案

牙齒座標規劃

dental-chart svg座標.png

牙齒一共分為三種形狀：上排恆齒(有牙根)、下排恆齒(有牙根)、乳牙(無牙根)

在開始用Web畫牙齒之前

我先用手繪的方式規劃好各種牙齒類型的座標

基本上只要規劃好每顆牙齒圖的轉彎位置與原點(左上)的相對格數座標即可

截圖_20210314_120027.png

座標規劃好之後

用Web很快就能畫出來

牙齒標記(treatment)

這個是最主要的功能

牙醫需要在診療的時候

快速的標示牙齒的健康情況或是治療情況

這個標記稱為treatment

treatment有兩種樣式：背景色(如牙齒18、17)、符號(如牙齒16、15)

截圖_20210314_120545.png

而正方形的區塊內的每個符號都相同的時候

則合併為一個大符號

以下方這個GIF來說

牙齒22因為中間的五個牙面符號不完全相同

因此都是各自獨立顯示treatment符號

而牙齒25因為中間的五個牙面符號都相同

最後就會合併成一個大符號

Peek 2021-03-14 12-12.gif

自動調整大小功能

為了因應各種裝置

而且業主使用這個dental-chart也需要能從外部控制大小

因此需要一個自動調整大小的功能

作法其實很簡單

因為牙齒都是固定數量

所以Web Component提供一個EventListener監聽外部希望呈現的寬度大小

dental-chart收到寬度異動之後

用這個寬度就可以反推每顆牙齒的大小

另外為了美觀dental-chart有限制每顆牙齒最大、最小的尺寸

如果因為最小尺寸的限制造成寬度不夠所以有加上css的overflow: auto設定

完整Demo

完工感想

整個專案做下來的感想

Web Component讓專案可以很容易把獨立的功能切乾淨

可以避免發包、承包雙方需要互相遷就對方的架構

透過JS原生Event即可互相傳遞資料

Web Component算是一個很不錯的solution

Dental Chart Web Component