標籤: VMI

利用 JavaScript D3 在網頁動態產生直條圖（軟體開發、軟件開發）

       最近因為我再次改版窗簾產業的ERP軟體(~~窗簾產業真的是產品格式最多樣化，這又是個革命的軟體了，以及為了這個領域投入許多知識與時間~~)，以及又承接越南的，讓我沒有多餘時間可以分享技術文章，剛好近來網智數位開發團隊又承接南部大廠、以及群創工廠所需要的軟體開發案，需要用到大量的程式繪圖技術，之前我們如果遇到繪圖技術通常開發團隊都選擇用Windows Form 或 WPF相關技術直接程式繪圖產生，或者如果是企業商業軟體，我們常用報表開發工具，來產生一系列的數據圖表，有利於系統使用者，看圖來判斷數據、以利作決策分析、異常辨識統計，但這次客戶全部要求都是WEB化的資訊系統建置，所以我們全部採用了 Java Script 直接繪圖及時動態產生圖表。

       也因為這樣所以我選擇寫一篇利用 Java Script D3 程式技術來示範教學，如何動態產生直條圖（當然也可以產生各式各樣的圖表、例如折線圖），不過這篇技術文章，我假設前提是讀者已經非常熟析Java Script 以及 HTML CSS 語法，也對 D3 有初步認識，或許以後我有機會也會補充撰寫 Java Script 與 D3 的文章。

該案例執行結果畫面

