|
|
@@ -1,6 +1,7 @@
|
|
|
var unityName = "R03Monitor";
|
|
|
var errorTable;
|
|
|
var sites = {};
|
|
|
+var display_info = {};
|
|
|
|
|
|
$.ajaxSettings.async = false;
|
|
|
var jqxhr = $.getJSON("/BIM-Monitor/assets/errorTable.json", function (json) {
|
|
|
@@ -149,7 +150,7 @@ function showWell(str, changeCamera) {
|
|
|
strLocal = str;
|
|
|
$("#monitorSelect2").innerHTML = strLocal;
|
|
|
getTable(str);
|
|
|
- displayChart(str, "myChart");
|
|
|
+ getChart(str, "myChart");
|
|
|
|
|
|
if (isLoad) {
|
|
|
//把現在選擇的儀器名稱(例：OW-1)傳到unity，unity找模型名稱相同的改變模型顏色以及鏡頭置中模型
|
|
|
@@ -350,31 +351,6 @@ function GetCheckAllAJAXValue() {
|
|
|
*/
|
|
|
}
|
|
|
|
|
|
-/*
|
|
|
-function CheckCompare() {
|
|
|
- var option = window.localStorage.getItem("option");
|
|
|
- var text = "";
|
|
|
- if (option == "ELP" || option == "OW") {
|
|
|
- if (option == "ELP") {
|
|
|
- text = "水壓計";
|
|
|
- } else if (option == "OW") {
|
|
|
- text = "水位觀測井";
|
|
|
- }
|
|
|
- var checkBox = document.getElementById("compareCheck");
|
|
|
- if (checkBox.checked == true) {
|
|
|
- document.getElementById("tableName").innerHTML = option + text + '總表';
|
|
|
- isCompare = true;
|
|
|
- } else {
|
|
|
- document.getElementById("tableName").innerHTML = saveCheckCompare;
|
|
|
- isCompare = false;
|
|
|
- }
|
|
|
- if (option == "ELP")
|
|
|
- displayChart("ELP-1", "myChart");
|
|
|
- else if (option == "OW")
|
|
|
- displayChart("OW-1", "myChart");
|
|
|
- }
|
|
|
-}
|
|
|
-*/
|
|
|
|
|
|
function CheckError() {
|
|
|
var checkBox = document.getElementById("errorCheck");
|
|
|
@@ -386,92 +362,206 @@ function CheckError() {
|
|
|
SetList();
|
|
|
}
|
|
|
|
|
|
+function get_json_file(file_path) {
|
|
|
+ output = {};
|
|
|
+ $.ajax({
|
|
|
+ dataType: "json",
|
|
|
+ url: file_path,
|
|
|
+ }).done(function (data) {
|
|
|
+ output = data;
|
|
|
+ }).error(function (error) {
|
|
|
+ console.log(error);
|
|
|
+ });
|
|
|
+ return output;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
//Display chart
|
|
|
-function displayChart(str, elementID) {
|
|
|
- var xhttp;
|
|
|
- xhttp = new XMLHttpRequest();
|
|
|
-
|
|
|
- xhttp.onreadystatechange = function () {
|
|
|
- if (this.readyState == 4 && this.status == 200) {
|
|
|
- if (str.includes("ELP") || str.includes("OW") || str.includes("SM") || str.includes("SB") || str.includes("SBM") || str.includes("VG") || str.includes("HM")) {
|
|
|
- //Split the response text into well name array, date array and value array
|
|
|
- var v_variables = this.responseText.split("*");
|
|
|
- var c_wellName = v_variables[0];
|
|
|
- var c_m_date = v_variables[1].split(" ");
|
|
|
- var c_m_value = v_variables[2].split(" ");
|
|
|
-
|
|
|
- //Start to make the chart
|
|
|
- //if (isCompare) {
|
|
|
- //displayCompareChart();
|
|
|
- //} else {
|
|
|
- init(c_wellName, c_m_date, c_m_value, elementID);
|
|
|
- //}
|
|
|
-
|
|
|
-
|
|
|
- } else if (str.includes("TI")) {
|
|
|
- var v_variables = this.responseText.split("*");
|
|
|
- var c_wellName = v_variables[0];
|
|
|
- var c_m_date = v_variables[1].split(" ");
|
|
|
- var c_m_value = v_variables[2].split(" ");
|
|
|
- //Multiple line
|
|
|
- var c2_wellName = v_variables[3];
|
|
|
- var c2_m_date = v_variables[4].split(" ");
|
|
|
- var c2_m_value = v_variables[5].split(" ");
|
|
|
- //if (isCompare) {
|
|
|
- //displayCompareChart();
|
|
|
- //} else {
|
|
|
- init2(c_wellName, c_m_date, c_m_value, c2_wellName, c2_m_date, c2_m_value, elementID);
|
|
|
- //}
|
|
|
-
|
|
|
-
|
|
|
- } else if (str.includes("SIS") || str.includes("SID")) {
|
|
|
- var v_variables = this.responseText.split("*");
|
|
|
- var c_m_date = v_variables[0].split(" ");
|
|
|
- var c_m_depth = v_variables[1].split(" ");
|
|
|
- var c_m_valueArray = v_variables[2].split("//");
|
|
|
- //Abnormal value, don't know why it happened so I brute force it
|
|
|
- c_m_valueArray[0] = c_m_valueArray[0].replace("0.4770.468", "0.477 0.468");
|
|
|
- var dateCount = c_m_date.length;
|
|
|
- let c_m_value = [];
|
|
|
- for (x = 0; x < dateCount; x++) {
|
|
|
- c_m_value[x] = c_m_valueArray[x].split(" ");
|
|
|
- }
|
|
|
+function getChart(monitor) {
|
|
|
+ type = monitor.split("-")[0];
|
|
|
+
|
|
|
+ $.ajax({
|
|
|
+ url: "/BIM-Monitor/script/php/get_monitor_chart.php",
|
|
|
+ type: "GET",
|
|
|
+ async: false,
|
|
|
+ contentType: "application/json",
|
|
|
+ dataType: "json",
|
|
|
+ data: {
|
|
|
+ monitor: monitor
|
|
|
+ }
|
|
|
+ }).done(function (response) {
|
|
|
+ charts = response.chart;
|
|
|
+ label = response.label;
|
|
|
+ unit = response.unit;
|
|
|
+ console.log(charts);
|
|
|
+ displayChart(monitor, label, unit, charts);
|
|
|
+
|
|
|
+ }).error(function (error) {
|
|
|
+ console.log(error);
|
|
|
+ });
|
|
|
|
|
|
- initSISSID(c_m_date, c_m_depth, c_m_value, elementID, str);
|
|
|
- } else if (str.includes("RS")) {
|
|
|
- var v_variables = this.responseText.split("*");
|
|
|
|
|
|
- var c_wellName = v_variables[0];
|
|
|
- var c_m_date = v_variables[1].split(" ");
|
|
|
- var c_m_value = v_variables[2].split(" ");
|
|
|
|
|
|
- var c2_wellName = v_variables[3];
|
|
|
- var c2_m_date = v_variables[4].split(" ");
|
|
|
- var c2_m_value = v_variables[5].split(" ");
|
|
|
+}
|
|
|
|
|
|
- var c3_wellName = v_variables[6];
|
|
|
- var c3_m_date = v_variables[7].split(" ");
|
|
|
- var c3_m_value = v_variables[8].split(" ");
|
|
|
+function displayChart(monitor, label, unit, charts) {
|
|
|
+ var ctx = document.getElementById("myChart").getContext("2d");
|
|
|
+ var date = [];
|
|
|
+ var data = [];
|
|
|
+ var warning1 = [];
|
|
|
+ var action1 = [];
|
|
|
+ var warning2 = [];
|
|
|
+ var action2 = [];
|
|
|
+ var type = monitor.split("-")[0];
|
|
|
|
|
|
- var c4_wellName = v_variables[9];
|
|
|
- var c4_m_date = v_variables[10].split(" ");
|
|
|
- var c4_m_value = v_variables[11].split(" ");
|
|
|
|
|
|
- var c5_wellName = v_variables[12];
|
|
|
- var c5_m_date = v_variables[13].split(" ");
|
|
|
- var c5_m_value = v_variables[14].split(" ");
|
|
|
+ var SIS = [];
|
|
|
+ var SIS_data = {};
|
|
|
|
|
|
- var c6_wellName = v_variables[15];
|
|
|
- var c6_m_date = v_variables[16].split(" ");
|
|
|
- var c6_m_value = v_variables[17].split(" ");
|
|
|
+ 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]);
|
|
|
+ });
|
|
|
+ })
|
|
|
|
|
|
- init6(c_wellName, c_m_date, c_m_value, c2_wellName, c2_m_value, c3_wellName, c3_m_value, c4_wellName, c4_m_value, c5_wellName, c5_m_value, c6_wellName, c6_m_value, elementID);
|
|
|
+ var datasets = [{
|
|
|
+ label: "警戒值+",
|
|
|
+ data: warning1,
|
|
|
+ borderColor: "#FF0000",
|
|
|
+ pointRadius: 0
|
|
|
+ }
|
|
|
+ ,
|
|
|
+ {
|
|
|
+ label: "警戒值-",
|
|
|
+ data: warning2,
|
|
|
+ borderColor: "#FF0000",
|
|
|
+ pointRadius: 0
|
|
|
+ }];
|
|
|
+
|
|
|
+ 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]);
|
|
|
}
|
|
|
}
|
|
|
- };
|
|
|
- xhttp.open("GET", "/BIM-Monitor/script/php/getChartData2.php?q=" + str, true);
|
|
|
- xhttp.send();
|
|
|
|
|
|
+ for (i = 0; i < date.length; i++) {
|
|
|
+ datasets.push({
|
|
|
+ label: date[i],
|
|
|
+ data: SIS_data[date[i]],
|
|
|
+ borderColor: "#3e95cd"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // console.log(SIS_data);
|
|
|
+ // console.log(date);
|
|
|
+ // console.log(data);
|
|
|
+ window.chart = new Chart(ctx, {
|
|
|
+ //Line chart
|
|
|
+ type: 'line',
|
|
|
+ data: {
|
|
|
+ labels: SIS,
|
|
|
+ datasets: datasets
|
|
|
+ },
|
|
|
+ options: {
|
|
|
+ spanGaps: true,
|
|
|
+ maintainAspectRatio: false,
|
|
|
+ responsive: true,
|
|
|
+ scales: {
|
|
|
+ x: {
|
|
|
+ title: {
|
|
|
+ display: true,
|
|
|
+ text: "日期"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ y: {
|
|
|
+ title: {
|
|
|
+ display: true,
|
|
|
+ text: label + '(' + unit + ')'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ if (type == "TI") {
|
|
|
+ var data1 = [];
|
|
|
+ var data2 = [];
|
|
|
+ for (i = 0; i < data.length; i += 2) {
|
|
|
+ data1.push(data[i]);
|
|
|
+ data2.push(data[i + 1]);
|
|
|
+ }
|
|
|
+ datasets.push({
|
|
|
+ label: monitor + "(1-3)",
|
|
|
+ data: data1,
|
|
|
+ borderColor: "#3e95cd"
|
|
|
+ });
|
|
|
+ datasets.push({
|
|
|
+ label: monitor + "(2-4)",
|
|
|
+ data: data2,
|
|
|
+ borderColor: "#000000"
|
|
|
+ });
|
|
|
+
|
|
|
+ } else {
|
|
|
+ datasets.push({
|
|
|
+ label: monitor,
|
|
|
+ data: data,
|
|
|
+ borderColor: "#3e95cd"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ window.chart = new Chart(ctx, {
|
|
|
+ //Line chart
|
|
|
+ type: 'line',
|
|
|
+ data: {
|
|
|
+ //X-axis displays the date
|
|
|
+ labels: date,
|
|
|
+ datasets: datasets
|
|
|
+ },
|
|
|
+ options: {
|
|
|
+ spanGaps: true,
|
|
|
+ maintainAspectRatio: false,
|
|
|
+ responsive: true,
|
|
|
+ scales: {
|
|
|
+ x: {
|
|
|
+ title: {
|
|
|
+ display: true,
|
|
|
+ text: "日期"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ y: {
|
|
|
+ title: {
|
|
|
+ display: true,
|
|
|
+ text: label + '(' + unit + ')'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
/*
|
|
|
function displayCompareChart() {
|
|
|
@@ -677,19 +767,19 @@ function init(c_wellName, c_m_date, c_m_value, elementID) {
|
|
|
//X-axis displays the date
|
|
|
labels: c_m_date,
|
|
|
datasets: [{
|
|
|
- //Label above the chart to illustrate which color has which purpose
|
|
|
- label: c_wellName,
|
|
|
- //Data value
|
|
|
- data: c_m_value,
|
|
|
- //Detemine line's color
|
|
|
- borderColor: '#3e95cd'
|
|
|
- },
|
|
|
- {
|
|
|
- label: "警戒值",
|
|
|
- data: warning,
|
|
|
- borderColor: "#FF0000",
|
|
|
- pointRadius: 0
|
|
|
- }
|
|
|
+ //Label above the chart to illustrate which color has which purpose
|
|
|
+ label: c_wellName,
|
|
|
+ //Data value
|
|
|
+ data: c_m_value,
|
|
|
+ //Detemine line's color
|
|
|
+ borderColor: '#3e95cd'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "警戒值",
|
|
|
+ data: warning,
|
|
|
+ borderColor: "#FF0000",
|
|
|
+ pointRadius: 0
|
|
|
+ }
|
|
|
]
|
|
|
},
|
|
|
options: {
|
|
|
@@ -803,15 +893,15 @@ function init2(c_wellName, c_m_date, c_m_value, c2_wellName, c2_m_date, c2_m_val
|
|
|
data: {
|
|
|
labels: c_m_date,
|
|
|
datasets: [{
|
|
|
- label: c_wellName,
|
|
|
- data: c_m_value,
|
|
|
- borderColor: '#3e95cd'
|
|
|
- },
|
|
|
- {
|
|
|
- label: c2_wellName,
|
|
|
- data: c2_m_value,
|
|
|
- borderColor: '#63fff5'
|
|
|
- }
|
|
|
+ label: c_wellName,
|
|
|
+ data: c_m_value,
|
|
|
+ borderColor: '#3e95cd'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: c2_wellName,
|
|
|
+ data: c2_m_value,
|
|
|
+ borderColor: '#63fff5'
|
|
|
+ }
|
|
|
]
|
|
|
},
|
|
|
options: {
|
|
|
@@ -972,41 +1062,41 @@ function init6(c_wellName, c_m_date, c_m_value, c2_wellName, c2_m_value, c3_well
|
|
|
data: {
|
|
|
labels: c_m_date,
|
|
|
datasets: [{
|
|
|
- label: c_wellName,
|
|
|
- data: c_m_value,
|
|
|
- borderColor: randomColor()
|
|
|
- },
|
|
|
- {
|
|
|
- label: c2_wellName,
|
|
|
- data: c2_m_value,
|
|
|
- borderColor: randomColor()
|
|
|
- },
|
|
|
- {
|
|
|
- label: c3_wellName,
|
|
|
- data: c3_m_value,
|
|
|
- borderColor: randomColor()
|
|
|
- },
|
|
|
- {
|
|
|
- label: c4_wellName,
|
|
|
- data: c4_m_value,
|
|
|
- borderColor: randomColor()
|
|
|
- },
|
|
|
- {
|
|
|
- label: c5_wellName,
|
|
|
- data: c5_m_value,
|
|
|
- borderColor: randomColor()
|
|
|
- },
|
|
|
- {
|
|
|
- label: c6_wellName,
|
|
|
- data: c6_m_value,
|
|
|
- borderColor: randomColor()
|
|
|
- },
|
|
|
- {
|
|
|
- label: "警戒值",
|
|
|
- data: warning,
|
|
|
- borderColor: "#FF0000",
|
|
|
- pointRadius: 0
|
|
|
- }
|
|
|
+ label: c_wellName,
|
|
|
+ data: c_m_value,
|
|
|
+ borderColor: randomColor()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: c2_wellName,
|
|
|
+ data: c2_m_value,
|
|
|
+ borderColor: randomColor()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: c3_wellName,
|
|
|
+ data: c3_m_value,
|
|
|
+ borderColor: randomColor()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: c4_wellName,
|
|
|
+ data: c4_m_value,
|
|
|
+ borderColor: randomColor()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: c5_wellName,
|
|
|
+ data: c5_m_value,
|
|
|
+ borderColor: randomColor()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: c6_wellName,
|
|
|
+ data: c6_m_value,
|
|
|
+ borderColor: randomColor()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "警戒值",
|
|
|
+ data: warning,
|
|
|
+ borderColor: "#FF0000",
|
|
|
+ pointRadius: 0
|
|
|
+ }
|
|
|
]
|
|
|
},
|
|
|
options: {
|
|
|
@@ -1100,14 +1190,14 @@ function initCompare(m_date, chart_data, index, label) {
|
|
|
});
|
|
|
}
|
|
|
/*
|
|
|
- if(label[1].includes("ELP") && phase != 2 && phase != 7){
|
|
|
- window.chart.data.datasets.push({
|
|
|
+ if(label[1].includes("ELP") && phase != 2 && phase != 7){
|
|
|
+ window.chart.data.datasets.push({
|
|
|
label: "警戒值",
|
|
|
data: warning,
|
|
|
borderColor: "#FF0000",
|
|
|
- pointRadius: 0
|
|
|
+ pointRadius: 0
|
|
|
});
|
|
|
- }
|
|
|
+ }
|
|
|
*/
|
|
|
//window.chart.update();
|
|
|
//}
|
