新增 sis sid 折線圖

script/js/r03.js

@@ -421,70 +421,70 @@ function displayChart(monitor, label, unit, charts) {
     if (window.chart != undefined) {
         window.chart.destroy();
     }
-    charts.forEach(function (chart) {
-        Object.keys(chart).forEach(function (key) {
-            if (key == "Date") {
-                date.push(chart[key]);
-            } else if (key == "WarningValue") {
-                let value = 0;
-                if (chart[key].includes("±")) {
-                    value = chart[key].split("±")[1];
-                }
-                warning1.push(+value);
-                warning2.push(-value);
-            } else if (key == "ActionValue") {
-                let value = 0;
-                if (chart[key].includes("±")) {
-                    value = chart[key].split("±")[1];
-                }
-                action1.push(+value);
-                action2.push(-value);
-            } else {
-                SIS.push(key);
-                data.push(chart[key]);
-            }
-            console.log("key: " + key + " value:" + chart[key]);
-        });
-    })
 
-    var datasets = [{
-        label: "警戒值+",
-        data: warning1,
-        borderColor: "#FF0000",
-        pointRadius: 0
-    }
-        ,
-    {
-        label: "警戒值-",
-        data: warning2,
-        borderColor: "#FF0000",
-        pointRadius: 0
-    }];
+    // console.log(charts);
 
     if (type == "SIS" || type == "SID") {
-
-        for (i = 0; i < date.length; i++) {
-            SIS_data[date[i]] = [];
-            for(j=0; j<data.length; j+=date.length){
-                SIS_data[date[i]].push(data[j]);
+        SIS_data["depth"] =  [];
+        SIS_data["warning1"] =  [];
+        SIS_data["warning2"] =  [];
+        SIS_data["action1"] =  [];
+        SIS_data["action2"] =  [];
+        SIS_data["data"] = {};
+
+        charts.forEach(element => {
+            var sis_date = element["Date"];
+            var sis_warning = element["WarningValue"].split("±")[1];
+            var sis_action = element["ActionValue"].split("±")[1];
+            delete element["Date"];
+            delete element["WarningValue"];
+            delete element["ActionValue"];
+
+            var sis_data_length = Object.keys(element).length;
+            SIS_data["data"][sis_date] = [];
+
+            for (i = 1; i <= sis_data_length; i++) {
+                SIS_data["data"][sis_date].push(element["" + i * 0.5]);
+
+                if (SIS_data["depth"].length < sis_data_length) {
+                    SIS_data["depth"].push(i * 0.5);
+                    SIS_data["warning1"].push(+sis_warning);
+                    SIS_data["warning2"].push(-sis_warning);
+                    SIS_data["action1"].push(+sis_action);
+                    SIS_data["action2"].push(-sis_action);
+                }
             }
-        }
+        });
+        console.log(SIS_data);
 
-        for (i = 0; i < date.length; i++) {
+        var datasets = [{
+            label: "警戒值+",
+            data: SIS_data["warning1"],
+            borderColor: "#FF0000",
+            pointRadius: 0
+        }, {
+            label: "警戒值-",
+            data: SIS_data["warning2"],
+            borderColor: "#FF0000",
+            pointRadius: 0
+        }];
+
+        Object.keys(SIS_data["data"]).forEach(element => {
             datasets.push({
-                label: date[i],
-                data: SIS_data[date[i]],
-                borderColor: "#3e95cd"
+                label: element,
+                data: SIS_data["data"][element],
+                borderColor: "#3e95cd",
+                pointRadius: 0
             });
-        }
-        // console.log(SIS_data);
-        // console.log(date);
-        // console.log(data);
+        });
+
+        console.log(datasets);
+
         window.chart = new Chart(ctx, {
             //Line chart
             type: 'line',
             data: {
-                labels: SIS,
+                labels: SIS_data["depth"],
                 datasets: datasets
             },
             options: {
@@ -495,7 +495,7 @@ function displayChart(monitor, label, unit, charts) {
                     x: {
                         title: {
                             display: true,
-                            text: "日期"
+                            text: "深度"
                         }
                     },
                     y: {
@@ -508,6 +508,42 @@ function displayChart(monitor, label, unit, charts) {
             }
         });
     } else {
+        charts.forEach(function (chart) {
+            Object.keys(chart).forEach(function (key) {
+                if (key == "Date") {
+                    date.push(chart[key]);
+                } else if (key == "WarningValue") {
+                    let value = 0;
+                    if (chart[key].includes("±")) {
+                        value = chart[key].split("±")[1];
+                    }
+                    warning1.push(+value);
+                    warning2.push(-value);
+                } else if (key == "ActionValue") {
+                    let value = 0;
+                    if (chart[key].includes("±")) {
+                        value = chart[key].split("±")[1];
+                    }
+                    action1.push(+value);
+                    action2.push(-value);
+                } else {
+                    data.push(chart[key]);
+                }
+            });
+        })
+
+        var datasets = [{
+            label: "警戒值+",
+            data: warning1,
+            borderColor: "#FF0000",
+            pointRadius: 0
+        }, {
+            label: "警戒值-",
+            data: warning2,
+            borderColor: "#FF0000",
+            pointRadius: 0
+        }];
+
         if (type == "TI") {
             var data1 = [];
             var data2 = [];