在這個案例你首先要先下載 D3.js library (可以到 https://d3js.org/ 去下載最新的 D3.js 檔案，來引入在網頁理）

如下列程式碼，我就在 head 直接引用d3.js

<head>
     <meta charset="utf-8″>
     <title>利用Java Sciprt Array 來產生圖表（網智數位）</title>
     <link rel="stylesheet" type="text/css" href="styles.css"/>
     http://d3.js
</head>

接下來底下我寫了一個最主要的核心 Java Scirpt 程式碼

     var data = [   //          {width: 30, color: 23},{width: 35, color: 33},
         {width: 50, color: 40},{width: 30, color: 60},
         {width: 60, color: 22},{width: 65, color: 10},
         {width: 65, color: 5},{width: 30, color: 30},
         {width: 30, color: 60},{width: 70, color: 90},
         {width: 15, color: 10}
     ];

     var colorScale = d3.scale.linear()
         .domain([0, 100])
         .range([“#add8e6″, “blue"]);   //

    function render(data) {
         d3.select(“body").selectAll(“div.h-bar")
             .data(data)
             .enter().append(“div")
                 .attr(“class", “h-bar")
             .append(“span");

        d3.select(“body").selectAll(“div.h-bar")
             .data(data)
             .exit().remove();

        d3.select(“body").selectAll(“div.h-bar")
             .data(data)
                 .attr(“class", “h-bar")
                 .style(“width", function (d) { //                      return (d.width * 5) + “px"; //                  })
                 .style(“background-color", function(d){
                     return colorScale(d.color); //                  })
             .select(“span")
                 .text(function (d) {
                     return d.width; //                  });
     }

    function randVal() {
         return Math.round(Math.random() * 100);
     }

    setInterval(function () {
         data.shift();
         data.push({width: randVal(), color: randVal()});
         render(data);
     }, 1500);

    render(data);

程式邏輯講解
程式碼A，主要是一堆有 Json 物件組成的陣列，而存在在變數 data 裡，這邊我只是單純為了講解，所以直接在程式開頭就把數據全部宣告起來，實務上在開發中，應該及時讀取後端資料庫、或者 WebAPI，取得 Jason 物件陣列.

程式碼B,主要是利用D3的一個 Scale 函數，這個函數可以接受一個數字參數，而轉換為標準的 CSS 顏色值。這個可以在程式碼E區段，套用漸層顏色的效果。

程式碼C，主要是利用 D3的選擇函數傳回的所有集合物件（就是網頁的HTML 標籤元素，在這邊是 div)，套用在每個DIV的 Style 屬性，這邊我直接控制 Width 屬性，這樣就可以變更每個div元素的寬度尺寸。

程式碼D，宣告了一個function(d)，而這個 d 參數實際上就是代表程式碼A裡 data 變數陣列的每個數據物件（Json）

function (d)
{
return (d.width * 5) + “px";

//這邊我可以直接使用 d.width ，因為 d 就是個jason物件, 而且擁有 width 屬性

}

程式碼E，套用 D3的 Scale函數，使得有漸層效果。

程式碼F，在透過 D3的 Select 函數，選取 <div> 裡面的子元素 <span>，然後在透過標準的 HTML DOM 支援的 text() 函數，動態設定數字文字。

其他參考文章
HTML CSS 動畫教學–【軟體開發（軟件開發）】
繪圖程式-折線圖、區域圖實作一
（軟體開發、軟件開發、程式開發）產品報告與能源曲線分析系統

網智數位-軟體開發（軟件開發）
針對各特殊產業都可以量身定做符合貴公司的需求，別人無法克服的就是我們的挑戰
業務合作、軟體委外開發
業務窗口：allen@netqna.com
聯繫電話：0920-883-870
公司電話：02-5599-1310
skype： netqna
line：netqna
微信：netqna
黃先生 Allen

使用 Task 自行控制非同步任務作業【軟體開發、軟件設計、客製化軟體、軟體設計】

在之前我寫過兩篇關於使用 Parallel 類別進行多任務的平行作業，1.透過 Parallel 類別操控多任務平行作業(一)。 2.透過 Parallel 類別操控多任務平行作業(二)。 , 但因為使用 Parallel 類別雖然方便，因為都被.Net 包裝著很好，各自的執行緒任務獨自運作，如果有時我們想要更進一步的控制每個平行任務任務時，就必須使用 Task<TResult> 與 Task 類，這兩個類別可以有效地自行控制建立非同步任務，可以由程式開發人員決定什麼時候要啟用任務、什麼時候要中斷任務。

（補充）Task<TResult> 類別是從 Task 類別衍生而來，兩者主要差異是，前者是帶一個 泛型參數，也表示任務執行完畢要返回的類型值。

這邊為了簡單講解 Task 類別的用法，為了好示範講解，一樣透過新增一個 Windows Form 專案，在對應的控制箱事件，撰寫核心程式碼….不過在看實際範例程式碼教學時，我先介紹如何三種使用 Task 任務的技巧：

（1）直接使用 Task.Run()的靜態方法，該方法一旦被呼叫，就會馬上進行非同步化任務，而呼叫也會返回一個 Task 實體物件。

（2）新增一個 Task 物件時，傳遞一個委派方法至建構函數，當建立一個 Task 實體物件時，不會馬上執行非同步任務，而是要手動呼叫 Start() 方法，才會開始執行非同步任務。

（3）Task 與 Task<Result> 類別都有公開一個 Factory 靜態屬性，該屬性返回一個 TaskFactory 或 TaskFactory<Result>類別，我們必須再透過 TaskFactory 對應的方法來啟用非同步任務作業。

(實作過程)

步驟 1：

透過 Visual Studio 2017 來建立一個 Windows Form 專案。

步驟 2：

在 Form1 表單，我設計版面與拖拉相關控制項至主畫面，有一個 Label （用於顯示標題，Text =“輸入一個正整數值：” ; 兩個 TextBox （分別用於讓使用者輸入一個正整數、與顯示非同步任務執行完畢時，要顯示的結果值）；還有一個 Button 控制項（Text =“開始計算任務” , Name =”btnExecTask”） ; 最後還有一個 ProgressBar , 目的是要 Task 執行非同步作業時，可以及時更新進度，通知目前作業進度表給使用者。

主畫面截圖如下：

步驟 3 :

在 Button 按鈕的 click 事件撰寫主要的核心程式碼：

private void btnExecTask_Click(object sender, EventArgs e)
{
uint calcNum = 0;

     if (!uint.TryParse(this.txtNumValue.Text, out calcNum))
      {
          MessageBox.Show(“請輸入一個正整數數字！！");
          return;
      }

//進行更新進度表
IProgress<int> progress = new Progress<int>((p) => progressBar1.Value = p);

     //宣告一個 Task 類型變數
      Task<long> task = new Task<long>(() =>
      {
          long result = 0L;
          for (int i = 1; i <= calcNum; i++)
          {
              //累加值
              result += i;

//進度值
double currProgress = Convert.ToDouble(i) / Convert.ToDouble(calcNum) * 100d;

             //向主執行緒主畫面進行更新進度條
              progress.Report(Convert.ToInt32(currProgress));
          }

return result;
});

this.txtResult.Text = “目前正在執行計算過程中……";

//任務手動啟動
task.Start();

//等待任務執行完畢過程中，將按鈕先停用，以防止重複執行
this.btnExecTask.Enabled = false;

     while (!task.Wait(100))
      {
          //在等待過程，允許程式繼續處理其他佇列訊息
          Application.DoEvents();
      }

//任務執行完畢，重新啟用按鈕
this.btnExecTask.Enabled = true;

//顯示計算結果
txtResult.Text = “任務執行完畢，計算結果值為：" + task.Result.ToString();

}

PS.主要程式碼解釋，我都寫在程式碼註解，寫得還滿詳細的….

步驟 4：

執行 compile ，進行測試執行吧…

參考文章

C#多工作業與平行處理技術講解

1.透過 Thread 類別撰寫多執行緒多工作業。

2.透過 Delegate 委託支援的方法，撰寫非同步任務。

3-1.透過 Parallel 類別操控多任務平行作業(一)。

3-2. 透過 Parallel 類別操控多任務平行作業(二)。

4.使用 Task 自行控制非同步任務作業。
5.在非同步作業時，如何取消非同步任務。

6.多執行緒多任務存取相同變數，但卻各自隔離保留各自任務的值。

7.非同步存取變數的問題。

8.非同步資源鎖定解決方式。

網智數位-軟體開發（軟件開發）

針對各特殊產業都可以量身定做符合貴公司的需求，別人無法克服的就是我們的挑戰

業務合作、軟體委外開發

業務窗口：allen@netqna.com

聯繫電話：0920-883-870

公司電話：02-55991310

公司地址（業務營運處）：台北市中山區錦州街 25 號 5 樓

skype： netqna

line：netqna

微信：netqna

黃先生 Allen

如何利用管理軟體來協助企業的銷售統計和分析（軟體開發、系統分析、管理軟體、客製化軟體）

一家公司隨著營運的時間越久，所擁有的客戶資料、訂單資料、出貨資料、銷售成本資料等等，這些有價值的資料訊息，如果會很好地透過資訊系統、管理軟體來加以利用與分析，那麼可以有效協助企業進行更有競爭力的營運面向，而今天所謂銷售統計和分析是指對企業實際銷售的事後歸納與產出建議分析，這樣一來不僅可判別實際工廠生產經營是否已達到預期的目標、或者商品買賣利潤是否最大化，而且我們可以透過資訊管理軟體從中可以發現企業營運流程存在的各種問題，例如，實施的策略是否正確、組織機構是否適應、應變措施是否得當等。

然而再進行銷售統計分析的依據是具體而準確的每日日常銷售記錄，而好的管理軟體，如 ERP系統就會為各種訂單、出貨記錄資訊進行有效收集和維護，也提供了有力支持。　

　　銷售的統計分析可以根據需要採用不同的思考方式來進行，例如我舉例我歷年幫客戶比較常進行的分析項目有大致如下：

·分類帳目分析：將分類帳目中所列各種銷售費用帳目的數值，如：運輸費用、委外加工費、差旅費、廣告費、郵電費、網路行銷費用、銷售佣金和特殊費用（如接待費等）進行加總統計，計算出各類費用佔總銷售額的百分比，然後進行分析對比，如：各類費用年內變化情況、各類費用比例與以往不同年度對比、各類費用比例與同行業對比、各類費用之間比例關係對比、歷年費用交叉分析比對等等。

　　·具體銷售功能與成本分析：將分類帳目所列銷售費用帳目按功能分類，然後再予以分析。至於功能如何劃分則常因企業不同而異。

　　（一）直接銷售費用：如各門市部、維修服務部的辦公費用、銷售人員工資、差旅費、伙食費等。

　　（二）間接銷售費用：如銷售人員的在職教育培訓費用、管理人員的薪水及市場研究費、銷售統計費等。

　　（三）其它銷售費用：如廣告費、運輸費、存儲費、分期付款所佔資金的利息等。

　　·市場單位銷售成本分析：將銷售費用按照不同的市場單位進行分析，然後與上述兩類分析進行聯合對比，以分析各類市場對企業經營狀況的影響。市場單位的劃分可採用銷售地區、產品類別、客戶類型、訂貨量的大小等不同方法，要根據需要而定。

　　銷售分析必須蒐集各種必要的統計資料。統計報表提供的主要資訊可能包括些許項目：交運資料（交運地點、日期、交運額）、銷售數量、銷售額、銷售成本、稅務信息，銷售代理商及銷售物料資料等等等。統計的時間範圍一般為 l～5年，可以按年度進行匯總比較，也可以按時段（通常為月度）進行　　比較。這是一類時間序列型縱向統計資料，適用於趨勢分析。

統計的口徑根據不同的目標可選用：按客戶分類統計、按銷售代理分類統計、按銷售物料代碼分類統計、按銷售地區代碼分類統計、按市場領域進行分類統計（如行業分類）以及按交運日期、地點等分類統計。分類統計的目的是為了進行橫向比較分析，以利於進行市場研究決策、制訂銷售戰略。

銷售統計報表的資料不僅與SD模塊有關，而且還依賴於成本核算中的各種開票接口資訊。因而，銷售統計報表不但反映了實際銷售完成的情況、檢驗計劃的合理性，而且還有利於分析銷售管理的投入產出關係，進行各種策略下的盈虧分析。如：增加廣告宣傳費用對銷售的影響、採用效益掛鉤或數量折扣政策對銷售的影響等。

（其他參考文章）
MPS主生產計畫專文介紹(一)
MRPⅡ/ERP 能力需求計畫原理
 庫存管理-概念與釐清
 庫存管理探討-VMI
真正的庫存量形成探討
 庫存管理的中樞控管法則（上）
庫存管理的中樞控管法則（下）
BOM表管理與設定﹣輔料是否需輸入BOM
何謂進銷存、ERP、WMS？三者差異性【軟體開發、軟件開發、程式設計】
ERP 產品成本管理與計算
 庫存量正確性衡量法則
 粗能力需求計畫(RCCP) – 專文介紹
 如何利用軟體來協助企業銷售統計和分析

網智數位-軟體開發（軟件開發）
針對各特殊產業都可以量身定做符合貴公司的需求，別人無法克服的就是我們的挑戰
業務合作、軟體委外開發
業務窗口：allen@netqna.com
聯繫電話：0920-883-870
公司電話：02-55991310
公司地址（業務營運處）：台北市中山區錦州街 25 號 5 樓
skype： netqna
line：netqna
微信：netqna
黃先生 Allen

透過 Delegate 委託支援的方法，撰寫非同步任務（軟體開發、客製化軟體、系統設計）

此篇文章主要是延續之前的文章【C#多工作業與平行處理技術講解】，講解與實作如何在利用強大的透過 Delegate 委託支援的方法，撰寫非同步任務，這裡一樣我會透過簡單程式碼進行實作教學。

在.Net 平台的委派類型（Delegate)自身就可以很容易地使用非同步作業，因為只要是委派（Delegate)類型都一點有 BeginInvoke 以及對應的 EndInvoke() 這 2 個非同步操作方法，所以我們就可以非常容易地透過委派實體直接使用非同步任務。

在這邊我一樣使用 Windows Form 來做示範（因為比較單純可以講解程式技巧，所以不要問我為何不用 ASP.NET MVC)，整個實作範例畫面為如下圖：

步驟1 ：

在 Visual Studio 新增一個 Windows Form 專案，我們準備拖拉幾個控制箱來達成主要結果畫面，分別有

Label 控制箱（Text = 基數）、Button 按鈕控制箱（Text = 進行計算作業 , Name = btnDelegateInvoke）、ProgressBar控制箱（用於顯示非同步作業的進度）、TextBox 文字方塊（Name = txtResult , 用於顯示執行計算結果）。

步驟 2：

在 Button 控制箱（name = btnDelegateInvoke）的 Click 事件，撰寫主要核心代碼：

private void btnDelegateInvoke_Click(object sender, EventArgs e)
{
     int baseNum = default(int);
     if (!int.TryParse(txtBaseNum.Text, out baseNum))
     {
         MessageBox.Show(“請輸入一個正整數哦！");
         return;
     }

txtResult.Clear();

    // 顯示進度表的狀態
     IProgress<int> progressReporter = new Progress<int>((p) =>
     {
         this.progressBar1.Value = p;
     });

    // 計算階乘的委派實體
     Func<int, BigInteger> ComputeNumValueAction = (bsNum) =>
         {
             BigInteger bi = new BigInteger(1);
             for (int i = 1; i <= bsNum; i++)
             {
                 bi *= i; //相乘
                 // 用於計算目前進度
                 double ps = Convert.ToDouble(i) / Convert.ToDouble(bsNum) * 100d;
                 progressReporter.Report(Convert.ToInt32(ps));
             }
             return bi;
         };

    // 開始呼叫使用
     btnDelegateInvoke.Enabled = false;
     ComputeNumValueAction.BeginInvoke(baseNum, new AsyncCallback(FinishedCallback), ComputeNumValueAction);

}

程式碼邏輯講解：

1.在 Progress<T> 是實現 IProgress<T> 介面，所以這裡可以透過它支援的 Report()方法來報告目前非同步的操作進度數據，該對象在進度更新後，是允許使用者直接繼續操作主畫面的，例如拖拉。

2.Func<int,BigInteger> 委派，代表自身帶有一個 int 類型的參數，而返回的值類型為 BigInteger，這邊我特別用 BigInteger 類型，因為在計算階乘的計算結果，可能數字會非常大，會超出 long 類型的最大值。

3.在開始進行使用委派（Delegate）支援的BeginInvoke方法時，必須再使用一個 AsyncCallback 委派，該委派主要是用於綁定一個方法，在檔非同步任務完成時，可以呼叫的回調方法，並且再回調方法中，再次調用 Delegate.EndInvoke方法來捕捉計算結果。

我們直接看 AsyncCallback 綁定的 FinishedCallback 方法。

private void FinishedCallback(IAsyncResult ar)
{
     // 取出委派變數
     Func<int, BigInteger> action = (Func<int, BigInteger>)ar.AsyncState;
     // 求得計算結果
     BigInteger res = action.EndInvoke(ar);
     this.BeginInvoke(new Action(() =>
     {
         btnDelegateInvoke.Enabled = true;
         // 顯示計算結果
         txtResult.Text = string.Format(“計算結果：{0}", res);
     }));
}

上述程式碼撰寫完畢後，就可以編譯執行，在基數欄位輸入一個正整數，就可以進行非同步的計算階乘作業。

參考文章

C#多工作業與平行處理技術講解

1.透過 Thread 類別撰寫多執行緒多工作業。

2.透過 Delegate 委託支援的方法，撰寫非同步任務。

3.透過 Parallel 類別操控多任務平行作業。

4.使用 Task 自行控制非同步任務作業。

5.在非同步作業時，如何取消非同步任務。

6.多執行緒多任務存取相同變數，但卻各自隔離保留各自任務的值。

7.非同步存取變數的問題。

8.非同步資源鎖定解決方式。

黃先生 Allen

何謂進銷存、ERP、WMS？三者差異性【軟體開發、軟件開發、程式設計】

現在企業公司行號幾乎多少都會導入管理軟體（不論是是買現成的套裝軟體、請軟體顧問公司導入系統、企業內部自行研發）的手段來提升企業營運管理水平、降低作業成本、提高客戶滿意度或企業市場競爭力，當然因為透過軟體提升的價值，已受到越來越多的企業認可。

    企業業務資料管理軟體，主要有以下三大分類：倉庫管理軟件(WMS)、進銷存管理系統、ERP（企業資源規劃），那麼到底它們有什麼區別和關聯性呢？在這裡我想根據個人從業經驗做個簡單的總結歸納：
一、功能上的共性
      WMS、ERP、進銷存軟體都包含倉庫管理模塊，這是這三個軟件的最大共性。
      倉儲管理（包括原料、半成品、成品管理）又恰恰是多數企業內部管理中最重要的部分：採購、生產、銷售都是以庫存管理為連接點，庫存也是生產企業的最重要的成本。這也是三大管理軟體讓人產生混淆的原因。

二、功能上的區別
     1、ERP：
        （1）支持財務會計的精細化管理。通常起源於財務系統，所以對財務會計有精細化的支持，很多ERP中的財務模塊都經過了國家財務部門的認證。
        （2）產品結構管理（BOM）。 ERP參與銷售計劃、採購計劃、生產計劃的管理，BOM就成為物料需求計劃的基礎。
        （3）物料需求計劃（MRP）。由成品銷售計劃，生成原材料的採購計劃和半成品、成品的生產計劃。除了BOM的計算外，還涉及到採購在途、半成品庫存、成品庫存、   生產在途、外協在途等所謂“8大量”複雜參與計算。

       2、進銷存管理軟體：
         可以理解為減少了BOM和MRP功能的ERP。
         BOM和MRP是ERP的精髓，但是在國內多數企業中，物料需求因為企業內部、外部的諸多原因，不能“計算”出來（比如原材料的採購計劃，和供應商的供應週期很大關係，也涉及到企業對外部市場的分析，例如：加大緊俏物質的採購量等），所以BOM和MRP成為“看上去很美”的功能，在很多企業的ERP項目實施中，其實都沒有使用到這個功能，實際上只是一個進銷存系統而已。

       3、WMS：
       和進銷存管理系統（軟體）比較，專業的WMS有以下功能變化：
      （1）加入了更多的作業策略管理和精細化作業
具體的說，進銷存軟體是對企業的業務數據進行“事後記錄”，有貨品出入庫時，在進銷存軟件中進行登記和單據打印。而WMS需要在業務實際發生前做出操作指引，比如說上架建議、揀貨策略等等，根據軟體設定的規則做智能化的分析，形成倉管員的最優化的操作指引。軟件的操作記錄，也更能反應實際情況，比如進銷存軟件往往不能支持一種物料入庫時擺放到多個倉儲位的情形，只簡單給一個倉儲位（WMS是在物料入庫前，就自動分析出需要擺放多個倉儲位和具體的、最優化的推薦倉儲位）。

（2）弱化了價格和財務管理功能
專業的WMS往往應用在第三方物流企業，所以物料進倉時不必關注採購價格，而是關注倉租費等物流費用的計算，所以WMS弱化了價格和財務管理。當然wms也會應用到製造企業。因為價格和財務管理在很多製造企業中是獨立運作的，加上財務管理本身的規範性和財務軟件的標準化，所以很多中型的製造企業採用的是“倉庫管理軟體+財務管理軟體“的模式進行管理。

（3）增加了“計費引擎”模塊
WMS增加了獨有的“計費引擎”模塊，為物流計費提供支持。物流行業的計費規則往往非常複雜，比如倉儲企業的倉租費用就包括：包倉、重量、托盤數、體積、物料屬性、入庫時間、期間天數等多個條件的排列組合，同時在加打折、分級價格等等因素，計費引擎的技術含量不亞於ERP的MRP計算。在製造企業中，計費引擎也可以幫助企業進行成本分析，計算倉庫的使用成本。

網智數位-軟體開發（軟件開發）
針對各特殊產業都可以量身定做符合貴公司的需求，別人無法克服的就是我們的挑戰
業務合作、軟體委外開發
業務窗口：allen@netqna.com
聯繫電話：0920-883-870
skype： netqna
line：netqna
微信：netqna
黃先生 Allen