313 lines
12 KiB
JavaScript
313 lines
12 KiB
JavaScript
class AnalogChart {
|
||
constructor(vdp, tstart, tend) {
|
||
function ValueDateFormatter(e) {
|
||
var hours = 1000 * 60 * 60;
|
||
if (e.trigger === "reset") {
|
||
e.chart.options.axisX.valueFormatString = "MM.DD HH";
|
||
}
|
||
else if (e.trigger === "zoom") {
|
||
//Hour (Comparing Hours)
|
||
if ((((e.axisX[0].viewportMaximum - e.axisX[0].viewportMinimum) / (hours)) < 24)) {
|
||
e.chart.options.axisX.valueFormatString = "HH:mm:ss";
|
||
}
|
||
//Day (Comparing Days)
|
||
else if (((e.axisX.viewportMaximum - e.axisX.viewportMinimum) / (hours)) < 48) {
|
||
e.chart.options.axisX.valueFormatString = "HH:mm";
|
||
}
|
||
//Year (Comparing Years)
|
||
else if (((e.axisX[0].viewportMaximum - e.axisX[0].viewportMinimum) / (hours * 24)) < 2) {
|
||
e.chart.options.axisX.valueFormatString = "MM.DD HH";
|
||
}
|
||
else {
|
||
e.chart.options.axisX.valueFormatString = "MM.DD";
|
||
}
|
||
}
|
||
}
|
||
this._vdp = vdp;
|
||
this._tstart = tstart;
|
||
this._tend = tend;
|
||
this._chart_global = $("#AnalogChart_Global");
|
||
this._chart_checkbox = $("#AnalogChart_Checkbox");
|
||
this._chart_label = $("#AnalogChart_label");
|
||
this._chart_buttonUpdate = $("#AnalogChart_Update");
|
||
var self = this;
|
||
this._chart_buttonUpdate.unbind("click");
|
||
this._chart_buttonUpdate.click(function () {
|
||
self.Update();
|
||
});
|
||
this._chart_conteiner = $("#AnalogChart");
|
||
this._data = [];
|
||
this._axisYList = [
|
||
{
|
||
labelFontSize: 12, labelAngle: -90,
|
||
margin: 1, tickLength: 3, tickThickness: 1, lineThickness: 1, gridThickness: 0.1,
|
||
suffix: "кА", logarithmic: false
|
||
},
|
||
{
|
||
labelFontSize: 12, labelAngle: -90,
|
||
margin: 1, tickLength: 3, tickThickness: 1, lineThickness: 1, gridThickness: 0.1,
|
||
suffix: "кПа", logarithmic: false
|
||
},
|
||
{
|
||
labelFontSize: 12, labelAngle: -90,
|
||
margin: 1, tickLength: 3, tickThickness: 1, lineThickness: 1, gridThickness: 0.1,
|
||
suffix: "А", logarithmic: false
|
||
},
|
||
{
|
||
labelFontSize: 12, labelAngle: -90,
|
||
margin: 1, tickLength: 3, tickThickness: 1, lineThickness: 1, gridThickness: 0.1,
|
||
suffix: "В", logarithmic: false
|
||
},
|
||
{
|
||
labelFontSize: 12, labelAngle: -90,
|
||
margin: 1, tickLength: 3, tickThickness: 1, lineThickness: 1, gridThickness: 0.1,
|
||
suffix: "гр.С", logarithmic: false
|
||
},
|
||
{
|
||
labelFontSize: 12, labelAngle: -90,
|
||
margin: 1, tickLength: 3, tickThickness: 1, lineThickness: 1, gridThickness: 0.1,
|
||
suffix: "гр", logarithmic: false
|
||
},
|
||
{
|
||
labelFontSize: 12, labelAngle: -90,
|
||
margin: 1, tickLength: 3, tickThickness: 1, lineThickness: 1, gridThickness: 0.1,
|
||
suffix: "мм", logarithmic: false
|
||
},
|
||
{
|
||
labelFontSize: 12, labelAngle: -90,
|
||
margin: 1, tickLength: 3, tickThickness: 1, lineThickness: 1, gridThickness: 0.1,
|
||
suffix: "мкм.рт.с", logarithmic: true
|
||
},
|
||
{
|
||
labelFontSize: 12, labelAngle: -90,
|
||
margin: 1, tickLength: 3, tickThickness: 1, lineThickness: 1, gridThickness: 0.1,
|
||
suffix: "м^3/ч", logarithmic: false
|
||
},
|
||
{
|
||
labelFontSize: 12, labelAngle: -80,
|
||
margin: 1, tickLength: 3, tickThickness: 1, lineThickness: 1, gridThickness: 0.1,
|
||
suffix: "кгс/см^2", logarithmic: false
|
||
}
|
||
];
|
||
|
||
this._chart = new CanvasJS.Chart("AnalogChart", {
|
||
toolTip: {
|
||
fontSize: 12,
|
||
shared: true,
|
||
contentFormatter: function (e) {
|
||
var str = "";
|
||
if (e.entries.length < 1)
|
||
return str;
|
||
var lastdate = e.entries[0].dataPoint.x;
|
||
var data = e.chart._dataInRenderedOrder;
|
||
for (var i = 0; i < data.length; i++) {
|
||
var y = null;
|
||
|
||
for (var j = 0; j < data[i].dataPoints.length; j++) {
|
||
var t = data[i].dataPoints[j].x - lastdate;
|
||
if (t <= 0)
|
||
y = data[i].dataPoints[j].y;
|
||
else
|
||
break;
|
||
t = data[i].dataPoints[(data[i].dataPoints.length - 1) - j].x - lastdate;
|
||
if (t <= 0) {
|
||
y = data[i].dataPoints[(data[i].dataPoints.length - 1) - j].y;
|
||
break;
|
||
}
|
||
}
|
||
var temp =
|
||
data[i].name + ': <strong style="color:' +
|
||
data[i].color + ';">' +
|
||
y + ' </strong>' + data[i].axisY.suffix + "<br/>";
|
||
str = str.concat(temp);
|
||
}
|
||
return (str);
|
||
}
|
||
},
|
||
animationEnabled: true,
|
||
animationDuration: 1000,
|
||
exportFileName: "Analog Signals",
|
||
exportEnabled: true,
|
||
zoomEnabled: true,
|
||
theme: "light1",
|
||
backgroundColor: "#FFFFFF",
|
||
colorSet: "colorSet1",
|
||
culture: "ru",
|
||
title: {},
|
||
legend: {},
|
||
|
||
rangeChanging: ValueDateFormatter,
|
||
axisX: {
|
||
labelFontSize: 12,
|
||
margin: 1,
|
||
tickLength: 3,
|
||
tickThickness: 1,
|
||
lineThickness: 1,
|
||
gridThickness: 0.3,
|
||
valueFormatString: "MM.DD HH"
|
||
},
|
||
axisY: [
|
||
{
|
||
labelFontSize: 12, labelAngle: -90,
|
||
margin: 1, tickLength: 3, tickThickness: 1, lineThickness: 1, gridThickness: 0.1,
|
||
suffix: "", logarithmic: false
|
||
}
|
||
],
|
||
data: []
|
||
});
|
||
var self = this;
|
||
}
|
||
|
||
LoadData() {
|
||
this.Clear();
|
||
$("#AnalogChart_Load_Element").show();
|
||
var self = this;
|
||
|
||
$.ajax({
|
||
type: "POST",
|
||
url: 'http://' + document.URL.split("/")[2] + '/api/listanalog',
|
||
contentType: "application/json; charset=utf-8",
|
||
dataType: "json",
|
||
data: JSON.stringify({
|
||
"vdp": self._vdp
|
||
}),
|
||
success: function (date) {
|
||
self.AddList(date);
|
||
self.Update();
|
||
self.Show();
|
||
},
|
||
complete: function () {
|
||
$("#AnalogChart_Load_Element").hide();
|
||
}
|
||
})
|
||
}
|
||
|
||
AddList(d) {
|
||
if (d == undefined || d.length <= 0)
|
||
return;
|
||
for (var i = 0; i < d.length; i++) {
|
||
var data = {
|
||
type: "line",
|
||
markerType: "none",
|
||
name: d[i].sn == undefined ? "" : d[i].sn,
|
||
suffix: d[i].s,
|
||
axisYIndex: -1,
|
||
}
|
||
this._data.push(data);
|
||
|
||
var vischk = d[i].v ? 'checked' : '';
|
||
this._chart_checkbox.append('<label class="form-check-label">' +
|
||
'<input type = "checkbox" class= "form-check-input"' + vischk + '>' +
|
||
d[i].fn + '</label><br />');
|
||
}
|
||
}
|
||
|
||
Update() {
|
||
this._chart_buttonUpdate.attr('disabled', true);
|
||
while (this._chart.options.axisY.length > 1)
|
||
this._chart.options.axisY.pop();
|
||
while (this._chart.options.data.length > 0)
|
||
this._chart.options.data.pop();
|
||
var chkList = this._chart_checkbox.find('input');
|
||
var sendmass = [];
|
||
for (var i = 0; i < chkList.length; i++) {
|
||
if (chkList[i].checked)
|
||
sendmass.push(i);
|
||
}
|
||
var self = this;
|
||
$.ajax({
|
||
type: "POST",
|
||
url: 'http://' + document.URL.split("/")[2] + '/api/analog',
|
||
contentType: "application/json; charset=utf-8",
|
||
dataType: "json",
|
||
data: JSON.stringify({
|
||
"vdp": self._vdp,
|
||
"timeStart": self._tstart,
|
||
"timeEnd": self._tend,
|
||
"signals": sendmass
|
||
}),
|
||
success: function (date) {
|
||
for (var i = 0; i < date.length; i++) {
|
||
date[i] = self.Hunpack(date[i]);
|
||
}
|
||
var caret = 0;
|
||
var chkList = self._chart_checkbox.find('input');
|
||
for (var i = 0; i < chkList.length; i++) {
|
||
if (!chkList[i].checked)
|
||
continue;
|
||
|
||
var d = self._data[i];
|
||
d.dataPoints = [];
|
||
for (var j = 0; j < date[caret].length; j++)
|
||
d.dataPoints.push({
|
||
x: new Date(date[caret][j].x),
|
||
y: date[caret][j].y
|
||
});
|
||
caret++;
|
||
|
||
var idx = -1;
|
||
for (var j = 0; j < self._chart.options.axisY.length; j++)
|
||
if (self._chart.options.axisY[j].suffix == d.suffix)
|
||
idx = j;
|
||
if (idx != -1) {
|
||
d.axisYIndex = idx;
|
||
self._chart.options.data.push(d);
|
||
continue;
|
||
}
|
||
|
||
for (var j = 0; j < self._axisYList.length; j++) {
|
||
if (self._axisYList[j].suffix == d.suffix)
|
||
idx = j;
|
||
}
|
||
if (idx != -1) {
|
||
self._chart.options.axisY.push(self._axisYList[idx]);
|
||
d.axisYIndex = self._chart.options.axisY.length - 1;
|
||
self._chart.options.data.push(d);
|
||
continue;
|
||
}
|
||
d.axisYIndex = 0;
|
||
self._chart.options.data.push(d);
|
||
}
|
||
self._chart.render();
|
||
},
|
||
complete: function () {
|
||
self._chart_buttonUpdate.removeAttr('disabled');
|
||
//$("#AnalogChart_Load_Element").hide();
|
||
}
|
||
})
|
||
}
|
||
|
||
Show() {
|
||
//this.Update();
|
||
this._chart_global.removeAttr('hidden');
|
||
this._chart_label.removeAttr('hidden');
|
||
this._chart.render();
|
||
}
|
||
|
||
Clear() {
|
||
this._data = [];
|
||
this._chart_global.attr('hidden', true);
|
||
this._chart_label.attr('hidden', true);
|
||
this._chart_checkbox.empty();
|
||
this._chart.options.data = [];
|
||
}
|
||
|
||
Hunpack(hlist) {
|
||
for (var
|
||
length = hlist.length,
|
||
klength = hlist[0],
|
||
result = Array(((length - klength - 1) / klength) || 0),
|
||
i = 1 + klength,
|
||
j = 0,
|
||
ki, o;
|
||
i < length;
|
||
) {
|
||
for (
|
||
result[j++] = (o = {}), ki = 0;
|
||
ki < klength;
|
||
o[hlist[++ki]] = hlist[i++]
|
||
);
|
||
}
|
||
return result;
|
||
}
|
||
} |