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: 0,
|
|||
|
|
}
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
}
|